<template>
  <Modal :open="open" size="lg" :title="title" subtitle="Anzeigename und Handle sind Pflicht. Annahme und Clip bereiten das Voting vor." @close="$emit('close')">
    <div class="space-y-4">
      <label class="block space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Kategorie</span>
        <NativeSelect :model-value="form.categoryId" :options="categoryOptions" @update:model-value="$emit('update:categoryId', Number($event) || 0)" />
      </label>
      <label class="block space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Anzeigename</span>
        <input :value="form.displayName" type="text" class="h-11 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="z. B. Jayuhime" @input="$emit('update:displayName', ($event.target as HTMLInputElement).value)" />
      </label>
      <div class="grid gap-4 sm:grid-cols-2">
        <label class="block space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Handle</span>
          <input :value="form.channelSlug" type="text" class="h-11 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="@channel" @input="$emit('update:channelSlug', ($event.target as HTMLInputElement).value)" />
        </label>
        <label class="block space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Plattform</span>
          <NativeSelect
            :model-value="selectedPlatformValue"
            :options="[
              ...candidatePlatformOptions.map((option) => ({ label: option.label, value: option.key })),
              { label: 'Eigene Plattform', value: 'custom' },
            ]"
            @update:model-value="$emit('platform-selection', String($event))"
          />
        </label>
      </div>
      <label v-if="selectedPlatformValue === 'custom'" class="block space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Eigene Plattform</span>
        <input :value="form.platform" type="text" class="h-11 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="z. B. Cake, Booth, neue Plattform" @input="$emit('update:platform', ($event.target as HTMLInputElement).value)" />
      </label>

      <section v-if="identitySummary || ruleNotices.length" class="rounded-2xl border border-violet-100 bg-violet-50/40 p-4">
        <div class="mb-3">
          <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">Regel-Kontext</p>
          <p class="mt-1 text-sm text-slate-500">Diese Werte helfen bei mehrfachen Nominierungen und der Voting-Vorbereitung.</p>
        </div>
        <div v-if="identitySummary" class="grid gap-3 sm:grid-cols-3">
          <div class="group relative rounded-2xl border border-violet-100 bg-white px-4 py-3">
            <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Kandidaturen</p>
            <strong class="mt-1 block text-lg text-violet-900">{{ identitySummary.appearances }}</strong>
            <div class="pointer-events-none absolute bottom-full left-1/2 z-20 mb-2 w-56 -translate-x-1/2 rounded-xl bg-slate-900 px-3 py-2 text-xs leading-relaxed text-white opacity-0 shadow-lg transition-opacity group-hover:opacity-100">
              Wie oft diese Person (erkannt über Handle + Plattform) saisonweit als Kandidat eingetragen ist – abgelehnte Einträge zählen nicht mit.
              <span class="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-slate-900" />
            </div>
          </div>
          <div class="group relative rounded-2xl border border-violet-100 bg-white px-4 py-3">
            <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Angenommen</p>
            <strong class="mt-1 block text-lg text-violet-900">{{ identitySummary.acceptedAppearances }}</strong>
            <div class="pointer-events-none absolute bottom-full left-1/2 z-20 mb-2 w-56 -translate-x-1/2 rounded-xl bg-slate-900 px-3 py-2 text-xs leading-relaxed text-white opacity-0 shadow-lg transition-opacity group-hover:opacity-100">
              Wie viele dieser Kandidaturen explizit auf „Angenommen" gesetzt wurden. 0 bedeutet: noch kein Eintrag dieser Person wurde bestätigt.
              <span class="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-slate-900" />
            </div>
          </div>
          <div class="group relative rounded-2xl border border-violet-100 bg-white px-4 py-3">
            <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Nominierungen</p>
            <strong class="mt-1 block text-lg text-violet-900">{{ identitySummary.nominationTally }}</strong>
            <div class="pointer-events-none absolute bottom-full left-1/2 z-20 mb-2 w-56 -translate-x-1/2 rounded-xl bg-slate-900 px-3 py-2 text-xs leading-relaxed text-white opacity-0 shadow-lg transition-opacity group-hover:opacity-100">
              Wie viele Viewer diese Person im Nominierungsprozess vorgeschlagen haben. Beeinflusst keine Regeln, dient als Orientierung für die Kandidaten-Auswahl.
              <span class="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-slate-900" />
            </div>
          </div>
        </div>
        <div v-if="ruleNotices.length" class="mt-3 space-y-2">
          <p
            v-for="notice in ruleNotices"
            :key="notice.message"
            class="rounded-2xl border px-4 py-3 text-sm font-semibold"
            :class="notice.mode === 'block' ? 'border-rose-100 bg-rose-50 text-rose-700' : 'border-amber-100 bg-amber-50 text-amber-700'"
          >
            {{ notice.mode === 'block' ? 'Blockiert' : 'Warnung' }}: {{ notice.message }}
          </p>
        </div>
      </section>

      <section class="rounded-2xl border border-violet-100 bg-violet-50/40 p-4">
        <div class="mb-3">
          <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">Annahmestatus</p>
          <p class="mt-1 text-sm text-slate-500">Kontakt und Zusage werden hier gepflegt, nicht im Review-Text versteckt.</p>
        </div>
        <div class="grid gap-2 sm:grid-cols-4">
          <button
            v-for="status in acceptanceStatusOptions"
            :key="status.value"
            type="button"
            class="rounded-2xl border px-3 py-2 text-left text-sm transition"
            :class="form.acceptanceStatus === status.value ? 'border-violet-400 bg-white text-violet-800 shadow-sm' : 'border-violet-100 bg-white/70 text-slate-600 hover:border-violet-200'"
            @click="$emit('update:acceptanceStatus', status.value)"
          >
            <strong class="block text-sm">{{ status.label }}</strong>
            <span class="text-xs">{{ status.description }}</span>
          </button>
        </div>
        <label class="mt-4 block space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Teamnotiz</span>
          <textarea
            :value="form.acceptanceNote"
            rows="3"
            maxlength="500"
            class="w-full rounded-2xl border border-violet-200 px-4 py-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
            placeholder="z. B. Discord kontaktiert, wartet auf Zusage."
            @input="$emit('update:acceptanceNote', ($event.target as HTMLTextAreaElement).value)"
          />
        </label>
        <p v-if="form.acceptanceStatus === 'declined'" class="mt-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm font-semibold text-rose-700">
          Diese Person ist nicht voting-bereit. Bitte Ersatz prüfen oder Kandidat entfernen.
        </p>
      </section>

      <section class="rounded-2xl border border-violet-100 bg-white p-4">
        <div class="mb-3 flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
          <div>
            <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">Clip / Compilation</p>
            <p class="mt-1 text-sm text-slate-500">Einzelner Clip oder Compilation – YouTube- oder Twitch-Link.</p>
          </div>
          <a
            v-if="form.clipCompilationUrl"
            :href="form.clipCompilationUrl"
            target="_blank"
            rel="noopener noreferrer"
            class="inline-flex items-center justify-center rounded-full border border-violet-200 px-3 py-1.5 text-xs font-semibold text-violet-700 hover:bg-violet-50"
          >
            Link öffnen
          </a>
        </div>
        <label class="block space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Link</span>
          <input :value="form.clipCompilationUrl" type="url" class="h-11 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="https://youtu.be/..." @input="$emit('update:clipCompilationUrl', ($event.target as HTMLInputElement).value)" />
        </label>
        <label class="mt-4 block space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Titel im Voting</span>
          <input :value="form.clipCompilationTitle" type="text" maxlength="200" class="h-11 w-full rounded-2xl border border-violet-200 px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="Best-of Clip für das Voting" @input="$emit('update:clipCompilationTitle', ($event.target as HTMLInputElement).value)" />
        </label>
        <label class="mt-4 block space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Embed-Status</span>
          <NativeSelect :model-value="form.clipEmbedStatus" :options="clipEmbedStatusOptions" @update:model-value="$emit('update:clipEmbedStatus', String($event))" />
        </label>
      </section>
    </div>
    <template #footer>
      <Button variant="ghost" @click="$emit('close')">Abbrechen</Button>
      <Button :disabled="saving || !canSave" @click="$emit('save')">{{ saving ? 'Speichert …' : 'Speichern' }}</Button>
    </template>
  </Modal>
