<template>
  <div class="page bg-111 px-20 color-fff flex-col">
    <!-- 顶部导航 -->
    <header class="h-56 flex-between">
      <span class="logo fs-22 font-bold">ZIdingyi</span>
      <div class="flex-items-center gap-16">
        <button class="train-btn px-14 py-6 round-16 fs-12 pointer">创作者训练营</button>
        <span class="icon-btn flex-center wh-32 round bg-222 color-ccc fs-14 pointer">?</span>
        <span class="icon-btn flex-center wh-32 round bg-222 color-ccc fs-14 pointer">🛒</span>
        <span class="promo flex-items-center gap-6 px-10 py-4 round-6 fs-12">
          <span>会员特惠</span>
          <span class="countdown color-gold">{{ countdown }}</span>
        </span>
        <span class="avatar round wh-36" :style="{ background: 'linear-gradient(135deg,#409eff,#67c23a)' }"></span>
      </div>
    </header>
    <div class="box w-full">
      <!-- 3D Coverflow 轮播（Swiper） -->
      <section class="carousel relative">
        <Swiper
          :modules="modules"
          :effect="'coverflow'"
          :grab-cursor="true"
          :centered-slides="true"
          :slides-per-view="'auto'"
          :loop="true"
          :autoplay="{ delay: 400000, disableOnInteraction: false }"
          :coverflow-effect="{ rotate: 24, stretch: 0, depth: 140, modifier: 1, slideShadows: false }"
          :pagination="{ el: '.bar-pagination', clickable: true }"
          :navigation="{ prevEl: '.arrow-left', nextEl: '.arrow-right' }"
          class="swiper-cover w-full h-full px-10"
        >
          <SwiperSlide v-for="(s, i) in slides" :key="i" class="cover-slide h-full">
            <div class="cover-card px-24 py-18 flex-col items-center text-center wh-full round-16 h-300" :style="{ background: s.bg }">
              <span class="slide-logo fs-16 font-bold color-fff">LibTV</span>
              <div class="flex-1"></div>
              <div class="flex-col items-center gap-6 pb-28">
                <span class="fs-14 color-ccc">{{ s.sub }}</span>
                <h2 class="fs-24 font-bold color-fff">{{ s.title }}</h2>
              </div>
            </div>
          </SwiperSlide>
        </Swiper>
        <span class="arrow arrow-left absolute pointer left-6">‹</span>
        <span class="arrow arrow-right absolute pointer right-6">›</span>
        <div class="bar-pagination absolute flex-center gap-6"></div>
      </section>

      <!-- 创作输入框 -->
      <section class="input-wrap">
        <section class="relative">
          <textarea
            v-model="prompt"
            ref="taRef"
            placeholder="请输入你的创作灵感，或从下方挑选一个 Skill 开始"
            class="ta border-none round-20 p-20 fs-15 color-fff h-130"
            :class="{ focus: focused }"
            @focus="focused = true"
            @blur="focused = false"
          ></textarea>
          <div class="absolute left-16 right-16 bottom-12 flex-between items-center">
            <div class="flex-items-center gap-14">
              <span class="tool-icon flex-center wh-32 round pointer" title="添加">＋</span>
              <span class="tool-icon flex-center wh-32 round pointer" title="模型">🌐</span>
              <span class="tool-icon flex-center wh-32 round pointer" title="上传">⇪</span>
              <span class="tool-icon flex-center wh-32 round pointer" title="重置">↻</span>
            </div>
            <span class="send flex-center round wh-40 fs-20 font-bold color-fff pointer" @click="send">↑</span>
          </div>
        </section>
        <section class="flex flex-wrap justify-center gap-12 mt-20">
          <div v-for="(row, ri) in allSkills" :key="ri" class="flex-center py-6 pl-6 pr-20 round-100 bg-333 ellipsis">
            <span v-if="row.bg" class="skill-thumb round-4 w-50 h-28 round-100" :style="{ background: row.bg }"></span>
            <span class="fs-14 color-ccc maxw-100 ellipsis ml-10" style="display: inline-block">{{ row.label }}</span>
          </div>
        </section>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { EffectCoverflow, Pagination, Navigation, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/effect-coverflow';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

const modules = [EffectCoverflow, Pagination, Navigation, Autoplay];

// 顶部倒计时
const countdown = ref('12:34:56');
let timer: number | null = null;
onMounted(() => {
  timer = window.setInterval(() => {
    const [h, m, s] = countdown.value.split(':').map(Number);
    let total = h * 3600 + m * 60 + s - 1;
    if (total < 0) total = 12 * 3600 + 34 * 60 + 56;
    const nh = Math.floor(total / 3600);
    const nm = Math.floor((total % 3600) / 60);
    const ns = total % 60;
    countdown.value = [nh, nm, ns].map((n) => String(n).padStart(2, '0')).join(':');
  }, 1000);
});
onBeforeUnmount(() => {
  if (timer) clearInterval(timer);
});

// 3D Coverflow 轮播
const slides = [
  { sub: '新功能上线', title: '走！扫街去', bg: 'linear-gradient(135deg,#2980b9,#6dd5fa,#ffd86b)' },
  { sub: '全新发布', title: 'Seedream 5.0 Pro', bg: 'linear-gradient(135deg,#3a1c71,#d76d77,#ffaf7b)' },
  { sub: '热门玩法', title: '爆款短片复刻', bg: 'linear-gradient(135deg,#0f2027,#203a43,#2c5364)' },
  { sub: '电商专属', title: '皮克斯动画广告', bg: 'linear-gradient(135deg,#8e2de2,#4a00e0)' },
  { sub: '音乐创作', title: '一键生成 MV', bg: 'linear-gradient(135deg,#c31432,#240b36)' },
  { sub: '短剧专区', title: '一句话生成短剧', bg: 'linear-gradient(135deg,#159957,#155799)' },
  { sub: '产品展示', title: '商品展示片制作', bg: 'linear-gradient(135deg,#f7971e,#ffd200)' },
];

// 输入框
const prompt = ref('');
const taRef = ref<HTMLTextAreaElement | null>(null);
const focused = ref(false);
const send = () => {
  if (!prompt.value.trim()) return;
  console.log('发送创作灵感：', prompt.value);
  prompt.value = '';
};

// Skill 标签
const allSkills = [
  { label: '皮克斯动画广告发顺丰第三方', bg: 'linear-gradient(135deg,#8e2de2,#4a00e0)' },
  { label: '爆款短片复刻', bg: 'linear-gradient(135deg,#0f2027,#2c5364)' },
  { label: '一句话生成短剧', bg: 'linear-gradient(135deg,#c31432,#240b36)' },
  { label: '短剧天下', bg: 'linear-gradient(135deg,#c31432,#240b36)' },
  { label: '音乐 MV 生成', bg: 'linear-gradient(135deg,#159957,#155799)' },
  { label: '产品展示片发生的大萨达', bg: 'linear-gradient(135deg,#f7971e,#ffd200)' },
  { label: '全部 Skill >', bg: '' },
];
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: #141414;
  .box {
    margin: 0 auto;
    padding: 0 12.4%;
  }
}

