<template>
   <div>
      <!-- Cover & Header Info Merged -->
      <div class="relative h-[400px] bg-slate-900 overflow-hidden group">
         <!-- Background Image -->
         <img :src="tenant.cover"
            class="w-full h-full object-cover opacity-90 transition-transform duration-700 group-hover:scale-105">
         <!-- Gradient Overlay -->
         <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>

         <!-- Content Overlay -->
         <div class="absolute bottom-0 w-full z-10">
            <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 pb-8 flex flex-col md:flex-row items-end gap-8">
               <!-- Avatar -->
               <div
                  class="w-32 h-32 rounded-full border-4 border-white/20 shadow-2xl overflow-hidden flex-shrink-0 backdrop-blur-sm">
                  <img :src="tenant.avatar" class="w-full h-full object-cover">
               </div>

               <!-- Info -->
               <div class="flex-1 min-w-0 pb-2 text-white">
                  <div class="flex items-center gap-3 mb-2">
                     <h1 class="text-4xl font-bold text-white truncate max-w-[600px] drop-shadow-md"
                        :title="tenant.name">{{ tenant.name }}</h1>
                     <!-- Cert Badge -->
                     <i v-if="tenant.certType === 'personal'"
                        class="pi pi-check-circle text-yellow-400 text-2xl drop-shadow-sm" title="个人认证"></i>
                     <i v-else-if="tenant.certType === 'enterprise'"
                        class="pi pi-shield text-blue-400 text-2xl drop-shadow-sm" title="企业认证"></i>
                  </div>
                  <p class="text-lg text-slate-200 line-clamp-1 font-medium drop-shadow-sm">{{ tenant.bio }}</p>
               </div>

               <!-- Actions & Stats -->
               <div class="flex flex-col items-end gap-5 pb-2">
                  <div class="flex gap-3">
                     <button @click="toggleFollow"
                        class="h-11 w-32 rounded-full font-bold text-base transition-all flex items-center justify-center gap-2 backdrop-blur-md"
                        :class="isFollowing ? 'bg-white/10 text-white border border-white/20 hover:bg-white/20' : 'bg-primary-600 text-white hover:bg-primary-700 border border-transparent shadow-lg shadow-primary-900/30'">
                        <i class="pi" :class="isFollowing ? 'pi-check' : 'pi-plus'"></i>
                        {{ isFollowing ? '已关注' : '关注' }}
                     </button>
                     <button
                        class="h-11 px-6 border border-white/20 text-white rounded-full font-bold hover:bg-white/10 backdrop-blur-md transition-colors">私信</button>
                     <button
                        class="h-11 w-11 border border-white/20 text-white rounded-full flex items-center justify-center hover:bg-white/10 backdrop-blur-md transition-colors"><i
                           class="pi pi-ellipsis-h"></i></button>
                  </div>
                  <div class="flex gap-6 text-sm text-slate-300 font-medium">
                     <div><span class="font-bold text-white text-xl">1.2万</span> 关注</div>
                     <div><span class="font-bold text-white text-xl">458</span> 内容</div>
                     <div><span class="font-bold text-white text-xl">8.9k</span> 获赞</div>
                  </div>
               </div>
            </div>
         </div>
      </div>

      <!-- Sticky Nav -->
      <div class="sticky top-16 z-20 bg-white border-b border-slate-200 shadow-sm">
         <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 flex items-center justify-between h-14">
            <div class="flex gap-8 h-full">
               <button v-for="tab in tabs" :key="tab.value" @click="currentTab = tab.value"
                  class="h-full border-b-2 font-bold text-sm px-1 transition-colors relative top-[1px]"
                  :class="currentTab === tab.value ? 'border-primary-600 text-primary-600' : 'border-transparent text-slate-500 hover:text-slate-700'">
                  {{ tab.label }}
               </button>
            </div>

            <!-- In-Tenant Search -->
            <div class="relative group">
               <i
                  class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 group-hover:text-primary-500 transition-colors"></i>
               <input type="text" placeholder="搜素频道内容"
                  class="h-9 pl-9 pr-4 rounded-full bg-slate-100 border-none text-sm focus:bg-white focus:ring-2 focus:ring-primary-100 transition-all w-48 focus:w-64">
            </div>
         </div>
      </div>

      <!-- Content Area -->
      <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-8 min-h-[600px]">

         <!-- 1. Home Tab -->
         <div v-if="currentTab === 'home'" class="space-y-10">
            <!-- Featured (Pinned) -->
            <div class="relative h-[400px] rounded-2xl overflow-hidden group cursor-pointer">
               <img
                  src="https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80"
                  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/80 via-transparent to-transparent"></div>
               <div class="absolute top-4 left-4 px-2 py-1 bg-red-600 text-white text-xs font-bold rounded">置顶</div>
               <div class="absolute bottom-0 left-0 p-8 text-white w-full">
                  <div class="flex items-center justify-between">
                     <div>
                        <div class="text-sm font-bold opacity-80 mb-2">[京剧] 经典唱段合集</div>
                        <h2 class="text-3xl font-bold mb-2">程派《荒山泪》夜织选段：沉浸式视听体验</h2>
                     </div>
                     <div class="text-2xl font-bold text-amber-400">¥ 19.90</div>
                  </div>
               </div>
            </div>

            <!-- Latest -->
            <div>
               <h3 class="text-xl font-bold text-slate-900 mb-6 pl-4 border-l-4 border-primary-600">最新动态</h3>
               <div class="grid grid-cols-1 gap-6">
                  <div v-for="i in 5" :key="i"
                     class="bg-white rounded-xl border border-slate-100 p-5 flex gap-6 hover:shadow-md transition-shadow group cursor-pointer"
                     @click="$router.push(`/contents/${i}`)">
                     <div class="w-64 h-36 bg-slate-100 rounded-lg flex-shrink-0 overflow-hidden relative">
                        <img
                           :src="`https://images.unsplash.com/photo-1533174072545-e8d4aa97edf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60`"
                           class="w-full h-full object-cover">
                        <div class="absolute bottom-2 left-2 flex gap-1">
                           <span class="px-1.5 py-0.5 bg-black/60 text-white text-xs rounded flex items-center gap-1"><i
                                 class="pi pi-play-circle"></i> 12:40</span>
                        </div>
                        <span v-if="i === 2"
                           class="absolute top-2 right-2 px-1.5 py-0.5 bg-green-500 text-white text-xs font-bold rounded">限免</span>
                     </div>
                     <div class="flex-1 flex flex-col">
                        <div>
                           <h3
                              class="text-lg font-bold text-slate-900 mb-2 group-hover:text-primary-600 transition-colors line-clamp-1">
                              梅兰芳大剧院现场实录：2024 京剧名家演唱会</h3>
                           <p class="text-sm text-slate-500 line-clamp-3 leading-relaxed">
                              本场演出汇集了当今京剧界的老中青三代名家，精彩呈现了《四郎探母》、《红鬃烈马》等经典剧目的核心唱段。高清多机位拍摄，还原现场震撼效果...</p>
                        </div>
                        <div class="mt-auto pt-4 flex items-center justify-between">
                           <div class="text-xs text-slate-400">2小时前 · 1.2w 阅读</div>
                           <div class="text-lg font-bold text-red-600">¥ 9.90</div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>

         <!-- 4. About Tab -->
         <div v-if="currentTab === 'about'" class="max-w-3xl mx-auto">
            <div class="prose prose-slate prose-lg text-slate-700">
               <h2 class="font-bold text-2xl mb-6 pb-4 border-b border-slate-100">关于我们</h2>
               <p>梅派传人小林，师从著名京剧表演艺术家，深耕京剧艺术二十余年。致力于通过新媒体形式传播国粹文化，让更多年轻人爱上戏曲。</p>
               <p>本频道主要发布：</p>
               <ul>
                  <li>经典剧目高清实录</li>
                  <li>唱腔身段教学课程</li>
                  <li>戏曲文化深度解析</li>
               </ul>
               <div class="my-8">
                  <img
                     src="https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
                     class="rounded-xl w-full">
                  <p class="text-center text-sm text-slate-400 mt-2">2023年全国巡演剧照</p>
               </div>
               <h3>联系方式</h3>
               <p>商务合作：business@example.com (点击查看)</p>
            </div>
         </div>

      </div>

      <!-- Floating Share FAB -->
      <div class="fixed bottom-8 right-8 z-50">
         <button
            class="w-14 h-14 bg-slate-900 text-white rounded-full shadow-xl flex items-center justify-center hover:scale-110 transition-transform"
            title="分享频道">
            <i class="pi pi-share-alt text-xl"></i>
         </button>
      </div>
   </div>
</template>

<script setup>
import { useToast } from 'primevue/usetoast';
import { reactive, ref } from 'vue';

const toast = useToast();
const currentTab = ref('home');
const isFollowing = ref(false);

const tenant = reactive({
   name: '梅派传人小林',
   avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Master1',
   cover: 'https://images.unsplash.com/photo-1611454453122-7b02c6b58188?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80',
   bio: '专注京剧程派艺术传承与推广，分享戏曲之美。',
   certType: 'personal'
});

const tabs = [
   { label: '主页', value: 'home' },
   { label: '关于', value: 'about' }
];

const toggleFollow = () => {
   isFollowing.value = !isFollowing.value;
   if (isFollowing.value) {
      toast.add({ severity: 'success', summary: '关注成功', detail: '已开启更新提醒', life: 3000 });
   }
};
</script>