</template>

<script setup lang="ts">
import type { SocialIconOption } from '../../lib/socialIcons'
import Button from '../ui/Button.vue'
import Modal from '../ui/Modal.vue'
import NativeSelect from '../ui/NativeSelect.vue'

defineProps<{
  open: boolean
  title: string
  form: {
    categoryId: number
    displayName: string
    channelSlug: string
    platform: string
    acceptanceStatus: string
    acceptanceNote: string
    clipCompilationUrl: string
    clipCompilationTitle: string
    clipCompilationPlatform: string
    clipEmbedStatus: string
  }
  categoryOptions: Array<{ label: string; value: number }>
  candidatePlatformOptions: SocialIconOption[]
  acceptanceStatusOptions: Array<{ label: string; value: string; description: string }>
  clipEmbedStatusOptions: Array<{ label: string; value: string }>
  selectedPlatformValue: string
  identitySummary: {
    appearances: number
    acceptedAppearances: number
    winnerPlacements: number
    nominationTally: number
  } | null
  ruleNotices: Array<{ mode: 'warn' | 'block'; message: string }>
  canSave: boolean
  saving: boolean
}>()

defineEmits<{
  close: []
  save: []
  'update:categoryId': [value: number]
  'update:displayName': [value: string]
  'update:channelSlug': [value: string]
  'update:platform': [value: string]
  'update:acceptanceStatus': [value: string]
  'update:acceptanceNote': [value: string]
  'update:clipCompilationUrl': [value: string]
  'update:clipCompilationTitle': [value: string]
  'update:clipCompilationPlatform': [value: string]
  'update:clipEmbedStatus': [value: string]
  'platform-selection': [value: string]
}>()
</script>
