<template>
  <header class="flex items-center justify-between gap-4 px-5 py-3.5 bg-[#f4f7fa] border-b border-border">
    <div class="flex items-center gap-3">
      <div class="w-9 h-9 rounded-[10px] bg-gradient-to-br from-accent to-[#86b7e6] text-white grid place-items-center font-bold tracking-[0.04em] shadow-[0_6px_16px_rgba(90,147,218,0.35)]">LV</div>
      <div class="flex flex-col">
        <div class="text-[18px] font-semibold">GUI Designer</div>
        <div class="text-[12px] text-muted">KNX Display</div>
      </div>
    </div>
    <div class="flex items-center gap-2.5 flex-wrap justify-end">
      <button class="border border-border bg-panel-2 text-text px-3.5 py-2 rounded-[10px] text-[13px] font-semibold transition hover:-translate-y-0.5 hover:bg-[#e4ebf2] active:translate-y-0.5" @click="emit('open-settings')">Einstellungen</button>
      <button class="border border-border bg-panel-2 text-text px-3.5 py-2 rounded-[10px] text-[13px] font-semibold transition hover:-translate-y-0.5 hover:bg-[#e4ebf2] active:translate-y-0.5" @click="enableUsbMode">USB-Modus</button>
      <button class="border border-red-200 bg-[#f7dede] text-[#b3261e] px-3.5 py-2 rounded-[10px] text-[13px] font-semibold transition hover:-translate-y-0.5 hover:bg-[#f2cfcf] active:translate-y-0.5" @click="handleReset">Zuruecksetzen</button>
      <button class="border border-[#2b62a5] bg-[#2f6db8] text-white px-3.5 py-2 rounded-[10px] text-[13px] font-semibold transition hover:-translate-y-0.5 hover:bg-[#2b62a5] active:translate-y-0.5 shadow-[0_8px_18px_rgba(47,109,184,0.3)]" @click="handleSave">Speichern & Anwenden</button>
    </div>
  </header>
</template>

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

const store = useEditorStore();
const emit = defineEmits(['open-settings']);

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>
