<template>
    <view class="lottery-page" :class="{ 'page-no-scroll': showAiPopup }">
        <!-- 顶部导航 -->
        <view class="lottery-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
            <view class="lottery-nav__content">
                <image v-if="websiteLogo" class="lottery-nav__logo" :src="websiteLogo" mode="aspectFit" />
                <text class="lottery-nav__title">彩票中心</text>
            </view>
            <view class="lottery-nav__right" @tap="showSharePopup = true">
                <u-icon name="share" size="36" color="#333" />
            </view>
        </view>

        <!-- 一级分类Tab -->
        <scroll-view scroll-x class="game-category-tabs">
            <view class="game-category-tabs__inner">
                <view v-for="cat in gameCategories" :key="cat.value" class="game-category-tab"
                    :class="{ 'game-category-tab--active': currentGameCategory === cat.value }"
                    @tap="switchGameCategory(cat.value)">
                    <text class="game-category-tab__label">{{ cat.label }}</text>
                </view>
            </view>
        </scroll-view>

        <!-- 二级彩种网格 -->
        <view v-if="currentGames.length" class="game-grid">
            <view v-for="game in currentGames" :key="game.code" class="game-grid__item"
                :class="{ 'game-grid__item--active': selectedGameCode === game.code }" @tap="selectGame(game)">
                <view class="game-grid__icon"
                    :class="game.icon ? '' : 'game-grid__icon--' + game.template.toLowerCase()">
                    <image v-if="game.icon" class="game-grid__icon-img" :src="game.icon" mode="aspectFit" />
                    <text v-else class="game-grid__icon-text">{{ game.name.substring(0, 2) }}</text>
                </view>
                <text class="game-grid__name">{{ game.name }}</text>
                <text class="game-grid__count">日开{{ game.open_count }}期</text>
            </view>
        </view>
        <view v-else class="game-grid__empty">
            <text>暂无彩种</text>
        </view>

        <!-- 下期预测（选中彩种时显示） -->
        <view v-if="selectedGameCode && nextDrawInfo" class="predict-card">
            <view class="predict-card__header">
                <view class="predict-card__left">
                    <text class="predict-card__name">{{ selectedGameName }}</text>
                    <view class="predict-card__badge">
                        <text>第</text>
                        <text class="predict-card__issue">{{ nextDrawInfo.next_issue }}</text>
                        <text>期</text>
                    </view>
                </view>
                <view class="predict-card__right">
                    <text class="predict-card__date">{{ fmtDate(nextDrawInfo.draw_date) }}</text>
                    <view class="predict-card__status">
                        <text>待开奖</text>
                    </view>
                </view>
            </view>
            <view class="predict-card__body">
                <view class="predict-card__countdown">
                    <view class="predict-card__clock-icon">
                        <text class="predict-card__clock-svg">🕐</text>
                    </view>
                    <text class="predict-card__countdown-text">{{ getCountdown(nextDrawInfo.next_time) || '即将开奖'
                    }}</text>
                </view>
                <view class="predict-card__ai-btn" @tap="openAiPopup({ category_id: 0, code: selectedGameCode })">
                    <view class="predict-card__star predict-card__star--left">✦</view>
                    <view class="predict-card__ai-badge">AI</view>
                    <text class="predict-card__ai-text"> 智能预测</text>
                    <view class="predict-card__star predict-card__star--right">✦</view>
                </view>
            </view>
        </view>

        <!-- 最新开奖卡片 -->
        <view v-for="draw in latestDraws" :key="draw.code + draw.issue" class="latest-card">
            <view class="latest-card__header">
                <view class="latest-card__left">
                    <view class="latest-card__logo">
                        <image v-if="draw.icon" class="latest-card__logo-img" :src="draw.icon" mode="aspectFit" />
                        <text v-else class="latest-card__logo-text">{{ (draw.game_name || '').substring(0, 1) }}</text>
                    </view>
                    <view class="latest-card__meta">
                        <text class="latest-card__name">{{ draw.game_name }}</text>
                        <view class="latest-card__sub">
                            <text class="latest-card__period">第<text class="latest-card__issue">{{ draw.issue
                                    }}</text>期</text>
                            <text class="latest-card__date">{{ fmtDate(draw.draw_time) }}</text>
                        </view>
                    </view>
                </view>
                <view class="latest-card__right">
                    <view v-if="draw.next_issue" class="latest-card__next-row">
                        <text class="latest-card__next-label">下一期</text>
                        <text class="latest-card__next-issue">{{ draw.next_issue }}</text>
                    </view>
                    <text v-if="draw.next_time && getCountdown(draw.next_time)" class="latest-card__cd">{{
                        getCountdown(draw.next_time) }}</text>
                </view>
            </view>
            <view class="latest-card__divider"></view>
            <view v-if="draw.numbers?.length" class="latest-card__balls">
                <template v-for="(ball, i) in draw.numbers" :key="i">
                    <text v-if="i === draw.numbers.length - 1" class="ball__plus">+</text>
                    <view class="ball-wrap">
                        <view class="ball"
                            :class="'ball--' + (ball.color || (i === draw.numbers.length - 1 ? 'blue' : 'red'))">
                            <text class="ball__num">{{ formatNum(ball.num ?? ball) }}</text>
                        </view>
                        <text v-if="ball.zodiac" class="ball-zodiac">{{ ball.zodiac }}</text>
                    </view>
                </template>
            </view>
            <view class="latest-card__ai" @tap="goAiPredict(draw)">
                <text class="latest-card__ai-badge">AI</text>
                <text class="latest-card__ai-text">智能分析</text>
                <text class="latest-card__ai-arrow">›</text>
            </view>
        </view>

        <!-- 历史开奖（选中彩种时显示） -->
        <view v-if="selectedGameCode && drawList.length" class="draw-section">
            <view class="draw-section__header">
                <text class="draw-section__title">{{ selectedGameName }} 开奖历史</text>
            </view>
            <view v-for="item in drawList" :key="item.code + item.issue" class="draw-item">
                <view class="draw-item__head">
                    <text class="draw-item__cat">{{ item.game_name || item.code }}</text>
                    <text class="draw-item__period">第 {{ item.issue }} 期</text>
                    <text class="draw-item__date">{{ fmtDate(item.draw_time) }}</text>
                    <view class="draw-item__status" :class="{ 'draw-item__status--pending': !item.numbers?.length }">
                        <text>{{ item.numbers?.length ? '已开奖' : '待开奖' }}</text>
                    </view>
                </view>
                <view v-if="item.numbers?.length" class="draw-item__balls">
                    <template v-for="(ball, i) in item.numbers" :key="i">
                        <text v-if="i === item.numbers.length - 1" class="ball__plus ball__plus--sm">+</text>
                        <view class="ball-wrap ball-wrap--sm">
                            <view class="ball ball--sm"
                                :class="'ball--' + (ball.color || (i === item.numbers.length - 1 ? 'blue' : 'red'))">
                                <text class="ball__num">{{ formatNum(ball.num ?? ball) }}</text>
                            </view>
                            <text v-if="ball.zodiac" class="ball-zodiac ball-zodiac--sm">{{ ball.zodiac }}</text>
                        </view>
                    </template>
                </view>
                <view v-else class="draw-item__pending">
                    <text class="draw-item__pending-text">等待开奖...</text>
                </view>
            </view>
            <view v-if="drawLoading" class="draw-loading">
                <text>加载中...</text>
            </view>
            <view v-if="!drawLoading && drawNoMore" class="draw-nomore">
                <text>没有更多了</text>
            </view>
        </view>

        <!-- AI分析弹窗 -->
        <view v-if="showAiPopup" class="ai-popup-mask" @tap="closeAiPopup" @touchmove.stop.prevent>
            <view class="ai-popup" @tap.stop @touchmove.stop>
                <view class="ai-popup__header" @touchmove.stop.prevent>
                    <text class="ai-popup__title">AI智能预测</text>
                    <view class="ai-popup__close" @tap="closeAiPopup">
                        <text>✕</text>
                    </view>
                </view>
                <view class="ai-popup__vip-bar" @touchmove.stop.prevent>
                    <view v-if="isVipUser" class="vip-bar vip-bar--vip">
                        <text class="vip-bar__badge">VIP</text>
                        <text class="vip-bar__text">尊贵的{{ vipLevelName }}，您的到期时间为{{ vipExpireDate }}</text>
                    </view>
                    <view v-else class="vip-bar vip-bar--free">
                        <text class="vip-bar__badge vip-bar__badge--free">免费</text>
                        <text class="vip-bar__text">{{ AI_DAILY_FREE_TEXT }}，今日剩余{{ freeRemain }}次</text>
                    </view>
                </view>
                <scroll-view scroll-y class="ai-popup__body" @touchmove.stop>
                    <view v-if="aiLoading" class="ai-popup__loading">
                        <view class="ai-loading-anim">
                            <view class="ai-loading-dot" />
                            <view class="ai-loading-dot" />
                            <view class="ai-loading-dot" />
                        </view>
                        <text>AI深度分析中，请稍候...</text>
                    </view>
                    <view v-if="aiError" class="ai-popup__error">
                        <text>{{ aiError }}</text>
                        <view class="ai-popup__retry" @tap="retryAiPredict">
                            <text>重试</text>
                        </view>
                    </view>
                    <view v-if="!aiLoading && aiAnalysis" class="ai-popup__result">
                        <view v-if="aiAnalysis.hot_numbers?.length" class="ai-block">
                            <text class="ai-block__label">热号（近期高频）</text>
                            <view class="ai-nums">
                                <view v-for="n in aiAnalysis.hot_numbers" :key="'h' + n" class="ai-num ai-num--hot">
                                    <text>{{ formatNum(n) }}</text>
                                </view>
                            </view>
                        </view>
                        <view v-if="aiAnalysis.cold_numbers?.length" class="ai-block">
                            <text class="ai-block__label">冷号（近期低频）</text>
                            <view class="ai-nums">
                                <view v-for="n in aiAnalysis.cold_numbers" :key="'c' + n" class="ai-num ai-num--cold">
                                    <text>{{ formatNum(n) }}</text>
                                </view>
                            </view>
                        </view>
                        <view v-if="aiAnalysis.trend_analysis" class="ai-block">
                            <text class="ai-block__label">趋势分析</text>
                            <text class="ai-block__text">{{ aiAnalysis.trend_analysis }}</text>
                        </view>
                        <view v-if="aiAnalysis.recommended_combinations?.length" class="ai-block">
                            <text class="ai-block__label">推荐组合</text>
                            <view v-for="(combo, ci) in aiAnalysis.recommended_combinations" :key="ci" class="ai-combo">
                                <view class="ai-combo__nums">
                                    <view v-for="n in combo.numbers" :key="n" class="ai-num ai-num--rec">
                                        <text>{{ formatNum(n) }}</text>
                                    </view>
                                </view>
                                <text class="ai-combo__conf">信心 {{ combo.confidence }}%</text>
                            </view>
                        </view>
                        <view v-if="aiAnalysis.statistics" class="ai-block">
                            <text class="ai-block__label">统计数据</text>
                            <view class="ai-stats">
                                <view v-if="aiAnalysis.statistics.odd_even_ratio" class="ai-stat">
                                    <text class="ai-stat__label">奇偶比</text>
                                    <text class="ai-stat__val">{{ aiAnalysis.statistics.odd_even_ratio }}</text>
                                </view>
                                <view v-if="aiAnalysis.statistics.big_small_ratio" class="ai-stat">
                                    <text class="ai-stat__label">大小比</text>
                                    <text class="ai-stat__val">{{ aiAnalysis.statistics.big_small_ratio }}</text>
                                </view>
                                <view v-if="aiAnalysis.statistics.sum_range" class="ai-stat">
                                    <text class="ai-stat__label">和值范围</text>
                                    <text class="ai-stat__val">{{ aiAnalysis.statistics.sum_range }}</text>
                                </view>
                            </view>
                        </view>
                        <view class="ai-block ai-block--disclaimer">
                            <text class="ai-block__disclaimer">{{ aiAnalysis.disclaimer || '本分析仅基于历史数据统计，不保证准确性，请理性购彩'
                                }}</text>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>

        <share-popup v-if="showSharePopup" v-model:show="showSharePopup" page-type="news" page-id="lottery"
            :path="'/packages_lottery/pages/index'" title="彩票中心" />
    </view>
