<template>
  <div class="home-container">
    <!-- Header Section -->
    <header class="hero-section-slate">
      <div class="home-header-decor">
        <div class="hero-decor-blob -top-24 -left-24 h-96 w-96 bg-indigo-600"></div>
        <div class="hero-decor-blob -bottom-24 -right-24 h-96 w-96 bg-purple-600"></div>
      </div>

      <div class="hero-container">
        <div class="hero-badge">{{ t('home.welcomeTo') }}</div>
        <h1 class="hero-title">
          Teletype <span class="text-transparent bg-clip-text bg-gradient-to-r from-violet-400 to-fuchsia-400">Games</span>
        </h1>
        <p class="hero-subtitle">{{ t('home.subtitle') }}</p>
      </div>
    </header>

    <main class="main-container max-w-6xl">
      <!-- Countdown Section -->
      <section v-if="nextEvent" class="mb-12">
        <div class="countdown-card">
          <h2 class="countdown-event-name">{{ nextEvent.name }}</h2>
          <div class="countdown-timer">{{ countdownText }}</div>
          <p class="countdown-date">{{ t('home.startsOn') }} <span class="font-semibold">{{ nextEvent.dateText }}</span></p>

          <div v-if="followingEvents.length > 0" class="upcoming-events-section">
            <h3 class="upcoming-events-title">{{ t('home.upcomingEvents') }}</h3>
            <div class="space-y-4">
              <div v-for="event in followingEvents" :key="event.name" class="upcoming-event-item">
                <span class="font-bold text-gray-800">{{ event.name }}</span>
                <span class="text-sm text-gray-500 font-mono">{{ event.dateText }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Featured Software Section -->
      <section v-if="highlightedSoftware" class="mb-16">
        <div class="featured-card group">
          <div v-if="highlightedSoftware.software.imageUrl" class="featured-image-panel">
            <img :src="highlightedSoftware.software.imageUrl" :alt="highlightedSoftware.software.title" class="featured-image" />
          </div>
          <div class="featured-content">
            <div class="flex items-center gap-2 mb-4">
              <span class="featured-badge">{{ t('home.featuredGame') }}</span>
              <span :class="`status-badge status-${highlightedSoftware.software.status}`">{{ t(`common.status.${highlightedSoftware.software.status}`) }}</span>
              <span v-if="highlightedStableRelease" class="featured-version-badge">{{ highlightedStableRelease.version }}</span>
            </div>
            <h2 class="featured-title">{{ highlightedSoftware.software.title }}</h2>
            <p class="featured-desc">{{ highlightedSoftware.software.desc }}</p>

            <div class="flex flex-wrap gap-4 mt-8">
              <a
                v-if="highlightedStableRelease?.htmlFolderPath"
                :href="highlightedStableRelease.htmlFolderPath"
                target="_blank"
                class="featured-btn-play"
              >{{ t('home.playInBrowser') }}</a>
              <RouterLink :to="`/catalog/${highlightedSoftware.software.name}`" class="featured-btn-secondary">
                {{ t('home.viewProjectDetails') }}
              </RouterLink>
            </div>
          </div>
        </div>
      </section>

      <!-- Latest YouTube Video -->
      <section class="mb-16">
        <div class="yt-featured-wrapper group">
          <div class="yt-glow"></div>

          <div class="yt-header-area">
            <div class="flex items-center gap-3">
              <div class="yt-status-blob">
                <div class="yt-status-dot"></div>
              </div>
              <span class="yt-label-text">{{ t('home.latestFromYoutube') }}</span>
            </div>
            <a href="https://www.youtube.com/@teletypegames" target="_blank" class="yt-channel-link">
              {{ t('home.visitChannel') }}
            </a>
          </div>

          <div class="yt-content-grid">
            <div class="yt-player-container">
              <div class="player-wrap relative w-full aspect-video">
                <div v-if="ytState === 'loading'" class="state-overlay absolute inset-0 flex items-center justify-center bg-slate-950">
                  <div class="w-10 h-10 border-4 border-white/5 border-t-indigo-500 rounded-full animate-spin"></div>
                </div>
                <div v-else-if="ytState === 'error'" class="state-overlay absolute inset-0 flex items-center justify-center bg-slate-950 flex-col gap-2">
                  <div class="text-xl">⚠️</div>
                  <div class="text-[11px] text-slate-500 text-center px-4 font-bold uppercase tracking-tighter">{{ ytError }}</div>
                </div>
                <div v-else-if="ytState === 'no-config'" class="state-overlay absolute inset-0 flex items-center justify-center bg-slate-950">
                  <div class="text-slate-500 text-xs">{{ t('common.missingApiConfig') }}</div>
                </div>
                <iframe
                  v-else-if="ytVideoId"
                  :src="`https://www.youtube.com/embed/${ytVideoId}?autoplay=0&rel=0&modestbranding=1`"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowfullscreen
                  class="w-full h-full border-none block"
                ></iframe>
              </div>
            </div>

            <div v-if="ytVideoId" class="yt-info-sidebar">
              <div class="mb-auto">
                <span class="yt-new-tag">{{ t('home.newRelease') }}</span>
                <h3 class="yt-video-title">{{ ytTitle }}</h3>
                <div class="yt-stats-row">
                  <span v-if="ytPublishDate">📅 {{ ytPublishDate }}</span>
                  <span v-if="ytViewCount">👁 {{ ytViewCount }}</span>
                </div>
              </div>

              <div class="mt-6">
                <a :href="`https://www.youtube.com/watch?v=${ytVideoId}`" target="_blank" class="yt-play-button">
                  <span class="text-xl">▶</span> {{ t('home.watchOnYoutube') }}
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Navigation Grid -->
      <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="nav-card group card-interactive">
          <div class="nav-card-icon bg-purple-50 group-hover:bg-purple-100">
            <span class="text-3xl">🎮</span>
          </div>
          <h2 class="nav-card-title">{{ t('home.catalog.title') }}</h2>
          <p class="nav-card-desc">{{ t('home.catalog.desc') }}</p>
          <RouterLink to="/catalog" class="btn-primary bg-purple-600 hover:bg-purple-700 text-white hover:shadow-purple-200">
            {{ t('home.catalog.btn') }}
          </RouterLink>
        </div>

        <div class="nav-card group card-interactive">
          <div class="nav-card-icon bg-green-50 group-hover:bg-green-100">
            <span class="text-3xl">📚</span>
          </div>
          <h2 class="nav-card-title">{{ t('home.wiki.title') }}</h2>
          <p class="nav-card-desc">{{ t('home.wiki.desc') }}</p>
          <a href="https://wiki.teletype.hu" target="_blank" rel="noopener noreferrer" class="btn-primary bg-green-600 hover:bg-green-700 text-white hover:shadow-green-200">
            {{ t('home.wiki.btn') }}
          </a>
        </div>

        <div class="nav-card group card-interactive">
          <div class="nav-card-icon bg-slate-50 group-hover:bg-slate-100">
            <span class="text-3xl">💻</span>
          </div>
          <h2 class="nav-card-title">{{ t('home.git.title') }}</h2>
          <p class="nav-card-desc">{{ t('home.git.desc') }}</p>
          <a href="https://git.teletype.hu" target="_blank" rel="noopener noreferrer" class="btn-primary bg-slate-800 hover:bg-slate-900 text-white hover:shadow-slate-200">
            {{ t('home.git.btn') }}
          </a>
        </div>

        <div class="nav-card group card-interactive">
          <div class="nav-card-icon bg-red-50 group-hover:bg-red-100">
            <span class="text-3xl">📺</span>
          </div>
          <h2 class="nav-card-title">{{ t('home.youtube.title') }}</h2>
          <p class="nav-card-desc">{{ t('home.youtube.desc') }}</p>
          <a href="https://www.youtube.com/@teletypegames" target="_blank" rel="noopener noreferrer" class="btn-primary bg-red-600 hover:bg-red-700 text-white hover:shadow-red-200">
            {{ t('home.youtube.btn') }}
          </a>
        </div>
      </section>

      <!-- AI Content Notice -->
      <div class="mb-12 mt-12 bg-white rounded-2xl border border-indigo-100 p-6 shadow-sm flex items-center gap-4">
        <div class="w-12 h-12 rounded-full bg-indigo-50 flex items-center justify-center text-2xl flex-shrink-0">🤖</div>
        <div class="flex-grow text-slate-600 text-sm md:text-base italic">
          <strong>Note:</strong> {{ t('home.note') }}
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { storeToRefs } from 'pinia'
import { RouterLink } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useEventStore } from '../../stores/event.store'
import { useSoftwareStore } from '../../stores/software.store'
import { useYoutubeStore } from '../../stores/youtube.store'

