<script setup lang="ts">
import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
import { playApplauseMusic, playGame4Music, stopAllMusic, stopApplauseMusic, stopGame4Music } from '@/commons/music'
import Loading from "./views/LoadingView.vue";
import Rank1 from "./views/Rank1View.vue";
import Rank2 from "./views/Rank2View.vue";
import { useAdminGameSocket } from "@/composables/useAdminGameSocket";
import { onSocketMessage } from "@/commons/ws";
import type Player from "@/commons/player.ts";
import { useRouter } from 'vue-router'
import { $confirm, $is_local_mode, $remove_socket_storage, $notify, $toast } from "@/commons/utils.ts";

const router = useRouter()

type GameScreen = 'loading' | 'rank1' | 'rank2'

const PLAYER_LIMIT = 20
const RANK_LIMIT = 10

const emptyLoadingPlayer = () => ({
    score: '-',
    telephone: '',
    userid: '',
    wechat_id: '',
    nickname: '虚位以待',
    avatar: '',
})

const emptyRankPlayer = (index: number): Player => ({
    wechat_id: `empty-${index}`,
    nickname: '虚位以待',
    avatar: '',
    score: '-',
})

const screen = ref<GameScreen>('loading')
const loadingPlayers = ref<any[]>(Array.from({ length: PLAYER_LIMIT }, emptyLoadingPlayer))
const playerCount = ref(0)
const rankPlayers = ref<Player[]>(Array.from({ length: RANK_LIMIT }, (_, index) => emptyRankPlayer(index)))
const rank1Ref = ref<InstanceType<typeof Rank1> | null>(null)
let isPlayingStartAnimation = false
const isSubmitWaiting = ref(false)
const submitWaitingSeconds = ref(5)
let submitWaitingTimer: ReturnType<typeof window.setInterval> | undefined

const confirmRefresh = (event: BeforeUnloadEvent) => {
    // closeRoom();
    event.preventDefault()
    event.returnValue = ''
}

const renderPlayers = (data: any) => {
    console.log("[Game4] renderPlayers 被调用，data:", JSON.stringify(data));
    const players = Array.isArray(data?.list) ? data.list : []
    playerCount.value = Number(data?.count ?? players.length)
    loadingPlayers.value = Array.from(
        { length: PLAYER_LIMIT },
        (_, index) => players[index] ?? emptyLoadingPlayer(),
    )
    console.log("[Game4] renderPlayers 完成，loadingPlayers:", loadingPlayers.value.length, "有效玩家:", loadingPlayers.value.filter(p => p.nickname !== '虚位以待').map(p => ({ nickname: p.nickname, userid: p.userid, wechat_id: p.wechat_id, avatar: p.avatar })));
}

const updateRankPlayers = (data: any) => {
    if (!Array.isArray(data)) return

    rankPlayers.value = Array.from(
        { length: RANK_LIMIT },
        (_, index) => data[index] ?? emptyRankPlayer(index),
    )
}

const playerToRankPlayer = (player: any, index: number): Player => {
    // WebSocket 数据可能没有 userid/wechat_id，用 avatar 作为唯一标识
    const hasId = player?.userid || player?.wechat_id || player?.openid || player?.user_id;
    const avatar = player?.avatar || '';
    const nickname = player?.nickname || '虚位以待';
    const isRealPlayer = nickname && nickname !== '-' && nickname !== '虚位以待';
    const wechat_id = hasId || (isRealPlayer && avatar ? `avt:${avatar}` : `empty-${index}`);
    
    return {
        telephone: player?.telephone ?? '',
        userid: hasId || (isRealPlayer && avatar ? `avt:${avatar}` : ''),
        wechat_id,
        nickname,
        avatar,
        score: player?.score ?? '-',
    };
}

