<template>
  <Card class="overflow-hidden">
    <div class="flex flex-col gap-4 border-b border-violet-100 bg-gradient-to-br from-white via-violet-50/70 to-[#f7eef8] p-5 lg:flex-row lg:items-start lg:justify-between">
      <div class="min-w-0">
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Phasenwechsel</p>
        <h2 class="mt-1 truncate text-xl font-bold leading-tight text-slate-900 lg:text-2xl">
          {{ props.form.name || props.seasonName || 'Kein Award-Jahr gewählt' }}
        </h2>
        <p class="mt-2 max-w-2xl text-sm leading-5 text-slate-500">
          Wechsle die öffentliche Award-Phase bewusst. Die Datumsanalyse hilft beim Abgleich, speichert aber nichts automatisch.
        </p>
      </div>
      <div class="flex shrink-0 flex-wrap items-center gap-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Aktiv</span>
        <span class="rounded-full border border-violet-200 bg-violet-100 px-4 py-2 text-sm font-bold text-violet-800">
          {{ props.form.currentPhase || 'Nicht gesetzt' }}
        </span>
      </div>
    </div>

    <div v-if="autoMismatch" class="flex flex-col gap-3 border-b border-amber-100 bg-amber-50/70 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
      <div class="flex items-start gap-3">
        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-2xl bg-amber-100 text-amber-700">
          <AlertTriangle class="h-4 w-4" />
        </span>
        <div>
          <p class="text-sm font-bold text-amber-900">Zeitplan empfiehlt {{ autoPhase }}</p>
          <p class="mt-1 text-sm leading-6 text-amber-800/80">
            Laut heutigen Daten liegt das Jahr in einer anderen Phase als gespeichert.
          </p>
        </div>
      </div>
      <Button
        variant="ghost"
        class="border border-amber-200 bg-white text-amber-700 hover:bg-amber-100"
        :disabled="props.saving || !props.selectedSeasonId || !autoPhase || autoPhaseIsCompleted"
        @click="autoPhase && !autoPhaseIsCompleted && props.activatePhase(autoPhase)"
      >
        {{ autoPhaseIsCompleted ? 'Über Beenden abschließen' : 'Automatisch aktivieren' }}
      </Button>
    </div>

    <div class="p-4">
      <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-5">
        <article
          v-for="phase in phaseCards"
          :key="phase.key"
          class="flex min-h-[178px] flex-col rounded-[20px] border p-4 transition"
          :class="phase.cardClass"
        >
          <div class="mb-3 flex items-center justify-between gap-3">
            <div class="flex items-center gap-2">
              <span class="h-2.5 w-2.5 rounded-full" :class="phase.dotClass"></span>
              <span class="text-xs font-bold text-slate-400">{{ phase.ordinal }}</span>
            </div>
            <span class="rounded-full border px-3 py-1 text-[11px] font-bold uppercase tracking-[0.08em]" :class="phase.badgeClass">
              {{ phase.statusLabel }}
            </span>
          </div>

          <h3 class="text-base font-bold leading-snug text-slate-900">{{ phase.title }}</h3>
          <p class="mt-1 flex-1 text-xs leading-5 text-slate-500">{{ phase.dateRange }}</p>

          <button
            type="button"
            class="mt-3 inline-flex w-full items-center justify-center gap-2 rounded-2xl px-4 py-2.5 text-sm font-bold transition disabled:cursor-not-allowed disabled:opacity-60"
            :class="phase.active ? 'bg-violet-600 text-white' : phase.finalLocked ? 'border border-slate-200 bg-slate-50 text-slate-500' : 'border border-violet-100 bg-white text-violet-700 hover:bg-violet-50'"
            :disabled="props.saving || !props.selectedSeasonId || phase.active || phase.finalLocked"
            :title="phase.actionTitle"
            @click="props.activatePhase(phase.title)"
          >
            <CheckCircle2 v-if="phase.active" class="h-4 w-4" />
            <LockKeyhole v-else-if="phase.finalLocked" class="h-4 w-4" />
            <WandSparkles v-else class="h-4 w-4" />
            {{ phase.actionLabel }}
          </button>
        </article>
      </div>
    </div>
  </Card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { AlertTriangle, CheckCircle2, LockKeyhole, WandSparkles } from '@lucide/vue'

import Button from '../ui/Button.vue'
import Card from '../ui/Card.vue'
import {
  createSeasonTimelineRows,
  hasShowDayPassed,
  normalizePhaseKey,
  resolveAutoPhase,
  type SeasonTimelineForm,
} from './adminSeasonTimeline'

const props = defineProps<{
  form: SeasonTimelineForm & { name?: string }
  seasonName: string
  saving: boolean
  selectedSeasonId: number | null
  activatePhase: (phase: string) => Promise<void> | void
}>()

const currentPhaseKey = computed(() => normalizePhaseKey(props.form.currentPhase))
const autoPhase = computed(() => resolveAutoPhase(props.form))
const autoPhaseIsCompleted = computed(() => normalizePhaseKey(autoPhase.value) === 'completed')
const autoMismatch = computed(() => Boolean(autoPhase.value && normalizePhaseKey(autoPhase.value) !== currentPhaseKey.value))
const phaseCards = computed(() =>
  createSeasonTimelineRows(props.form, currentPhaseKey.value, autoPhase.value, null).map((phase, index) => {
    const isAutoActive = autoPhase.value === phase.title && !phase.active
    const isDone = phase.statusLabel === 'Erledigt'
    const isCompletedPhase = phase.key === 'completed'
    const finalLocked = isCompletedPhase && !phase.active
    const showHasPassed = hasShowDayPassed(props.form)

    return {
      ...phase,
      ordinal: String(index + 1).padStart(2, '0'),
      finalLocked,
      actionLabel: phase.active ? 'Aktiv' : isCompletedPhase ? 'Beenden nutzen' : 'Phase aktivieren',
      actionTitle: isCompletedPhase
        ? showHasPassed
          ? 'Abschluss erfolgt über den Beenden-Flow in den Grunddaten.'
          : 'Abschluss ist erst nach der Award Show möglich.'
        : `Phase ${phase.title} aktivieren`,
      cardClass: phase.active
        ? 'border-violet-200 bg-violet-50 shadow-[0_18px_42px_rgba(139,108,219,0.14)]'
        : isAutoActive
          ? 'border-amber-200 bg-amber-50/70'
          : 'border-violet-100 bg-white/90 hover:border-violet-200 hover:bg-violet-50/40',
      dotClass: phase.active ? 'bg-violet-600' : isAutoActive ? 'bg-amber-500' : isDone ? 'bg-emerald-500' : 'bg-slate-300',
      badgeClass: phase.active
        ? 'border-violet-200 bg-violet-100 text-violet-800'
        : isAutoActive
          ? 'border-amber-200 bg-white text-amber-700'
          : isDone
            ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
            : 'border-slate-200 bg-slate-50 text-slate-500',
    }
  }),
)
</script>
