<template>
  <div class="space-y-5">
    <div class="rounded-[24px] border border-violet-100 bg-violet-50/50 p-4 text-sm leading-6 text-slate-600">
      Dieser Bereich steuert den Finale-Banner direkt unter dem Hero. Der Countdown selbst bleibt automatisch an das
      Show-Datum des aktiven Award-Jahres gekoppelt.
    </div>

    <section class="rounded-[24px] border border-violet-100 bg-white/86 p-5">
      <div class="mb-4">
        <p class="text-xs font-semibold uppercase tracking-[0.2em] text-violet-500">Finale-Banner</p>
        <h3 class="mt-1 text-lg font-bold text-slate-900">Standard-Inhalt</h3>
      </div>
      <div class="grid gap-4">
        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Eyebrow</span>
          <input
            v-model="form.streamBannerEyebrow"
            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"
            placeholder="Das große Finale"
          />
        </label>
        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Titel</span>
          <input
            v-model="form.streamBannerTitle"
            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"
            placeholder="Award-Show Finale"
          />
        </label>
        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Text</span>
          <textarea
            v-model="form.streamBannerText"
            class="min-h-24 w-full rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
            placeholder="Kurzer Text unter dem Titel"
          />
        </label>
      </div>
    </section>

    <section class="rounded-[24px] border border-violet-100 bg-white/86 p-5">
      <div class="mb-4">
        <p class="text-xs font-semibold uppercase tracking-[0.2em] text-violet-500">Button</p>
        <h3 class="mt-1 text-lg font-bold text-slate-900">Stream-Aktion</h3>
      </div>
      <div class="grid gap-4 md:grid-cols-2">
        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Live-Button Text</span>
          <input
            v-model="form.streamBannerLiveButtonLabel"
            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"
            placeholder="Jetzt live · Zum Stream"
          />
        </label>
        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Gesperrt-Button Text</span>
          <input
            v-model="form.streamBannerLockedButtonLabel"
            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"
            placeholder="Stream noch gesperrt"
          />
        </label>
        <label class="space-y-2 md:col-span-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Live-Button URL</span>
          <input
            v-model="form.streamBannerLiveButtonUrl"
            type="url"
            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"
            placeholder="Leer lassen, um die Stream-URL des Award-Jahres zu nutzen"
          />
        </label>
      </div>
    </section>

    <section class="rounded-[24px] border border-violet-100 bg-white/86 p-5">
      <div class="mb-4 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-violet-500">Award vorbei</p>
          <h3 class="mt-1 text-lg font-bold text-slate-900">Alternativer Abschluss-Inhalt</h3>
          <p class="mt-2 text-sm leading-6 text-slate-500">
            Wird nur verwendet, wenn das Award-Jahr abgeschlossen ist und der Schalter aktiv ist.
          </p>
        </div>
        <label class="inline-flex cursor-pointer items-center gap-3 rounded-2xl border border-violet-100 bg-violet-50 px-4 py-3">
          <input v-model="form.streamBannerUseCompletedContent" type="checkbox" class="h-4 w-4 rounded border-violet-300 text-violet-600 focus:ring-violet-300" />
          <span class="text-sm font-bold text-violet-700">Abschluss-Inhalt aktiv</span>
        </label>
      </div>

      <div class="grid gap-4">
        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Eyebrow</span>
          <input
            v-model="form.streamBannerCompletedEyebrow"
            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"
            placeholder="Danke fürs Mitfiebern"
          />
        </label>
        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Titel</span>
          <input
            v-model="form.streamBannerCompletedTitle"
            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"
            placeholder="Award-Show abgeschlossen"
          />
        </label>
        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Text</span>
          <textarea
            v-model="form.streamBannerCompletedText"
            class="min-h-24 w-full rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
            placeholder="Text nach dem Finale"
          />
        </label>
        <div class="grid gap-4 md:grid-cols-2">
          <label class="space-y-2">
            <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Button Text</span>
            <input
              v-model="form.streamBannerCompletedButtonLabel"
              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"
              placeholder="Highlights ansehen"
            />
          </label>
          <label class="space-y-2">
            <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Button URL</span>
            <input
              v-model="form.streamBannerCompletedButtonUrl"
              type="url"
              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"
              placeholder="https://..."
            />
          </label>
        </div>
      </div>
    </section>

    <div class="flex justify-end">
      <Button :disabled="saving" size="sm" class="gap-2 rounded-2xl bg-gradient-to-r from-violet-600 to-fuchsia-500 shadow-violet-500/20" @click="onSave">
        <Save class="h-4 w-4" />
        {{ saving ? 'Speichert ...' : 'Finale-Banner speichern' }}
      </Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Save } from '@lucide/vue'

import Button from '../ui/Button.vue'
import type { AdminContentForm } from './adminContentTypes'

const props = defineProps<{
  form: AdminContentForm
  saving: boolean
  saveSiteSettings: (sectionLabel?: string) => Promise<void>
}>()

function onSave() {
  return props.saveSiteSettings('Finale-Banner')
}
</script>
