<script setup lang="ts">
import type { WebNovel } from '~/types'

const router = useRouter()

const featured = ref<WebNovel[]>([])
const trending = ref<WebNovel[]>([])
const recent = ref<WebNovel[]>([])
const isLoading = ref(true)
const currentFeaturedIndex = ref(0)

const nextFeatured = () => {
  if (featured.value.length > 0) {
    currentFeaturedIndex.value = (currentFeaturedIndex.value + 1) % featured.value.length
  }
}

const prevFeatured = () => {
  if (featured.value.length > 0) {
    currentFeaturedIndex.value = (currentFeaturedIndex.value - 1 + featured.value.length) % featured.value.length
  }
}

const currentFeatured = computed(() => featured.value[currentFeaturedIndex.value])

const loadNovels = async () => {
  try {
    // Load homepage configuration to get featured/trending/recent novel slugs
    const homepageConfig = await queryCollection('content').path('/novels/homepage').first()

    if (!homepageConfig) {
      console.error('Homepage configuration not found')
      return
    }

    console.log('Homepage config:', homepageConfig)

    // Collect all unique slugs from featured, trending, and recent
    const allSlugs = new Set<string>([
      ...(homepageConfig.meta.featured || []),
      ...(homepageConfig.meta.trending || []),
      ...(homepageConfig.meta.recent || [])
    ])

    console.log(`Querying ${allSlugs.size} unique novels`)

    // Create a map of slug -> novel for quick lookup
    const novelMap = new Map<string, WebNovel>()

    // Query only the novels we need
    for (const slug of allSlugs) {
      const item = await queryCollection('content').path(`/novels/${slug}`).first() as WebNovel | null

      if (item) {
        const novel: WebNovel = {
          id: slug,
          title: item.title || 'Unknown',
          author: item.meta.author || 'Unknown',
          description: item.description || item.meta.body?.text || '',
          cover: `/images/${slug}/cover.png`,
          status: item.meta.status || 'ongoing',
          genres: item.meta.genres || [],
          rating: item.meta.rating || 0,
          views: item.meta.views || 0,
          followers: item.meta.followers || 0,
          chapters: item.meta.chapters || 0,
          language: item.meta.language || 'English',
          tags: item.meta.tags || [],
          createdAt: item.createdAt || new Date().toISOString(),
          updatedAt: item.updatedAt || new Date().toISOString()
        }
        novelMap.set(slug, novel)
      }
    }

    console.log(`Loaded ${novelMap.size} novels from cache`)

    // Get featured novels using configured slugs
    featured.value = (homepageConfig.meta.featured || [])
      .map((slug: string) => novelMap.get(slug))
      .filter(Boolean)

    // Get trending novels using configured slugs
    trending.value = (homepageConfig.meta.trending || [])
      .map((slug: string) => novelMap.get(slug))
      .filter(Boolean)

    // Get recent novels using configured slugs
    recent.value = (homepageConfig.meta.recent || [])
      .map((slug: string) => novelMap.get(slug))
      .filter(Boolean)

    console.log('Featured:', featured.value.length, 'Trending:', trending.value.length, 'Recent:', recent.value.length)
  } catch (error) {
    console.error('Error loading novels:', error)
  } finally {
    isLoading.value = false
  }
}

onMounted(() => {
  loadNovels()
})
</script>