const seedRankPlayersFromLoading = () => {
    console.log("[Game4] seedRankPlayersFromLoading 开始，loadingPlayers:", loadingPlayers.value.length, JSON.stringify(loadingPlayers.value.slice(0, 3)));
    
    rankPlayers.value = Array.from(
        { length: RANK_LIMIT },
        (_, index) => {
            const player = loadingPlayers.value[index]

            if (!player?.userid && !player?.wechat_id) {
                console.log("[Game4] seedRankPlayersFromLoading index:", index, "无 userid/wechat_id，判定为空占位");
                return emptyRankPlayer(index)
            }

            console.log("[Game4] seedRankPlayersFromLoading index:", index, "有玩家数据:", JSON.stringify(player));
            return playerToRankPlayer(player, index)
        },
    )
    
    console.log("[Game4] seedRankPlayersFromLoading 完成，rankPlayers:", rankPlayers.value.length, JSON.stringify(rankPlayers.value.slice(0, 3)));
}

function showSubmitWaiting() {
    if (!isSubmitWaiting.value) {        submitWaitingSeconds.value = 5
        if (submitWaitingTimer) {
            window.clearInterval(submitWaitingTimer)
        }
        submitWaitingTimer = window.setInterval(() => {
            submitWaitingSeconds.value = Math.max(0, submitWaitingSeconds.value - 1)
            if (submitWaitingSeconds.value <= 0 && submitWaitingTimer) {
                window.clearInterval(submitWaitingTimer)
                submitWaitingTimer = undefined
            }
        }, 1000)
    }
    isSubmitWaiting.value = true
}

function clearSubmitWaiting() {
    isSubmitWaiting.value = false
    submitWaitingSeconds.value = 5
    if (submitWaitingTimer) {
        window.clearInterval(submitWaitingTimer)
        submitWaitingTimer = undefined
    }
}

const resetRoundState = () => {
    playerCount.value = 0
    loadingPlayers.value = Array.from({ length: PLAYER_LIMIT }, emptyLoadingPlayer)
    rankPlayers.value = Array.from({ length: RANK_LIMIT }, (_, index) => emptyRankPlayer(index))
    isPlayingStartAnimation = false
    clearSubmitWaiting()
}

const gotoLoading = (reset = false) => {
    if (reset) {
        resetRoundState()
    }

    screen.value = 'loading'
}

const gotoRank1WithIntro = async () => {
    if (isPlayingStartAnimation) return

    isPlayingStartAnimation = true
    seedRankPlayersFromLoading()
    // 参考 game2：不在这里调用 playGame4Music()，依赖 watch 和 pointerdown 监听器触发
    screen.value = 'rank1'
    await nextTick()
    await rank1Ref.value?.startIntro()
    // 结果页已在 Rank1View 内部渲染（showResult + result-overlay），不需要切到 rank2
    isPlayingStartAnimation = false
    showSubmitWaiting()
}

const horseBoosts = ref<Record<string, number>>({});

