<template>
    <view class="detail-page">
        <!-- 导航栏 -->
        <view class="dd-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
            <view class="dd-nav__content">
                <view class="dd-nav__back" @tap="goBack">
                    <u-icon name="arrow-left" size="36" color="#fff" />
                </view>
                <text class="dd-nav__title">开奖详情</text>
                <view class="dd-nav__placeholder" />
            </view>
        </view>

        <view v-if="loading" class="dd-loading">
            <text>加载中...</text>
        </view>

        <view v-if="!loading && drawData" class="dd-body">
            <!-- 彩种+期号信息 -->
            <view class="dd-info">
                <text class="dd-info__name">{{ drawData.category?.name || '' }}</text>
                <text class="dd-info__period">第 {{ drawData.period }} 期</text>
                <view class="dd-info__badge" :class="{ 'dd-info__badge--pending': drawData.status === 0 }">
                    <text>{{ drawData.status === 1 ? '已开奖' : '待开奖' }}</text>
                </view>
            </view>
            <text class="dd-date">开奖日期：{{ drawData.draw_date }}</text>

            <!-- 开奖号码 -->
            <view v-if="drawData.status === 1" class="dd-result">
                <text class="dd-result__label">开奖号码</text>
                <view class="dd-result__balls">
                    <view v-for="(num, i) in drawData.numbers" :key="i" class="ball-wrap">
                        <view class="ball" :class="'ball--' + getBallColor(i)">
                            <text class="ball__num">{{ formatNum(num) }}</text>
                        </view>
                        <text class="ball-zodiac">{{ drawData.zodiac?.[i] || '' }}</text>
                    </view>
                    <text class="ball__plus">+</text>
                    <view class="ball-wrap">
                        <view class="ball ball--special" :class="'ball--' + specialColor">
                            <text class="ball__num">{{ formatNum(drawData.special_number) }}</text>
                        </view>
                        <text class="ball-zodiac ball-zodiac--special">{{ specialZodiac }}</text>
                    </view>
                </view>

                <!-- 五行 -->
                <view v-if="drawData.elements?.length" class="dd-extra">
                    <text class="dd-extra__label">五行</text>
                    <view class="dd-extra__tags">
                        <text v-for="(e, i) in drawData.elements" :key="i" class="dd-tag dd-tag--element">{{ e }}</text>
                    </view>
                </view>

                <!-- 波色 -->
                <view v-if="drawData.color?.length" class="dd-extra">
                    <text class="dd-extra__label">波色</text>
                    <view class="dd-extra__tags">
                        <view v-for="(c, i) in drawData.color" :key="i" class="dd-color-dot"
                            :class="'dd-color-dot--' + c" />
                    </view>
                </view>
            </view>

            <!-- 待开奖 -->
            <view v-else class="dd-pending">
                <text class="dd-pending__icon">🎱</text>
                <text class="dd-pending__text">等待开奖</text>
                <text class="dd-pending__hint">
                    开奖时间：{{ drawData.category?.draw_time || '请关注官方公告' }}
                </text>
            </view>

            <!-- 开奖规则 -->
            <view v-if="drawData.category?.draw_rule" class="dd-rule">
                <text class="dd-rule__title">开奖规则</text>
                <text class="dd-rule__text">{{ drawData.category.draw_rule }}</text>
            </view>

            <!-- AI预测分析（仅待开奖时显示） -->
            <view v-if="drawData.status === 0" class="ai-section">
                <view class="ai-section__header">
                    <view class="ai-section__icon">AI</view>
                    <text class="ai-section__title">AI智能预测</text>
                    <view v-if="aiData?.from_cache" class="ai-section__cache">
                        <text>缓存</text>
                    </view>
                </view>

                <view class="ai-btn-wrap">
                    <view class="ai-btn" @tap="goAiPredict">
                        <text class="ai-btn__text">进入AI智能分析</text>
                    </view>
                </view>

                <view v-if="aiLoaded && aiAnalysis" class="ai-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-disclaimer">
                        <text>{{ aiAnalysis.disclaimer || '本分析仅基于历史数据统计，不保证准确性，请理性购彩' }}</text>
                    </view>
                </view>
            </view>

            <!-- 免责声明 -->
            <view class="dd-disclaimer">
                <text>声明：开奖数据仅供参考，请以官方公布为准。</text>
            </view>
        </view>

        <view v-if="!loading && errorMsg" class="dd-error">
            <text>{{ errorMsg }}</text>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getLotteryDrawDetail } from '@/api/lottery'

