<template>
    <view class="center-match-card" :class="`center-match-card--${cardType}`">
        <view class="center-match-card__head">
            <view class="center-match-card__league">
                <image v-if="match.league_icon" class="center-match-card__league-icon" :src="match.league_icon"
                    mode="aspectFit" referrerpolicy="no-referrer" />
                <view v-else class="center-match-card__league-dot" />
                <text>{{ match.league_name || '赛事' }}</text>
                <text v-if="match.round_name" class="center-match-card__round">· {{ match.round_name }}</text>
            </view>
            <view v-if="isLive" class="center-match-card__live-tag">
                <view class="center-match-card__live-bars">
                    <view />
                    <view />
                    <view />
                </view>
                <text>直播中</text>
            </view>
            <text v-else class="center-match-card__date">{{ dateText }}</text>
        </view>

        <view class="center-match-card__body">
            <view class="center-match-card__team">
                <image v-if="match.home_icon" class="center-match-card__team-logo" :src="match.home_icon"
                    mode="aspectFit" referrerpolicy="no-referrer" />
                <view v-else class="center-match-card__team-logo center-match-card__team-logo--fallback">
                    <text>{{ teamInitial(match.home_team) }}</text>
                </view>
                <text class="center-match-card__team-name">{{ match.home_team || '主队' }}</text>
            </view>

            <view class="center-match-card__center">
                <template v-if="isUpcoming">
                    <text class="center-match-card__day">{{ dayText }}</text>
                    <text class="center-match-card__time">{{ timeText }}</text>
                </template>
                <template v-else>
                    <text class="center-match-card__score">{{ scoreText }}</text>
                    <text class="center-match-card__minute" :class="{ 'center-match-card__minute--live': isLive }">
                        {{ statusMeta }}
                    </text>
                    <text v-if="isLive" class="center-match-card__status-text">直播中</text>
                </template>
            </view>

            <view class="center-match-card__team center-match-card__team--away">
                <image v-if="match.away_icon" class="center-match-card__team-logo" :src="match.away_icon"
                    mode="aspectFit" referrerpolicy="no-referrer" />
                <view v-else class="center-match-card__team-logo center-match-card__team-logo--fallback">
                    <text>{{ teamInitial(match.away_team) }}</text>
                </view>
                <text class="center-match-card__team-name">{{ match.away_team || '客队' }}</text>
            </view>
        </view>

        <view class="center-match-card__actions">
            <view class="center-match-card__button center-match-card__button--outline" @tap.stop="emit('detail')">
                <text>比赛详情</text>
            </view>
            <view class="center-match-card__button center-match-card__button--primary" @tap.stop="handlePrimaryAction">
                <text>{{ primaryActionText }}</text>
                <view v-if="isLive" class="center-match-card__play-icon" />
                <text v-else class="center-match-card__ai-mark">AI</text>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { getLocalMatchDate } from '@/utils/match-time'

const props = defineProps<{
    match: any
}>()

const emit = defineEmits<{
    (e: 'detail'): void
    (e: 'ai'): void
}>()

const status = computed(() => Number(props.match?.status ?? 0))
const isLive = computed(() => status.value === 1)
const isUpcoming = computed(() => status.value === 0)
const cardType = computed(() => {
    if (isLive.value) return 'live'
    if (isUpcoming.value) return 'upcoming'
    if (status.value === 2) return 'ended'
    return 'other'
})

const matchDate = computed(() => getLocalMatchDate(props.match?.match_time, props.match))

const dateText = computed(() => {
    const date = matchDate.value
    if (!date) return ''
    return `${date.getMonth() + 1}/${date.getDate()}`
})

const timeText = computed(() => {
    const date = matchDate.value
    if (!date) return '--:--'
    return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
})

const dayText = computed(() => {
    const date = matchDate.value
    if (!date) return '待定'
    const today = new Date()
    const target = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()
    const current = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime()
    const offset = Math.round((target - current) / 86400000)
    if (offset === 0) return '今日'
    if (offset === 1) return '明日'
    if (offset === -1) return '昨日'
    return `${date.getMonth() + 1}月${date.getDate()}日`
})

const scoreText = computed(() => `${Number(props.match?.home_score || 0)} : ${Number(props.match?.away_score || 0)}`)

const statusMeta = computed(() => {
    if (isLive.value) return String(props.match?.current_minute || '').trim() || timeText.value
    if (status.value === 2) return '已结束'
    if (status.value === 3) return '已推迟'
    return timeText.value
})

const primaryActionText = computed(() => isLive.value ? '看直播' : 'AI 分析')

const teamInitial = (name: any) => String(name || '?').trim().slice(0, 1)