const gameId = 'game4'
const { startGame, createRoom, backRoom, closeRoom } = useAdminGameSocket({
    gameId,
    onAny: (evt, payload) => {
        console.log("[Game4 WebSocket] 🔥 onAny 触发 - event:", evt, "payload:", payload);
        
        const data = payload?.data ?? payload;

        // 调试日志：打印 WebSocket 原始数据
        console.log("[Game4 WebSocket] 收到消息:", {
            event: evt,
            payloadType: typeof payload,
            dataType: typeof data,
            isArray: Array.isArray(data),
            rawPayload: payload,
        });

        if (!Array.isArray(data)) {
            console.log("[Game4 WebSocket] ⚠️ data 不是数组，跳过处理");
            return;
        }

        const boosts: Record<string, number> = {};
        let hasBoost = false;

        data.forEach((item: any) => {
            // WebSocket 数据无 userid/wechat_id，用 avatar 作为稳定标识
            const id = item.userid || item.wechat_id || item.avatar || "";
            if (!id) return;
            // 尝试多种字段名: score / boost / acceleration / speed / progress
            const raw = item.score ?? item.boost ?? item.acceleration ?? item.speed ?? item.progress;
            if (raw === undefined || raw === null) return;
            const val = Number(raw);
            if (isNaN(val)) return;
            // score/boost 范围 0~N，0 表示无加速，越大越快
            boosts[id] = Math.max(0, val);
            hasBoost = true;
        });

        if (hasBoost) {
            console.log("[Game4 WebSocket] 解析到加速数据:", boosts);
            horseBoosts.value = { ...boosts };
        }
    },
    onRoomState: (data: any) => {
        console.log("[Game4] onRoomState 触发，data:", JSON.stringify(data));
        if ((data?.status === 0 || data?.status === 1) && Array.isArray(data?.list)) {
            renderPlayers(data)
        }
        switch (data?.status) {
            case 0:
                gotoLoading(true)
                createRoom(4)
                break
            case 1:
                // if(data.gameId && data.gameId!=gameId){
                //     return;
                // }
                gotoLoading()
                break
            case 2:
                console.log("[Game4] status=2，准备进入 rank1，loadingPlayers:", loadingPlayers.value.length);
                                console.log("[Game4] seedRankPlayersFromLoading 后，rankPlayers:", rankPlayers.value.length, JSON.stringify(rankPlayers.value.slice(0, 3)));
                screen.value = 'rank1'
                clearSubmitWaiting()
                break
            case 3:
                showSubmitWaiting()
                break
            case 4:
                clearSubmitWaiting()
                if (Array.isArray(data?.list)) {
                    updateRankPlayers(data.list)
                }
                screen.value = 'rank1'
                nextTick(() => {
                    rank1Ref.value?.showFinalResult?.()
                })
                break
        }
    },
    onRoomJoin: (data) => {
        renderPlayers(data)
        gotoLoading()
    },
    onGameStart: gotoRank1WithIntro,
    onRoomRank: updateRankPlayers,
    onRelogin: async () => {
        $remove_socket_storage();
        await router.replace('/')
    }
})

const startGameWithMusic = () => {
    console.log('[Game4] startGameWithMusic called, local mode:', $is_local_mode(), 'playerCount:', playerCount.value)
    // 确保背景音乐播放（参考 game2 的 watch 模式，但直接在点击时调用更可靠）
    playGame4Music()
    // 本地模拟已关闭，如需开启请取消以下注释
    // if ($is_local_mode()) {
    //     console.log('[Game4] 本地模式，直接进入赛马画面')
    //     gotoRank1WithIntro()
    //     return
    // }
    if (playerCount.value == 0) {
        $toast('房间中没有玩家');
        return;
    }
    console.log('[Game4] 调用 startGame()')
    startGame()
}

const nextRound = () => {
    // 立刻停止喝彩音乐并移除指针事件监听，防止点击按钮时重新触发 playApplauseMusic
    stopApplauseMusic()
    // 本地模拟已关闭，如需开启请取消以下注释
    // if ($is_local_mode()) {
    //     gotoLoading(true)
    //     return
    // }
    gotoLoading(true)
    // 等待 Rank1View 卸载完成后再确保 BGM 播放（对齐 game3 的 watch 模式）
    // 用 nextTick 确保在组件卸载、watch 触发的 BGM 之后再次保证
    nextTick().then(() => playGame4Music())
    //重开房间
    backRoom(4)
}

const nextRoundWithMusic = () => {
    nextRound()
}

const backHandler = async() => {
    // 立刻停止喝彩音乐并移除指针事件监听，防止点击按钮时重新触发 playApplauseMusic
    stopApplauseMusic()
    // 本地模拟已关闭，如需开启请取消以下注释
    // if ($is_local_mode()) {
    //     stopAllMusic()
    //     router.replace('/main')
    //     return
    // }
    const ok = await $confirm({
        title: '提示',
        message: '是否关闭当前房间回到首页',
        confirmText: '确定',
        cancelText: '取消',
    })
    if (ok) {
        closeRoom();
        stopAllMusic()
        router.replace('/main');
    }
}

