<template>
  <section class="showcase-section" v-if="episodes.length > 0">
    <div class="section-head d-flex justify-content-between align-items-center mb-3">
      <div>
        <h4 class="section-title mb-1">推荐展示</h4>
        <!--<div class="section-subtitle">基于当前节目数据生成展示内容</div>-->
      </div>
      <button
          class="btn btn-sm btn-outline-secondary d-none d-lg-inline-flex"
          v-if="featuredEpisode"
          @click="$emit('select', featuredEpisode)"
      >
        立即播放
      </button>
    </div>

    <!-- 电脑端 -->
    <div class="desktop-showcase d-none d-lg-block">
      <div class="row g-3">
        <div class="col-12 col-xl-8" v-if="featuredEpisode">
          <div class="featured-card" @click="$emit('select', featuredEpisode)">
            <div
                class="featured-cover"
                :style="coverStyle(featuredEpisode.coverUrl)"
            ></div>

            <div class="featured-content">
              <div class="featured-badge">精选推荐</div>
              <h3 class="featured-title">{{ featuredEpisode.title }}</h3>
              <p class="featured-desc">
                发布时间：{{ formatDate(featuredEpisode.releasedAt) }}
                <span class="mx-2">｜</span>
                时长：{{ formatDuration(featuredEpisode.timeLength) }}
              </p>
              <div class="featured-meta">
                <span>自动播放</span>
                <span>支持续播</span>
                <span>高清资源</span>
              </div>
            </div>
          </div>
        </div>

        <div class="col-12 col-xl-4">
          <div class="side-panel">
            <div
                v-for="item in sideList"
                :key="item.id"
                class="side-item"
                @click="$emit('select', item)"
            >
              <div
                  class="side-thumb"
                  :style="coverStyle(item.coverUrl)"
              ></div>
              <div class="side-text">
                <div class="side-item-title">{{ item.title }}</div>
                <div class="side-item-meta">
                  {{ formatDate(item.releasedAt) }} ｜ {{ formatDuration(item.timeLength) }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-12">
          <div class="row g-3">
            <div
                v-for="item in bottomList"
                :key="item.id"
                class="col-md-6 col-xl-3"
            >
              <div class="mini-card" @click="$emit('select', item)">
                <div
                    class="mini-cover"
                    :style="coverStyle(item.coverUrl)"
                ></div>
                <div class="mini-title">{{ item.title }}</div>
                <div class="mini-meta">
                  {{ formatDate(item.releasedAt) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 手机端 -->
    <div class="mobile-showcase d-lg-none">
      <div class="mobile-grid">
        <div
            v-for="item in mobileList"
            :key="item.id"
            class="mobile-card"
            @click="$emit('select', item)"
        >
          <div
              class="mobile-cover"
              :style="coverStyle(item.coverUrl)"
          ></div>
          <div class="mobile-title">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { EpisodeData } from '@/api/qishier'

const props = defineProps<{
  episodes: EpisodeData[]
}>()

defineEmits<{
  select: [episode: EpisodeData]
}>()

const featuredEpisode = computed(() => props.episodes[0] || null)
const sideList = computed(() => props.episodes.slice(1, 4))
const bottomList = computed(() => props.episodes.slice(4, 8))
const mobileList = computed(() => props.episodes.slice(0, 6))

function coverStyle(url?: string) {
  if (!url) {
    return {
      background: '#dcdcdc'
    }
  }

  return {
    backgroundImage: `url(${url})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center'
  }
}

function formatDate(timestamp: number): string {
  if (!timestamp) return '--'
  const d = new Date(timestamp)
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${y}-${m}-${day}`
}

function formatDuration(seconds: number): string {
  if (!seconds && seconds !== 0) return '--'
  const m = Math.floor(seconds / 60)
  const s = seconds % 60
  return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
}
</script>

<style scoped>
.showcase-section {
  margin-top: 18px;
}

.section-title {
  font-size: 22px;
  font-weight: 700;
  color: #212529;
}

.section-subtitle {
  font-size: 13px;
  color: #6c757d;
}

.featured-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  min-height: 280px;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}

.featured-cover,
.side-thumb,
.mini-cover,
.mobile-cover {
  background-color: #dcdcdc;
  background-size: cover;
  background-position: center;
}

.featured-cover {
  border-radius: 18px;
  min-height: 240px;
}

.featured-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featured-badge {
  display: inline-block;
  width: fit-content;
  padding: 6px 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  font-size: 12px;
  color: #8a5a00;
  background: rgba(255, 193, 7, 0.18);
}

.featured-title {
  margin-bottom: 12px;
  font-size: 28px;
  line-height: 1.35;
  font-weight: 800;
  color: #212529;
}

.featured-desc {
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.8;
  color: #6c757d;
}

.featured-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.featured-meta span {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: #495057;
  background: #eef1f4;
}

.side-panel {
  height: 100%;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f7f8fa 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.side-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
}

.side-item + .side-item {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.side-thumb {
  width: 110px;
  height: 66px;
  border-radius: 12px;
  flex-shrink: 0;
}

.side-text {
  min-width: 0;
}

.side-item-title {
  font-size: 14px;
  font-weight: 700;
  color: #212529;
  line-height: 1.5;
  margin-bottom: 6px;
}

.side-item-meta {
  font-size: 12px;
  color: #6c757d;
}

.mini-card {
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  height: 100%;
  cursor: pointer;
}

.mini-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  margin-bottom: 12px;
}

.mini-title {
  font-size: 15px;
  font-weight: 700;
  color: #212529;
  line-height: 1.5;
  margin-bottom: 6px;
}

.mini-meta {
  font-size: 12px;
  color: #6c757d;
}

/* 手机端 */
.mobile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mobile-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.mobile-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  margin-bottom: 10px;
}

.mobile-title {
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
  color: #3a3a3a;
  word-break: break-word;
}

@media (max-width: 767px) {
  .showcase-section {
    margin-top: 14px;
  }

  .section-title {
    font-size: 18px;
  }

  .mobile-grid {
    gap: 12px;
  }

  .mobile-title {
    font-size: 14px;
  }
}
</style>
