<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { tenantPath } from "../utils/tenant";

const route = useRoute();
const tenantRoute = (path) => tenantPath(path, route);
const topics = ref([
  {
    id: 1,
    title: "程派艺术赏析：幽咽婉转后的风骨",
    desc: "程砚秋先生创立的“程派”艺术，以其独特的发音技巧和深沉的情感表达著称。本专题精选《锁麟囊》、《荒山泪》等代表剧目，带您领略程腔的无穷魅力。",
    cover:
      "https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80",
    tag: "流派精选",
    date: "2025-01-01",
    count: 12,
  },
  {
    id: 2,
    title: "零基础戏曲身段教学：手眼身法步",
    desc: "戏曲表演讲究“四功五法”。本专题专为初学者打造，从最基础的云手、台步开始，由名家亲自示范，助您打好戏曲表演的基本功。",
    cover:
      "https://images.unsplash.com/photo-1533174072545-e8d4aa97edf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
    tag: "名家教学",
    date: "2024-12-28",
    count: 24,
  },
  {
    id: 3,
    title: "昆曲《牡丹亭》：跨越四百年的爱恋",
    desc: "“情不知所起，一往而深。” 汤显祖笔下的杜丽娘与柳梦梅，演绎了一段传颂千古的爱情神话。本专题汇集不同版本的高清全本实录。",
    cover:
      "https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
    tag: "经典剧目",
    date: "2024-12-15",
    count: 8,
  },
  {
    id: 4,
    title: "京剧打击乐：锣鼓经入门",
    desc: "锣鼓是戏曲的灵魂。本专题将带您认识单皮鼓、大锣、铙钹等打击乐器，解析常见的锣鼓经及其在表演中的作用。",
    cover:
      "https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
    tag: "器乐知识",
    date: "2024-12-10",
    count: 6,
  },
  {
    id: 5,
    title: "地方戏曲巡礼：秦腔的高亢与悲壮",
    desc: "秦腔是中国最古老的剧种之一，以其粗犷豪放的风格著称。让我们走进黄土高原，感受秦腔艺术的独特魅力。",
    cover:
      "https://images.unsplash.com/photo-1557683316-973673baf926?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
    tag: "地方戏曲",
    date: "2024-12-05",
    count: 15,
  },
]);
</script>

<template>
  <div class="mx-auto max-w-screen-xl py-8 min-h-screen px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between mb-8">
      <h1 class="text-2xl font-bold text-slate-900">精选专题</h1>
      <div class="text-sm text-slate-500">共 {{ topics.length }} 个专题</div>
    </div>

    <!-- 1. Hero Topic -->
    <div
      class="relative w-full h-[400px] rounded-2xl overflow-hidden mb-12 group cursor-pointer shadow-lg"
      @click="$router.push(tenantRoute(`/explore?topic=${topics[0].id}`))"
    >
      <img
        :src="topics[0].cover"
        class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
      />
      <div
        class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent"
      ></div>
      <div class="absolute bottom-0 left-0 p-10 max-w-3xl text-white">
        <div class="flex items-center gap-3 mb-4">
          <span
            class="px-3 py-1 bg-red-600 text-white text-xs font-bold rounded uppercase tracking-wider"
            >本周主打</span
          >
          <span class="text-sm font-medium opacity-80"
            ># {{ topics[0].tag }}</span
          >
        </div>
        <h2 class="text-4xl font-bold mb-4 leading-tight">
          {{ topics[0].title }}
        </h2>
        <p class="text-lg text-slate-200 line-clamp-2 mb-6 opacity-90">
          {{ topics[0].desc }}
        </p>
        <div class="flex items-center gap-4">
          <div class="flex -space-x-2">
            <img
              v-for="i in 3"
              :key="i"
              :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${topics[0].id + i}`"
              class="w-8 h-8 rounded-full border-2 border-white/20 bg-white/10 backdrop-blur-sm"
            />
          </div>
          <span class="text-sm font-medium"
            >收录 {{ topics[0].count }} 篇精选内容
            <i class="pi pi-arrow-right ml-1 text-xs"></i
          ></span>
        </div>
      </div>
    </div>

    <!-- 2. Masonry-like Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div
        v-for="(topic, idx) in topics.slice(1)"
        :key="topic.id"
        class="group bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden hover:shadow-xl transition-all cursor-pointer flex flex-col"
        :class="{ 'lg:col-span-2 flex-row': idx === 0 }"
        @click="$router.push(tenantRoute(`/explore?topic=${topic.id}`))"
      >
        <!-- Cover -->
        <div
          class="relative overflow-hidden"
          :class="idx === 0 ? 'w-1/2' : 'h-48'"
        >
          <img
            :src="topic.cover"
            class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
          />
          <div
            class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors"
          ></div>
          <div class="absolute top-4 left-4">
            <span
              class="px-2 py-1 bg-white/90 backdrop-blur text-slate-800 text-xs font-bold rounded shadow-sm"
              ># {{ topic.tag }}</span
            >
          </div>
        </div>

        <!-- Info -->
        <div
          class="p-6 flex flex-col flex-1"
          :class="idx === 0 ? 'w-1/2 justify-center' : ''"
        >
          <div
            class="flex items-center justify-between mb-3 text-xs text-slate-400"
          >
            <span>更新于 {{ topic.date }}</span>
            <span>{{ topic.count }} 篇内容</span>
          </div>
          <h3
            class="text-xl font-bold text-slate-900 mb-3 group-hover:text-primary-600 transition-colors line-clamp-2"
          >
            {{ topic.title }}
          </h3>
          <p
            class="text-slate-500 text-sm leading-relaxed line-clamp-2 mb-6 flex-1"
          >
            {{ topic.desc }}
          </p>

          <!-- Preview Thumbs (For large cards) -->
          <div v-if="idx === 0" class="flex gap-2 mt-auto">
            <div
              v-for="n in 3"
              :key="n"
              class="w-12 h-8 rounded bg-slate-100 overflow-hidden"
            >
              <img
                :src="`https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60`"
                class="w-full h-full object-cover opacity-80"
              />
            </div>
          </div>

          <!-- Footer (For small cards) -->
          <div
            v-else
            class="flex items-center justify-between pt-4 border-t border-slate-50 mt-auto"
          >
            <div class="flex -space-x-2">
              <img
                v-for="n in 2"
                :key="n"
                :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${topic.id + n}`"
                class="w-6 h-6 rounded-full border border-white bg-slate-50"
              />
            </div>
            <span
              class="text-primary-600 text-sm font-bold group-hover:translate-x-1 transition-transform"
              >浏览专题 <i class="pi pi-angle-right"></i
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
