<template>
  <div class="subscription-page">
    <!-- 左侧导航栏 -->
    <aside class="sidebar">
      <!-- Logo -->
      <div class="logo">logo</div>
      
      <!-- 导航菜单 -->
      <nav class="nav-menu">
        <div class="nav-item" @click="goToProfile" @mousedown="console.log('mousedown 个人主页')">
          <el-icon><User /></el-icon>
          <span>个人主页</span>
        </div>
        <div class="nav-item" :class="{ active: currentSection === 'subscription' }" @click="setSection('subscription')" @mousedown="console.log('mousedown 会员订阅')">
          <el-icon><Compass /></el-icon>
          <span>会员订阅</span>
        </div>
        <div class="nav-item" :class="{ active: currentSection === 'works' }" @click="setSection('works')" @mousedown="console.log('mousedown 我的作品')">
          <el-icon><Document /></el-icon>
          <span>我的作品</span>
        </div>
      </nav>
      
      <!-- 工具分隔线 -->
      <div class="divider">
        <span>工具</span>
      </div>
      
      <!-- 工具菜单 -->
      <nav class="tools-menu">
        <div class="nav-item" @click="goToTextToVideo">
          <el-icon><Document /></el-icon>
          <span>文生视频</span>
        </div>
        <div class="nav-item" @click="goToImageToVideo">
          <el-icon><Picture /></el-icon>
          <span>图生视频</span>
        </div>
        <div class="nav-item storyboard-item">
          <el-icon><VideoPlay /></el-icon>
          <span>分镜视频</span>
          <el-tag size="small" type="primary" class="sora-tag">Sora2.0</el-tag>
        </div>
      </nav>
    </aside>
    
    <!-- 主内容区域 -->
    <main class="main-content">
      <template v-if="currentSection === 'works'">
        <MyWorks />
      </template>
      <template v-else>
      <!-- 顶部 两层合并为一个盒子 -->
      <section class="top-merged-card">
        <!-- 上层：用户信息 + 右侧按钮 -->
        <div class="row-top">
          <div class="user-left">
            <div class="avatar-wrap">
              <div class="avatar-circle">
                <div class="pause-line"></div>
                <div class="pause-line second"></div>
              </div>
            </div>
            <div class="user-meta">
              <div class="username">mingzi_FBx7foZYDS7inLQb</div>
              <div class="user-id">ID 2994509784706419</div>
            </div>
          </div>
          <div class="user-right">
            <div class="points-pill">
              <el-icon><Plus /></el-icon>
              <span>50</span>
            </div>
            <button class="mini-btn">积分详情</button>
            <button class="mini-btn" @click="goToWorks">我的订单</button>
          </div>
        </div>
        <!-- 下层：三项总结 -->
        <div class="row-bottom">
          <div class="summary-item">
            <div class="summary-label">当前生效权益</div>
            <div class="summary-value">免费版</div>
          </div>
          <div class="divider-v"></div>
          <div class="summary-item">
            <div class="summary-label">到期时间</div>
            <div class="summary-value">永久</div>
          </div>
          <div class="divider-v"></div>
          <div class="summary-item">
            <div class="summary-label">剩余积分</div>
            <div class="summary-value highlight">
              <el-icon class="plus-icon"><Plus /></el-icon>
              <span class="points-number">50</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 套餐选择 -->
      <section class="subscription-packages">
        <h3 class="section-title">套餐</h3>
        
        <div class="packages-grid">
          <!-- 免费版 -->
          <div class="package-card free-card" :class="{ selected: selectedPlan === 'free' }" @click="selectPlan('free')">
            <div class="package-header">
              <h4 class="package-title">免费版</h4>
            </div>
            <div class="package-price">¥0/月</div>
            <button class="package-button current">当前套餐</button>
            <div class="package-features">
              <div class="feature-item">
                <el-icon class="check-icon"><Check /></el-icon>
                <span>新用户首次登陆免费获得50积分</span>
              </div>
            </div>
          </div>
          
          <!-- 标准版 -->
          <div class="package-card standard-card" :class="{ selected: selectedPlan === 'standard' }" @click="selectPlan('standard')">
            <div class="package-header">
              <h4 class="package-title">标准版</h4>
              <div class="discount-tag">首购低至8.5折</div>
            </div>
            <div class="package-price">$59/月</div>
            <div class="points-box">每月200积分</div>
            <button class="package-button subscribe">立即订阅</button>
            <div class="package-features">
              <div class="feature-item">
                <el-icon class="check-icon"><Check /></el-icon>
                <span>快速通道生成</span>
              </div>
              <div class="feature-item">
                <el-icon class="check-icon"><Check /></el-icon>
                <span>支持商用</span>
              </div>
              <div class="feature-item">
                <el-icon class="check-icon"><Check /></el-icon>
                <span>下载去水印</span>
              </div>
            </div>
          </div>
          
          <!-- 专业版 -->
          <div class="package-card premium-card" :class="{ selected: selectedPlan === 'premium' }" @click="selectPlan('premium')">
            <div class="package-header">
              <h4 class="package-title">专业版</h4>
              <div class="value-tag">超值之选</div>
            </div>
            <div class="package-price">$259/月</div>
            <div class="points-box">每月1000积分</div>
            <button class="package-button premium">立即订阅</button>
            <div class="package-features">
              <div class="feature-item">
                <el-icon class="check-icon"><Check /></el-icon>
                <span>极速通道生成</span>
              </div>
              <div class="feature-item">
                <el-icon class="check-icon"><Check /></el-icon>
                <span>支持商用</span>
              </div>
              <div class="feature-item">
                <el-icon class="check-icon"><Check /></el-icon>
                <span>下载去水印</span>
              </div>
              <div class="feature-item">
                <el-icon class="check-icon"><Check /></el-icon>
                <span>新功能优先体验</span>
              </div>
            </div>
          </div>
        </div>
      </section>
      </template>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import MyWorks from '@/views/MyWorks.vue'
