<template>
  <header class="topbar">
    <div class="brand">
      <div class="brand-mark">LV</div>
      <div class="brand-text">
        <div class="title">GUI Designer</div>
        <div class="subtitle">KNX Display</div>
      </div>
    </div>
    <div class="top-actions">
      <button class="btn ghost" @click="enableUsbMode">USB-Modus</button>
      <button class="btn ghost danger" @click="handleReset">Zuruecksetzen</button>
      <button class="btn primary" @click="handleSave">Speichern & Anwenden</button>
    </div>
  </header>
</template>

<script setup>
import { useEditorStore } from '../stores/editor';

const store = useEditorStore();

async function handleSave() {
  try {
    await store.saveConfig();
    // alert('Gespeichert!'); 
    // Ideally use a toast/status indicator like in the original, but alert is fine for now
  } catch (e) {
    alert('Fehler beim Speichern');
  }
}

async function handleReset() {
  if (!confirm('Wirklich auf Standardeinstellungen zuruecksetzen?')) return;
  try {
    await store.resetConfig();
  } catch (e) {
    alert('Fehler');
  }
}

async function enableUsbMode() {
    if (!confirm('USB-Modus aktivieren?\n\nDie SD-Karte wird als USB-Laufwerk verfuegbar.\nZum Beenden: Geraet neu starten.')) return;
    try {
        const resp = await fetch('/api/usb-mode', { method: 'POST' });
        const data = await resp.json();
        if (data.status === 'ok') {
            alert('USB Mass Storage aktiviert!\n\nVerbinde das USB-Kabel mit dem PC.\nDie SD-Karte erscheint als Wechseldatentraeger.\n\nZum Beenden: Geraet neu starten.');
        } else {
            alert('USB-Modus fehlgeschlagen');
        }
    } catch (e) {
        alert('Fehler beim Aktivieren');
    }
}
</script>