</template>

<script lang="ts" setup>
import { ref, computed, onUnmounted } from 'vue'
import { onLoad, onUnload, onReachBottom } from '@dcloudio/uni-app'
import { getLotteryAiPredict, getLotteryGameList, getLatestDrawResult, getDrawResultList } from '@/api/lottery'
import { useUserStore } from '@/stores/user'
import { useAppStore } from '@/stores/app'
import SharePopup from '@/components/share-popup/share-popup.vue'
import { AI_DAILY_FREE_TEXT, getAiFreeRemain } from '@/config/ai'

const showSharePopup = ref(false)

const appStore = useAppStore()
const websiteLogo = computed(() => appStore.getWebsiteConfig.shop_logo || '')

const statusBarHeight = ref(0)
const latestDraws = ref<any[]>([])
const gameSelections = ref<Record<number, { code: string; name: string }>>(uni.getStorageSync('lottery_selections') || {})
const selectedGameCode = ref('')
const selectedGameName = ref('')

const saveSelections = () => {
    uni.setStorageSync('lottery_selections', gameSelections.value)
}

const restoreSelection = () => {
    const saved = gameSelections.value[currentGameCategory.value]
    if (saved?.code) {
        selectedGameCode.value = saved.code
        selectedGameName.value = saved.name
    } else {
        selectedGameCode.value = ''
        selectedGameName.value = ''
    }
    drawList.value = []
}
const drawList = ref<any[]>([])
const drawLoading = ref(false)
const drawPageNo = ref(1)