onMounted(() => {
    window.addEventListener('beforeunload', confirmRefresh)
    playGame4Music()
})

onUnmounted(() => {
    stopAllMusic()
    window.removeEventListener('beforeunload', confirmRefresh)
})

watch(screen, (value) => {
    // console.log(value);
    if (value == 'rank2') {
        playApplauseMusic();
    } else if (value == 'loading') {
        playGame4Music();
    }
})

// type GameScreen = "loading" | "rank1" | "rank2";

// const PLAYER_LIMIT = 20;
// const RANK_LIMIT = 10;

// const emptyLoadingPlayer = () => ({
//   score: 0,
//   telephone: "",
//   userid: "",
//   wechat_id: "",
//   nickname: "虚位以待",
//   avatar: "",
// });

// const emptyRankPlayer = (index: number): Player => ({
//   active: false,
//   wechat_id: `empty-${index}`,
//   nickname: "虚位以待",
//   avatar: "",
//   score: 0,
// });

// const screen = ref<GameScreen>("loading");
// const loadingPlayers = ref<any[]>(
//   Array.from({ length: PLAYER_LIMIT }, emptyLoadingPlayer),
// );
// const playerCount = ref(0);
// const rankPlayers = ref<Player[]>(
//   Array.from({ length: RANK_LIMIT }, (_, index) => emptyRankPlayer(index)),
// );
// const rank1Ref = ref<InstanceType<typeof Rank1> | null>(null);
// let isPlayingStartAnimation = false;

// // H5 操控传来的加速度: { [userid]: boost(叠加系数, 0~N) }
// const horseBoosts = ref<Record<string, number>>({});

// let offHorseBoost: (() => void) | undefined;

// // 监听 WebSocket 获取 H5 玩家操控的马匹加速度
// offHorseBoost = onSocketMessage((evt, payload) => {
//   const data = payload?.data ?? payload;

//   // 调试日志：打印 WebSocket 原始数据
//   console.log("[Game4 WebSocket] 收到消息:", {
//     event: evt,
//     payloadType: typeof payload,
//     dataType: typeof data,
//     isArray: Array.isArray(data),
//     rawPayload: payload,
//   });

//   if (!Array.isArray(data)) return;

//   const boosts: Record<string, number> = {};
//   let hasBoost = false;

//   data.forEach((item: any) => {
//     // WebSocket 数据无 userid/wechat_id，用 avatar 作为稳定标识
//     const id = item.userid || item.wechat_id || item.avatar || "";
//     if (!id) return;
//     // 尝试多种字段名: score / boost / acceleration / speed / progress
//     const raw = item.score ?? item.boost ?? item.acceleration ?? item.speed ?? item.progress;
//     if (raw === undefined || raw === null) return;
//     const val = Number(raw);
//     if (isNaN(val)) return;
//     // score/boost 范围 0~N，0 表示无加速，越大越快
//     boosts[id] = Math.max(0, val);
//     hasBoost = true;
//   });

//   if (hasBoost) {
//     console.log("[Game4 WebSocket] 解析到加速数据:", boosts);
//     horseBoosts.value = { ...boosts };
//   }
// });

// const confirmRefresh = (event: BeforeUnloadEvent) => {
//   event.preventDefault();
//   event.returnValue = "";
// };

// const renderPlayers = (data: any) => {
//   const players = Array.isArray(data?.list) ? data.list : [];
//   playerCount.value = Number(data?.count ?? players.length);
//   loadingPlayers.value = Array.from(
//     { length: PLAYER_LIMIT },
//     (_, index) => players[index] ?? emptyLoadingPlayer(),
//   );
// };

// const updateRankPlayers = (data: any) => {
//   if (!Array.isArray(data)) return;

//   rankPlayers.value = Array.from(
//     { length: RANK_LIMIT },
//     (_, index) => data[index] ?? emptyRankPlayer(index),
//   );
// };

