<script lang="ts">
  import { buzzer } from '../lib/buzzerStore';
  import { updateDeviceInfo, refreshFileList, setActivePort } from '../lib/buzzerActions';
    import { set } from 'astro:schema';

  let port: SerialPort | null = null;
  const filters = [{ usbVendorId: 0x2fe3, usbProductId: 0x0001 }];

  async function connect() {
    try {
      port = await navigator.serial.requestPort({ filters });
      await port.open({ baudRate: 115200 });
      
      // Store aktualisieren
      buzzer.update(b => ({ ...b, connected: true }));

      if (port) {
        setActivePort(port); // Aktiven Port in den Actions setzen
        await updateDeviceInfo(port);
        await refreshFileList(port);
      }
    } catch (e) {
      setActivePort(null); // Port zurücksetzen
      console.error("Verbindung fehlgeschlagen:", e);
      buzzer.update(b => ({ ...b, connected: false }));
    }
  }

  async function disconnect() {
    if (port) {
      await port.close();
      port = null;
      buzzer.update(b => ({ ...b, connected: false }));
    }
  }
</script>

<button 
  on:click={$buzzer.connected ? disconnect : connect}
  class="flex items-center gap-2 px-6 py-2 {$buzzer.connected ? 'bg-blue-600 hover:bg-blue-500' : 'bg-emerald-600 hover:bg-emerald-500'} text-white text-xs font-black rounded-full transition-all shadow-lg active:scale-95 uppercase tracking-widest"
>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256">
    {#if $buzzer.connected}
      <rect width="256" height="256" fill="none"/>
      <rect x="63.03" y="88.4" width="129.94" height="79.2" rx="24" transform="translate(-53.02 128) rotate(-45)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
      <line x1="88" y1="88" x2="168" y2="168" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
      <line x1="232" y1="24" x2="173.94" y2="82.06" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
      <line x1="82.06" y1="173.94" x2="24" y2="232" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
    {:else}
      <rect width="256" height="256" fill="none"/>
      <line x1="144" y1="144" x2="120" y2="168" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
      <path d="M132,180l-29,29a24,24,0,0,1-33.94,0L47,186.91A24,24,0,0,1,47,153l29-29" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
      <line x1="197.94" y1="58.06" x2="232" y2="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
      <path d="M180,132l29-29a24,24,0,0,0,0-33.94L186.91,47A24,24,0,0,0,153,47L124,76" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
    {/if}
  </svg>
  {$buzzer.connected ? 'Disconnect' : 'Connect'}
</button>