<template>
  <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-8 items-start">
    
    <!-- Main Content (Left 9) -->
    <div class="lg:col-span-9 space-y-6">
       <!-- Article Body -->
       <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-8 md:p-12 relative overflow-hidden">
          <!-- Header -->
          <div class="mb-8 border-b border-slate-100 pb-8">
             <div class="flex items-start justify-between gap-4 mb-4">
                <h1 class="text-3xl md:text-4xl font-bold text-slate-900 leading-tight">
                   <span class="text-primary-600 mr-2 text-2xl align-middle">[{{ content.genre || '未分类' }}]</span>
                   {{ content.title }}
                </h1>
             </div>
             
             <!-- Opera Meta -->
             <div class="flex flex-wrap gap-3 mb-6" v-if="content.meta">
                <span v-if="content.meta.role" class="px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-sm font-bold">行当: {{ content.meta.role }}</span>
                <span v-if="content.meta.key" class="px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-sm font-bold">定调: {{ content.meta.key }}</span>
                <span v-if="content.meta.beat" class="px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-sm font-bold">板式: {{ content.meta.beat }}</span>
             </div>

             <!-- Author & Tools -->
             <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                   <img :src="content.author_avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${content.author_id}`" class="w-10 h-10 rounded-full border border-slate-200">
                   <div>
                      <div class="font-bold text-slate-900 text-sm">{{ content.author_name }} <i class="pi pi-check-circle text-blue-500 text-xs"></i></div>
                      <div class="text-xs text-slate-400">发布于 {{ content.create_time }}</div>
                   </div>
                </div>
                <div class="flex items-center gap-2">
                   <button @click="fontSize++" class="w-9 h-9 flex items-center justify-center rounded hover:bg-slate-100 text-slate-600" title="放大字体"><i class="pi pi-plus" style="font-size: 0.8rem"></i>A</button>
                   <button @click="fontSize--" class="w-9 h-9 flex items-center justify-center rounded hover:bg-slate-100 text-slate-600" title="缩小字体"><i class="pi pi-minus" style="font-size: 0.8rem"></i>A</button>
                   <div class="w-px h-4 bg-slate-200 mx-1"></div>
                   <button class="w-9 h-9 flex items-center justify-center rounded hover:bg-slate-100 text-slate-600"><i class="pi pi-share-alt"></i></button>
                   <button class="w-9 h-9 flex items-center justify-center rounded hover:bg-slate-100 text-slate-600"><i class="pi pi-bookmark"></i></button>
                </div>
             </div>
          </div>

          <!-- Content Render -->
          <div class="prose prose-slate max-w-none text-slate-800" :style="{ fontSize: fontSize + 'px' }">
             <!-- Video Player (Trial) -->
             <div class="not-prose mb-8 rounded-xl overflow-hidden bg-black relative group aspect-video" v-if="content.type === 'video'">
                <div class="absolute inset-0 flex items-center justify-center text-white" v-if="!isPlaying">
                   <button @click="isPlaying = true" class="w-16 h-16 bg-white/20 hover:bg-white/30 backdrop-blur rounded-full flex items-center justify-center transition-all">
                      <i class="pi pi-play text-3xl ml-1"></i>
                   </button>
                </div>
                <!-- Mock Video UI -->
                <div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent flex items-center gap-4 text-white">
                   <button class="text-white hover:text-primary-400"><i class="pi pi-play-circle text-2xl"></i></button>
                   <div class="flex-1 h-1.5 bg-white/30 rounded-full relative overflow-hidden group/bar cursor-pointer">
                      <!-- Trial Segment (Highlight) -->
                      <div class="absolute top-0 left-0 h-full bg-primary-500 w-[30%]"></div>
                      <!-- Locked Segment -->
                      <div class="absolute top-0 right-0 h-full bg-slate-500/50 w-[70%] flex items-center justify-center">
                         <i class="pi pi-lock text-[10px]"></i>
                      </div>
                   </div>
                   <span class="text-xs font-mono">01:30 / 05:00</span>
                </div>
                <!-- Paywall Overlay -->
                <div v-if="!content.is_purchased && content.price > 0" class="absolute inset-0 bg-black/80 backdrop-blur-sm flex flex-col items-center justify-center text-center p-8 z-20">
                   <h3 class="text-white text-xl font-bold mb-2">试看已结束</h3>
                   <p class="text-slate-300 text-sm mb-6">购买后可观看完整内容 (包含高清视频 + 完整剧本)</p>
                   <button class="px-8 py-3 bg-primary-600 text-white rounded-full font-bold hover:bg-primary-700 shadow-lg shadow-primary-900/50 transition-transform hover:scale-105 active:scale-95">
                      ¥ {{ content.price }} 立即解锁
                   </button>
                </div>
             </div>

             <div v-html="content.body"></div>

             <!-- Paywall Mask for Text -->
             <div class="relative mt-8 pt-20 pb-8 text-center" v-if="!content.is_purchased && content.price > 0">
                <div class="absolute inset-0 bg-gradient-to-b from-transparent via-white/90 to-white z-10"></div>
                <div class="relative z-20">
                   <button class="px-10 py-3.5 bg-primary-600 text-white rounded-full font-bold text-lg hover:bg-primary-700 shadow-xl shadow-primary-100 transition-transform hover:scale-105 active:scale-95 flex items-center gap-2 mx-auto">
                      <i class="pi pi-lock"></i> 购买解锁全文 ¥ {{ content.price }}
                   </button>
                   <p class="text-xs text-slate-400 mt-3">支持微信 / 支付宝</p>
                </div>
             </div>
          </div>
       </div>

       <!-- Comments Section -->
       <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-8">
          <div class="flex items-center justify-between mb-6">
             <h2 class="text-xl font-bold text-slate-900">全部评论 ({{ comments.length }})</h2>
          </div>
          
          <!-- ... Comment Input ... -->

          <div class="space-y-6">
             <div v-for="comment in comments" :key="comment.id" class="flex gap-4">
                <img :src="comment.user_avatar" class="w-10 h-10 rounded-full bg-slate-100">
                <div>
                   <div class="flex items-center gap-2 mb-1">
                      <span class="font-bold text-slate-900 text-sm">{{ comment.user_nickname }}</span>
                      <span class="text-xs text-slate-400">{{ comment.create_time }}</span>
                   </div>
                   <p class="text-slate-700 text-sm leading-relaxed mb-2">{{ comment.content }}</p>
                </div>
             </div>
          </div>
       </div>
    </div>

    <!-- Sidebar (Right 3) - Sticky -->
    <div class="lg:col-span-3 space-y-6 sticky top-24 h-fit">
       <!-- Author Card -->
       <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6 text-center">
          <div class="w-20 h-20 rounded-full border-4 border-slate-50 mx-auto -mt-10 mb-4 bg-white shadow-sm overflow-hidden">
             <img :src="content.author_avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${content.author_id}`" class="w-full h-full object-cover">
          </div>
          <h3 class="font-bold text-slate-900 text-lg">{{ content.author_name }}</h3>
          <div class="grid grid-cols-2 gap-3 mt-4">
             <button class="py-2 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 shadow-sm shadow-primary-200">关注</button>
             <button class="py-2 border border-slate-200 text-slate-700 rounded-lg font-bold hover:bg-slate-50">私信</button>
          </div>
       </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { contentApi } from '../../api/content';

const route = useRoute();
const fontSize = ref(18);
const isPlaying = ref(false);
const content = ref({});
const comments = ref([]);

onMounted(async () => {
   try {
      const res = await contentApi.get(route.params.id);
      content.value = res;
      // Fetch comments if needed
      // const cmts = await contentApi.listComments(route.params.id);
      // comments.value = cmts.items || [];
   } catch (e) {
      console.error(e);
   }
});
</script>