const handlePrimaryAction = () => {
    if (isLive.value) {
        emit('detail')
        return
    }
    emit('ai')
}
</script>

<style lang="scss" scoped>
.center-match-card {
    padding: 16rpx 18rpx 14rpx;
    border: 1rpx solid #e7eaf0;
    border-radius: 18rpx;
    background: #fff;
    box-shadow: 0 10rpx 28rpx rgba(34, 48, 86, 0.07);

    &__head,
    &__league,
    &__live-tag,
    &__actions,
    &__button,
    &__live-bars {
        display: flex;
        align-items: center;
    }

    &__head {
        min-width: 0;
        justify-content: space-between;
        gap: 10rpx;
    }

    &__league {
        min-width: 0;
        flex: 1;
        color: #202534;
        font-size: 22rpx;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
    }

    &__league-icon {
        width: 28rpx;
        height: 28rpx;
        margin-right: 8rpx;
        flex-shrink: 0;
    }

    &__league-dot {
        width: 10rpx;
        height: 10rpx;
        margin-right: 9rpx;
        border-radius: 50%;
        background: #156bf6;
        box-shadow: 0 0 0 5rpx #eaf2ff;
        flex-shrink: 0;
    }

    &__round {
        min-width: 0;
        color: #5f6675;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &__date {
        color: #8b92a0;
        font-size: 20rpx;
        flex-shrink: 0;
    }

    &__live-tag {
        height: 32rpx;
        padding: 0 10rpx;
        gap: 6rpx;
        border-radius: 8rpx;
        background: #fff0f0;
        color: #f04444;
        font-size: 19rpx;
        font-weight: 700;
        flex-shrink: 0;
    }

    &__live-bars {
        height: 16rpx;
        gap: 3rpx;
        align-items: flex-end;

        view {
            width: 3rpx;
            border-radius: 4rpx;
            background: #f04444;

            &:nth-child(1) {
                height: 8rpx;
            }

            &:nth-child(2) {
                height: 16rpx;
            }

            &:nth-child(3) {
                height: 12rpx;
            }
        }
    }

    &__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 144rpx minmax(0, 1fr);
        align-items: center;
        gap: 8rpx;
        min-height: 154rpx;
        padding: 14rpx 4rpx 10rpx;
    }

    &__team,
    &__center {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    &__team-logo {
        width: 72rpx;
        height: 72rpx;
        flex-shrink: 0;

        &--fallback {
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(145deg, #eaf2ff 0%, #d9e7ff 100%);
            color: #176cf6;
            font-size: 28rpx;
            font-weight: 800;
        }
    }

    &__team-name {
        width: 100%;
        margin-top: 8rpx;
        color: #171b26;
        font-size: 24rpx;
        font-weight: 700;
        line-height: 1.3;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &__center {
        justify-content: center;
    }

    &__score {
        color: #111522;
        font-size: 40rpx;
        font-weight: 800;
        letter-spacing: 3rpx;
        line-height: 1;
    }

    &__minute,
    &__day {
        margin-top: 10rpx;
        color: #4e5667;
        font-size: 21rpx;

        &--live {
            color: #10a83d;
            font-weight: 700;
        }
    }

    &__status-text {
        margin-top: 4rpx;
        color: #10a83d;
        font-size: 20rpx;
    }

    &__time {
        margin-top: 4rpx;
        color: #116cf7;
        font-size: 32rpx;
        font-weight: 800;
        line-height: 1.1;
    }

    &__actions {
        gap: 14rpx;
    }

    &__button {
        flex: 1;
        min-width: 0;
        height: 54rpx;
        justify-content: center;
        gap: 8rpx;
        border-radius: 12rpx;
        font-size: 23rpx;
        font-weight: 700;
        box-sizing: border-box;

        &--outline {
            border: 2rpx solid #1470f8;
            color: #1470f8;
            background: #fff;
        }

        &--primary {
            color: #fff;
            background: linear-gradient(100deg, #1976ff 0%, #0862ef 100%);
            box-shadow: 0 8rpx 18rpx rgba(20, 105, 246, 0.2);
        }
    }

    &__play-icon {
        width: 0;
        height: 0;
        border-top: 8rpx solid transparent;
        border-bottom: 8rpx solid transparent;
        border-left: 12rpx solid #fff;
    }

    &__ai-mark {
        height: 30rpx;
        min-width: 30rpx;
        padding: 0 5rpx;
        border-radius: 999rpx;
        background: rgba(255, 255, 255, 0.22);
        font-size: 16rpx;
        line-height: 30rpx;
        text-align: center;
    }

    &--ended {
        background: #fafbfc;
        box-shadow: none;
    }
}
</style>
