<script setup lang="ts">
import { AlertTriangle, CalendarClock } from '@lucide/vue'
import { RouterLink } from 'vue-router'

import Card from '../ui/Card.vue'

defineProps<{
  timelinePhases: Array<{
    key: string
    title: string
    description: string
    dateRange: string
    statusLabel: string
    dotClass: string
    statusClass: string
    active: boolean
  }>
  activeCountdown: string
  phaseMismatch: boolean
  phaseMismatchLabel: string
  canOpenYears: boolean
}>()
</script>

<template>
  <Card class="p-6">
    <div class="flex flex-col gap-4 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">Timeline</p>
        <div class="mt-2 flex flex-wrap items-center gap-3">
          <h2 class="text-2xl font-bold text-slate-950">{{ activeCountdown }}</h2>
          <span
            v-if="phaseMismatch"
            class="inline-flex items-center gap-2 rounded-full border border-amber-200 bg-amber-50 px-3 py-1.5 text-xs font-bold text-amber-700"
          >
            <AlertTriangle class="h-3.5 w-3.5" />
            Zeitplan prüfen
          </span>
        </div>
        <p v-if="phaseMismatchLabel" class="mt-2 text-sm leading-5 text-amber-700">{{ phaseMismatchLabel }}</p>
      </div>

      <RouterLink v-if="canOpenYears" to="/admin/years" class="inline-flex h-10 shrink-0 items-center justify-center gap-2 rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-violet-700 transition hover:bg-violet-50">
        <CalendarClock class="h-4 w-4" />
        Jahr öffnen
      </RouterLink>
    </div>

    <div class="mt-6 grid gap-3 lg:grid-cols-4">
      <div
        v-for="phase in timelinePhases"
        :key="phase.key"
        class="rounded-[22px] border p-4"
        :class="phase.active ? 'border-violet-200 bg-violet-50/80 shadow-[0_14px_34px_rgba(124,92,255,0.12)]' : 'border-violet-100 bg-white/85'"
      >
        <div class="flex items-start justify-between gap-3">
          <span class="mt-1 h-3 w-3 shrink-0 rounded-full" :class="phase.dotClass"></span>
          <span class="rounded-full border px-2.5 py-1 text-[11px] font-bold uppercase" :class="phase.statusClass">
            {{ phase.statusLabel }}
          </span>
        </div>
        <h3 class="mt-4 text-base font-bold text-slate-900">{{ phase.title }}</h3>
        <p class="mt-1 text-sm leading-5 text-slate-500">{{ phase.dateRange }}</p>
        <p class="mt-3 text-xs leading-5 text-slate-500">{{ phase.description }}</p>
      </div>
    </div>
  </Card>
</template>