const nextDrawInfo = computed(() => {
    if (!selectedGameCode.value || !latestDraws.value.length) return null
    const draw = latestDraws.value[0]
    if (!draw?.next_issue) return null
    const drawDate = draw.next_time ? draw.next_time.split(' ')[0] : ''
    return { next_issue: draw.next_issue, next_time: draw.next_time, draw_date: drawDate }
})
const drawPageSize = 20
const drawNoMore = ref(false)

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

const gameCategories = ref<any[]>([])
const currentGameCategory = ref<number>(uni.getStorageSync('lottery_category') || 0)

const currentGames = computed(() => {
    const cat = gameCategories.value.find((c: any) => c.value === currentGameCategory.value)
    return cat?.games || []
})

const fetchGameList = async () => {
    try {
        const data = await getLotteryGameList()
        gameCategories.value = data || []
        if (data?.length > 0) {
            const cached = currentGameCategory.value
            const valid = data.some((c: any) => c.value === cached)
            if (!cached || !valid) {
                currentGameCategory.value = data[0].value
                uni.setStorageSync('lottery_category', data[0].value)
            }
        }
        restoreSelection()
        fetchLatest()
        if (selectedGameCode.value) fetchDrawList(true)
    } catch (e) {
        console.log('获取彩种列表失败=>', e)
    }
}

