<script setup>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { contentApi } from "../api/content";
import { tenantApi } from "../api/tenant";
import { tenantPath } from "../utils/tenant";

const route = useRoute();
const tenantRoute = (path) => tenantPath(path, route);
const contents = ref([]);
const bannerItems = ref([]);
const trendingItems = ref([]);
const recommendedCreators = ref([]);
const matchedCreators = ref([]);
const searchKeyword = ref("");
const loading = ref(true);
const page = ref(1);
const hasMore = ref(false);
const activeBannerIndex = ref(0);

const fetchData = async () => {
  loading.value = true;
  try {
    const [bannerRes, trendingRes, creatorsRes, feedRes] = await Promise.all([
      contentApi.list({ is_pinned: true, limit: 5 }),
      contentApi.list({ sort: "hot", limit: 3 }),
      tenantApi.list({ limit: 5 }),
      contentApi.list({ page: 1, limit: 10, sort: "latest" }),
    ]);

    if (bannerRes.items && bannerRes.items.length > 0) {
      bannerItems.value = bannerRes.items;
    } else if (feedRes.items && feedRes.items.length > 0) {
      bannerItems.value = feedRes.items.slice(0, 5);
    }

    trendingItems.value = trendingRes.items || [];
    recommendedCreators.value = creatorsRes.items || [];

    contents.value = feedRes.items || [];
    hasMore.value = feedRes.total > contents.value.length;
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
};

const handleSearch = async () => {
  page.value = 1;
  loading.value = true;
  matchedCreators.value = [];
  try {
    const promises = [
      contentApi.list({ page: 1, limit: 10, keyword: searchKeyword.value }),
    ];
    if (searchKeyword.value) {
      promises.push(tenantApi.list({ keyword: searchKeyword.value, limit: 5 }));
    }

    const results = await Promise.all(promises);
    const contentRes = results[0];

    contents.value = contentRes.items || [];
    hasMore.value = contentRes.total > contents.value.length;

    if (results[1]) {
      matchedCreators.value = results[1].items || [];
    }
  } finally {
    loading.value = false;
  }
};

const loadMore = async () => {
  page.value++;
  const res = await contentApi.list({
    page: page.value,
    limit: 10,
    keyword: searchKeyword.value,
  });
  if (res.items) {
    contents.value.push(...res.items);
    hasMore.value = res.total > contents.value.length;
  }
};

onMounted(fetchData);
</script>

<template>
  <div class="mx-auto max-w-screen-xl py-8">
    <!-- Hero Banner -->
    <div
      class="relative w-full h-[400px] rounded-2xl overflow-hidden bg-slate-900 mb-8 group"
      v-if="bannerItems.length > 0"
    >
      <div
        v-for="(item, index) in bannerItems"
        :key="item.id"
        class="absolute inset-0 transition-opacity duration-700"
        :class="{
          'opacity-100 z-10': activeBannerIndex === index,
          'opacity-0 z-0': activeBannerIndex !== index,
        }"
      >
        <img
          :src="item.cover"
          class="w-full h-full object-cover opacity-80"
          alt="Banner"
        />
        <div
          class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"
        ></div>
        <div class="absolute bottom-0 left-0 p-10 max-w-2xl text-white">
          <div
            class="inline-block px-3 py-1 bg-red-600 text-white text-xs font-bold rounded mb-3"
          >
            置顶推荐
          </div>
          <h2
            class="text-4xl font-bold mb-4 leading-tight cursor-pointer hover:underline"
            @click="$router.push(tenantRoute(`/contents/${item.id}`))"
          >
            {{ item.title }}
          </h2>
          <p class="text-lg text-slate-200 line-clamp-2">
            {{ item.description || item.title }}
          </p>
        </div>
      </div>

      <!-- Arrows -->
      <button
        @click="
          activeBannerIndex =
            (activeBannerIndex - 1 + bannerItems.length) % bannerItems.length
        "
        class="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-black/30 hover:bg-black/50 text-white rounded-full flex items-center justify-center backdrop-blur-sm transition-all z-20"
      >
        <i class="pi pi-chevron-left text-xl"></i>
      </button>
      <button
        @click="
          activeBannerIndex = (activeBannerIndex + 1) % bannerItems.length
        "
        class="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-black/30 hover:bg-black/50 text-white rounded-full flex items-center justify-center backdrop-blur-sm transition-all z-20"
      >
        <i class="pi pi-chevron-right text-xl"></i>
      </button>

      <!-- Indicators -->
      <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-20">
        <span
          v-for="(item, index) in bannerItems"
          :key="index"
          class="w-2 h-2 rounded-full cursor-pointer transition-colors"
          :class="activeBannerIndex === index ? 'bg-white' : 'bg-white/50'"
          @click="activeBannerIndex = index"
        ></span>
      </div>
    </div>

    <!-- Filter Bar -->
    <div class="mb-8">
      <div
        class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6 border-b border-slate-200 pb-4"
      >
        <div class="flex items-center gap-8">
          <button
            class="text-lg font-bold text-primary-600 border-b-2 border-primary-600 -mb-4.5 pb-4 px-2"
          >
            推荐
          </button>
          <button
            class="text-lg font-medium text-slate-500 hover:text-slate-800 -mb-4.5 pb-4 px-2 transition-colors"
          >
            最新
          </button>
          <button
            class="text-lg font-medium text-slate-500 hover:text-slate-800 -mb-4.5 pb-4 px-2 transition-colors"
          >
            热门
          </button>
        </div>

        <!-- Global Search -->
        <div class="relative">
          <i
            class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
          ></i>
          <input
            type="text"
            v-model="searchKeyword"
            @keyup.enter="handleSearch"
            placeholder="搜索全站内容..."
            class="h-10 pl-10 pr-4 rounded-full border border-slate-200 bg-slate-50 text-sm focus:bg-white focus:border-primary-500 focus:outline-none w-full md:w-64 transition-all"
          />
        </div>
      </div>
      <!-- Tags -->
      <div class="flex flex-wrap gap-3">
        <button
          class="px-4 py-1.5 rounded-full bg-slate-900 text-white text-sm font-medium"
        >
          全部
        </button>
        <button
          class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors"
        >
          京剧
        </button>
        <button
          class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors"
        >
          昆曲
        </button>
        <button
          class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors"
        >
          越剧
        </button>
        <button
          class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors"
        >
          名家名段
        </button>
        <button
          class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors"
        >
          戏曲教学
        </button>
      </div>
    </div>

    <!-- Main Layout: Grid 9:3 -->
    <div class="grid grid-cols-12 gap-8">
      <!-- Main Feed (Left 9) -->
      <div class="col-span-12 lg:col-span-8 xl:col-span-9 space-y-6">
        <!-- Matched Creators (Search Result) -->
        <div
          v-if="searchKeyword && matchedCreators.length > 0"
          class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6"
        >
          <h3 class="font-bold text-slate-900 mb-4">相关频道</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div
              v-for="creator in matchedCreators"
              :key="creator.id"
              class="flex items-center gap-3 p-3 rounded-xl hover:bg-slate-50 transition-colors cursor-pointer border border-transparent hover:border-slate-200"
              @click="$router.push(tenantRoute(`/t/${creator.id}`))"
            >
              <img
                :src="
                  creator.avatar ||
                  `https://api.dicebear.com/7.x/avataaars/svg?seed=${creator.id}`
                "
                class="w-12 h-12 rounded-full border border-slate-100"
              />
              <div class="flex-1 min-w-0">
                <div class="font-bold text-slate-900 truncate">
                  {{ creator.name }}
                </div>
                <div class="text-xs text-slate-500 truncate">
                  {{ creator.bio || "暂无简介" }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <router-link
          v-for="item in contents"
          :key="item.id"
          :to="tenantRoute(`/contents/${item.id}`)"
          class="block bg-white rounded-2xl shadow-sm border border-slate-100 p-6 hover:shadow-xl hover:border-primary-100 transition-all duration-300 group cursor-pointer active:scale-[0.99]"
        >
          <div class="flex gap-8">
            <div class="flex-1 min-w-0 flex flex-col">
              <div class="flex items-center gap-3 mb-3">
                <span
                  v-if="item.price === 0"
                  class="px-2 py-0.5 rounded text-xs font-bold bg-green-500 text-white"
                  >免费</span
                >
                <span
                  v-else
                  class="px-2 py-0.5 rounded text-xs font-bold bg-red-600 text-white"
                  >付费</span
                >
                <span
                  class="text-xs font-bold text-slate-700 bg-slate-50 border border-slate-100 px-2 py-0.5 rounded-full"
                  >{{ item.genre }}</span
                >
              </div>
              <h3
                class="text-xl font-bold text-slate-900 mb-3 leading-snug group-hover:text-primary-600 transition-colors"
              >
                {{ item.title }}
              </h3>
              <p
                class="text-base text-slate-500 line-clamp-2 mb-6 leading-relaxed"
              >
                {{ item.description || item.title }}
              </p>
              <div class="mt-auto flex items-center justify-between">
                <div class="flex items-center gap-3 text-sm text-slate-500">
                  <img
                    :src="
                      item.author_avatar ||
                      'https://api.dicebear.com/7.x/avataaars/svg?seed=' +
                        item.author_id
                    "
                    class="w-7 h-7 rounded-full ring-2 ring-white"
                  />
                  <span class="font-medium text-slate-700">{{
                    item.author_name || "Unknown"
                  }}</span>
                  <span class="text-slate-300">|</span>
                  <span>{{ item.create_time || "刚刚" }}</span>
                </div>
                <div class="flex items-center gap-4">
                  <span class="text-sm text-slate-400 font-medium"
                    ><i class="pi pi-eye mr-1"></i> {{ item.views }}</span
                  >
                  <span class="text-xl font-bold text-red-600"
                    >¥ {{ item.price }}</span
                  >
                </div>
              </div>
            </div>
            <div
              v-if="item.cover"
              class="w-[280px] h-[157px] flex-shrink-0 rounded-xl overflow-hidden relative bg-slate-100 hidden sm:block shadow-inner"
            >
              <img
                :src="item.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-black/0 transition-colors"
              ></div>
              <div class="absolute inset-0 flex items-center justify-center">
                <i
                  class="pi pi-play-circle text-5xl text-white opacity-0 group-hover:opacity-100 transition-all scale-75 group-hover:scale-100 drop-shadow-lg"
                ></i>
              </div>
            </div>
          </div>
        </router-link>

        <!-- Load More -->
        <div class="pt-4 text-center" v-if="hasMore">
          <button
            @click="loadMore"
            :disabled="loading"
            class="px-8 py-3 bg-white border border-slate-200 rounded-full text-slate-600 hover:bg-slate-50 hover:text-primary-600 font-medium transition-all shadow-sm disabled:opacity-50"
          >
            <span v-if="loading">加载中...</span>
            <span v-else>点击加载更多内容</span>
          </button>
        </div>
      </div>

      <!-- Sidebar (Right 3) -->
      <div class="hidden lg:block lg:col-span-4 xl:col-span-3 space-y-6">
        <!-- Announcement -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
          <h3 class="font-bold text-slate-900 mb-4 flex items-center gap-2">
            <i class="pi pi-megaphone text-orange-500"></i> 公告
          </h3>
          <ul class="space-y-3 text-sm text-slate-600">
            <li class="line-clamp-1 hover:text-primary-600 cursor-pointer">
              • 关于调整创作者收益结算周期的通知
            </li>
            <li class="line-clamp-1 hover:text-primary-600 cursor-pointer">
              • “国粹传承”戏曲短视频大赛开启！
            </li>
            <li class="line-clamp-1 hover:text-primary-600 cursor-pointer">
              • 平台系统维护升级公告 (12.30)
            </li>
          </ul>
        </div>

        <!-- Recommended Tenants -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
          <h3 class="font-bold text-slate-900 mb-4">推荐名家</h3>
          <div class="space-y-4">
            <div
              v-for="creator in recommendedCreators"
              :key="creator.id"
              class="flex items-center gap-3"
            >
              <img
                :src="
                  creator.avatar ||
                  `https://api.dicebear.com/7.x/avataaars/svg?seed=${creator.id}`
                "
                class="w-10 h-10 rounded-full cursor-pointer"
                @click="$router.push(tenantRoute(`/t/${creator.id}`))"
              />
              <div class="flex-1 min-w-0">
                <div
                  class="font-bold text-slate-900 text-sm truncate hover:text-primary-600 cursor-pointer"
                  @click="$router.push(tenantRoute(`/t/${creator.id}`))"
                >
                  {{ creator.name }}
                </div>
                <div class="text-xs text-slate-500 truncate">
                  粉丝 {{ creator.stats?.followers || 0 }}
                </div>
              </div>
              <button
                class="px-3 py-1 bg-primary-50 text-primary-600 text-xs font-bold rounded-full hover:bg-primary-100"
              >
                关注
              </button>
            </div>
            <div
              v-if="recommendedCreators.length === 0"
              class="text-center text-slate-400 text-sm"
            >
              暂无推荐
            </div>
          </div>
        </div>

        <!-- Trending List -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
          <h3 class="font-bold text-slate-900 mb-4 flex items-center gap-2">
            <i class="pi pi-chart-line text-red-500"></i> 本周热门
          </h3>
          <ul class="space-y-4">
            <li
              v-for="(item, index) in trendingItems"
              :key="item.id"
              class="flex gap-3 items-start"
            >
              <span
                class="font-bold italic text-lg w-4"
                :class="
                  index === 0
                    ? 'text-red-500'
                    : index === 1
                      ? 'text-orange-500'
                      : 'text-yellow-500'
                "
                >{{ index + 1 }}</span
              >
              <div class="flex-1">
                <h4
                  @click="$router.push(tenantRoute(`/contents/${item.id}`))"
                  class="text-sm font-medium text-slate-800 line-clamp-2 hover:text-primary-600 cursor-pointer"
                >
                  {{ item.title }}
                </h4>
                <span class="text-xs text-slate-400 mt-1 block"
                  >{{ item.views }} 阅读</span
                >
              </div>
            </li>
            <div
              v-if="trendingItems.length === 0"
              class="text-center text-slate-400 text-sm"
            >
              暂无热门
            </div>
          </ul>
        </div>

        <!-- Ad / Promo -->
        <div class="rounded-xl overflow-hidden shadow-sm">
          <img
            src="https://images.unsplash.com/photo-1557683316-973673baf926?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
            class="w-full h-40 object-cover"
          />
          <div class="bg-white p-3 flex justify-between items-center">
            <span
              class="text-xs text-slate-400 border border-slate-200 px-1 rounded"
              >广告</span
            >
            <span class="text-sm font-medium text-slate-700"
              >戏曲周边商城上线啦</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