const { t } = useI18n()

const eventStore = useEventStore()
const { nextEvent, followingEvents, countdownText } = storeToRefs(eventStore)

const softwareStore = useSoftwareStore()
const { highlighted: highlightedSoftware, highlightedStableRelease } = storeToRefs(softwareStore)

const ytStore = useYoutubeStore()
const { state: ytState, videoId: ytVideoId, title: ytTitle, publishDate: ytPublishDate, viewCount: ytViewCount, error: ytError } = storeToRefs(ytStore)

onMounted(() => {
  eventStore.fetch()
  softwareStore.fetchHighlighted()
  ytStore.fetchLatest()
})

onUnmounted(() => eventStore.cleanup())
</script>

<style scoped>
.home-container {
  @apply bg-gray-50 min-h-screen pb-20;
}
.home-header-decor {
  @apply absolute inset-0 opacity-30;
}

/* Featured Card */
.featured-card {
  @apply relative overflow-hidden bg-gradient-to-br from-indigo-900 to-slate-900 rounded-3xl shadow-2xl flex flex-col md:flex-row min-h-[400px];
}
.featured-content {
  @apply p-8 md:p-12 flex flex-col justify-center flex-1 z-10;
}
.featured-badge {
  @apply px-3 py-1 bg-indigo-500/20 text-indigo-300 border border-indigo-400/30 rounded-full text-xs font-bold uppercase tracking-wider;
}
.featured-title {
  @apply text-4xl md:text-5xl font-black text-white mb-6;
}
.featured-desc {
  @apply text-indigo-100/80 text-lg leading-relaxed max-w-xl;
}
.featured-btn-play {
  @apply px-8 py-4 bg-white text-indigo-900 font-bold rounded-xl transition-all hover:scale-105 hover:shadow-xl hover:shadow-indigo-500/20 active:scale-95;
}
.featured-btn-secondary {
  @apply px-8 py-4 bg-indigo-500/10 text-white border border-indigo-400/30 font-bold rounded-xl transition-all hover:bg-indigo-500/20;
}
.featured-image-panel {
  @apply flex-shrink-0 flex items-center justify-center p-6 md:p-8;
}
.featured-image {
  @apply max-h-48 w-auto object-contain border-4 border-white shadow-xl opacity-90 group-hover:opacity-100 transition-opacity;
}
.featured-version-badge {
  @apply px-2 py-0.5 rounded text-[10px] font-bold bg-white/10 text-white/70 border border-white/20;
}

