import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useEffect, useState } from 'react';
import { useGameIframeSDK } from '../../useGameIframeSDK';
/**
 * GameTestPlayer - Component test đơn giản
 *
 * Chỉ load game data vào iframe, KHÔNG gọi API
 * Dùng để test game iframe locally
 *
 * @example
 * ```tsx
 * <GameTestPlayer
 *   gameUrl="http://localhost:3000/game"
 *   gameData={[
 *     { id: 1, question: "What is 2+2?", options: ["3","4","5"], answer: "4" },
 *     { id: 2, question: "Capital of France?", options: ["London","Paris","Berlin"], answer: "Paris" }
 *   ]}
 *   debug={true}
 *   onLog={(msg, type) => console.log(`[${type}] ${msg}`)}
 *   onAnswer={(data) => console.log('Answer:', data)}
 *   onComplete={(result) => console.log('Complete:', result)}
 * />
 * ```
 */
export const GameTestPlayer = ({ gameUrl, gameData, userId = 'test_user', gameId = 'test_game', extraData, endTimeIso, className, style, debug = false, onAnswer, onComplete, onLog, onLeaderboardRequest, mockLeaderboard }) => {
    const iframeRef = useRef(null);
    const [isLoading, setIsLoading] = useState(true);
    // SDK Hook
    const { isReady, sendGameData, sendLeaderboard } = useGameIframeSDK({
        iframeRef,
        iframeOrigin: '*',
        debug,
        onGameReady: () => {
            if (onLog)
                onLog('[TEST] Iframe Ready', 'success');
            setIsLoading(false);
        },
        onAnswerReport: (data) => {
            if (onLog)
                onLog(`[TEST] Answer: ${JSON.stringify(data)}`, 'info');
            if (onAnswer)
                onAnswer(data);
        },
        onFinalResult: (result) => {
            if (onLog)
                onLog(`[TEST] Complete: ${JSON.stringify(result)}`, 'success');
            if (onComplete)
                onComplete(result);
        },
        onLeaderboardRequest: (top) => {
            if (onLog)
                onLog(`[TEST] Leaderboard Request: top=${top}`, 'info');
            if (onLeaderboardRequest)
                onLeaderboardRequest(top);
            // Auto send mock leaderboard if provided
            if (mockLeaderboard) {
                if (onLog)
                    onLog(`[TEST] Sending mock leaderboard`, 'info');
                sendLeaderboard(mockLeaderboard);
            }
        }
    });
    // Auto send game data when ready
    useEffect(() => {
        if (isReady && gameData) {
            const payload = {
                game_id: String(gameId),
                user_id: userId,
                data: gameData,
                completed_question_ids: [],
                ...(extraData || {})
            };
            if (endTimeIso) {
                payload.end_time_iso = endTimeIso;
            }
            if (onLog)
                onLog(`[TEST] Sending Game Data: ${gameData.length} items`, 'info');
            sendGameData(payload);
        }
    }, [isReady, gameData, gameId, userId, extraData, endTimeIso, sendGameData, onLog]);
    return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%', ...style }, children: [isLoading && (_jsx("div", { style: {
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: 'rgba(255,255,255,0.9)',
                    zIndex: 10
                }, children: _jsxs("div", { style: { textAlign: 'center' }, children: [_jsx("div", { style: {
                                width: '40px',
                                height: '40px',
                                border: '4px solid #e9ecef',
                                borderTop: '4px solid #007bff',
                                borderRadius: '50%',
                                animation: 'spin 1s linear infinite',
                                margin: '0 auto 1rem'
                            } }), _jsx("p", { style: { color: '#6c757d' }, children: "Loading game..." }), _jsx("style", { children: `
                            @keyframes spin {
                                0% { transform: rotate(0deg); }
                                100% { transform: rotate(360deg); }
                            }
                        ` })] }) })), _jsx("iframe", { ref: iframeRef, src: gameUrl, className: className, style: {
                    width: '100%',
                    height: '100%',
                    border: 'none'
                }, allowFullScreen: true })] }));
};
export default GameTestPlayer;
//# sourceMappingURL=GameTestPlayer.js.map