<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]">Bildschirm</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" v-if="screen">
        <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">Name</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="text" v-model="screen.name">
          </div>
          <div class="flex items-center justify-between gap-2.5">
            <label class="text-[12px] text-muted">Hintergrund</label>
            <input class="h-[30px] w-[44px] cursor-pointer border-0 bg-transparent p-0" type="color" v-model="screen.bgColor">
          </div>
          <div class="flex items-center justify-between gap-2.5">
            <label class="text-[12px] text-muted">Nacht-Hintergrund</label>
            <input class="h-[30px] w-[44px] cursor-pointer border-0 bg-transparent p-0" type="color" v-model="screen.nightBgColor">
          </div>
          <div class="flex items-center justify-between gap-2.5">
            <label class="text-[12px] text-muted">Modus</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="screen.mode">
              <option :value="0">Fullscreen</option>
              <option :value="1">Modal</option>
            </select>
          </div>
        </div>

        <!-- Background Image -->
        <div class="flex flex-col gap-2.5">
          <div class="text-[12px] uppercase tracking-[0.08em] text-[#3a5f88]">Hintergrundbild</div>
          <div class="flex items-center gap-2.5">
            <div
              class="w-16 h-16 rounded-lg border border-border bg-panel-2 flex items-center justify-center overflow-hidden flex-shrink-0"
              :style="screen.bgImage ? { backgroundImage: `url(${screen.bgImage})`, backgroundSize: 'cover', backgroundPosition: 'center' } : {}"
            >
              <span v-if="!screen.bgImage" class="text-muted text-xs">Kein Bild</span>
            </div>
            <div class="flex flex-col gap-1.5 flex-1">
              <button
                class="bg-panel-2 border border-border rounded-lg px-3 py-1.5 text-text text-[12px] cursor-pointer hover:bg-[#e4ebf2] hover:border-[#b8c4d2] text-left truncate"
                @click="showFilePicker = true"
              >
                {{ screen.bgImage || 'Bild auswaehlen...' }}
              </button>
              <button
                v-if="screen.bgImage"
                class="bg-[#f7dede] border border-red-200 text-[#b3261e] rounded-lg px-3 py-1.5 text-[12px] cursor-pointer hover:bg-[#f2cfcf]"
                @click="screen.bgImage = ''"
              >
                Bild entfernen
              </button>
            </div>
          </div>
          <div v-if="screen.bgImage" class="flex items-center justify-between gap-2.5">
            <label class="text-[12px] text-muted">Skalierung</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="screen.bgImageMode">
              <option :value="1">Strecken</option>
              <option :value="2">Zentrieren</option>
              <option :value="3">Kacheln</option>
            </select>
          </div>
        </div>

        <div class="flex flex-col gap-2.5" v-if="screen.mode === 1">
          <div class="text-[12px] uppercase tracking-[0.08em] text-[#3a5f88]">Modal</div>
          <div class="flex items-center justify-between gap-2.5"><label class="text-[12px] text-muted">X</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" v-model.number="screen.modal.x"></div>
          <div class="flex items-center justify-between gap-2.5"><label class="text-[12px] text-muted">Y</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" v-model.number="screen.modal.y"></div>
          <div class="flex items-center justify-between gap-2.5"><label class="text-[12px] text-muted">Breite</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" v-model.number="screen.modal.w"></div>
          <div class="flex items-center justify-between gap-2.5"><label class="text-[12px] text-muted">Hoehe</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" v-model.number="screen.modal.h"></div>
          <div class="flex items-center justify-between gap-2.5"><label class="text-[12px] text-muted">Radius</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" v-model.number="screen.modal.radius"></div>
          <label class="flex items-center gap-2 text-[12px] text-muted">
            <input class="accent-[var(--accent)]" type="checkbox" v-model="screen.modal.dim">
            <span>Hintergrund dimmen</span>
          </label>
        </div>
      </div>
      <div class="px-[18px] py-4 overflow-y-auto flex flex-col gap-3.5" v-else>
        <div class="text-[12px] text-muted">Kein Bildschirm ausgewaehlt.</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>
        <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 disabled:opacity-50 disabled:cursor-not-allowed" :disabled="!canDelete" @click="handleDelete">Screen loeschen</button>
      </div>
    </div>

    <!-- File Picker Modal -->
    <FileManager
      v-if="showFilePicker"
      :select-mode="true"
      initial-path="/images"
      @close="showFilePicker = false"
      @select="handleImageSelect"
    />
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useEditorStore } from '../stores/editor';
import FileManager from './FileManager.vue';

const emit = defineEmits(['close']);
const store = useEditorStore();

const screen = computed(() => store.activeScreen);
const canDelete = computed(() => store.config.screens.length > 1);
const showFilePicker = ref(false);

function handleImageSelect(path) {
  if (screen.value) {
    screen.value.bgImage = path;
    if (!screen.value.bgImageMode) {
      screen.value.bgImageMode = 1; // Default: Stretch
    }
  }
}

function handleDelete() {
  if (!canDelete.value) return;
  if (!confirm('Wirklich loeschen?')) return;
  store.deleteScreen();
  emit('close');
}
</script>