const switchGameCategory = (val: number) => {
    currentGameCategory.value = val
    uni.setStorageSync('lottery_category', val)
    restoreSelection()
    fetchLatest()
    if (selectedGameCode.value) fetchDrawList(true)
}

const selectGame = (game: any) => {
    if (selectedGameCode.value === game.code) {
        selectedGameCode.value = ''
        selectedGameName.value = ''
        drawList.value = []
        delete gameSelections.value[currentGameCategory.value]
    } else {
        selectedGameCode.value = game.code
        selectedGameName.value = game.name
        gameSelections.value[currentGameCategory.value] = { code: game.code, name: game.name }
        fetchDrawList(true)
    }
    saveSelections()
    fetchLatest()
}


const fmtDate = (s: string) => {
    if (!s) return ''
    const m = s.match(/(\d{2})-(\d{2})\s+(\d{2}):(\d{2})/)
    return m ? `${m[1]}-${m[2]} ${m[3]}:${m[4]}` : s.replace(/^\d{4}-/, '')
}

const formatNum = (n: any) => {
    const num = Number(n)
    return num < 10 ? '0' + num : String(num)
}

const fetchLatest = async () => {
    try {
        const data = await getLatestDrawResult()
        const allList = Array.isArray(data) ? data : data ? [data] : []
        const allGames = gameCategories.value.flatMap((c: any) => c.games || [])
        const iconMap: Record<string, string> = {}
        allGames.forEach((g: any) => { if (g.icon) iconMap[g.code] = g.icon })
        let filtered: any[]
        if (selectedGameCode.value) {
            filtered = allList.filter((d: any) => d.code === selectedGameCode.value)
        } else {
            const codes = currentGames.value.map((g: any) => g.code)
            filtered = codes.length ? allList.filter((d: any) => codes.includes(d.code)) : allList
        }
        filtered.forEach((d: any) => { d.icon = iconMap[d.code] || '' })
        latestDraws.value = filtered
    } catch (e) {
        console.log('获取最新开奖失败=>', e)
    }
}


const fetchDrawList = async (refresh = false) => {
    if (!selectedGameCode.value) return
    if (refresh) {
        drawPageNo.value = 1
        drawNoMore.value = false
    }
    if (drawNoMore.value || drawLoading.value) return
    drawLoading.value = true
    try {
        const res = await getDrawResultList({ code: selectedGameCode.value, page_no: drawPageNo.value, page_size: drawPageSize })
        const lists = res?.lists || []
        lists.forEach((item: any) => { item.game_name = selectedGameName.value || item.code })
        if (refresh) {
            drawList.value = lists
        } else {
            drawList.value = [...drawList.value, ...lists]
        }
        if (lists.length < drawPageSize) {
            drawNoMore.value = true
        } else {
            drawPageNo.value++
        }
    } catch (e) {
        console.log('获取开奖列表失败=>', e)
    } finally {
        drawLoading.value = false
    }
}

const userStore = useUserStore()
const vipInfo = computed(() => userStore.userInfo?.vip_info || {})
const isVipUser = computed(() => !!vipInfo.value.is_vip)
const vipLevelName = computed(() => vipInfo.value.vip_level_name || '会员')
const vipExpireDate = computed(() => vipInfo.value.vip_expire_time || '')
const aiRemainOverride = ref<number | null>(null)
const freeRemain = computed(() => aiRemainOverride.value ?? getAiFreeRemain(vipInfo.value))
const syncAiRemain = (res: any) => {
    if (res?.remain_count !== undefined) {
        aiRemainOverride.value = Number(res.remain_count)
    }
}

const showAiPopup = ref(false)
const aiLoading = ref(false)
const aiError = ref('')
const aiData = ref<any>(null)
const aiCategoryId = ref(0)
const aiGameCode = ref('')
const aiAnalysis = computed(() => aiData.value?.analysis || null)

