<template>
    <view class="match-panel">
        <view class="match-header" :style="{ paddingTop: statusBarHeight + 'px' }">
            <view class="match-header__title">
                <text class="match-header__title-text">赛事中心</text>
                <AiAssistantEntry size="compact" />
            </view>

            <view class="topic-entry" @tap="openWorldCupCenter">
                <view class="topic-entry__badge">
                    <text class="topic-entry__badge-year">2026</text>
                    <text class="topic-entry__badge-label">FIFA</text>
                </view>
                <view class="topic-entry__content">
                    <text class="topic-entry__title">2026年国际足联世界杯</text>
                    <text class="topic-entry__meta">2026年6月11日至7月19日</text>
                </view>
                <view class="topic-entry__action">
                    <u-icon name="arrow-right" size="26" color="#ffffff"></u-icon>
                </view>
            </view>
        </view>

        <MatchCenterTabsPanel />
    </view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import AiAssistantEntry from '@/components/ai-assistant-entry/ai-assistant-entry.vue'
import { getArticleCate } from '@/api/news'
import MatchCenterTabsPanel from './MatchCenterTabsPanel.vue'

const emit = defineEmits<{
    (e: 'open-worldcup', payload: { tab: 'schedule'; cid?: number | null }): void
}>()

const statusBarHeight = ref(0)
const worldCupCateId = ref<number | null>(null)

const initLayout = () => {
    uni.getSystemInfo({
        success: (res) => {
            // #ifdef APP-PLUS || MP
            statusBarHeight.value = res.statusBarHeight || 44
            // #endif
            // #ifdef H5
            statusBarHeight.value = 0
            // #endif
        },
    })
}

const fetchWorldCupCateId = async () => {
    if (worldCupCateId.value) return worldCupCateId.value
    try {
        const cateList = await getArticleCate()
        const category = (cateList || []).find((item: any) => {
            const name = item?.name || item?.label || item?.title
            return String(name) === '世界杯'
        })
        worldCupCateId.value = category?.id || null
    } catch (error) {
        console.log('获取世界杯分类失败=>', error)
        worldCupCateId.value = null
    }
    return worldCupCateId.value
}

const openWorldCupCenter = async () => {
    const cid = await fetchWorldCupCateId()
    emit('open-worldcup', { tab: 'schedule', cid })
}

onMounted(() => {
    initLayout()
})
</script>

<style lang="scss" scoped>
.match-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    overflow: hidden;
}

.match-header {
    background: #fff;
    flex-shrink: 0;

    &__title {
        padding: 16rpx 24rpx 12rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16rpx;
    }

    &__title-text {
        font-size: 36rpx;
        font-weight: 700;
        color: #222;
    }
}

.topic-entry {
    margin: 0 24rpx 12rpx;
    padding: 18rpx 18rpx 18rpx 16rpx;
    display: flex;
    align-items: center;
    gap: 18rpx;
    border-radius: 18rpx;
    background: linear-gradient(135deg, #2457ff 0%, #4452f2 100%);
    color: #fff;

    &__badge {
        width: 68rpx;
        height: 68rpx;
        border-radius: 18rpx;
        background: rgba(255, 255, 255, 0.14);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    &__badge-year {
        font-size: 20rpx;
        font-weight: 700;
        line-height: 1.1;
    }

    &__badge-label {
        margin-top: 4rpx;
        font-size: 16rpx;
        line-height: 1;
        opacity: 0.92;
    }

    &__content {
        min-width: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 6rpx;
    }

    &__title {
        font-size: 28rpx;
        font-weight: 700;
        line-height: 1.35;
        color: #fff;
    }

    &__meta {
        font-size: 22rpx;
        line-height: 1.3;
        color: rgba(255, 255, 255, 0.78);
    }

    &__action {
        width: 52rpx;
        height: 52rpx;
        border-radius: 26rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.18);
        flex-shrink: 0;
    }
}
</style>
