<template>
    <page-meta :page-style="showAiPopup ? 'overflow: hidden;' : ''" />
    <view class="draw-list-page" :class="{ 'page-no-scroll': showAiPopup }">
        <!-- 导航栏 -->
        <view class="dl-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
            <view class="dl-nav__content">
                <view class="dl-nav__back" @tap="goBack">
                    <u-icon name="arrow-left" size="36" color="#fff" />
                </view>
                <text class="dl-nav__title">{{ categoryName }}</text>
                <view class="dl-nav__placeholder" />
            </view>
        </view>

        <!-- 开奖列表 -->
        <z-paging ref="paging" v-model="drawList" @query="queryList" :fixed="false">
            <view v-for="item in drawList" :key="item.code + item.issue" class="draw-card">
                <view class="draw-card__header">
                    <text class="draw-card__period">第 {{ item.issue }} 期</text>
                    <text class="draw-card__date">{{ item.draw_time }}</text>
                    <view class="draw-card__badge" :class="{ 'draw-card__badge--pending': item.status !== 1 }">
                        <text>{{ item.status === 1 ? '已开奖' : '待开奖' }}</text>
                    </view>
                </view>
                <view v-if="item.status === 1 && item.numbers?.length" class="draw-card__balls">
                    <template v-for="(ball, i) in item.numbers" :key="i">
                        <text v-if="i === item.numbers.length - 1" class="ball__plus">+</text>
                        <view class="ball-wrap">
                            <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 }}</text>
                        </view>
                    </template>
                </view>
                <view v-if="item.status !== 1" class="draw-card__pending">
                    <text>等待开奖...</text>
                    <view class="ai-predict-btn" @tap.stop="openAiPopup(item)">
                        <view class="ai-predict-btn__pulse" />
                        <text class="ai-predict-btn__icon">AI</text>
                        <text class="ai-predict-btn__text">智能预测</text>
                        <text class="ai-predict-btn__arrow">›</text>
                    </view>
                </view>
            </view>
        </z-paging>

        <!-- 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>
    </view>
</template>

<script lang="ts" setup>
import { ref, shallowRef, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getDrawResultList, getLatestDrawResult, getLotteryAiPredict } from '@/api/lottery'
import { useUserStore } from '@/stores/user'
import { AI_DAILY_FREE_TEXT, getAiFreeRemain } from '@/config/ai'

const statusBarHeight = ref(0)
const gameCode = ref('')
const gameTemplate = ref('')
const categoryName = ref('')
const drawList = ref<any[]>([])
const latestDraw = ref<any>(null)
const paging = shallowRef()

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

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

const fetchLatest = async () => {
    try {
        const data = await getLatestDrawResult({ code: gameCode.value })
        latestDraw.value = data
    } catch (e) {
        console.log('获取最新开奖失败=>', e)
    }
}

const queryList = async (pageNo: number, pageSize: number) => {
    try {
        const res = await getDrawResultList({
            code: gameCode.value,
            page_no: pageNo,
            page_size: pageSize
        })
        const lists = res?.lists || []
        lists.forEach((item: any) => { item.game_name = categoryName.value })
        paging.value?.complete(lists)
    } catch (e) {
        paging.value?.complete(false)
    }
}

const goDetail = (item: any) => {
    uni.navigateTo({ url: `/packages_lottery/pages/detail?code=${item.code}&issue=${item.issue}` })
}

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 aiAnalysis = computed(() => aiData.value?.analysis || null)
const currentAiItem = ref<any>(null)

const openAiPopup = (item: any) => {
    const code = gameCode.value
    const name = categoryName.value || ''
    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 data = await getLotteryAiPredict({ code: gameCode.value })
        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 goBack = () => {
    uni.navigateBack()
}

onLoad((options: any) => {
    gameCode.value = options.code || ''
    gameTemplate.value = options.template || ''
    categoryName.value = decodeURIComponent(options.name || '开奖记录')
    fetchLatest()
})
</script>

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

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

.dl-nav {
    background: linear-gradient(135deg, #185dff, #ff6b6b);

    &__content {
        height: 44px;
        display: flex;
        align-items: center;
        padding: 0 24rpx;
    }

    &__back {
        width: 60rpx;
        height: 44px;
        display: flex;
        align-items: center;
    }

    &__title {
        flex: 1;
        text-align: center;
        font-size: 34rpx;
        font-weight: bold;
        color: #fff;
    }

    &__placeholder {
        width: 60rpx;
    }
}

.draw-card {
    margin: 20rpx 24rpx 0;
    background: #fff;
    border-radius: 16rpx;
    padding: 24rpx;

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

    &__period {
        font-size: 28rpx;
        font-weight: bold;
        color: #222;
    }

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

    &__badge {
        font-size: 22rpx;
        color: #22c55e;
        background: #f0fdf4;
        padding: 4rpx 16rpx;
        border-radius: 8rpx;

        &--pending {
            color: #f59e0b;
            background: #fffbeb;
        }
    }

    &__balls {
        display: flex;
        align-items: center;
        gap: 10rpx;
        flex-wrap: wrap;
        margin-bottom: 16rpx;
    }

    &__pending {
        text-align: center;
        padding: 20rpx;
        color: #999;
        font-size: 26rpx;
    }
}

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

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

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

    &--green {
        background: linear-gradient(135deg, #22c55e, #4ade80);
    }

    &--special {
        border: 3rpx solid #fbbf24;
    }

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

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

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

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

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

.ball-zodiac {
    font-size: 20rpx;
    color: #666;

    &--special {
        color: #185dff;
        font-weight: bold;
    }
}

/* AI预测按钮 */
.ai-predict-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10rpx;
    margin-top: 20rpx;
    padding: 16rpx 36rpx;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 36rpx;
    box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);

    &__pulse {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 36rpx;
        background: linear-gradient(135deg, #667eea, #764ba2);
        animation: pulse-glow 2s ease-in-out infinite;
        z-index: 0;
    }

    &__icon {
        position: relative;
        z-index: 1;
        font-size: 24rpx;
        color: #fff;
        font-weight: 900;
        background: rgba(255, 255, 255, 0.3);
        padding: 4rpx 14rpx;
        border-radius: 10rpx;
        letter-spacing: 2rpx;
    }

    &__text {
        position: relative;
        z-index: 1;
        font-size: 28rpx;
        color: #fff;
        font-weight: bold;
        letter-spacing: 2rpx;
    }

    &__arrow {
        position: relative;
        z-index: 1;
        font-size: 36rpx;
        color: rgba(255, 255, 255, 0.8);
        font-weight: bold;
        margin-left: 4rpx;
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.06);
    }
}

/* 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>
