<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'

const router = useRouter()
const route = useRoute()

// 响应式数据
const isExpanded = ref(false)
const loading = ref(false)
const dramaData = ref({
  title: '',
  mix_name: '',
  mix_id: '',
  classification_type: '',  // 女频/玄等
  episodes: '',
  release_date: '',  // 上线日期
  cover_image_url: '',
  desc: '',  // 剧情介绍（使用desc字段）
  Copyright_field: '',  // 版权方
  Manufacturing_Field: '',  // 承制方
  comments_summary: ''  // 用户评论总结
})

// API基础URL
const API_BASE_URL = 'http://localhost:8443/api'  // 本地服务器

// 返回上一页（直接返回首页）
const goBack = () => {
  router.push('/')
}

// 切换展开/收起
const toggleExpanded = () => {
  isExpanded.value = !isExpanded.value
}

// 处理带【】格式的评论总结，返回HTML
const formatCommentsSummary = (text, spacing = 1) => {
  if (!text) return ''
  
  // 简单方法：将【】加粗，然后在每个【前面加间距
  let result = text.replace(/【([^】]+)】/g, '<strong>【$1】</strong>')
  
  // 使用margin-top来精确控制间距（支持小数）
  const spacingPx = spacing * 10 // spacing=1.5 -> 15px
  
  // 在每个【前面添加带margin的div（除了第一个）
  let isFirst = true
  result = result.replace(/(<strong>【)/g, (match) => {
    if (isFirst) {
      isFirst = false
      return match
    }
    return `<div style="margin-top: ${spacingPx}px">${match}`
  })
  
  // 为每个添加了开始div的地方添加结束div
  const parts = result.split(/(<div style="margin-top: \d+px">)/)
  let finalResult = ''
  for (let i = 0; i < parts.length; i++) {
    if (parts[i].includes('margin-top')) {
      finalResult += parts[i]
      if (i + 1 < parts.length) {
        finalResult += parts[i + 1] + '</div>'
        i++ // 跳过下一个part
      }
    } else {
      finalResult += parts[i]
    }
  }
  
  return finalResult
}

// 获取短剧详细信息
const fetchDramaDetail = async (dramaId) => {
  loading.value = true
  try {
    const response = await axios.get(`${API_BASE_URL}/rank/drama/${dramaId}`)
    
    if (response.data.success) {
      const data = response.data.data
      dramaData.value = {
        title: data.mix_name || data.title || '',
        mix_name: data.mix_name || '',
        mix_id: data.mix_id || '',
        classification_type: data.classification_type || '',
        episodes: data.updated_to_episode ? `${data.updated_to_episode}集` : '',
        release_date: data.release_date || '',
        cover_image_url: data.cover_image_url || '',
        desc: data.desc || '',  // 使用desc字段作为剧情介绍
        Copyright_field: data.Copyright_field || '',
        Manufacturing_Field: data.Manufacturing_Field || '',
        comments_summary: data.comments_summary || '',
        series_author: data.series_author || ''
      }
      
      // 如果URL中有hash参数，滚动到对应位置
      if (route.hash) {
        await nextTick()
        const element = document.querySelector(route.hash)
        if (element) {
          element.scrollIntoView({ behavior: 'smooth', block: 'start' })
        }
      }
    } else {
      console.error('获取短剧详情失败:', response.data.message)
    }
  } catch (error) {
    console.error('API调用失败:', error)
  } finally {
    loading.value = false
  }
}

// 跳转到认领页面
const goToClaim = (type) => {
  // type: 'copyright' 或 'manufacturing'
  const dramaId = route.params.id
  if (dramaId) {
    router.push(`/claim/${dramaId}?type=${type}`)
  } else {
    console.error('无法获取短剧ID')
  }
}

// 页面加载时获取短剧数据
onMounted(() => {
  // 从路由参数获取短剧ID
  const dramaId = route.params.id
  console.log('短剧详情页，ID:', dramaId)
  
  if (dramaId) {
    fetchDramaDetail(dramaId)
  }
})
</script>

