<script setup lang="ts">
import { Archive, Link as LinkIcon, Plus, Save, Trash2 } from '@lucide/vue'
import { onMounted } from 'vue'

import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
import Button from '../../components/ui/Button.vue'
import Card from '../../components/ui/Card.vue'
import { watchAdminToast } from '../../composables/useAdminToast'
import { useAdminArchiveManager } from '../../components/admin/useAdminArchiveManager'

const {
  loading,
  adminError,
  adminMessage,
  groupedDrafts,
  stats,
  loadArchivedWinners,
  addDraft,
  saveDraft,
  deleteDraft,
} = useAdminArchiveManager()

watchAdminToast(adminMessage, adminError)

onMounted(() => {
  void loadArchivedWinners()
})
</script>

<template>
  <div class="space-y-6">
    <AdminPageHeader
      eyebrow="Archiv"
      description="Historische Gewinner für die Landingpage unabhängig vom aktiven Award-Jahr pflegen. Änderungen landen direkt in der öffentlichen Archivquelle."
      :icon="Archive"
    />

    <section class="grid gap-3 sm:grid-cols-3">
      <Card v-for="card in stats" :key="card.label" class="p-4">
        <p class="text-[11px] font-bold uppercase tracking-[0.16em] text-slate-500">{{ card.label }}</p>
        <strong class="mt-2 block text-2xl text-slate-950">{{ card.value }}</strong>
        <p class="mt-1 text-sm leading-5 text-slate-500">{{ card.note }}</p>
      </Card>
    </section>

    <Card class="p-5">
      <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h2 class="text-lg font-bold text-slate-950">Archiv-Gewinner verwalten</h2>
          <p class="mt-1 text-sm leading-6 text-slate-500">
            Pro Zeile kannst du Jahr, Gewinner, Link, Kategorie und Unterkategorie anlegen, anpassen oder löschen.
          </p>
        </div>

        <Button class="gap-2" @click="addDraft">
          <Plus class="h-4 w-4" />
          Neue Zeile
        </Button>
      </div>
    </Card>

    <div v-if="loading" class="rounded-[26px] border border-dashed border-violet-200 bg-white/70 px-5 py-10 text-center text-sm text-slate-500">
      Archiv wird geladen ...
    </div>

    <div v-else-if="groupedDrafts.length === 0" class="rounded-[26px] border border-dashed border-violet-200 bg-white/70 px-5 py-10 text-center text-sm text-slate-500">
      Noch keine Archiv-Gewinner vorhanden.
    </div>

    <section v-else class="space-y-5">
      <div
        v-for="group in groupedDrafts"
        :key="group.key"
        class="space-y-3"
      >
        <div class="flex items-center justify-between gap-3">
          <div>
            <p class="text-[11px] font-bold uppercase tracking-[0.18em] text-violet-600">Archiv</p>
            <h2 class="text-2xl font-bold text-slate-950">{{ group.label }}</h2>
          </div>
          <span class="rounded-full border border-violet-100 bg-violet-50 px-3 py-1.5 text-xs font-semibold text-violet-700">
            {{ group.items.length }} Einträge
          </span>
        </div>

        <div class="grid gap-4 xl:grid-cols-2">
          <Card
            v-for="draft in group.items"
            :key="draft.localKey"
            class="p-5"
          >
            <div class="grid gap-4">
              <div class="grid gap-4 sm:grid-cols-[120px_minmax(0,1fr)]">
                <label class="grid min-w-0 gap-1.5">
                  <span class="text-[11px] font-bold uppercase tracking-[0.16em] text-slate-500">Jahr</span>
                  <input
                    v-model="draft.year"
                    type="text"
                    inputmode="numeric"
                    pattern="[0-9]*"
                    maxlength="4"
                    class="h-11 rounded-2xl border border-violet-200 bg-white px-4 text-sm text-slate-900 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
                    placeholder="2025"
                  >
                </label>

                <label class="grid gap-1.5">
                  <span class="text-[11px] font-bold uppercase tracking-[0.16em] text-slate-500">Gewinner</span>
                  <input
                    v-model="draft.winnerName"
                    type="text"
                    class="h-11 rounded-2xl border border-violet-200 bg-white px-4 text-sm text-slate-900 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
                    placeholder="Name des Gewinners"
                  >
                </label>
              </div>

              <label class="grid gap-1.5">
                <span class="text-[11px] font-bold uppercase tracking-[0.16em] text-slate-500">Link</span>
                <div class="relative">
                  <LinkIcon class="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-violet-400" />
                  <input
                    v-model="draft.winnerUrl"
                    type="url"
                    class="h-11 w-full rounded-2xl border border-violet-200 bg-white pl-11 pr-4 text-sm text-slate-900 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
                    placeholder="https://twitch.tv/..."
                  >
                </div>
              </label>

              <div class="grid gap-4 sm:grid-cols-2">
                <label class="grid gap-1.5">
                  <span class="text-[11px] font-bold uppercase tracking-[0.16em] text-slate-500">Kategorie</span>
                  <input
                    v-model="draft.category"
                    type="text"
                    class="h-11 rounded-2xl border border-violet-200 bg-white px-4 text-sm text-slate-900 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
                    placeholder="z. B. Rising Stars"
                  >
                </label>

                <label class="grid gap-1.5">
                  <span class="text-[11px] font-bold uppercase tracking-[0.16em] text-slate-500">Unterkategorie</span>
                  <input
                    v-model="draft.subcategory"
                    type="text"
                    class="h-11 rounded-2xl border border-violet-200 bg-white px-4 text-sm text-slate-900 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
                    placeholder="z. B. Aufbau"
                  >
                </label>
              </div>

              <div class="flex flex-wrap items-center justify-between gap-3 border-t border-violet-100 pt-4">
                <p class="text-xs text-slate-400">
                  {{ draft.updatedAt ? `Zuletzt aktualisiert: ${new Date(draft.updatedAt).toLocaleString('de-DE')}` : draft.isNew ? 'Neue Archivzeile' : 'Noch nicht aktualisiert' }}
                </p>

                <div class="flex flex-wrap gap-2">
                  <Button
                    variant="ghost"
                    class="gap-2"
                    :disabled="draft.isDeleting || draft.isSaving"
                    @click="deleteDraft(draft.localKey)"
                  >
                    <Trash2 class="h-4 w-4" />
                    {{ draft.isDeleting ? 'Löscht ...' : 'Löschen' }}
                  </Button>

                  <Button
                    class="gap-2"
                    :disabled="draft.isDeleting || draft.isSaving"
                    @click="saveDraft(draft.localKey)"
                  >
                    <Save class="h-4 w-4" />
                    {{ draft.isSaving ? 'Speichert ...' : 'Speichern' }}
                  </Button>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </section>
  </div>
</template>
