import { computed, type Ref } from 'vue'

import { buildClipEmbed } from '../../lib/clipEmbeds'
import { useAwardsStore } from '../../stores/awards'

type AwardsStore = ReturnType<typeof useAwardsStore>

export function useHomeArchivePresentation(store: AwardsStore, archiveYear: Ref<number>) {
  const archiveYears = computed(() => {
    const knownYears = new Map<number, number>()
    for (const entry of store.overview.archiveYears ?? []) {
      knownYears.set(entry.year, entry.winnerCount)
    }

    if (store.archive.items.length > 0) {
      knownYears.set(store.archive.year, store.archive.items.length)
    }

    return [...knownYears.entries()]
      .sort(([left], [right]) => right - left)
      .map(([year, winnerCount]) => ({
        year,
        label: String(year),
        winnerCount: year === store.archive.year ? store.archive.items.length : winnerCount,
        winners: year === store.archive.year ? store.archive.items : [],
        active: archiveYear.value === year,
      }))
  })

  const selectedArchive = computed(() => ({
    year: store.archive.year,
    winners: store.archive.items.map((winner) => toArchiveWinnerItem(winner)),
  }))

  const winnerShowcaseYear = computed(() =>
    store.overview.winnersPreview[0]?.year ?? selectedArchive.value.year,
  )

  const winnerShowcase = computed(() => {
    const publishedWinners = store.overview.winnersPreview.map((winner) => toWinnerShowcaseItem(winner))
    const archiveFallback = store.archive.items.map((winner) => toWinnerShowcaseItem(winner))
    return (publishedWinners.length > 0 ? publishedWinners : archiveFallback).slice(0, 8)
  })

  function archiveYearButtonStyle(active: boolean) {
    return active
      ? "display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,210,122,.26);background:linear-gradient(135deg,#2a1842,#3a2168);color:#fff6fb;font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;cursor:pointer;text-align:left;box-shadow:0 14px 28px rgba(20,8,40,.24);"
      : "display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,210,122,.16);background:linear-gradient(135deg,#2a1842,#3a2168);color:#fff6fb;font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;cursor:pointer;text-align:left;box-shadow:0 10px 24px rgba(20,8,40,.14);opacity:.9;"
  }

  function toArchiveWinnerItem(winner: {
    categoryGroup?: string | null
    category: string
    winnerName: string
    winnerUrl: string
  }) {
    return {
      category: winner.category,
      subcategory: winner.categoryGroup?.trim() || winner.category,
      name: winner.winnerName,
      url: winner.winnerUrl,
    }
  }

  function toWinnerShowcaseItem(winner: {
    categoryGroup?: string | null
    category: string
    winnerName: string
    winnerSlug: string
    winnerPlatform: string
    winnerUrl: string
    clipUrl?: string | null
    clipTitle?: string | null
    clipPlatform?: string | null
    clipEmbedStatus?: string | null
  }) {
    const clipUrl = winner.clipUrl?.trim() || null
    const clipTitle = winner.clipTitle?.trim() || 'Gewinner-Clip ansehen'
    const clipPlatform = clipUrl ? winner.clipPlatform?.trim() || winnerPlatformLabel(clipUrl) : 'Kein Clip'
    const clipEmbed = clipUrl && winner.clipEmbedStatus !== 'link_only' && winner.clipEmbedStatus !== 'blocked'
      ? buildClipEmbed(clipUrl)
      : null

    return {
      categoryGroup: winner.categoryGroup?.trim() || winner.category,
      category: winner.category,
      name: winner.winnerName,
      handle: winner.winnerSlug,
      platform: winner.winnerPlatform,
      url: winner.winnerUrl,
      clipUrl,
      clipTitle,
      clipPlatform,
      clipEmbedUrl: clipEmbed?.src ?? null,
      clipEmbedTitle: clipEmbed?.title ?? clipTitle,
      hasClip: Boolean(clipUrl),
    }
  }

  function winnerPlatformKey(url: string) {
    const normalized = url.toLowerCase()
    if (normalized.includes('twitch.tv')) return 'twitch'
    if (normalized.includes('youtube.com') || normalized.includes('youtu.be')) return 'youtube'
    if (normalized.includes('x.com') || normalized.includes('twitter.com')) return 'x'
    if (normalized.includes('instagram.com')) return 'instagram'
    if (normalized.includes('cake.gg') || normalized.includes('cake.')) return 'cake'
    return 'link'
  }

  function winnerPlatformLabel(url: string) {
    const key = winnerPlatformKey(url)
    if (key === 'twitch') return 'Twitch'
    if (key === 'youtube') return 'YouTube'
    if (key === 'x') return 'X'
    if (key === 'instagram') return 'Instagram'
    if (key === 'cake') return 'Cake'
    return 'Profil'
  }

  function winnerPlatformStyle(url: string) {
    const key = winnerPlatformKey(url)
    if (key === 'twitch') return "flex:none;display:inline-flex;align-items:center;gap:7px;color:#c9b1ff;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;"
    if (key === 'youtube') return "flex:none;display:inline-flex;align-items:center;gap:7px;color:#ffb3c1;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;"
    if (key === 'x') return "flex:none;display:inline-flex;align-items:center;gap:7px;color:#d8d3e6;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;"
    if (key === 'instagram') return "flex:none;display:inline-flex;align-items:center;gap:7px;color:#ffb5db;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;"
    if (key === 'cake') return "flex:none;display:inline-flex;align-items:center;gap:7px;color:#8b6cdb;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;"
    return "flex:none;display:inline-flex;align-items:center;gap:7px;color:#ffd27a;text-decoration:none;font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;"
  }

  return {
    archiveYears,
    selectedArchive,
    winnerShowcaseYear,
    winnerShowcase,
    archiveYearButtonStyle,
    winnerPlatformLabel,
    winnerPlatformStyle,
  }
}
