<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { RouterLink } from 'vue-router'
import Accordion from 'primevue/accordion'
import AccordionContent from 'primevue/accordioncontent'
import AccordionHeader from 'primevue/accordionheader'
import AccordionPanel from 'primevue/accordionpanel'
import Tag from 'primevue/tag'
import { ArrowRight, Sparkles, Star, Trophy, WandSparkles } from '@lucide/vue'

import Button from '../components/ui/Button.vue'
import Card from '../components/ui/Card.vue'
import { useAwardsStore } from '../stores/awards'
import { useAuthStore } from '../stores/auth'
import hostVisual from '../assets/collector-editorial-reference.png'

const store = useAwardsStore()
const authStore = useAuthStore()

onMounted(() => {
  void store.loadHomeData()
})

const heroYear = computed(() => store.overview.year)
</script>

<template>
  <div class="space-y-20 pb-16">
    <section class="grid gap-10 lg:grid-cols-[0.82fr_1.18fr] lg:items-start">
      <div class="space-y-10 pt-3">
        <div class="space-y-6">
          <p class="text-xs font-semibold uppercase tracking-[0.35em] text-amber-500">Die groesste Community-Auszeichnung</p>
          <h1 class="max-w-[8ch] font-[Cormorant_Garamond] text-6xl leading-[0.88] text-violet-800 sm:text-7xl xl:text-[6.6rem]">
            VTuber Star Awards
          </h1>
          <p class="text-2xl font-medium italic tracking-wide text-violet-500">
            Presented by Jayuhime
          </p>
          <p class="max-w-lg text-lg leading-8 text-slate-600">
            Feiere die talentiertesten VTuber, Creator und Showmomente des Jahres.
            Kategorien und Unterkategorien werden vom Team pro Jahr gepflegt, die Gewinner sind aktuell rein community-basiert.
          </p>
        </div>

        <div class="flex flex-wrap gap-3">
          <RouterLink to="/nominations">
            <Button size="lg">Jetzt nominieren</Button>
          </RouterLink>
          <RouterLink to="/voting">
            <Button variant="secondary" size="lg">Jetzt voten</Button>
          </RouterLink>
        </div>

        <div class="grid gap-4 sm:grid-cols-2">
          <Card class="min-h-[210px] p-7">
            <div class="flex items-center gap-3 text-violet-600">
              <Sparkles class="h-5 w-5 text-amber-500" />
              <span class="text-xs font-semibold uppercase tracking-[0.25em]">Von der Community getragen</span>
            </div>
            <p class="mt-5 text-sm leading-7 text-slate-600">
              Nur Twitch Login, keine Konto-Huerde, editierbare Stimmen und Nominierungen bis zur Deadline.
            </p>
          </Card>

          <Card class="min-h-[210px] p-7">
            <div class="flex items-center gap-3 text-violet-600">
              <WandSparkles class="h-5 w-5 text-amber-500" />
              <span class="text-xs font-semibold uppercase tracking-[0.25em]">Team verwaltet pro Jahr</span>
            </div>
            <p class="mt-5 text-sm leading-7 text-slate-600">
              Kategorien und Unterkategorien werden im Admin-Bereich je Jahr gepflegt und freigeschaltet.
            </p>
          </Card>
        </div>

        <Card class="p-7">
          <div class="flex flex-col gap-6 xl:flex-row xl:items-center xl:justify-between">
            <div>
              <p class="text-xs font-semibold uppercase tracking-[0.25em] text-violet-500">Aktuelle Phase</p>
              <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">
                {{ store.overview.currentPhase }}
              </h2>
              <p class="mt-2 max-w-md text-slate-600">
                Login bleibt leichtgewichtig: nur Twitch, kein separates Community-Konto.
              </p>
            </div>

            <div class="rounded-[26px] border border-violet-100 bg-violet-50/70 px-5 py-5 text-sm text-slate-700">
              <p class="text-xs font-semibold uppercase tracking-[0.25em] text-violet-500">Sitzungsstatus</p>
              <p class="mt-2 font-semibold text-violet-800">
                {{ authStore.isLoggedIn ? `${authStore.session?.displayName} · ${authStore.session?.role}` : 'Noch nicht eingeloggt' }}
              </p>
              <p class="mt-2 leading-7 text-slate-600">
                {{ authStore.isLoggedIn ? 'Nominierung und Voting sind jetzt direkt freigeschaltet.' : 'Bitte oben im Kopfbereich einloggen, um Nominierung, Voting oder Admin zu nutzen.' }}
              </p>
            </div>

            <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
              <div class="rounded-2xl bg-violet-50 px-4 py-3 text-center">
                <strong class="block text-2xl text-violet-800">41</strong>
                <span class="text-xs uppercase tracking-[0.2em] text-slate-500">Tage</span>
              </div>
              <div class="rounded-2xl bg-violet-50 px-4 py-3 text-center">
                <strong class="block text-2xl text-violet-800">08</strong>
                <span class="text-xs uppercase tracking-[0.2em] text-slate-500">Std</span>
              </div>
              <div class="rounded-2xl bg-violet-50 px-4 py-3 text-center">
                <strong class="block text-2xl text-violet-800">24</strong>
                <span class="text-xs uppercase tracking-[0.2em] text-slate-500">Min</span>
              </div>
              <div class="rounded-2xl bg-violet-50 px-4 py-3 text-center">
                <strong class="block text-2xl text-violet-800">16</strong>
                <span class="text-xs uppercase tracking-[0.2em] text-slate-500">Sek</span>
              </div>
            </div>
          </div>
        </Card>
      </div>

      <Card class="overflow-hidden p-0">
        <div class="relative min-h-[760px] bg-[radial-gradient(circle_at_top,_rgba(255,255,255,0.82),transparent_26%),linear-gradient(160deg,rgba(224,214,255,0.72),rgba(255,240,217,0.68))]">
          <div class="absolute inset-0 bg-[radial-gradient(circle_at_75%_15%,rgba(255,255,255,0.82),transparent_25%)]" />
          <div class="absolute left-10 top-10 rounded-full border border-white/60 bg-white/60 px-4 py-1 text-xs uppercase tracking-[0.3em] text-violet-600">
            Presented by Jayuhime
          </div>
          <img
            :src="hostVisual"
            alt="Jayuhime Host Keyvisual"
            class="absolute inset-0 h-full w-full object-cover object-center"
          />
          <div class="absolute inset-y-0 right-0 flex w-full max-w-[340px] flex-col justify-between border-l border-white/40 bg-[linear-gradient(180deg,rgba(255,255,255,0.14),rgba(255,255,255,0.38))] p-7 backdrop-blur md:p-8">
            <div class="space-y-8">
              <div class="rounded-[28px] border border-white/50 bg-white/30 p-5">
                <div class="flex items-center gap-3 text-violet-700">
                  <Star class="h-5 w-5 text-amber-500" />
                  <span class="text-sm font-semibold uppercase tracking-[0.2em]">Jayuhime · Host of the Show</span>
                </div>
                <p class="mt-4 text-sm leading-7 text-slate-700">
                  Editoriales Hero-Panel mit klarer Host-Praesenz, aber mehr White Space und weniger competing elements.
                </p>
              </div>

              <Tag value="Collector Editorial" severity="warn" class="self-start" />
            </div>

            <div class="grid gap-3">
              <div class="rounded-[26px] border border-white/70 bg-white/72 px-5 py-5">
                <p class="text-xs font-semibold uppercase tracking-[0.25em] text-violet-500">Show Date</p>
                <p class="mt-2 font-[Cormorant_Garamond] text-3xl text-violet-800">24. Jan 2026</p>
              </div>
              <div class="rounded-[26px] border border-white/70 bg-white/72 px-5 py-5">
                <p class="text-xs font-semibold uppercase tracking-[0.25em] text-violet-500">Winner Model</p>
                <p class="mt-2 font-[Cormorant_Garamond] text-3xl text-violet-800">Nur Community</p>
              </div>
              <div class="rounded-[26px] border border-white/70 bg-white/72 px-5 py-5">
                <p class="text-xs font-semibold uppercase tracking-[0.25em] text-violet-500">Login</p>
                <p class="mt-2 font-[Cormorant_Garamond] text-3xl text-violet-800">Twitch</p>
              </div>
            </div>
          </div>
        </div>
      </Card>
    </section>

    <section class="grid gap-5 lg:grid-cols-4">
      <Card
        v-for="item in store.overview.timeline"
        :key="item.key"
        class="p-7"
      >
        <Tag :value="item.state === 'active' ? 'live' : item.state" severity="secondary" class="mb-4" />
        <h3 class="font-[Cormorant_Garamond] text-3xl text-violet-800">{{ item.title }}</h3>
        <p class="mt-2 text-sm text-slate-600">{{ item.startsAt }} - {{ item.endsAt }}</p>
      </Card>
    </section>

    <section class="grid gap-5 lg:grid-cols-3">
      <Card class="min-h-[260px] p-8">
        <div class="flex items-center gap-3">
          <Trophy class="h-5 w-5 text-amber-500" />
          <p class="text-xs font-semibold uppercase tracking-[0.3em] text-violet-500">How it works</p>
        </div>
        <h2 class="mt-4 font-[Cormorant_Garamond] text-4xl text-violet-800">Nominate, vote, celebrate.</h2>
        <p class="mt-3 text-slate-600">
          Die Plattform trennt bewusst zwischen showhafter Startseite und ruhigen Produktflows. So bleibt der Einstieg emotional, waehrend die Interaktion klar bleibt.
        </p>
      </Card>

      <Card class="min-h-[260px] p-8">
        <div class="flex items-center gap-3">
          <Sparkles class="h-5 w-5 text-amber-500" />
          <p class="text-xs font-semibold uppercase tracking-[0.3em] text-violet-500">Rules</p>
        </div>
        <h2 class="mt-4 font-[Cormorant_Garamond] text-4xl text-violet-800">Moderater Abuse-Schutz</h2>
        <p class="mt-3 text-slate-600">
          Rate limits, serverseitige Pruefung und Risikoflags laufen im Hintergrund. Die User-Huerde bleibt niedrig, der operative Blick landet im Admin.
        </p>
      </Card>

      <Card class="min-h-[260px] p-8">
        <div class="flex items-center gap-3">
          <WandSparkles class="h-5 w-5 text-amber-500" />
          <p class="text-xs font-semibold uppercase tracking-[0.3em] text-violet-500">Admin</p>
        </div>
        <h2 class="mt-4 font-[Cormorant_Garamond] text-4xl text-violet-800">Jahresbasiertes Management</h2>
        <p class="mt-3 text-slate-600">
          Jahre, Kategorien, Unterkategorien, Gewinnerarchiv und Reviews werden als kuratierte Award-Jahre gedacht, nicht als harte statische App-Texte.
        </p>
      </Card>
    </section>

    <section class="space-y-6">
      <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.35em] text-amber-500">Featured Kategorien</p>
          <h2 class="font-[Cormorant_Garamond] text-5xl text-violet-800">Team-gesteuerte Awards fuer {{ heroYear }}</h2>
        </div>
        <span class="text-sm text-slate-500">
          API-Modus:
          <strong class="text-violet-700">{{ store.apiMode }}</strong>
        </span>
      </div>

      <div class="grid gap-4 lg:grid-cols-3">
        <Card
          v-for="category in store.overview.featuredCategories"
          :key="category.id"
          class="p-6"
        >
          <p class="text-xs font-semibold uppercase tracking-[0.25em] text-violet-500">{{ category.groupName }}</p>
          <h3 class="mt-3 font-[Cormorant_Garamond] text-4xl text-violet-800">{{ category.name }}</h3>
          <p class="mt-3 text-slate-600">{{ category.description }}</p>
          <div class="mt-6 flex items-center justify-between text-sm text-slate-500">
            <span>Max. {{ category.maxNomineesPerUser }} Nominierungen</span>
            <ArrowRight class="h-4 w-4 text-amber-500" />
          </div>
        </Card>
      </div>
    </section>

    <section class="grid gap-6 xl:grid-cols-[1.05fr_0.95fr]">
      <Card class="p-7">
        <p class="text-xs font-semibold uppercase tracking-[0.35em] text-amber-500">Nominierung</p>
        <h2 class="mt-3 font-[Cormorant_Garamond] text-5xl text-violet-800">Bis zu drei Favoriten, direkt validiert</h2>
        <ul class="mt-5 space-y-3 text-slate-600">
          <li>Pro Kategorie keine doppelte Nominierung derselben Person.</li>
          <li>Regeln werden direkt im Formular sichtbar gemacht.</li>
          <li>Freitext-Ideen und Alias-Faelle gehen spaeter in die Review-Liste.</li>
        </ul>
        <div class="mt-6">
          <RouterLink to="/nominations">
            <Button>Zur Nominierungsansicht</Button>
          </RouterLink>
        </div>
      </Card>

      <Card class="p-7">
        <p class="text-xs font-semibold uppercase tracking-[0.35em] text-amber-500">Voting</p>
        <h2 class="mt-3 font-[Cormorant_Garamond] text-5xl text-violet-800">Ein Kandidat pro Kategorie, bis zur Deadline editierbar</h2>
        <ul class="mt-5 space-y-3 text-slate-600">
          <li>Nur eine Stimme pro Kategorie.</li>
          <li>Videos, Clips und spaetere Detail-Previews koennen direkt im Flow eingebettet werden.</li>
          <li>Die Ballot-Logik lebt im Backend ueber VoteBallot und VoteEntry.</li>
        </ul>
        <div class="mt-6">
          <RouterLink to="/voting">
            <Button variant="secondary">Zur Voting-Ansicht</Button>
          </RouterLink>
        </div>
      </Card>
    </section>

    <section class="grid gap-6 lg:grid-cols-[0.8fr_1.2fr]">
      <Card class="p-6">
        <p class="text-xs font-semibold uppercase tracking-[0.35em] text-amber-500">Gewinner Archiv</p>
        <h2 class="mt-3 font-[Cormorant_Garamond] text-5xl text-violet-800">Vergangene Jahre sichtbar machen</h2>
        <p class="mt-4 text-slate-600">
          Gewinner, Nominierte und Banner werden pro Jahr archiviert. So bleibt die Show-Historie dauerhaft sichtbar und teilbar.
        </p>
        <div class="mt-6 space-y-3">
          <div
            v-for="entry in store.overview.winnersPreview"
            :key="`${entry.year}-${entry.category}`"
            class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3"
          >
            <div class="flex items-center justify-between gap-3">
              <div>
                <p class="font-semibold text-slate-800">{{ entry.category }}</p>
                <p class="text-sm text-slate-500">{{ entry.winnerName }} · {{ entry.winnerSlug }}</p>
              </div>
              <Tag :value="entry.year.toString()" severity="info" />
            </div>
          </div>
        </div>
      </Card>

      <Card class="p-6">
        <p class="text-xs font-semibold uppercase tracking-[0.35em] text-amber-500">FAQ</p>
        <h2 class="mt-3 font-[Cormorant_Garamond] text-5xl text-violet-800">Regeln, Voting, Missbrauchsschutz</h2>
        <Accordion value="0" class="mt-6">
          <AccordionPanel v-for="(item, index) in store.overview.faq" :key="item.question" :value="String(index)">
            <AccordionHeader>{{ item.question }}</AccordionHeader>
            <AccordionContent>
              <p class="leading-7 text-slate-600">{{ item.answer }}</p>
            </AccordionContent>
          </AccordionPanel>
        </Accordion>
      </Card>
    </section>
  </div>
</template>
