<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-gradient-to-b from-white to-[#f6f9fc] border border-border rounded-2xl shadow-[0_20px_40px_rgba(15,23,42,0.18)] 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-[#3a5f88]">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:bg-[#e4ebf2] hover:border-[#b8c4d2]" @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-[#3a5f88]">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 class="flex flex-col gap-2.5">
          <div class="text-[12px] uppercase tracking-[0.08em] text-[#3a5f88]">Screen-Animation</div>
          <div class="flex items-center justify-between gap-2.5">
            <label class="text-[12px] text-muted">Typ</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.screenAnim.type">
              <option :value="0">Keine</option>
              <option :value="1">Einblenden</option>
              <option :value="2">Schieben Links</option>
              <option :value="3">Schieben Rechts</option>
              <option :value="4">Schieben Hoch</option>
              <option :value="5">Schieben Runter</option>
              <option :value="6">Ueberlagern Links</option>
              <option :value="7">Ueberlagern Rechts</option>
              <option :value="8">Ueberlagern Hoch</option>
              <option :value="9">Ueberlagern Runter</option>
            </select>
          </div>
          <div class="flex items-center justify-between gap-2.5">
            <label class="text-[12px] text-muted">Dauer (ms)</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" max="2000" v-model.number="store.config.screenAnim.duration">
          </div>
        </div>
        <div class="flex flex-col gap-2.5">
          <div class="text-[12px] uppercase tracking-[0.08em] text-[#3a5f88]">KNX Zeit</div>
          <div class="flex items-center justify-between gap-2.5">
            <label class="text-[12px] text-muted">Uhrzeit</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.knx.time">
              <option :value="0">-- Keine --</option>
              <option v-for="addr in store.knxAddresses" :key="`time-${addr.addr}-${addr.index}`" :value="addr.addr">
                GA {{ addr.addrStr }} (GO{{ addr.index }})
              </option>
            </select>
          </div>
          <div class="flex items-center justify-between gap-2.5">
            <label class="text-[12px] text-muted">Datum</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.knx.date">
              <option :value="0">-- Keine --</option>
              <option v-for="addr in store.knxAddresses" :key="`date-${addr.addr}-${addr.index}`" :value="addr.addr">
                GA {{ addr.addrStr }} (GO{{ addr.index }})
              </option>
            </select>
          </div>
          <div class="flex items-center justify-between gap-2.5">
            <label class="text-[12px] text-muted">Datum+Zeit</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.knx.dateTime">
              <option :value="0">-- Keine --</option>
              <option v-for="addr in store.knxAddresses" :key="`dt-${addr.addr}-${addr.index}`" :value="addr.addr">
                GA {{ addr.addrStr }} (GO{{ addr.index }})
              </option>
            </select>
          </div>
          <div class="flex items-center justify-between gap-2.5">
            <label class="text-[12px] text-muted">Nachtmodus</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.knx.night">
              <option :value="0">-- Keine --</option>
              <option v-for="addr in store.knxAddresses" :key="`night-${addr.addr}-${addr.index}`" :value="addr.addr">
                GA {{ addr.addrStr }} (GO{{ addr.index }})
              </option>
            </select>
          </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-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('close')">Schliessen</button>
      </div>
    </div>
  </div>
</template>

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

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