<template>
  <UDashboardPanel id="home">
    <template #header>
      <UDashboardNavbar title="WebNovel Platform" :ui="{ right: 'gap-3' }">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>

        <template #right>
          <!-- <UTooltip text="Search (Ctrl+K)" :shortcuts="['Ctrl', 'K']">
            <UButton
              icon="i-lucide-search"
              color="neutral"
              variant="ghost"
              square
              @click="$refs.search?.open()"
            />
          </UTooltip>

          <UButton
            icon="i-lucide-flame"
            color="primary"
            size="md"
            @click="router.push('/novels')"
          >
            Explore
          </UButton> -->
        </template>
      </UDashboardNavbar>
    </template>

    <template #body>
      <!-- Featured Hero Slider - Full Width -->
      <section v-if="!isLoading && currentFeatured" class="-m-4 md:-m-6 mb-0">
        <div class="relative h-[400px] md:h-[500px]">
          <!-- Background Image with Gradient Overlay -->
          <img
            :src="currentFeatured.cover"
            :alt="currentFeatured.title"
            class="absolute inset-0 w-full h-full object-cover"
          >
          <div class="absolute inset-0 bg-gradient-to-r from-black/90 via-black/70 to-transparent" />

          <!-- Content -->
          <div class="relative h-full flex items-center">
            <div class="container mx-auto px-4 md:px-8 max-w-2xl">
              <div class="space-y-4">
                <!-- Title -->
                <h1 class="text-3xl md:text-5xl font-bold text-white line-clamp-2">
                  {{ currentFeatured.title }}
                </h1>

                <!-- Genres -->
                <div class="flex flex-wrap gap-2">
                  <UBadge
                    v-for="genre in currentFeatured.genres?.slice(0, 3)"
                    :key="genre"
                    color="primary"
                    size="md"
                  >
                    {{ genre }}
                  </UBadge>
                </div>

                <!-- Description -->
                <p class="text-gray-200 text-sm md:text-base line-clamp-3 md:line-clamp-4">
                  {{ currentFeatured.description }}
                </p>

                <!-- Author and Stats -->
                <div class="flex flex-wrap items-center gap-4 text-sm text-gray-300">
                  <span class="font-medium">{{ typeof currentFeatured.author === 'string' ? currentFeatured.author : currentFeatured.author?.name }}</span>
                  <div class="flex items-center gap-1">
                    <UIcon name="i-lucide-star" class="size-4 text-yellow-400" />
                    <span>{{ (currentFeatured.rating || 0).toFixed(1) }}</span>
                  </div>
                  <div class="flex items-center gap-1">
                    <UIcon name="i-lucide-book" class="size-4" />
                    <span>{{ currentFeatured.chapters || 0 }} chapters</span>
                  </div>
                </div>

                <!-- Read Button -->
                <UButton
                  size="lg"
                  color="primary"
                  icon="i-lucide-book-open"
                  @click="router.push(`/novels/${currentFeatured.id}`)"
                >
                  Start Reading
                </UButton>
              </div>
            </div>
          </div>

          <!-- Navigation Arrows -->
          <button
            v-if="featured.length > 1"
            class="absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-2 rounded-full transition-colors"
            @click="prevFeatured"
          >
            <UIcon name="i-lucide-chevron-left" class="size-6" />
          </button>
          <button
            v-if="featured.length > 1"
            class="absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-2 rounded-full transition-colors"
            @click="nextFeatured"
          >
            <UIcon name="i-lucide-chevron-right" class="size-6" />
          </button>

          <!-- Page Indicator -->
          <div
            v-if="featured.length > 1"
            class="absolute bottom-4 right-4 bg-black/50 text-white px-3 py-1 rounded text-sm font-medium"
          >
            NO. {{ currentFeaturedIndex + 1 }} / {{ featured.length }}
          </div>
        </div>
      </section>

      <!-- Featured Skeleton -->
      <section v-if="isLoading" class="-m-4 md:-m-6 mb-0">
        <USkeleton class="h-[400px] md:h-[500px]" />
      </section>

      <UContainer class="space-y-8 py-8">
        <!-- Trending Section -->
        <section class="space-y-3">
          <div class="flex items-center justify-between">
            <h2 class="text-xl md:text-2xl font-bold">
              Trending Now
            </h2>
            <UButton
              variant="ghost"
              trailing-icon="i-lucide-arrow-right"
              size="sm"
              @click="router.push('/titles/search')"
            >
              More
            </UButton>
          </div>

          <div v-if="isLoading" class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
            <USkeleton v-for="i in 6" :key="i" class="h-48 rounded-lg" />
          </div>

          <div v-else class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
            <div
              v-for="novel in trending.slice(0, 6)"
              :key="novel.id"
              class="cursor-pointer group"
              @click="router.push(`/novels/${novel.id}`)"
            >
              <div class="relative overflow-hidden rounded-lg">
                <img
                  :src="novel.cover"
                  :alt="novel.title"
                  class="w-full aspect-[2/3] object-cover group-hover:scale-105 transition-transform duration-300"
                >
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
                <div class="absolute bottom-0 left-0 right-0 p-2">
                  <h3 class="font-semibold text-white text-xs md:text-sm line-clamp-2">
                    {{ novel.title }}
                  </h3>
                  <div class="flex items-center gap-1 mt-1">
                    <UIcon name="i-lucide-star" class="size-3 text-yellow-400" />
                    <span class="text-xs text-white">{{ (novel.rating || 0).toFixed(1) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- Recently Updated Section -->
        <section class="space-y-3">
          <div class="flex items-center justify-between">
            <h2 class="text-xl md:text-2xl font-bold">
              Recently Updated
            </h2>
            <UButton
              variant="ghost"
              trailing-icon="i-lucide-arrow-right"
              size="sm"
              @click="router.push('/titles/search')"
            >
              More
            </UButton>
          </div>

          <div v-if="isLoading" class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
            <USkeleton v-for="i in 6" :key="i" class="h-48 rounded-lg" />
          </div>

          <div v-else class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
            <div
              v-for="novel in recent.slice(0, 6)"
              :key="novel.id"
              class="cursor-pointer group"
              @click="router.push(`/novels/${novel.id}`)"
            >
              <div class="relative overflow-hidden rounded-lg">
                <img
                  :src="novel.cover"
                  :alt="novel.title"
                  class="w-full aspect-[2/3] object-cover group-hover:scale-105 transition-transform duration-300"
                >
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
                <div class="absolute bottom-0 left-0 right-0 p-2">
                  <h3 class="font-semibold text-white text-xs md:text-sm line-clamp-2">
                    {{ novel.title }}
                  </h3>
                  <p class="text-xs text-gray-300 mt-1">
                    {{ novel.chapters || 0 }} ch
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- CTA Section -->
        <section class="bg-gradient-to-r from-primary-500 to-primary-600 rounded-lg p-8 text-center text-white">
          <h3 class="text-2xl font-bold mb-2">
            Discover Your Next Favorite Novel
          </h3>
          <p class="mb-4 opacity-90">
            Explore thousands of web novels from talented authors
          </p>
          <UButton
            color="neutral"
            size="lg"
            icon="i-lucide-arrow-right"
            @click="router.push('/titles/search')"
          >
            Browse Now
          </UButton>
        </section>
      </UContainer>
    </template>
  </UDashboardPanel>
</template>