.cover-slide {
  width: 500px;
}

/* 头部 */


/* 轮播（Swiper Coverflow） */
.carousel {
  height: 330px;
  width: 100%;
  margin-top: 30px;
}
.cover-card {
  border: 1px solid #333;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
/* 侧卡压暗，中心卡不压 */
.swiper-slide:not(.swiper-slide-active) .cover-card {
  filter: brightness(0.42);
}
.slide-logo {
  letter-spacing: 1px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(40, 40, 40, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  font-size: 22px;
  color: #fff;
  z-index: 20;
  line-height: 34px;
  text-align: center;
  &:hover {
    background: rgba(70, 70, 70, 0.9);
  }
}
.bar-pagination {
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}
/* 覆盖 Swiper 默认分页为横条样式 */
:deep(.bar-pagination .swiper-pagination-bullet) {
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  opacity: 1;
  transition: all 0.3s ease;
}
:deep(.bar-pagination .swiper-pagination-bullet-active) {
  width: 26px;
  background: #fff;
}

/* 输入框 */
.input-wrap {
  margin: 50px auto 0;
  width: 800px;
  max-width: 100%;
}
.ta {
  width: 100%;
  resize: none;
  background: #1e1e1e;
  border: 1px solid #333;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  &.focus {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  }
  &::placeholder {
    color: #666;
  }
}
.tool-icon {
  background: #2a2a2a;
  &:hover {
    background: #409eff;
    color: #fff;
  }
}
.send {
  background: #409eff;
  &:hover {
    background: #5599ff;
  }
}

/* Skill 标签 */
.skill {
  background: rgba(40, 40, 40, 0.7);
  border: 1px solid #333;
  &:hover {
    background: rgba(64, 158, 255, 0.15);
    border-color: #409eff;
  }
}
.skill-thumb {
  border: 1px solid #444;
}
</style>
