<template>
  <Card class="overflow-hidden">
    <div class="border-b border-violet-100 bg-gradient-to-br from-white via-violet-50/40 to-[#f7eef8] px-6 py-5">
      <div class="flex flex-wrap items-start justify-between gap-4">
        <div class="flex items-end gap-4">
          <strong class="text-5xl font-black leading-none text-slate-950">{{ props.form.year }}</strong>
          <div class="mb-0.5">
            <p class="text-lg font-bold leading-snug text-slate-800">{{ props.form.name || '–' }}</p>
            <p class="mt-1 text-sm text-slate-500">Finale-Banner und Live-CTA werden im Content Hub gepflegt.</p>
          </div>
        </div>
        <div class="flex items-center gap-2">
          <span
            class="rounded-2xl border px-4 py-2 text-sm font-bold"
            :class="props.form.isCurrent
              ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
              : 'border-slate-200 bg-slate-100 text-slate-600'"
          >
            {{ props.form.isCurrent ? '🟢 Public aktiv' : '⚫ Intern' }}
          </span>
          <span class="rounded-2xl border border-violet-200 bg-violet-100 px-4 py-2 text-sm font-bold text-violet-800">
            {{ props.form.currentPhase || 'Keine Phase' }}
          </span>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-2 divide-x divide-y divide-violet-50 border-b border-violet-100 sm:grid-cols-5">
      <div
        v-for="stat in props.quickStats"
        :key="stat.label"
        class="px-5 py-4"
      >
        <p class="text-xs font-semibold uppercase tracking-[0.18em]" :class="stat.warn ? 'text-amber-600' : 'text-slate-400'">{{ stat.label }}</p>
        <strong class="mt-1 block text-2xl" :class="stat.warn ? 'text-amber-700' : 'text-slate-900'">{{ stat.value }}</strong>
      </div>
    </div>

    <div class="flex flex-wrap items-center gap-3 px-5 py-4">
      <Button
        variant="ghost"
        class="gap-1.5 border border-rose-100 bg-rose-50 text-rose-600 hover:bg-rose-100"
        :disabled="!props.canDeleteSelectedSeason"
        @click="props.openDeleteSeasonModal"
      >
        <Trash2 class="h-4 w-4" /> Löschen
      </Button>
      <Button
        variant="ghost"
        class="gap-1.5 border border-emerald-100 bg-emerald-50 text-emerald-700 hover:bg-emerald-100"
        :disabled="props.saving || props.form.isCurrent || !props.canActivatePublic"
        @click="props.activatePublicSeason"
      >
        <Globe2 class="h-4 w-4" /> {{ props.saving ? 'Aktiviert …' : 'Public aktivieren' }}
      </Button>
      <Button
        variant="ghost"
        class="gap-1.5 border border-amber-100 bg-amber-50 text-amber-700 hover:bg-amber-100"
        :disabled="props.completing || !props.canCompleteSelectedSeason"
        @click="props.requestCompleteSeason"
      >
        <CheckCircle2 class="h-4 w-4" /> {{ props.completing ? 'Schließt …' : 'Beenden' }}
      </Button>
      <Button class="ml-auto gap-1.5" :disabled="props.saving" @click="props.saveSeason">
        {{ props.saving ? 'Speichert …' : 'Speichern' }}
      </Button>
    </div>
  </Card>
</template>

<script setup lang="ts">
import { CheckCircle2, Globe2, Trash2 } from '@lucide/vue'

import type { AdminSeasonForm } from './adminSeasonTypes'
import Button from '../ui/Button.vue'
import Card from '../ui/Card.vue'

interface QuickStat {
  label: string
  value: number
  warn?: boolean
}

const props = defineProps<{
  form: AdminSeasonForm
  saving: boolean
  completing: boolean
  quickStats: QuickStat[]
  canDeleteSelectedSeason: boolean
  canActivatePublic: boolean
  canCompleteSelectedSeason: boolean
  openDeleteSeasonModal: () => void
  activatePublicSeason: () => Promise<boolean | void> | boolean | void
  requestCompleteSeason: () => void
  saveSeason: () => Promise<boolean | void> | boolean | void
}>()
</script>
