const { useState, useEffect, useRef } = React;

function wsUrl() {
    return `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}`;
}

function PresentApp() {
    const [phase, setPhase] = useState('connect');
    const [session, setSession] = useState(null);
    const [question, setQuestion] = useState(null);
    const [qIndex, setQIndex] = useState(0);
    const [qTotal, setQTotal] = useState(0);
    const [timeLimit, setTimeLimit] = useState(0);
    const [timeLeft, setTimeLeft] = useState(0);
    const [answerCount, setAnswerCount] = useState(0);
    const [result, setResult] = useState(null);
    const [leaderboard, setLeaderboard] = useState([]);
    const [error, setError] = useState('');
    const timerRef = useRef(null);

    useEffect(() => {
        const code = location.hash.replace('#', '');
        const params = new URLSearchParams(location.search);
        // Accept both ?pt= (present token) and ?token= (legacy/admin password)
        const token = params.get('pt') || params.get('token');

        if (!code || !token) {
            setPhase('need-config');
            return;
        }

        const ws = new WebSocket(wsUrl());

        ws.onopen = () => {
            ws.send(JSON.stringify({ type: 'present-join', token, code }));
        };

        ws.onmessage = (e) => {
            const msg = JSON.parse(e.data);
            switch (msg.type) {
                case 'present-joined':
                    setSession(msg.session);
                    setLeaderboard(msg.session.leaderboard || []);
                    setPhase('waiting');
                    break;
                case 'player-joined':
                case 'player-left':
                    setSession((s) => s ? { ...s, players: msg.players, playerCount: msg.playerCount } : s);
                    break;
                case 'game-start':
                    setQTotal(msg.totalQuestions);
                    break;
                case 'question':
                    setQuestion(msg.question);
                    setQIndex(msg.index);
                    setQTotal(msg.total);
                    setTimeLimit(msg.timeLimit);
                    setTimeLeft(msg.timeLimit);
                    setAnswerCount(0);
                    setResult(null);
                    setPhase('question');
                    break;
                case 'answer-count':
                    setAnswerCount(msg.count);
                    break;
                case 'time-up':
                    clearInterval(timerRef.current);
                    break;
                case 'question-result':
                    setResult(msg);
                    setLeaderboard(msg.leaderboard);
                    setPhase('result');
                    clearInterval(timerRef.current);
                    break;
                case 'game-end':
                    setLeaderboard(msg.leaderboard);
                    setPhase('final');
                    clearInterval(timerRef.current);
                    break;
                case 'error':
                    setError(msg.message);
                    setPhase('error');
                    break;
            }
        };

        ws.onerror = () => setPhase('error');

        return () => ws.close();
    }, []);

    useEffect(() => {
        clearInterval(timerRef.current);
        if (phase === 'question' && timeLimit > 0) {
            const start = Date.now();
            timerRef.current = setInterval(() => {
                setTimeLeft(Math.max(0, timeLimit - (Date.now() - start) / 1000));
            }, 100);
        }
    }, [phase, timeLimit]);

    if (phase === 'need-config') {
        return (
            <div className="min-h-screen flex flex-col items-center justify-center p-8">
                <div className="text-6xl mb-4">🚨</div>
                <h1 className="text-3xl font-bold mb-4 fire-gradient">Quizalarm — Präsentation</h1>
                <p className="text-gray-400 mb-4 text-center">Öffne diesen Link aus dem Admin-Panel.</p>
            </div>
        );
    }

    if (phase === 'error') return (
        <div className="min-h-screen flex flex-col items-center justify-center text-red-400 text-3xl">
            <p>❌ Verbindungsfehler</p>
            {error && <p className="text-lg mt-2">{error}</p>}
        </div>
    );

    if (phase === 'connect') return <div className="min-h-screen flex items-center justify-center animate-pulse text-2xl text-amber-400">Verbinde...</div>;

    if (phase === 'waiting') return (
        <div className="min-h-screen flex flex-col items-center justify-center p-8">
            <div className="text-6xl mb-4">🚨</div>
            <h1 className="text-4xl font-extrabold mb-4 fire-gradient">Quizalarm</h1>
            <p className="text-gray-400 text-xl mb-6">{session?.setName}</p>
            <div className="text-8xl font-mono font-extrabold tracking-widest text-red-500 mb-8">{session?.code}</div>
            <p className="text-2xl mb-4">{session?.players?.length || 0} Teilnehmer</p>
            <div className="flex flex-wrap gap-3 justify-center max-w-2xl">
                {(session?.players || []).map((n) => (
                    <span key={n} className="px-4 py-2 bg-gray-800 rounded-full text-lg">{n}</span>
                ))}
            </div>
        </div>
    );

    if (phase === 'question') {
        const pct = timeLimit > 0 ? (timeLeft / timeLimit) * 100 : 100;
        const barColor = pct > 50 ? 'bg-green-500' : pct > 25 ? 'bg-yellow-500' : 'bg-red-500';
        return (
            <div className="min-h-screen flex flex-col p-8">
                <div className="flex justify-between items-center mb-4">
                    <span className="text-gray-400 text-xl">Frage {qIndex + 1} / {qTotal}</span>
                    <span className="text-xl">{answerCount} / {session?.players?.length || 0} 💬</span>
                    {timeLimit > 0 && <span className="text-3xl font-bold text-amber-400">{Math.ceil(timeLeft)}s</span>}
                </div>
                {timeLimit > 0 && (
                    <div className="w-full bg-gray-700 rounded-full h-3 mb-6 overflow-hidden">
                        <div className={`${barColor} h-full rounded-full transition-all duration-200`} style={{ width: `${pct}%` }} />
                    </div>
                )}
                <h2 className="text-4xl font-bold text-center mb-8">{question?.frage}</h2>
                {question?.bild && <img src={question.bild} className="max-h-64 mx-auto rounded-xl mb-8" alt="" />}
                {question?.typ?.toLowerCase() !== 'freitext' && (
                    <div className="grid grid-cols-2 gap-4 flex-1 max-h-96">
                        {(question?.antworten || []).map((a) => {
                            const colors = { A: 'bg-red-600', B: 'bg-blue-600', C: 'bg-amber-600', D: 'bg-green-600' };
                            return (
                                <div key={a.key} className={`${colors[a.key] || 'bg-gray-600'} rounded-2xl flex items-center justify-center p-6 text-2xl font-bold`}>
                                    {a.text}
                                </div>
                            );
                        })}
                    </div>
                )}
                {question?.typ?.toLowerCase() === 'freitext' && (
                    <div className="text-center text-2xl text-gray-400">✏️ Freitext-Antwort</div>
                )}
            </div>
        );
    }

    if (phase === 'result') {
        const correctKeys = new Set(result?.correctAnswer || []);
        return (
            <div className="min-h-screen flex flex-col p-8">
                <h2 className="text-2xl text-gray-400 text-center mb-2">Frage {qIndex + 1} / {qTotal}</h2>
                <h2 className="text-3xl font-bold text-center mb-6">{question?.frage}</h2>
                {question?.bild && <img src={question.bild} className="max-h-48 mx-auto rounded-xl mb-6" alt="" />}

                {question?.typ?.toLowerCase() !== 'freitext' && (
                    <div className="grid grid-cols-2 gap-4 mb-8">
                        {(question?.antworten || []).map((a) => {
                            const isCorrect = correctKeys.has(a.key);
                            const count = result?.stats?.[a.key] || 0;
                            const cls = isCorrect ? 'bg-green-600 ring-4 ring-green-400' : 'bg-gray-700 opacity-50';
                            return (
                                <div key={a.key} className={`${cls} rounded-2xl p-6 text-2xl font-bold flex items-center justify-between`}>
                                    <span>{isCorrect ? '✓ ' : ''}{a.text}</span>
                                    <span className="text-3xl ml-4 opacity-80">{count}</span>
                                </div>
                            );
                        })}
                    </div>
                )}

                {question?.typ?.toLowerCase() === 'freitext' && (
                    <div className="text-center mb-8">
                        <div className="inline-block bg-green-600 ring-4 ring-green-400 rounded-2xl px-8 py-4 text-2xl font-bold">
                            ✓ {result?.correctAnswer?.[0]}
                        </div>
                    </div>
                )}

                <div className="flex-1">
                    <h3 className="text-2xl font-bold text-center mb-4">🏆 Leaderboard</h3>
                    <div className="max-w-xl mx-auto">
                        {leaderboard.slice(0, 8).map((e, i) => (
                            <div key={e.name} className={`flex justify-between py-3 px-5 rounded-xl mb-2 text-xl ${i === 0 ? 'bg-amber-600' : i === 1 ? 'bg-gray-500' : i === 2 ? 'bg-amber-800' : 'bg-gray-800'}`}>
                                <span className="font-bold">{i === 0 ? '🥇' : i === 1 ? '🥈' : i === 2 ? '🥉' : `${e.rank}.`} {e.name}</span>
                                <span className="font-extrabold">{e.score}</span>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        );
    }

    if (phase === 'final') return (
        <div className="min-h-screen flex flex-col items-center justify-center p-8">
            <h2 className="text-5xl font-extrabold mb-8 fire-gradient">Quiz beendet!</h2>
            <div className="w-full max-w-xl">
                {leaderboard.map((e, i) => (
                    <div key={e.name} className={`flex justify-between py-4 px-6 rounded-xl mb-2 text-2xl ${i === 0 ? 'bg-amber-600' : i === 1 ? 'bg-gray-500' : i === 2 ? 'bg-amber-800' : 'bg-gray-800'}`}>
                        <span className="font-bold">{i === 0 ? '🥇' : i === 1 ? '🥈' : i === 2 ? '🥉' : `${e.rank}.`} {e.name}</span>
                        <span className="font-extrabold">{e.score}</span>
                    </div>
                ))}
            </div>
        </div>
    );

    return <div className="min-h-screen flex items-center justify-center animate-pulse text-2xl text-amber-400">Verbinde...</div>;
}

ReactDOM.createRoot(document.getElementById('root')).render(<PresentApp />);