const statusBarHeight = ref(0)
const loading = ref(true)
const drawData = ref<any>(null)
const errorMsg = ref('')

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

const getBallColor = (index: number) => {
    if (drawData.value?.color?.[index]) return drawData.value.color[index]
    return 'red'
}

const specialColor = computed(() => {
    const c = drawData.value?.color
    if (c && c.length > 0) return c[c.length - 1]
    return 'red'
})

const specialZodiac = computed(() => {
    const z = drawData.value?.zodiac
    if (z && z.length > 0) return z[z.length - 1]
    return ''
})

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

const fetchDetail = async (id: number) => {
    loading.value = true
    errorMsg.value = ''
    try {
        const data = await getLotteryDrawDetail({ id })
        drawData.value = data
    } catch (e: any) {
        errorMsg.value = e?.msg || '加载失败'
    } finally {
        loading.value = false
    }
}

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

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

const goBack = () => {
    uni.navigateBack()
}

onLoad((options: any) => {
    const id = Number(options.id || 0)
    if (id > 0) {
        fetchDetail(id)
    } else {
        loading.value = false
        errorMsg.value = '参数错误'
    }
})
</script>

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

.dd-nav {
    background: var(--color-primary, #4a90d9);

    &__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;
    }
}

.dd-loading {
    display: flex;
    justify-content: center;
    padding: 100rpx;
    color: #999;
}

.dd-body {
    padding: 24rpx;
}

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

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

    &__period {
        font-size: 26rpx;
        color: #185dff;
        background: #E5EDFF;
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
    }

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

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

.dd-date {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 30rpx;
}

.dd-result {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;

    &__label {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 24rpx;
    }

    &__balls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12rpx;
        flex-wrap: wrap;
        margin-bottom: 30rpx;
    }
}

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

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

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

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

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

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

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

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

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

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

.dd-extra {
    margin-top: 24rpx;
    padding-top: 24rpx;
    border-top: 1rpx solid #f0f0f0;

    &__label {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 16rpx;
    }

    &__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;
    }
}

.dd-tag {
    font-size: 24rpx;
    color: #333;
    background: #f5f5f5;
    padding: 8rpx 20rpx;
    border-radius: 8rpx;

    &--special {
        color: #185dff;
        background: #E5EDFF;
    }

    &--element {
        color: #6366f1;
        background: #eef2ff;
    }
}

.dd-color-dot {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;

    &--red {
        background: #ef4444;
    }

    &--blue {
        background: #3b82f6;
    }

    &--green {
        background: #22c55e;
    }
}

.dd-pending {
    background: #fff;
    border-radius: 16rpx;
    padding: 80rpx 30rpx;
    text-align: center;
    margin-bottom: 20rpx;

    &__icon {
        font-size: 80rpx;
        display: block;
        margin-bottom: 20rpx;
    }

    &__text {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 12rpx;
    }

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

.dd-rule {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;

    &__title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 16rpx;
    }

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

.dd-disclaimer {
    padding: 30rpx 0;
    text-align: center;
    font-size: 22rpx;
    color: #ccc;
}

.dd-error {
    display: flex;
    justify-content: center;
    padding: 100rpx;
    color: #999;
    font-size: 28rpx;
}

/* AI预测区块 */
.ai-section {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;

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

    &__icon {
        width: 48rpx;
        height: 48rpx;
        border-radius: 12rpx;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 22rpx;
        font-weight: bold;
    }

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

    &__cache {
        font-size: 20rpx;
        color: #999;
        background: #f5f5f5;
        padding: 2rpx 12rpx;
        border-radius: 8rpx;
    }
}

.ai-btn-wrap {
    display: flex;
    justify-content: center;
    padding: 20rpx 0;
}

.ai-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    padding: 20rpx 60rpx;
    border-radius: 40rpx;

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

.ai-loading {
    text-align: center;
    padding: 40rpx;
    color: #6366f1;
    font-size: 26rpx;
}

.ai-error {
    text-align: center;
    padding: 20rpx;
    color: #185dff;
    font-size: 26rpx;
}

.ai-retry {
    display: inline-flex;
    margin-top: 16rpx;
    padding: 8rpx 32rpx;
    background: #E5EDFF;
    border-radius: 20rpx;

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

.ai-result {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
}

.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;
    }
}

.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;
    }
}

.ai-disclaimer {
    padding-top: 16rpx;
    border-top: 1rpx solid #f0f0f0;
    text-align: center;

    text {
        font-size: 22rpx;
        color: #ccc;
    }
}
</style>
