<script setup lang="ts">
import HomeStarField from './HomeStarField.vue'
import type { HomeArchiveYearItem, HomeSelectedArchive } from './homeModalTypes'

const props = defineProps<{
  archiveModalOpen: boolean
  archiveYears: HomeArchiveYearItem[]
  selectedArchive: HomeSelectedArchive
  onCloseArchive: () => void
  archiveModalStop: (event: Event) => void
  setArchiveYear: (year: number) => Promise<void>
  archiveYearButtonStyle: (active: boolean) => string
  winnerPlatformStyle: (url: string) => string
  winnerPlatformLabel: (url: string) => string
}>()

function initialsFor(value: string) {
  const parts = value.trim().split(/\s+/).filter(Boolean)
  const initials = parts.length > 1
    ? `${parts[0][0] ?? ''}${parts[1][0] ?? ''}`
    : value.slice(0, 2)
  return initials.toUpperCase()
}
</script>

<template>
  <template v-if="props.archiveModalOpen">
    <div class="home-modal-overlay" @click="props.onCloseArchive" style="position:fixed;inset:0;z-index:260;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(34,18,58,.46);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);">
      <div class="home-modal" @click="props.archiveModalStop" style="position:relative;width:100%;max-width:1020px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;background:radial-gradient(62% 80% at 82% 14%,rgba(255,210,236,.58),transparent 55%),radial-gradient(70% 90% at 10% 84%,rgba(206,196,247,.48),transparent 58%),linear-gradient(180deg,#fcf7ff 0%,#f3ebfc 100%);border-radius:30px;box-shadow:0 40px 90px rgba(20,8,40,.28);border:none;">
        <button @click="props.onCloseArchive" aria-label="Archiv schliessen" style="position:absolute;top:18px;right:18px;z-index:5;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:none;background:rgba(139,108,219,.12);color:#8b6cdb;font-size:20px;cursor:pointer;" style-hover="background:rgba(139,108,219,.2);">✕</button>
        <div style="position:relative;padding:30px 34px 22px;border-bottom:1px solid rgba(255,210,122,.14);background:linear-gradient(135deg,#2a1842,#3a2168);overflow:hidden;">
          <HomeStarField :count="13" variant="header" />
          <div style="font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#c9b1ff;margin-bottom:8px;position:relative;z-index:1;">Archiv</div>
          <h3 style="font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(30px,3vw,36px);line-height:1.08;margin:0;color:#fff6fb;position:relative;z-index:1;">Gewinner vergangener Jahre</h3>
        </div>
        <div class="home-archive-modal__body" style="display:grid;grid-template-columns:220px minmax(0,1fr);min-height:0;flex:1;">
          <aside class="home-archive-modal__years" style="padding:24px 18px;border-right:1px solid rgba(139,108,219,.12);background:rgba(255,255,255,.34);overflow-y:auto;">
            <div style="display:flex;flex-direction:column;gap:10px;">
              <button
                v-for="year in props.archiveYears"
                :key="year.year"
                @click="props.setArchiveYear(year.year)"
                :style="props.archiveYearButtonStyle(year.active)"
              >
                <span>{{ year.label }}</span>
                <span :style="year.active ? 'display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:999px;background:#fff;color:#8b6cdb;font-size:11px;font-weight:800;box-shadow:0 6px 14px rgba(139,108,219,.12);' : 'display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:999px;background:#f1ecfb;color:#7355c8;font-size:11px;font-weight:800;'">{{ year.winnerCount }}</span>
              </button>
            </div>
          </aside>
          <div style="padding:24px 24px 28px;overflow-y:auto;">
            <div style="display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;padding:18px 20px;border-radius:20px;background:linear-gradient(135deg,#2a1842,#3a2168);box-shadow:0 18px 40px rgba(34,18,58,.2);">
              <div>
                <div style="font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#c9b1ff;margin-bottom:6px;">Award Year</div>
                <h4 style="font-family:'Fredoka',sans-serif;font-weight:700;font-size:30px;line-height:1;margin:0;color:#fff6fb;">{{ props.selectedArchive.year }}</h4>
              </div>
              <div style="font-size:13px;color:rgba(255,246,251,.78);">{{ props.selectedArchive.winners.length }} Kategorien archiviert</div>
            </div>
            <div class="home-archive-modal__winners" style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;">
              <component
                :is="winner.url ? 'a' : 'article'"
                v-for="winner in props.selectedArchive.winners"
                :key="`${props.selectedArchive.year}-${winner.category}-${winner.subcategory}-${winner.name}`"
                :href="winner.url || undefined"
                :target="winner.url ? '_blank' : undefined"
                :rel="winner.url ? 'noopener' : undefined"
                :aria-label="winner.url ? `${winner.name} auf ${props.winnerPlatformLabel(winner.url)} öffnen` : undefined"
                style="display:grid;grid-template-columns:84px minmax(0,1fr);gap:16px;padding:18px;border-radius:24px;background:rgba(255,255,255,.78);border:1px solid rgba(139,108,219,.12);box-shadow:0 12px 28px rgba(139,108,219,.08);align-items:start;color:inherit;text-decoration:none;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;"
                style-hover="transform:translateY(-2px);box-shadow:0 18px 38px rgba(139,108,219,.16);border-color:rgba(139,108,219,.26);"
                style-focus="outline:3px solid rgba(139,108,219,.28);outline-offset:3px;"
              >
                <div style="width:84px;height:84px;border-radius:24px;background:linear-gradient(135deg,#ffe1a3,#e7b13e);display:grid;place-items:center;color:#2f1b00;font-family:'Fredoka',sans-serif;font-size:26px;font-weight:800;box-shadow:0 12px 24px rgba(139,108,219,.16);">
                  {{ initialsFor(winner.name) }}
                </div>
                <div style="min-width:0;">
                  <div style="font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#d9942a;margin-bottom:7px;">{{ winner.category }}</div>
                  <div style="font-family:'Fredoka',sans-serif;font-weight:600;font-size:20px;line-height:1.2;color:#3f3556;">{{ winner.name }}</div>
                  <div style="font-size:13px;color:#8a8398;margin-top:5px;">Unterkategorie · {{ winner.subcategory }}</div>
                  <div style="display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:12px;">
                    <span :style="props.winnerPlatformStyle(winner.url)">
                      {{ props.winnerPlatformLabel(winner.url) }}
                    </span>
                  </div>
                </div>
              </component>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
</template>
