<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">
            <div
              v-for="(item, index) in list.slice(1, 3)"
              :key="index"
              class="group relative rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer"
              @click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item?.id })"
            >
              <div class="relative overflow-hidden">
                <!-- 调整：增加图片高度到 h-[160px] 或 h-[180px] -->
                <img
                  :src="item?.faceUrl"
                  class="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-500"
                />
                <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>

                <!-- 推荐标签 -->
                <div
                  v-if="item?.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
                  v-if="!smallerThanXl"
                  class="absolute bottom-3 right-3 bg-black/80 text-white px-2 py-1 rounded-lg text-xs"
                >
                  {{ item?.videoDuration }}
                </div>

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

              <!-- 调整：减小内边距和间距 -->
              <div class="p-3 xl:p-4">
                <h3
                  class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
                >
                  {{ item?.title }}
                </h3>
                <div class="flex items-center justify-between text-gray-500 text-xs">
                  <div class="flex items-center gap-2 max-w-55%">
                    <img :src="item?.showAvatar" alt="" class="w-5 h-5 rounded-full object-cover" />
                    <el-tooltip :content="item.showName" placement="bottom">
                      <span class="font-medium line-clamp-1">{{ item.showName }}</span>
                    </el-tooltip>
                  </div>
                  <span v-if="!smallerThanXl">{{
                    dayjs((item?.createTime ?? 0) * 1000).format('YYYY-MM-DD HH:mm')
                  }}</span>
                  <span v-else>{{
                    dayjs((item?.createTime ?? 0) * 1000).format('YYYY-MM-DD')
                  }}</span>
                </div>
              </div>
            </div>
          </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"
        >
          <div
            @click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item.id })"
            v-for="item in list.slice(3)"
            :key="item.id"
            class="group relative rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer"
          >
            <div class="relative overflow-hidden">
              <img
                :src="item.faceUrl"
                class="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-500"
              />
              <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>

              <!-- 标签 -->
              <!-- <div
                class="absolute top-3 left-3 bg-gradient-to-r from-indigo-500 to-purple-500 text-white px-2.5 py-1 rounded-full text-xs font-semibold"
              >
                {{ item.tagNameList[0] }}
              </div> -->
              <div
                v-if="item.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" alt="" />
                <div class="text-12px text-#000 line-height-12px">推荐</div>
              </div>

              <!-- 时长 -->
              <div
                v-if="!smallerThanXl"
                class="absolute bottom-3 right-3 bg-black/80 text-white px-2 py-1 rounded-lg text-xs"
              >
                {{ item.videoDuration }}
              </div>

              <!-- 数据 -->
              <div class="absolute bottom-3 left-3 flex gap-3 text-white text-xs">
                <div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
                  <el-icon class="text-sm">
                    <IEpView />
                  </el-icon>
                  <span>{{ Math.max(item.playCount, item.viewCount) }}</span>
                </div>
                <div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
                  <el-icon class="text-sm">
                    <IEpChatDotRound />
                  </el-icon>
                  <span>{{ item.replyCount }}</span>
                </div>
                <div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
                  <el-icon class="text-sm">
                    <IEpStar />
                  </el-icon>
                  <span>{{ item.collectionCount }}</span>
                </div>
              </div>
              <!-- 播放按钮 -->
              <!-- <div
              class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"
            >
              <div
                class="bg-white/90 rounded-full flex items-center justify-center shadow-xl transform scale-90 group-hover:scale-100 transition-transform duration-300"
              >
                <el-icon size="50" color="#333"><VideoPlay /></el-icon>
              </div>
            </div> -->
            </div>

            <div class="p-3 xl:p-4">
              <h3
                class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
              >
                {{ item?.title }}
              </h3>
              <div class="flex items-center justify-between text-gray-500 text-xs">
                <div class="flex items-center gap-2 max-w-55%">
                  <img :src="item?.showAvatar" alt="" class="w-6 h-6 rounded-full object-cover" />
                  <el-tooltip :content="item.showName" placement="bottom">
                    <span class="font-medium line-clamp-1">{{ item.showName }}</span>
                  </el-tooltip>
                </div>
                <span v-if="!smallerThanXl">{{
                  dayjs(item?.createTime * 1000).format('YYYY-MM-DD HH:mm')
                }}</span>
                <span v-else>{{ dayjs(item?.createTime * 1000).format('YYYY-MM-DD') }}</span>
              </div>
            </div>
          </div>
        </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">
          <div
            @click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item.id })"
            v-for="item in list"
            :key="item.id"
            class="group relative rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer"
          >
            <div class="relative overflow-hidden">
              <img
                :src="item.faceUrl"
                class="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-500"
              />
              <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>

              <!-- 标签 -->
              <!-- <div
                class="absolute top-3 left-3 bg-gradient-to-r from-indigo-500 to-purple-500 text-white px-2.5 py-1 rounded-full text-xs font-semibold"
              >
                {{ item.tagNameList[0] }}
              </div> -->
              <div
                v-if="item.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" alt="" />
                <div class="text-12px text-#000 line-height-12px">推荐</div>
              </div>

              <!-- 时长 -->
              <div
                v-if="!smallerThanXl"
                class="absolute bottom-3 right-3 bg-black/80 text-white px-2 py-1 rounded-lg text-xs"
              >
                {{ item?.videoDuration }}
              </div>

              <!-- 数据 -->
              <div class="absolute bottom-3 left-3 flex gap-3 text-white text-xs">
                <div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
                  <el-icon class="text-sm">
                    <IEpView />
                  </el-icon>
                  <span>{{ Math.max(item.playCount, item.viewCount) }}</span>
                </div>
                <div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
                  <el-icon class="text-sm">
                    <IEpChatDotRound />
                  </el-icon>
                  <span>{{ item.replyCount }}</span>
                </div>
                <div class="flex items-center gap-1 bg-black/50 px-2 py-1 rounded-lg">
                  <el-icon class="text-sm">
                    <IEpStar />
                  </el-icon>
                  <span>{{ item.collectionCount }}</span>
                </div>
              </div>
              <!-- 播放按钮 -->
              <!-- <div
              class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"
            >
              <div
                class="bg-white/90  rounded-full flex items-center justify-center shadow-xl transform scale-90 group-hover:scale-100 transition-transform duration-300"
              >
                <el-icon size="50" color="#333"><VideoPlay /></el-icon>
              </div>
            </div> -->
            </div>

            <div class="p-3 xl:p-4">
              <h3
                class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
              >
                {{ item.title }}
              </h3>
              <div class="flex items-center justify-between text-gray-500 text-xs">
                <div class="flex items-center gap-2 max-w-55%">
                  <img :src="item.showAvatar" alt="" class="w-6 h-6 rounded-full object-cover" />
                  <el-tooltip :content="item.showName" placement="bottom">
                    <span class="font-medium line-clamp-1">{{ item.showName }}</span>
                  </el-tooltip>
                </div>
                <span v-if="!smallerThanXl">{{
                  dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm')
                }}</span>
                <span v-else>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD') }}</span>
              </div>
            </div>
          </div>
        </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 { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints(breakpointsTailwind)
const smallerThanXl = breakpoints.smaller('xl')

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>