<template>
  <div class="page">
    <div class="card">
      <!-- 顶部导航栏 -->
      <div class="header">
        <button class="icon-button" @click="goBack">
          <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" fill="none" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="15 18 9 12 15 6" />
          </svg>
        </button>
        <p class="title-header">短剧详情</p>
        <div class="header-spacer" />
      </div>

      <!-- 内容区域 -->
      <div class="content">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading">
          <div class="loading-spinner"></div>
          <p>加载中...</p>
        </div>

        <!-- 短剧基本信息 -->
        <div v-else class="block">
          <div class="drama-info">
            <div class="cover">
              <img
                :src="dramaData.cover_image_url || '/placeholder-poster.svg'"
                :alt="dramaData.title"
                class="cover-img"
              />
            </div>
            <div class="info">
              <div class="title-row">
                <p class="title">{{ dramaData.title || '短剧名称' }}</p>
              </div>
              <p class="small-text">
                <span class="field-label">类型/元素：</span>
                <span class="field-value">{{ dramaData.classification_type || '' }}</span>
              </p>
              <p class="small-text">
                <span class="field-label">集数：</span>
                <span class="field-value">{{ dramaData.episodes || '' }}</span>
              </p>
              <p class="small-text">
                <span class="field-label">上线日期：</span>
                <span class="field-value">{{ dramaData.release_date || '' }}</span>
              </p>
            </div>
          </div>

          <!-- 短剧介绍 -->
          <div class="description">
            <p class="description-label">剧情介绍：</p>
            <p class="description-text" v-if="dramaData.desc">
              {{ isExpanded ? dramaData.desc : (dramaData.desc.length > 100 ? dramaData.desc.substring(0, 100) + '...' : dramaData.desc) }}
            </p>
            <p class="description-text description-empty" v-else></p>
            <button v-if="dramaData.desc && dramaData.desc.length > 100" class="toggle-btn" @click="toggleExpanded">
              {{ isExpanded ? '收起' : '展开' }}
            </button>
          </div>
        </div>

        <!-- 关联方信息 -->
        <div v-if="!loading" class="block">
          <p class="section-title">关联方</p>
          
          <div class="assoc-group">
            <p class="label">版权方</p>
            <div class="assoc-row">
              <div>
                <span v-if="dramaData.Copyright_field" class="chip-blue">{{ dramaData.Copyright_field }}</span>
                <span v-else class="chip-empty"></span>
              </div>
              <p v-if="!dramaData.Copyright_field" class="claim" @click="goToClaim('copyright')">我要认领</p>
            </div>
          </div>

          <div class="assoc-group">
            <p class="label">承制方</p>
            <div class="assoc-row">
              <div>
                <span v-if="dramaData.Manufacturing_Field" class="chip-red">{{ dramaData.Manufacturing_Field }}</span>
                <span v-else class="chip-empty"></span>
              </div>
              <p v-if="!dramaData.Manufacturing_Field" class="claim" @click="goToClaim('manufacturing')">我要认领</p>
            </div>
          </div>
        </div>

        <!-- 用户评论 -->
        <div v-if="!loading" id="comments" class="block">
          <p class="section-title-sm">抖音用户整体评论</p>
          <div class="comment-row">
            <img
              src="https://oss.xintiao85.com/story/materials/image/6912ff82dc05328e25f9442c/1762926632_cfc62d9f.png"
              alt="用户评论"
              class="avatar"
            />
            <div class="comment-text" v-if="dramaData.comments_summary" v-html="formatCommentsSummary(dramaData.comments_summary, 1.5)"></div>
            <p class="comment-text comment-empty" v-else></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
* {
  box-sizing: border-box;
}

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ebedf2;
  padding: 14px;
  min-height: 100vh;
}

.card {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: hidden;
  background: #f3f4f6;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 428px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  padding: 12px 16px;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: #111827;
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.icon-button:hover {
  opacity: 0.7;
}

.icon-button-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.icon-button-sm:hover {
  opacity: 0.7;
}

.title-header {
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.header-spacer {
  width: 24px;
  height: 24px;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.block {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
}

.drama-info {
  display: flex;
  gap: 16px;
  margin-bottom: 0;
}

.cover {
  width: 84px;
  height: 112px;
  border-radius: 8px;
  overflow: hidden;
  background: #fce7f3;
  flex-shrink: 0;
}

.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info {
  flex: 1;
}

.title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 26px;
}

.title {
  color: #111827;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.small-text {
  font-size: 12px;
  color: #6b7280;
  margin: 8px 0;
}

.description {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

.description-text {
  color: #4b5563;
  font-size: 14px;
  margin-bottom: 6px;
  line-height: 1.6;
}

.description-empty {
  color: #9ca3af;
  min-height: 20px;
}

.toggle-btn {
  color: #3b82f6;
  font-size: 12px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.2s;
}

.toggle-btn:hover {
  opacity: 0.7;
}

.section-title {
  color: #111827;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.assoc-group {
  margin-bottom: 16px;
}

.assoc-group:last-child {
  margin-bottom: 0;
}

.assoc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.label {
  color: #374151;
  font-size: 14px;
  margin: 0 0 0 0;
}

.claim {
  color: #ef4444;
  font-size: 14px;
  margin: 0;
  cursor: pointer;
  transition: opacity 0.2s;
}

.claim:hover {
  opacity: 0.7;
}

.chip-blue {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 14px;
}

.chip-red {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 14px;
}

.chip-green {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  background: #ecfdf5;
  color: #059669;
  font-size: 14px;
}

.section-title-sm {
  color: #1f2937;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px 0;
  padding: 16px 0 12px 0;
  border-bottom: 1px solid #e5e7eb;
}

.qr-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  margin: 0 auto;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
}

.qr-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-row {
  display: flex;
  gap: 12px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-text {
  font-size: 13px;
  color: #4b5563;
  margin: 0;
  line-height: 2;
}

.comment-text strong {
  font-weight: 600;
  color: #1f2937;
}

.comment-empty {
  color: #9ca3af;
  font-style: italic;
}

.chip-empty {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  background: #f3f4f6;
  color: #9ca3af;
  font-size: 14px;
}

.description-label {
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

/* 加载状态 */
.loading {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #4a90e2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .page {
    padding: 0;
  }

  .card {
    max-width: 100%;
    border-radius: 0;
  }
}
</style>