/* Status Badges */
.status-badge {
  @apply px-2 py-0.5 rounded text-[10px] font-bold uppercase;
}
.status-released { @apply bg-green-500/20 text-green-300 border border-green-500/30; }
.status-demo { @apply bg-blue-500/20 text-blue-300 border border-blue-500/30; }
.status-development { @apply bg-yellow-500/20 text-yellow-300 border border-yellow-500/30; }
.status-archived { @apply bg-gray-500/20 text-gray-300 border border-gray-500/30; }

/* Countdown Card */
.countdown-card {
  @apply bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100 p-8 md:p-12 text-center transition-all duration-300;
}
.countdown-event-name {
  @apply text-2xl font-bold text-gray-400 uppercase tracking-widest mb-2;
}
.countdown-timer {
  @apply text-5xl md:text-7xl font-mono font-black text-transparent bg-clip-text bg-gradient-to-r from-violet-600 to-fuchsia-600 my-6;
}
.countdown-date {
  @apply text-gray-500 text-lg;
}
.upcoming-events-section {
  @apply mt-12 pt-12 border-t border-gray-100 text-left max-w-2xl mx-auto;
}
.upcoming-events-title {
  @apply text-xl font-bold text-gray-900 mb-6;
}
.upcoming-event-item {
  @apply flex items-center justify-between p-4 bg-gray-50 rounded-xl border border-gray-100;
}

/* Nav Cards */
.nav-card {
  @apply flex flex-col h-full;
}
.nav-card-icon {
  @apply w-14 h-14 rounded-xl flex items-center justify-center mb-6 transition-colors;
}
.nav-card-title {
  @apply text-2xl font-bold text-gray-900 mb-3;
}
.nav-card-desc {
  @apply text-gray-600 mb-6 flex-grow leading-relaxed;
}

/* YouTube Featured Wrapper */
.yt-featured-wrapper {
  @apply relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-900 to-indigo-950 rounded-3xl shadow-2xl border border-slate-800 p-6 md:p-8;
}
.yt-glow {
  @apply absolute -top-24 -right-24 w-96 h-96 bg-indigo-500/10 rounded-full blur-[100px] pointer-events-none;
}
.yt-header-area {
  @apply flex items-center justify-between mb-6 relative z-10;
}
.yt-status-blob {
  @apply w-3 h-3 bg-red-500/20 rounded-full flex items-center justify-center;
}
.yt-status-dot {
  @apply w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse;
}
.yt-label-text {
  @apply text-xs font-bold uppercase tracking-widest text-slate-400;
}
.yt-channel-link {
  @apply text-xs font-semibold text-indigo-400 hover:text-indigo-300 transition-colors;
}
.yt-content-grid {
  @apply flex flex-col lg:flex-row gap-8 relative z-10;
}
.yt-player-container {
  @apply flex-[1.6] overflow-hidden rounded-2xl border border-white/5 shadow-inner bg-black;
}
.yt-info-sidebar {
  @apply flex-1 flex flex-col justify-center;
}
.yt-new-tag {
  @apply inline-block px-2 py-1 bg-red-500/10 text-red-400 border border-red-500/20 rounded-md text-[10px] font-black uppercase tracking-tighter mb-4;
}
.yt-video-title {
  @apply text-2xl font-black text-white mb-4 leading-tight group-hover:text-indigo-200 transition-colors;
}
.yt-stats-row {
  @apply flex gap-4 text-sm text-slate-400 font-medium;
}
.yt-play-button {
  @apply flex items-center justify-center gap-2 w-full py-4 bg-white text-slate-900 font-black rounded-xl transition-all hover:scale-[1.02] hover:bg-indigo-50 active:scale-95 shadow-xl;
}
</style>