const openAiPopup = (item: any) => {
    const code = item.code || aiGameCode.value || selectedGameCode.value
    const name = selectedGameName.value || ''
    if (!code) return
    uni.navigateTo({
        url: `/packages_lottery/pages/ai_predict?code=${code}&name=${encodeURIComponent(name)}`
    })
}

const goAiPredict = (draw: any) => {
    const code = draw.code
    const name = draw.game_name || ''
    if (!code) return
    uni.navigateTo({
        url: `/packages_lottery/pages/ai_predict?code=${code}&name=${encodeURIComponent(name)}`
    })
}

const fetchAiPredict = async () => {
    aiLoading.value = true
    aiError.value = ''
    try {
        const params: any = {}
        if (aiGameCode.value) params.code = aiGameCode.value
        if (aiCategoryId.value) params.category_id = aiCategoryId.value
        const data = await getLotteryAiPredict(params)
        syncAiRemain(data)
        aiData.value = data
    } catch (e: any) {
        aiError.value = e?.msg || 'AI分析失败，请稍后重试'
    } finally {
        aiLoading.value = false
    }
}

const retryAiPredict = () => {
    fetchAiPredict()
}

const closeAiPopup = () => {
    showAiPopup.value = false
    aiData.value = null
    aiError.value = ''
}

const countdownTick = ref(0)
let countdownTimer: ReturnType<typeof setInterval> | null = null

const getCountdown = (nextTime: string) => {
    void countdownTick.value
    const target = new Date(nextTime).getTime()
    const now = Date.now()
    const diff = target - now
    if (diff <= 0) return ''
    const d = Math.floor(diff / 86400000)
    const h = Math.floor((diff % 86400000) / 3600000)
    const m = Math.floor((diff % 3600000) / 60000)
    const s = Math.floor((diff % 60000) / 1000)
    const pad = (n: number) => (n < 10 ? '0' + n : String(n))
    if (d > 0) return `${d}天 ${pad(h)}:${pad(m)}:${pad(s)}`
    return `${pad(h)}:${pad(m)}:${pad(s)}`
}

const startCountdown = () => {
    if (countdownTimer) return
    countdownTimer = setInterval(() => {
        countdownTick.value++
    }, 1000)
}

const stopCountdown = () => {
    if (countdownTimer) {
        clearInterval(countdownTimer)
        countdownTimer = null
    }
}

onLoad(() => {
    fetchGameList()
    startCountdown()
})

onUnload(() => {
    stopCountdown()
})

onUnmounted(() => {
    stopCountdown()
})

onReachBottom(() => {
    if (selectedGameCode.value) {
        fetchDrawList()
    }
})

</script>

<style lang="scss" scoped>
.lottery-page {
    min-height: 100vh;
    background: #f5f5f5;
}

.page-no-scroll {
    height: 100vh;
    overflow: hidden;
}

/* 导航栏 */
.lottery-nav {
    background: #fff;
    display: flex;
    align-items: center;

    &__content {
        height: 54px;
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        gap: 12rpx;
        flex: 1;
    }

    &__right {
        width: 64rpx;
        height: 64rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16rpx;
    }

    &__logo {
        width: 68rpx;
        height: 68rpx;
        border-radius: 12rpx;
        flex-shrink: 0;
    }

    &__title {
        font-size: 36rpx;
        font-weight: bold;
        color: #0053d8;
    }
}

/* 一级分类Tab */
.game-category-tabs {
    background: #fff;
    white-space: nowrap;

    &__inner {
        display: inline-flex;
        padding: 16rpx 30rpx;
        gap: 16rpx;
    }
}

