vtuber-awards/frontend/src/components/admin/AdminSeasonStatusCard.vue

<template>
  <Card class="flex h-[684px] flex-col overflow-hidden">
    <div class="shrink-0 border-b border-violet-100 bg-gradient-to-br from-white via-violet-50/70 to-[#f7eef8] p-5">
      <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Grunddaten</p>
          <h2 class="mt-1 text-xl font-bold text-slate-900">{{ seasonName || 'Kein Jahr gewählt' }}</h2>
          <p class="mt-2 max-w-xl text-sm leading-6 text-slate-500">
            Die wichtigsten Stammdaten, der Public-Kontext und der finale Stream-Link auf einen Blick.
          </p>
        </div>
        <div class="rounded-2xl border px-4 py-3 text-sm font-semibold" :class="form.isCurrent ? 'border-emerald-100 bg-emerald-50 text-emerald-700' : 'border-slate-100 bg-slate-50 text-slate-500'">
          {{ form.isCurrent ? 'Öffentlich aktiv' : 'Intern vorbereitet' }}
        </div>
      </div>
    </div>

    <div class="grid min-h-0 flex-1 gap-5 overflow-y-auto p-5 min-[1400px]:grid-cols-[minmax(0,1fr)_minmax(300px,0.78fr)]">
      <div class="space-y-4">
        <div class="grid gap-4 sm:grid-cols-[140px_minmax(0,1fr)]">
          <label class="block space-y-2">
            <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Jahr</span>
            <input v-model.number="form.year" type="number" 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 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400" placeholder="2027" :disabled="!selectedSeasonId || saving" />
          </label>
          <label class="block space-y-2">
            <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Name</span>
            <input v-model="form.name" 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 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400" placeholder="VTuber Star Awards 2027" :disabled="!selectedSeasonId || saving" />
          </label>
          <label class="block space-y-2 sm:col-span-2">
            <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Finaler Stream-Link</span>
            <input v-model="form.showStreamUrl" 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 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400" placeholder="https://twitch.tv/jayuhime" :disabled="!selectedSeasonId || saving" />
          </label>
        </div>

        <div class="grid gap-3 md:grid-cols-2">
          <label class="flex min-h-[108px] cursor-pointer gap-3 rounded-[22px] border border-violet-100 bg-violet-50/50 p-4 transition hover:bg-violet-50 has-disabled:cursor-not-allowed has-disabled:opacity-70">
            <input v-model="form.isCommunityOnly" type="checkbox" class="mt-1 h-4 w-4 shrink-0 accent-violet-600" :disabled="!selectedSeasonId || saving" />
            <span>
              <span class="block font-semibold text-slate-800">Community-only</span>
              <span class="mt-1 block text-sm leading-5 text-slate-500">Voting und Teilnahme laufen über die Community.</span>
            </span>
          </label>

          <label class="flex min-h-[108px] cursor-pointer gap-3 rounded-[22px] border border-violet-100 bg-violet-50/50 p-4 transition hover:bg-violet-50 has-disabled:cursor-not-allowed has-disabled:opacity-70">
            <input v-model="form.isCurrent" type="checkbox" class="mt-1 h-4 w-4 shrink-0 accent-violet-600" :disabled="!selectedSeasonId || saving || (!form.isCurrent && !canActivatePublic)" />
            <span>
              <span class="block font-semibold text-slate-800">Public-Kontext</span>
              <span class="mt-1 block text-sm leading-5 text-slate-500">
                {{ form.isCurrent ? 'Dieses Jahr ist auf der Landingpage sichtbar.' : canActivatePublic ? 'Mit Speichern oder Button als Landingpage-Jahr aktivieren.' : 'Erst die Public-Readiness-Blocker unten loesen.' }}
              </span>
            </span>
          </label>
        </div>

        <div class="grid gap-3 border-t border-violet-100 pt-4 md:grid-cols-4">
          <Button variant="ghost" class="w-full gap-2 border border-rose-100 bg-rose-50 text-rose-600 hover:bg-rose-100 disabled:cursor-not-allowed disabled:opacity-50" :disabled="!selectedSeasonId || !canDeleteSelectedSeason" @click="openDeleteSeasonModal">
            <Trash2 class="h-4 w-4" />
            Löschen
          </Button>
          <Button variant="ghost" class="w-full gap-2 border border-emerald-100 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 disabled:cursor-not-allowed disabled:opacity-50" :disabled="saving || !selectedSeasonId || form.isCurrent || !canActivatePublic" @click="activatePublicSeason">
            <Globe2 class="h-4 w-4" />
            {{ saving ? 'Aktiviert ...' : 'Public aktivieren' }}
          </Button>
          <Button variant="ghost" class="w-full gap-2 border border-amber-100 bg-amber-50 text-amber-700 hover:bg-amber-100 disabled:cursor-not-allowed disabled:opacity-50" :disabled="completing || !selectedSeasonId || !canCompleteSelectedSeason" @click="completeSeason">
            <CheckCircle2 class="h-4 w-4" />
            {{ completing ? 'Schliesst ...' : 'Beenden' }}
          </Button>
          <Button class="w-full" :disabled="saving || !selectedSeasonId" @click="saveSeason">
            {{ saving ? 'Speichert ...' : 'Speichern' }}
          </Button>
        </div>
        <p v-if="selectedSeasonIsCurrent" class="text-xs leading-5 text-slate-500">
          Das öffentliche aktive Jahr kann nicht gelöscht werden. Schalte zuerst ein anderes Jahr öffentlich.
        </p>
      </div>

      <aside class="min-h-0 space-y-4 lg:max-h-[432px] lg:overflow-y-auto lg:pr-1">
        <div class="rounded-[22px] border border-violet-100 bg-white p-4">
          <div class="flex items-start gap-3">
            <div class="grid h-10 w-10 shrink-0 place-items-center rounded-2xl bg-violet-100 text-violet-700">
              <History class="h-5 w-5" />
            </div>
            <div class="min-w-0">
              <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">Letzte Admin-Aktion</p>
              <p class="mt-1 text-sm font-semibold leading-5 text-slate-800">
                {{ loadingSeasonAudit ? 'Laedt Audit ...' : latestSeasonAuditSummary }}
              </p>
              <p class="mt-1 text-xs leading-5 text-slate-500">{{ latestSeasonAuditMeta }}</p>
            </div>
          </div>
        </div>

        <div class="rounded-[22px] border border-violet-100 bg-white p-4">
          <div class="flex items-center justify-between gap-3">
            <div>
              <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">Public-Readiness</p>
              <p class="mt-1 text-sm leading-5 text-slate-500">Blocker für Public auf einen Blick.</p>
            </div>
            <span class="shrink-0 rounded-full border px-3 py-1 text-xs font-semibold" :class="canActivatePublic ? 'border-emerald-200 bg-emerald-50 text-emerald-700' : 'border-rose-200 bg-rose-50 text-rose-700'">
              {{ canActivatePublic ? 'Bereit' : 'Blockiert' }}
            </span>
          </div>
          <div class="mt-4 grid gap-2">
            <RouterLink
              v-for="item in readinessItems"
              :key="item.label"
              :to="item.to"
              class="flex min-h-[58px] items-start gap-3 rounded-2xl border px-3 py-2.5 transition hover:bg-violet-50/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400"
              :class="item.complete ? 'border-emerald-100 bg-emerald-50/60' : item.blocking ? 'border-rose-200 bg-rose-50/70' : 'border-amber-100 bg-amber-50/60'"
            >
              <CheckCircle2 v-if="item.complete" class="mt-0.5 h-4 w-4 shrink-0 text-emerald-700" />
              <AlertTriangle v-else class="mt-0.5 h-4 w-4 shrink-0" :class="item.blocking ? 'text-rose-700' : 'text-amber-700'" />
              <span class="min-w-0">
                <span class="flex flex-wrap items-center gap-2 text-sm font-semibold text-slate-800">
                  {{ item.label }}
                  <span v-if="item.blocking && !item.complete" class="rounded-full bg-rose-100 px-2 py-0.5 text-[11px] text-rose-700">Blocker</span>
                </span>
                <span class="mt-0.5 block text-xs leading-5 text-slate-500">{{ item.note }}</span>
              </span>
            </RouterLink>
          </div>
        </div>

        <div v-if="archiveReadinessIssues.length > 0" class="rounded-[22px] border border-rose-200 bg-rose-50 px-4 py-3 text-sm leading-6 text-rose-700" role="alert">
          <strong class="block text-rose-800">Abschluss noch blockiert.</strong>
          {{ archiveReadinessIssues.join(' ') }}
        </div>
      </aside>
    </div>
  </Card>
</template>

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

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

defineProps<{
  form: AdminSeasonForm
  seasonName: string
  saving: boolean
  completing: boolean
  adminMessage: string
  adminError: string
  readinessItems: AdminSeasonReadinessItem[]
  archiveReadinessIssues: string[]
  canActivatePublic: boolean
  loadingSeasonAudit: boolean
  latestSeasonAuditSummary: string
  latestSeasonAuditMeta: string
  selectedSeasonId: number | null
  canDeleteSelectedSeason: boolean
  canCompleteSelectedSeason: boolean
  selectedSeasonIsCurrent: boolean
  openDeleteSeasonModal: () => void
  activatePublicSeason: () => Promise<boolean | void> | boolean | void
  saveSeason: () => Promise<boolean | void> | boolean | void
  completeSeason: () => Promise<void>
}>()
</script>