<template>
  <div class="fixed inset-0 bg-black/60 flex items-center justify-center p-4 z-50" @click.self="emit('close')">
    <div class="w-[min(720px,96vw)] max-h-[85vh] bg-panel border border-border rounded-2xl shadow-[0_20px_40px_var(--shadow)] flex flex-col">
      <div class="flex items-center justify-between gap-3 px-[18px] py-4 border-b border-border">
        <h3 class="text-[12px] uppercase tracking-[0.08em] text-muted">Einstellungen</h3>
        <button class="w-7 h-7 rounded-lg border border-border bg-panel-2 text-text grid place-items-center cursor-pointer hover:border-accent" @click="emit('close')">x</button>
      </div>
      <div class="px-[18px] py-4 overflow-y-auto flex flex-col gap-3.5">
        <div class="flex flex-col gap-2.5">
          <div class="text-[12px] uppercase tracking-[0.08em] text-muted">Allgemein</div>
          <div class="flex items-center justify-between gap-2.5">
            <label class="text-[12px] text-muted">Startscreen</label>
            <select class="flex-1 bg-panel-2 border border-border rounded-lg px-2 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent" v-model.number="store.config.startScreen">
              <option v-for="s in store.config.screens" :key="s.id" :value="s.id">{{ s.name }}</option>
            </select>
          </div>
          <label class="flex items-center gap-2 text-[12px] text-muted">
            <input class="accent-[var(--accent)]" type="checkbox" v-model="store.config.standby.enabled">
            <span>Standby aktiv</span>
          </label>
          <div class="flex items-center justify-between gap-2.5 mt-2">
            <label class="text-[12px] text-muted">Standby</label>
            <select class="flex-1 bg-panel-2 border border-border rounded-lg px-2 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent" v-model.number="store.config.standby.screen">
              <option :value="-1">-- Kein --</option>
              <option v-for="s in store.config.screens" :key="s.id" :value="s.id">{{ s.name }}</option>
            </select>
          </div>
          <div class="flex items-center justify-between gap-2.5">
            <label class="text-[12px] text-muted">Minuten</label>
            <input class="flex-1 bg-panel-2 border border-border rounded-lg px-2 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent" type="number" min="0" v-model.number="store.config.standby.minutes">
          </div>
        </div>
      </div>
      <div class="px-[18px] py-3 border-t border-border flex justify-end gap-2.5">
        <button class="border border-border bg-transparent text-text px-3.5 py-2 rounded-[10px] text-[13px] font-semibold transition hover:-translate-y-0.5 active:translate-y-0.5" @click="emit('close')">Schliessen</button>
      </div>
    </div>
  </div>
</template>

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

const emit = defineEmits(['close']);
const store = useEditorStore();
</script>
