<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import api from '../api';
import emptyMatchesImg from '../assets/images/empty-matches.svg';
import BannerCarousel from '../components/BannerCarousel.vue';
import { resolveBanners } from '../constants/defaultBanner';

const router = useRouter();
const home = ref<{
  banners: Banner[];
  hotMatches: Match[];
  ticker: ContentItem[];
  notices: ContentItem[];
} | null>(null);

interface ContentItem {
  translation?: { title?: string; body?: string; imageUrl?: string };
}

interface Banner {
  id?: string;
  linkType?: string | null;
  linkTarget?: string | null;
  translation?: { title?: string; body?: string; imageUrl?: string };
}

interface Match {
  id: string;
  homeTeamName: string;
  awayTeamName: string;
  startTime: string;
  isHot: boolean;
}

const displayBanners = computed(() => resolveBanners(home.value?.banners));

onMounted(async () => {
  const { data } = await api.get('/player/home');
  home.value = data.data;
});

function goMatch(id: string) {
  router.push(`/match/${id}`);
}
</script>

<template>
  <div>
    <BannerCarousel :banners="displayBanners" />

    <h2 class="section-title">热门赛事</h2>
    <div v-for="match in home?.hotMatches || []" :key="match.id" class="card match-card" @click="goMatch(match.id)">
      <div class="match-teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</div>
      <div class="match-time">{{ new Date(match.startTime).toLocaleString() }}</div>
    </div>

    <div v-if="home && !home.hotMatches?.length" class="empty">
      <img :src="emptyMatchesImg" alt="" class="empty-icon" />
      <p>暂无赛事</p>
    </div>
  </div>
</template>

<style scoped>
.match-card { cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.match-card:active { border-color: var(--border-gold-soft); }
.match-teams { font-weight: 800; margin-bottom: 8px; font-size: 16px; }
.match-time { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.empty { text-align: center; color: var(--text-muted); padding: 40px 20px; font-weight: 600; }
.empty-icon { width: 96px; height: 96px; margin-bottom: 14px; }
</style>