// const gotoLoading = (reset = false) => {
//   if (reset) {
//     playerCount.value = 0;
//     loadingPlayers.value = Array.from(
//       { length: PLAYER_LIMIT },
//       emptyLoadingPlayer,
//     );
//     rankPlayers.value = Array.from(
//       { length: RANK_LIMIT },
//       (_, index) => emptyRankPlayer(index),
//     );
//     isPlayingStartAnimation = false;
//   }
//   screen.value = "loading";
// };

// const gotoRank1WithIntro = async () => {
//   if (isPlayingStartAnimation) return;

//   isPlayingStartAnimation = true;
//   screen.value = "rank1";
//   await nextTick();
//   await rank1Ref.value?.startIntro();
//   // 结果页已在 Rank1View 内部渲染，不需要切到 rank2
//   isPlayingStartAnimation = false;
// };

// function handleRoomState(data: any) {
//   if (Array.isArray(data?.list)) {
//     renderPlayers(data);
//   }

//   switch (data?.status) {
//     case 0:
//       gotoLoading(true);
//       createRoom(4);
//       break;
//     case 1:
//       gotoLoading();
//       break;
//     case 2:
//       screen.value = "rank1";
//       break;
//     case 3:
//       screen.value = "rank2";
//       break;
//   }
// }

// const { startGame, createRoom, backRoom, requestRoomState, closeRoom } = useAdminGameSocket({
//   gameId: "game4",
//   // loginRedirectPath: '/game4',
//   onRoomState: handleRoomState,
//   onRoomJoin: (data) => {
//     renderPlayers(data);
//     gotoLoading();
//   },
//   onGameStart: gotoRank1WithIntro,
//   onRoomRank: updateRankPlayers,
// });

// const nextRound = () => {
//   gotoLoading(true);
//   // 使用 backRoom 重置已有房间，而非 createRoom 重复创建
//   backRoom(1);
//   setTimeout(() => {
//     requestRoomState();
//   }, 200);
// };

// onMounted(() => {
//   window.addEventListener("beforeunload", confirmRefresh);
//   playGame4Music()
// });

// onUnmounted(() => {
//   stopGame4Music()
//   window.removeEventListener("beforeunload", confirmRefresh);
//   offHorseBoost?.();
// });

// const backHandler = () => {
//   if (confirm('是否关闭当前房间回到首页')) {
//     closeRoom();
//     stopGame4Music()
//     router.replace('/main');
//   }
// }
</script>

<template>
    <Loading v-if="screen === 'loading'" :players="loadingPlayers" :player-count="playerCount"
        @start="startGameWithMusic" @back="backHandler" />
    <Rank1 v-if="screen === 'rank1'" ref="rank1Ref" :rank-list="rankPlayers" :horse-boosts="horseBoosts"
        @start="startGameWithMusic" @next="nextRound" @back="backHandler" />
    <!-- <Rank2 v-else-if="screen === 'rank2'" :rank-list="rankPlayers" @next="nextRound" /> -->
    <div v-if="isSubmitWaiting" class="submit-waiting-overlay">
        <div class="submit-waiting-title">正在等待玩家提交分数</div>
        <div :key="submitWaitingSeconds" class="submit-waiting-count">{{ submitWaitingSeconds }}</div>
    </div>
</template>

<style scoped>
.submit-waiting-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 48%, transparent 72%);
    color: #fff;
    pointer-events: none;
}

.submit-waiting-title {
    position: absolute;
    bottom: 8vh;
    left: 0;
    width: 100%;
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.submit-waiting-count {
    color: white;
    font-size: 300pt;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 18px 38px rgba(0, 0, 0, 0.25);
    animation: submit-countdown-pop 1s ease both;
}

@keyframes submit-countdown-pop {
    0% {
        opacity: 0;
        transform: scale(0.45);
    }

    18% {
        opacity: 1;
        transform: scale(1.14);
    }

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

    100% {
        opacity: 0;
        transform: scale(0.84);
    }
}
</style>