import { useRouter } from 'vue-router'
import { 
  User, 
  Compass, 
  Document, 
  Picture, 
  VideoPlay, 
  Plus, 
  Bell,
  Check
} from '@element-plus/icons-vue'

const router = useRouter()

// 跳转到个人主页
const goToProfile = () => {
  console.log('点击个人主页')
  router.push('/profile')
}

const goToTextToVideo = () => {
  router.push('/text-to-video')
}

const goToImageToVideo = () => {
  router.push('/image-to-video')
}

// 当前主区块：subscription | works
const currentSection = ref('subscription')
const setSection = (section) => {
  console.log('切换区块到:', section)
  currentSection.value = section
}

// 选中套餐（紫色边框）
const selectedPlan = ref('free')
const selectPlan = (plan) => {
  selectedPlan.value = plan
}
</script>

<style scoped>
.subscription-page {
  min-height: 100vh;
  background: #0a0a0a;
  color: white;
  display: flex !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden;
  position: relative;
}

/* 左侧导航栏 */
.sidebar {
  width: 280px !important; /* 放大侧边栏 */
  background: #1a1a1a !important;
  padding: 24px 0 !important;
  border-right: 1px solid #1a1a1a !important; /* 弱化分割线，与背景融为一体 */
  flex-shrink: 0 !important;
  z-index: 100 !important;
  display: block !important;
  position: relative !important;
}

.logo {
  padding: 0 24px 32px;
  font-size: 20px; /* 放大标题 */
  font-weight: 500;
  color: white;
}

.nav-menu, .tools-menu {
  padding: 0 24px; /* 左右内边距同步放大 */
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 14px 18px; /* 项高度放大 */
  margin-bottom: 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.nav-item:hover {
  background: #2a2a2a;
}

.nav-item.active {
  background: #1e3a8a;
}

.nav-item .el-icon {
  margin-right: 14px;
  font-size: 20px; /* 放大图标 */
}

.nav-item span {
  font-size: 15px; /* 放大文字 */
  flex: 1;
}

.sora-tag {
  margin-left: 8px;
  font-size: 10px;
  padding: 2px 6px;
}

/* 分镜视频特殊样式 */
.storyboard-item {
  position: relative;
}

.storyboard-item .sora-tag {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3) !important;
  animation: pulse-glow 2s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
  }
  100% {
    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.6);
  }
}

.divider {
  margin: 30px 20px 20px;
  padding: 0 16px;
  color: #666;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  padding: 0;
  background: #0a0a0a;
  overflow-y: auto;
  min-width: 0;
}

/* 套餐选择 */
.subscription-packages {
  padding: 0 40px 30px; /* 与顶部盒子保持一致的左右留白 */
}

.subscription-packages .section-title {
  font-size: 24px;
  font-weight: 600;
  color: white;
  margin: 0 0 30px 0;
  text-align: left !important;
  position: relative;
}

.subscription-packages .section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  transform: none;
  width: 60px;
  height: 2px;
  background: #4a9eff;
}

.subscription-packages .packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1440px;
  margin: 0 40px 0 0; /* 右侧留白与左侧 padding(40px) 保持一致 */
  width: 100%;
  align-items: stretch; /* 卡片等高 */
}