.game-category-tab {
    height: 68rpx;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 32rpx;
    border-radius: 34rpx;
    background: #f4f5f7;
    flex-shrink: 0;

    &__label {
        font-size: 28rpx;
        color: #666;
        white-space: nowrap;
    }

    &--active {
        background: linear-gradient(135deg, #185dff, #6366f1);

        .game-category-tab__label {
            color: #fff;
            font-weight: bold;
        }
    }
}

/* 二级彩种网格 */
.game-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx 30rpx;
    gap: 20rpx;

    &__item {
        width: calc((100% - 60rpx) / 4);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rpx;
        padding: 20rpx 0;
        background: #fff;
        border-radius: 16rpx;
        border: 2rpx solid transparent;
        transition: all 0.2s;

        &--active {
            border-color: #185dff;
            background: #f0f4ff;
        }
    }

    &__icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        &--hk6 {
            background: linear-gradient(135deg, #ff6b6b, #ee3835);
        }

        &--pks {
            background: linear-gradient(135deg, #185dff, #60a5fa);
        }

        &--ssc {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
        }

        &--ks {
            background: linear-gradient(135deg, #10b981, #34d399);
        }

        &--klsf {
            background: linear-gradient(135deg, #8b5cf6, #a78bfa);
        }

        &--qg {
            background: linear-gradient(135deg, #ef4444, #f97316);
        }

        &--klc {
            background: linear-gradient(135deg, #06b6d4, #22d3ee);
        }

        &--pcdd {
            background: linear-gradient(135deg, #6366f1, #818cf8);
        }

        &--bingo {
            background: linear-gradient(135deg, #ec4899, #f472b6);
        }

        &--syxw {
            background: linear-gradient(135deg, #14b8a6, #2dd4bf);
        }

        &--ydh {
            background: linear-gradient(135deg, #f97316, #fb923c);
        }
    }

    &__icon-img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    &__icon-text {
        font-size: 26rpx;
        font-weight: bold;
        color: #fff;
    }

    &__name {
        font-size: 24rpx;
        color: #333;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
        padding: 0 4rpx;
    }

    &__count {
        font-size: 20rpx;
        color: #999;
    }

    &__empty {
        display: flex;
        justify-content: center;
        padding: 60rpx;
        color: #ccc;
        font-size: 28rpx;
    }
}

/* 地区Tab(保留) */
.region-tabs {
    display: none;
}

/* 最新开奖卡片 */
.latest-card {
    margin: 20rpx 30rpx;
    background: #fff;
    border-radius: 24rpx;
    padding: 24rpx 28rpx;

    &__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    &__left {
        display: flex;
        align-items: center;
        gap: 16rpx;
        flex: 1;
        min-width: 0;
    }

    &__logo {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        background: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        overflow: hidden;
    }

    &__logo-img {
        width: 100%;
        height: 100%;
    }

    &__logo-text {
        font-size: 28rpx;
        font-weight: bold;
        color: #999;
    }

    &__meta {
        display: flex;
        flex-direction: column;
        gap: 4rpx;
        min-width: 0;
    }

    &__name {
        font-size: 28rpx;
        font-weight: bold;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &__sub {
        display: flex;
        align-items: center;
        gap: 16rpx;
    }

    &__period {
        font-size: 24rpx;
        color: #185dff;
    }

    &__issue {
        font-size: 24rpx;
        color: #185dff;
        font-weight: bold;
    }

    &__date {
        font-size: 24rpx;
        color: #808080;
    }

    &__right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4rpx;
        flex-shrink: 0;
        margin-left: 16rpx;
    }

    &__next-row {
        display: flex;
        align-items: center;
        gap: 8rpx;
    }

    &__next-label {
        font-size: 24rpx;
        color: #808080;
    }

    &__next-issue {
        font-size: 24rpx;
        color: #000;
        font-weight: bold;
    }

    &__cd {
        font-size: 24rpx;
        color: #569c30;
    }

    &__divider {
        height: 1rpx;
        background: #e6e6e6;
        margin: 20rpx 0;
    }

    &__balls {
        display: flex;
        align-items: flex-start;
        gap: 16rpx;
        flex-wrap: wrap;
    }

    &__ai {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20rpx;
        padding: 14rpx 0;
        background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
        border-radius: 12rpx;
        gap: 8rpx;
    }

    &__ai-badge {
        background: linear-gradient(135deg, #6366f1, #4f46e5);
        color: #fff;
        font-size: 20rpx;
        font-weight: bold;
        padding: 2rpx 10rpx;
        border-radius: 6rpx;
    }

    &__ai-text {
        font-size: 24rpx;
        color: #4f46e5;
        font-weight: 500;
    }

    &__ai-arrow {
        font-size: 28rpx;
        color: #4f46e5;
        font-weight: bold;
    }
}

/* 下期预测卡片 */
.predict-card {
    margin: 20rpx 30rpx 0;
    background: #fff;
    border-radius: 24rpx;
    overflow: hidden;

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

    &__left {
        display: flex;
        align-items: center;
        gap: 12rpx;
    }

    &__name {
        font-size: 28rpx;
        font-weight: bold;
        color: #000;
    }

    &__badge {
        display: flex;
        align-items: center;
        background: #fff0f0;
        border-radius: 16rpx;
        padding: 2rpx 12rpx;
        gap: 2rpx;

        text {
            font-size: 22rpx;
            color: #ee3835;
        }
    }

    &__issue {
        font-weight: bold;
    }

    &__right {
        display: flex;
        align-items: center;
        gap: 12rpx;
    }

    &__date {
        font-size: 24rpx;
        color: #808080;
    }

    &__status {
        background: #e5edff;
        border-radius: 16rpx;
        padding: 2rpx 16rpx;

        text {
            font-size: 22rpx;
            color: #185dff;
        }
    }

    &__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16rpx;
        margin: 0 24rpx 24rpx;
        padding: 24rpx;
        border-radius: 24rpx;
        background: linear-gradient(135deg, #19e1fe, #ec10d5);
    }

    &__countdown {
        display: flex;
        align-items: center;
        gap: 10rpx;
    }

    &__clock-icon {
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &__clock-svg {
        font-size: 24rpx;
        line-height: 1;
    }

    &__countdown-text {
        font-size: 32rpx;
        font-weight: bold;
        color: #fff;
        letter-spacing: 2rpx;
    }

    &__ai-btn {
        display: flex;
        align-items: center;
        gap: 8rpx;
        padding: 10rpx 28rpx;
        border-radius: 64rpx;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.12));
        backdrop-filter: blur(4px);
    }

    &__star {
        font-size: 18rpx;
        color: #fff;
        opacity: 0.85;

        &--left {
            margin-right: 2rpx;
        }

        &--right {
            margin-left: 2rpx;
        }
    }

    &__ai-badge {
        font-size: 18rpx;
        font-weight: 900;
        color: #fff;
        background: rgba(255, 255, 255, 0.3);
        padding: 4rpx 12rpx;
        border-radius: 6rpx;
        letter-spacing: 2rpx;
        line-height: 1.2;
    }

    &__ai-text {
        font-size: 24rpx;
        font-weight: bold;
        color: #fff;
        letter-spacing: 2rpx;
    }
}

/* 号码球 */
.ball {
    width: 66rpx;
    height: 66rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    &--red {
        background: #c80030;
    }

    &--blue {
        background: #024ddf;
    }

    &--green {
        background: #04b900;
    }

    &--sm {
        width: 56rpx;
        height: 56rpx;
    }

    &__num {
        color: #fff;
        font-size: 28rpx;
        font-weight: bold;
    }

    &__plus {
        font-size: 32rpx;
        color: #171a20;
        font-weight: bold;
        display: flex;
        align-items: center;
        height: 66rpx;

        &--sm {
            font-size: 24rpx;
            height: 56rpx;
        }
    }
}

.ball--sm .ball__num {
    font-size: 22rpx;
}

/* 球+生肖容器 */
.ball-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6rpx;

    &--sm {
        gap: 4rpx;
    }
}

.ball-zodiac {
    font-size: 22rpx;
    color: #000;

    &--sm {
        font-size: 20rpx;
    }
}

/* 彩种列表 */
.category-list {
    padding: 0 24rpx;
}

.category-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 16rpx;

    &__left {
        display: flex;
        align-items: center;
        gap: 20rpx;
    }

    &__icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #fff;

        &--hongkong {
            background: linear-gradient(135deg, #185dff, #ff6b6b);
        }

        &--macau {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
        }
    }

    &__info {
        display: flex;
        flex-direction: column;
        gap: 8rpx;
    }

    &__name {
        font-size: 30rpx;
        font-weight: bold;
        color: #222;
    }

    &__desc {
        font-size: 24rpx;
        color: #999;
    }

    &__right {
        display: flex;
        align-items: center;
    }

    &__arrow {
        font-size: 40rpx;
        color: #ccc;
    }
}

/* 开奖历史 */
.draw-section {
    padding: 0 24rpx;
    margin-top: 20rpx;

    &__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20rpx;
    }

    &__title {
        font-size: 32rpx;
        font-weight: bold;
        color: #222;
    }
}

.draw-loading {
    display: flex;
    justify-content: center;
    padding: 40rpx;
    color: #999;
    font-size: 26rpx;
}

.draw-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 16rpx;

    &__head {
        display: flex;
        align-items: center;
        gap: 12rpx;
        margin-bottom: 16rpx;
    }

    &__cat {
        font-size: 26rpx;
        font-weight: bold;
        color: #333;
    }

    &__period {
        font-size: 24rpx;
        color: #185dff;
    }

    &__date {
        font-size: 22rpx;
        color: #999;
        margin-left: auto;
    }

    &__status {
        font-size: 24rpx;
        color: #ee3835;
        background: #ffe5e5;
        padding: 2rpx 14rpx;
        border-radius: 8rpx;
        white-space: nowrap;
        flex-shrink: 0;

        &--pending {
            color: #185dff;
            background: #e5edff;
        }
    }

    &__balls {
        display: flex;
        align-items: center;
        gap: 35rpx;
        flex-wrap: wrap;
    }

    &__pending {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 120rpx;
        border-radius: 12rpx;
        background: linear-gradient(170deg, #19e1fe, #ec10d5);
    }

    &__pending-left {
        display: flex;
        align-items: center;
        gap: 8rpx;
    }

    &__pending-icon {
        width: 36rpx;
        height: 36rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 50%;

        text {
            font-size: 20rpx;
            color: #fff;
            line-height: 1;
        }
    }

    &__pending-time {
        font-size: 28rpx;
        font-weight: bold;
        color: #fff;
        letter-spacing: 2rpx;
    }

    &__pending-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8rpx;
        height: 48rpx;
        padding: 0 32rpx;
        border-radius: 32rpx;
    }

    &__pending-star {
        font-size: 18rpx;
        color: #fff;
    }

    &__pending-text {
        font-size: 22rpx;
        font-weight: bold;
        color: #fff;
        letter-spacing: 2rpx;
    }
}

.draw-nomore {
    display: flex;
    justify-content: center;
    padding: 40rpx;
    font-size: 24rpx;
    color: #ccc;
}


/* VIP提示条 */
.ai-popup__vip-bar {
    padding: 0 30rpx;
}

.vip-bar {
    display: flex;
    align-items: center;
    gap: 12rpx;
    padding: 16rpx 24rpx;
    border-radius: 12rpx;
    margin-top: 16rpx;

    &--vip {
        background: linear-gradient(135deg, #fef3c7, #fde68a);
    }

    &--free {
        background: #f0f4ff;
    }

    &__badge {
        font-size: 20rpx;
        font-weight: 900;
        color: #92400e;
        background: linear-gradient(135deg, #f59e0b, #d97706);
        padding: 4rpx 14rpx;
        border-radius: 8rpx;
        color: #fff;
        letter-spacing: 2rpx;

        &--free {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: #fff;
        }
    }

    &__text {
        font-size: 22rpx;
        color: #666;
        flex: 1;
    }
}

/* 加载动画 */
.ai-loading-anim {
    display: flex;
    justify-content: center;
    gap: 12rpx;
    margin-bottom: 20rpx;
}

.ai-loading-dot {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background: #6366f1;
    animation: dot-bounce 1.4s ease-in-out infinite;

    &:nth-child(2) {
        animation-delay: 0.16s;
    }

    &:nth-child(3) {
        animation-delay: 0.32s;
    }
}

@keyframes dot-bounce {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.4;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* AI弹窗 */
.ai-popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.ai-popup {
    width: 100%;
    max-height: 80vh;
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;
    display: flex;
    flex-direction: column;

    &__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx;
        border-bottom: 1rpx solid #f0f0f0;
    }

    &__title {
        font-size: 32rpx;
        font-weight: bold;
        color: #222;
    }

    &__close {
        width: 56rpx;
        height: 56rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f5f5;
        border-radius: 50%;

        text {
            font-size: 28rpx;
            color: #666;
        }
    }

    &__body {
        flex: 1;
        max-height: 70vh;
        padding: 24rpx 30rpx 48rpx;
    }

    &__loading {
        text-align: center;
        padding: 60rpx;
        color: #6366f1;
        font-size: 28rpx;
    }

    &__error {
        text-align: center;
        padding: 40rpx;
        color: #185dff;
        font-size: 26rpx;
    }

    &__retry {
        display: inline-flex;
        margin-top: 20rpx;
        padding: 10rpx 40rpx;
        background: #E5EDFF;
        border-radius: 24rpx;

        text {
            color: #185dff;
            font-size: 24rpx;
        }
    }

    &__result {
        display: flex;
        flex-direction: column;
        gap: 28rpx;
    }
}

/* AI分析内容 */
.ai-block {
    &__label {
        font-size: 26rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 12rpx;
        display: block;
    }

    &__text {
        font-size: 26rpx;
        color: #666;
        line-height: 1.6;
    }

    &--disclaimer {
        padding-top: 20rpx;
        border-top: 1rpx solid #f0f0f0;
    }

    &__disclaimer {
        font-size: 22rpx;
        color: #ccc;
        text-align: center;
    }
}

.ai-nums {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
}

.ai-num {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    text {
        font-size: 26rpx;
        font-weight: bold;
        color: #fff;
    }

    &--hot {
        background: linear-gradient(135deg, #185dff, #ff6b6b);
    }

    &--cold {
        background: linear-gradient(135deg, #3b82f6, #60a5fa);
    }

    &--rec {
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
    }
}

.ai-combo {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin-bottom: 12rpx;

    &__nums {
        display: flex;
        gap: 8rpx;
    }

    &__conf {
        font-size: 22rpx;
        color: #6366f1;
        background: #eef2ff;
        padding: 4rpx 16rpx;
        border-radius: 12rpx;
        white-space: nowrap;
    }
}

.ai-stats {
    display: flex;
    gap: 24rpx;
    flex-wrap: wrap;
}

.ai-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8f9fa;
    padding: 16rpx 24rpx;
    border-radius: 12rpx;
    min-width: 140rpx;

    &__label {
        font-size: 22rpx;
        color: #999;
        margin-bottom: 8rpx;
    }

    &__val {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
    }
}
</style>
