<template>
  <div>
    <!-- tabs -->
    <div class="shadow-sm">
      <div class="max-w-7xl mx-auto px-4">
        <div class="flex items-center justify-between pb-4">
          <!-- 左侧 Tabs -->
          <div class="flex items-center space-x-1">
            <div
              v-for="tab in tabs"
              :key="tab.sortLogic"
              :class="[
                'px-6 py-2 rounded-full text-sm font-medium cursor-pointer transition-all duration-200',
                searchParams.sortLogic === tab.sortLogic
                  ? 'bg-orange-400 text-white shadow-md'
                  : 'text-gray-600 hover:text-orange-500 hover:bg-orange-50',
              ]"
              @click="toggleTab(tab.sortLogic)"
            >
              {{ tab.label }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="list.length" v-loading="loading">
      <!-- 第一页的特殊布局 -->
      <div v-show="searchParams.current === 1">
        <!-- 前三个特殊布局 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 xl:gap-5 gap-4 xl:mb-6 mb-4">
          <!-- 第一个视频 - 占据两列 -->
          <div
            v-show="list.length >= 1"
            @click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: list[0]?.id ?? 0 })"
            class="lg:col-span-2 group relative rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-xl transition-all duration-500 cursor-pointer"
          >
            <div class="relative overflow-hidden">
              <!-- 调整：增加图片高度到 h-[360px] 或 h-[400px] -->
              <img
                :src="list[0]?.faceUrl"
                class="w-full aspect-16/10 object-cover group-hover:scale-105 transition-transform duration-700"
              />
              <div
                class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"
              ></div>

              <!-- 推荐标签 -->
              <div
                v-if="list[0]?.isRecommend"
                class="absolute top-0 left-0 w-15 h-7 bg-#FFF9B9 flex items-center justify-center border-2px border-solid border-#f4f0eb rounded-tl-lg rounded-br-lg"
              >
                <img class="w-6" src="@/assets/img/culture/recommend.png" />
                <div class="text-12px text-#000 line-height-12px">推荐</div>
              </div>

              <!-- 时长 -->
              <div
                class="absolute bottom-4 right-4 bg-black/80 text-white px-3 py-1.5 rounded-lg text-sm"
              >
                {{ list[0]?.videoDuration }}
              </div>

              <!-- 数据统计 -->
              <div class="absolute bottom-4 left-4 flex gap-4 text-white">
                <div class="flex items-center gap-1 bg-black/50 px-3 py-1.5 rounded-lg">
                  <el-icon class="text-sm"><IEpView /></el-icon>
                  <span>{{ Math.max(list[0]?.playCount ?? 0, list[0]?.viewCount ?? 0) }}</span>
                </div>
                <div class="flex items-center gap-1 bg-black/50 px-3 py-1.5 rounded-lg">
                  <el-icon class="text-sm"><IEpChatDotRound /></el-icon>
                  <span>{{ list[0]?.replyCount }}</span>
                </div>
                <div class="flex items-center gap-1 bg-black/50 px-3 py-1.5 rounded-lg">
                  <el-icon class="text-sm"><IEpStar /></el-icon>
                  <span>{{ list[0]?.collectionCount }}</span>
                </div>
              </div>
            </div>

            <!-- 调整：减小内边距 p-6 改为 p-4 -->
            <div class="p-4">
              <div
                class="font-bold text-lg mb-2 text-gray-900 group-hover:text-blue-600 transition-colors line-clamp-1"
              >
                {{ list[0]?.title }}
              </div>
              <!-- 调整：减小内容文字大小和间距 -->
              <div class="text-gray-600 mb-3 line-clamp-1 leading-relaxed text-base">
                {{ list[0]?.content }}
              </div>
              <div class="flex items-center justify-between text-gray-500 text-sm">
                <div class="flex items-center gap-2">
                  <img
                    :src="list[0]?.showAvatar"
                    alt=""
                    class="w-6 h-6 rounded-full object-cover"
                  />
                  <span class="font-medium">{{ list[0]?.showName }}</span>
                </div>
                <span class="text-sm">{{
                  dayjs((list[0]?.createTime ?? 0) * 1000).format('YYYY-MM-DD HH:mm')
                }}</span>
              </div>
            </div>
          </div>

          <!-- 右侧两个视频 -->
          <div class="flex flex-col xl:gap-5 gap-4">
            <VideoCard
              v-for="(item, index) in list.slice(1, 3)"
              :key="index"
              :item="item"
              @click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item?.id })"
            />
          </div>
        </div>

        <!-- 剩余视频 - 标准网格 -->
        <div
          v-show="list.length > 3"
          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:gap-5 gap-4"
        >
          <VideoCard
            v-for="item in list.slice(3)"
            :key="item.id"
            :item="item"
            @click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item.id })"
          />
        </div>
      </div>

      <!-- 其他页面 - 标准3列网格 -->
      <div v-show="searchParams.current !== 1">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:gap-5 gap-4">
          <VideoCard
            v-for="item in list"
            :key="item.id"
            :item="item"
            @click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item.id })"
          />
        </div>
      </div>

      <!-- 底部分页 -->
      <div class="bottom-pagination border-t border-gray-200">
        <div class="max-w-7xl mx-auto py-4">
          <div class="flex items-center justify-between">
            <!-- 左侧：回到顶部按钮 -->
            <div class="left">
              <ScrollTopComp />
            </div>

            <!-- 右侧：分页器 -->
            <div class="right">
              <div
                class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2"
              >
                <el-pagination
                  v-model:current-page="searchParams.current"
                  v-model:page-size="searchParams.size"
                  :page-sizes="[9, 24, 36, 48]"
                  layout="prev, pager, next, jumper, total"
                  :total="total"
                  class="custom-pagination"
                  @current-change="
                    async (e) => {
                      await goToPage(e)
                      handleBackTop()
                    }
                  "
                  @size-change="changePageSize"
                  :pager-count="5"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template v-else>
      <div class="flex items-center justify-center h-full">
        <el-empty description="暂无数据" />
      </div>
    </template>
  </div>
</template>

<script setup lang="ts" name="VideoList">
import { useScrollTop } from '@/hooks'
import { ArticleTypeEnum, TABS_REF_KEY } from '@/constants'
import { usePageSearch } from '@/hooks'
import { getArticleList } from '@/api'
import dayjs from 'dayjs'
import { useNavigation } from '@/hooks'
import VideoCard from '@/components/common/VideoCard/index.vue'

const tabsRef = inject(TABS_REF_KEY)

const { ScrollTopComp, handleBackTop } = useScrollTop(tabsRef!)
const { jumpToArticleDetailPage } = useNavigation()
const { list, total, searchParams, loading, goToPage, changePageSize, refresh } = usePageSearch(
  getArticleList,
  {
    defaultParams: { type: ArticleTypeEnum.VIDEO, sortLogic: 1 },
    defaultCurrent: 1,
    defaultSize: 9,
    immediate: false,
  },
)
const tabs = [
  { label: '最新发布', sortLogic: 1 },
  { label: '最多播放', sortLogic: 0 },
]

const toggleTab = (sortLogic: number) => {
  searchParams.value.sortLogic = sortLogic
  refresh()
}

defineExpose({
  refresh: () => {
    refresh()
  },
})
</script>

<style></style>