.subscription-packages .package-card {
  background: #1a1a1a;
  border-radius: 12px;
  padding: 28px;
  border: 1px solid #333;
  position: relative;
  transition: all 0.3s ease;
  min-height: 700px; /* 进一步拉长 */
  display: flex;
  flex-direction: column;
}

.subscription-packages .package-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.subscription-packages .package-card.selected {
  border: 2px solid #8b5cf6;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

.subscription-packages .package-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.subscription-packages .package-title {
  font-size: 20px;
  font-weight: 600;
  color: white;
  margin: 0;
}

.subscription-packages .discount-tag, .subscription-packages .value-tag {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.subscription-packages .discount-tag { background:#666; color:#fff; }
.subscription-packages .value-tag { background:#8b5cf6; color:#fff; }

.subscription-packages .package-price {
  font-size: 32px;
  font-weight: 700;
  color: white;
  margin-bottom: 15px;
}

.subscription-packages .points-box {
  background: #2a2a2a;
  color: white;
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 20px;
  text-align: center;
}

.subscription-packages .package-button {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 25px;
}

.subscription-packages .package-button.current { background:#666; color:#fff; border:none; }
.subscription-packages .package-button.subscribe { background:#4a9eff; color:#fff; border:none; }
.subscription-packages .package-button.subscribe:hover { background:#3a8bdf; }
.subscription-packages .package-button.premium { background:#8b5cf6; color:#fff; border:none; }
.subscription-packages .package-button.premium:hover { background:#7c3aed; }

.subscription-packages .package-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto; /* 将特性列表推至卡片下部，保持视觉均衡 */
}

.subscription-packages .feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #ccc;
}

.subscription-packages .check-icon { color:#4a9eff; font-size:16px; }

/* 响应式设计 */
@media (max-width: 1024px) {
  .subscription-packages .packages-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 720px;
  }
  
  .membership-overview {
    flex-direction: column;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 240px;
  }
  
  .user-profile-section {
    flex-direction: column;
    text-align: center;
  }
  
  .profile-actions {
    justify-content: center;
  }
}

/* 顶部合并的两层盒子 */
.top-merged-card {
  max-width: none; /* 取消限制，铺满内容区域 */
  width: 100%;
  margin: 32px 40px 10px 40px; /* 左右各 40px 留白，与套餐区对齐 */
  background: #1a1a1a; /* 与卡片、页面风格保持一致 */
  border: 1px solid #333;
  border-radius: 10px;
}

.top-merged-card .row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 22px 26px; /* 比例放大 */
  border-bottom: 1px solid #1f2937;
}

.top-merged-card .row-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 30px;
  padding: 22px 26px 24px; /* 比例放大 */
  align-items: center;
}

.top-merged-card .divider-v { width:1px; height:48px; background:#1f2937; }
.top-merged-card .summary-item { display:flex; flex-direction:column; gap:8px; }
.top-merged-card .summary-label { font-size:15px; color:#9ca3af; }
.top-merged-card .summary-value { font-size:17px; color:#e5e7eb; font-weight:600; }
.top-merged-card .summary-value.highlight { color:#60a5fa; display:flex; align-items:center; gap:8px; }
.top-merged-card .plus-icon { font-size:22px; color:#60a5fa; }

/* 顶部行内的用户信息与按钮样式（沿用原样式类） */
.user-left { display:flex; align-items:center; gap:18px; }
.avatar-wrap { width: 56px; height: 56px; }
.avatar-circle { width:56px; height:56px; border-radius:50%; background:linear-gradient(180deg,#1e3a8a,#111827); border:2px solid #4a9eff; display:flex; align-items:center; justify-content:center; position:relative; }
.pause-line { width:5px; height:20px; background:#fff; border-radius:2px; }
.pause-line.second { position:absolute; right:18px; width:5px; height:20px; background:#fff; border-radius:2px; }
.user-meta { display:flex; flex-direction:column; }
.username { font-size:19px; font-weight:600; color:#e5e7eb; }
.user-id { font-size:15px; color:#9ca3af; }
.user-right { display:flex; align-items:center; gap:12px; }
.points-pill { display:flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px; background:#0b1220; border:1px solid #1f3758; color:#60a5fa; font-weight:600; font-size:16px; }
.mini-btn { background:#0f172a; color:#e5e7eb; border:1px solid #334155; padding:9px 14px; border-radius:6px; font-size:14px; cursor:pointer; transition:.2s ease; }
.mini-btn:hover { background:#111827; border-color:#3b82f6; }
 
@media (max-width: 1024px) {
  .top-merged-card { margin: 0 16px 16px; }
  .top-merged-card .row-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .top-merged-card .row-bottom { grid-template-columns: 1fr; gap: 12px; }
}
</style>
