<script setup lang="ts">
import Button from '../ui/Button.vue'
import Modal from '../ui/Modal.vue'
import NativeSelect from '../ui/NativeSelect.vue'
import type { AdminSeasonCopyOption, AdminSeasonCreateForm } from './adminSeasonTypes'

const props = defineProps<{
  open: boolean
  createForm: AdminSeasonCreateForm
  creating: boolean
  canCreate: boolean
  copySourceOptions: AdminSeasonCopyOption[]
  createPublicReadinessIssues: string[]
  phasePresets: string[]
  onClose: () => void
  onCreate: () => Promise<void> | void
}>()
</script>

<template>
  <Modal :open="props.open" title="Neues Award-Jahr anlegen" @close="props.onClose">
    <div class="grid gap-4 sm:grid-cols-2">
      <label class="space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Jahr</span>
        <input v-model.number="props.createForm.year" type="number" class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" />
      </label>
      <label class="space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Name</span>
        <input v-model="props.createForm.name" type="text" class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" />
      </label>
      <label class="space-y-2 sm:col-span-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Vorjahr kopieren</span>
        <NativeSelect v-model="props.createForm.copyStructureFromSeasonId" :options="props.copySourceOptions" />
        <span class="block text-sm leading-5 text-slate-500">
          Kopiert Kategorien, Gruppen, Slugs, Beschreibung, Sortierung und Nominierungs-Limits. Kandidaten und Gewinner bleiben leer.
        </span>
      </label>
      <div class="rounded-[22px] border border-violet-100 bg-violet-50/60 p-4 text-sm leading-6 text-slate-600 sm:col-span-2">
        Der Live-Link für das Finale kommt zentral aus dem Landingpage-Modul, damit Jahre und Banner nicht doppelt gepflegt werden.
      </div>
      <fieldset class="grid gap-2 sm:col-span-2 sm:grid-cols-2">
        <legend class="mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Startphase</legend>
        <button
          v-for="phase in props.phasePresets"
          :key="phase"
          type="button"
          class="rounded-2xl border px-4 py-3 text-left text-sm font-semibold transition"
          :class="props.createForm.currentPhase === phase ? 'border-violet-200 bg-violet-100 text-violet-800' : 'border-violet-100 bg-white text-slate-600 hover:bg-violet-50'"
          @click="props.createForm.currentPhase = phase"
        >
          {{ phase }}
        </button>
      </fieldset>
      <label class="space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Nominierung startet</span>
        <input v-model="props.createForm.nominationStartsAt" type="date" class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" />
      </label>
      <label class="space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Nominierung endet</span>
        <input v-model="props.createForm.nominationEndsAt" type="date" class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" />
      </label>
      <label class="space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Voting startet</span>
        <input v-model="props.createForm.votingStartsAt" type="date" class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" />
      </label>
      <label class="space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Voting endet</span>
        <input v-model="props.createForm.votingEndsAt" type="date" class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" />
      </label>
      <label class="space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Aufbereitung startet</span>
        <input v-model="props.createForm.reviewStartsAt" type="date" class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" />
      </label>
      <label class="space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Aufbereitung endet</span>
        <input v-model="props.createForm.reviewEndsAt" type="date" class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" />
      </label>
      <label class="space-y-2 sm:col-span-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Show-Datum</span>
        <input v-model="props.createForm.showDate" type="date" class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" />
      </label>
      <label class="space-y-2 sm:col-span-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Stream startet um</span>
        <input v-model="props.createForm.showStartsAt" type="time" class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" />
      </label>
    </div>
    <div class="mt-5 space-y-3">
      <label class="flex cursor-pointer gap-4 rounded-[22px] border border-violet-100 bg-violet-50/50 p-4">
        <input v-model="props.createForm.isCommunityOnly" type="checkbox" class="mt-1 h-4 w-4 shrink-0 accent-violet-600" />
        <span class="text-sm leading-6 text-slate-600">
          Community-only aktivieren
        </span>
      </label>
      <label class="flex cursor-pointer gap-4 rounded-[22px] border border-violet-100 bg-violet-50/50 p-4">
        <input v-model="props.createForm.isCurrent" type="checkbox" class="mt-1 h-4 w-4 shrink-0 accent-violet-600" />
        <span class="text-sm leading-6 text-slate-600">
          Dieses Jahr direkt als Public-Kontext markieren
        </span>
      </label>
      <div v-if="props.createPublicReadinessIssues.length > 0" class="rounded-[22px] border border-rose-200 bg-rose-50 px-4 py-3 text-sm leading-6 text-rose-700" role="alert">
        <strong class="block text-rose-800">Direkte Public-Aktivierung blockiert.</strong>
        {{ props.createPublicReadinessIssues.join(' ') }}
      </div>
    </div>
    <template #footer>
      <Button variant="ghost" @click="props.onClose">Abbrechen</Button>
      <Button :disabled="props.creating || !props.canCreate" @click="props.onCreate">
        {{ props.creating ? 'Legt an ...' : 'Award-Jahr anlegen' }}
      </Button>
    </template>
  </Modal>
</template>
