import { Head, Link } from '@inertiajs/react';
import axios from 'axios';
import { AlertTriangle, CheckCircle2, Clock, Eye, EyeOff, Headphones, Link2, Mic2, RotateCcw, Send, Tags, Users, X } from 'lucide-react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { toast } from 'sonner';
import StudentLayout from '@/layouts/StudentLayout';

interface Token { id: string; text: string; index?: number }
interface Category { id: string; name: string; items: Token[] }
interface Pair { left: Token; right: Token }
interface ErrorCorrection { token: Token; correction: string }
interface TabooRole { id: number; name: string }
interface Question {
    id: number;
    item_type: 'sentence_rearrange' | 'grouping' | 'matching' | 'listen_and_build' | 'error_hunter' | 'secret_taboo';
    question_text: string;
    token_pool?: Token[];
    placements?: Token[];
    item_pool?: Token[];
    categories?: Category[];
    left_items?: Token[];
    right_items?: Token[];
    pairs?: Pair[];
    audio_ready?: boolean;
    tokens?: Token[];
    corrections?: ErrorCorrection[];
    target_count?: number;
    taboo_phase?: 'handoff' | 'reveal' | 'ready_to_clue' | 'guessing' | 'answered';
    clue_giver?: TabooRole;
    recorder?: TabooRole;
    guess?: string;
    clue_seconds?: number;
    forbidden_check_automatic?: boolean;
    reveal_ends_at?: string;
    secret_word?: string;
    forbidden_words?: string[];
    answer_status?: string;
    score_earned: number;
    contributors: number;
    required_contributors: number;
    can_submit: boolean;
    correct_answer?: string;
}
interface TeamState {
    uuid: string; status: string; question_started_at?: string; timer_seconds: number; total_items: number;
    current_item_index: number; game: { title: string; subject?: string };
    team: { id: number; name: string; score: number; turn_number: number; active_member?: { id: number; name: string }; members: Array<{ id: number; name: string }> };
    question?: Question;
}

const gameLabels: Record<Question['item_type'], string> = {
    sentence_rearrange: 'Sentence Relay',
    grouping: 'Category Relay',
    matching: 'Match Chain',
    listen_and_build: 'Listen and Build',
    error_hunter: 'Error Hunter',
    secret_taboo: 'Secret Taboo',
};

export default function Play({ session: initialSession }: { session: TeamState }) {
    const [session, setSession] = useState(initialSession);
    const [busy, setBusy] = useState(false);
    const [passTo, setPassTo] = useState<string | null>(null);
    const [selectedGroupingItem, setSelectedGroupingItem] = useState<string | null>(null);
    const [selectedLeft, setSelectedLeft] = useState<string | null>(null);
    const [selectedErrorToken, setSelectedErrorToken] = useState<string | null>(null);
    const [correctionInput, setCorrectionInput] = useState('');
    const [tabooGuess, setTabooGuess] = useState('');
    const [now, setNow] = useState(Date.now());

    const refresh = useCallback(async () => {
        const response = await axios.get(route('team-quest.state', initialSession.uuid));
        setSession(response.data.session);
    }, [initialSession.uuid]);

    useEffect(() => {
        const poll = window.setInterval(() => void refresh(), 1800);
        const clock = window.setInterval(() => setNow(Date.now()), 250);
        return () => { window.clearInterval(poll); window.clearInterval(clock); };
    }, [refresh]);

    const remaining = useMemo(() => {
        if (!session.question_started_at) return session.timer_seconds;
        return Math.max(0, Math.ceil(session.timer_seconds - (now - new Date(session.question_started_at).getTime()) / 1000));
    }, [now, session.question_started_at, session.timer_seconds]);

    const act = async (actionType: string, actionPayload: Record<string, unknown>) => {
        if (!session.team.active_member || busy) return;
        setBusy(true);
        try {
            const response = await axios.post(route('team-quest.action', session.uuid), {
                member_id: session.team.active_member.id,
                turn_number: session.team.turn_number,
                client_action_id: crypto.randomUUID(),
                action_type: actionType,
                action_payload: actionPayload,
            });
            setSession(response.data.session);
            setSelectedGroupingItem(null);
            setSelectedLeft(null);
            setSelectedErrorToken(null);
            setCorrectionInput('');
            setPassTo(['reveal_secret', 'submit_taboo_guess'].includes(actionType) ? null : (response.data.session.team.active_member?.name ?? null));
        } catch (error: any) {
            toast.error(error.response?.data?.message ?? 'Aksi tidak dapat diproses.');
            await refresh();
        } finally {
            setBusy(false);
        }
    };

    const submit = async () => {
        setBusy(true);
        try {
            const response = await axios.post(route('team-quest.submit', session.uuid));
            setSession(response.data.session);
            toast.success('Jawaban kelompok berhasil dikirim!');
        } catch (error: any) {
            toast.error(error.response?.data?.message ?? error.response?.data?.errors?.answer?.[0] ?? 'Jawaban belum dapat dikirim.');
        } finally {
            setBusy(false);
        }
    };

    const question = session.question;
    const isActive = session.status === 'question_active' && question?.answer_status === 'draft';
    const categorizedIds = new Set(question?.categories?.flatMap((category) => category.items.map((item) => item.id)) ?? []);
    const matchedLeftIds = new Set(question?.pairs?.map((pair) => pair.left.id) ?? []);
    const matchedRightIds = new Set(question?.pairs?.map((pair) => pair.right.id) ?? []);
    const isComplete = question?.item_type === 'sentence_rearrange'
        ? (question.token_pool?.length ?? 0) === 0
        : question?.item_type === 'listen_and_build'
            ? question.audio_ready === true && (question.token_pool?.length ?? 0) === 0
        : question?.item_type === 'grouping'
            ? (question.item_pool?.length ?? 0) === 0
            : question?.item_type === 'matching'
                ? (question.left_items?.length ?? 0) > 0 && matchedLeftIds.size === question.left_items?.length
                : question?.item_type === 'error_hunter'
                    ? (question.corrections?.length ?? 0) === (question.target_count ?? 0)
                    : question?.item_type === 'secret_taboo'
                        ? Boolean(question.guess?.trim())
                    : false;
    const tabooRevealRemaining = question?.reveal_ends_at
        ? Math.max(0, Math.ceil((new Date(question.reveal_ends_at).getTime() - now) / 1000))
        : 0;
    const gameLabel = question ? gameLabels[question.item_type] : 'Team Quest';

    return (
        <>
            <Head title={`${gameLabel} - ${session.team.name}`} />
            <div className="mx-auto max-w-4xl space-y-5 pb-10">
                <div className="flex items-center justify-between gap-3">
                    <div><p className="text-xs uppercase tracking-widest text-emerald-300">{session.team.name}</p><h1 className="text-xl font-black">{session.game.title}</h1></div>
                    {session.status === 'question_active' && <div className={`flex items-center gap-2 rounded-xl px-3 py-2 font-black ${remaining <= 5 ? 'bg-rose-500/20 text-rose-300' : 'bg-amber-500/15 text-amber-200'}`}><Clock className="h-4 w-4" /> {remaining}s</div>}
                </div>

                {question && (
                    <>
                        <div className="glass rounded-2xl border border-border/40 p-5 text-center">
                            <p className="text-xs uppercase tracking-widest text-emerald-300">{gameLabel} · Soal {session.current_item_index + 1}/{session.total_items}</p>
                            <h2 className="mt-2 text-xl font-bold">{question.question_text}</h2>
                        </div>

                        {isActive && session.team.active_member && (
                            <div className="flex items-center justify-center gap-2 rounded-xl bg-sky-500/15 p-3 font-bold text-sky-200"><Users className="h-5 w-5" /> Giliran {session.team.active_member.name}</div>
                        )}

                        {question.item_type === 'listen_and_build' && !question.audio_ready && (
                            <div className="rounded-2xl border border-sky-500/30 bg-sky-500/10 p-8 text-center text-sky-200">
                                <Headphones className="mx-auto h-12 w-12" />
                                <h3 className="mt-4 text-xl font-black">Dengarkan audio dari LCD</h3>
                                <p className="mt-2 text-sm opacity-75">Token akan muncul otomatis setelah pemutaran pertama selesai.</p>
                            </div>
                        )}

                        {['sentence_rearrange', 'listen_and_build'].includes(question.item_type) && (question.item_type !== 'listen_and_build' || question.audio_ready) && (
                            <>
                                <div className="min-h-24 rounded-2xl border-2 border-dashed border-emerald-500/30 bg-emerald-500/5 p-4">
                                    <p className="mb-3 text-xs uppercase tracking-wider text-text-muted">{question.item_type === 'listen_and_build' ? 'Kalimat yang didengar' : 'Kalimat kelompok'}</p>
                                    <div className="flex flex-wrap gap-2">
                                        {(question.placements ?? []).map((token) => (
                                            <button key={token.id} disabled={!isActive || busy} onClick={() => void act('remove_token', { token_id: token.id })} className="rounded-xl bg-emerald-500 px-4 py-2 font-bold text-white disabled:opacity-70">{token.text}</button>
                                        ))}
                                        {(question.placements?.length ?? 0) === 0 && <span className="text-sm text-text-muted">Pilih kata sesuai giliran...</span>}
                                    </div>
                                </div>

                                {isActive && (
                                    <div className="flex flex-wrap justify-center gap-2">
                                        {(question.token_pool ?? []).map((token) => (
                                            <button key={token.id} disabled={busy} onClick={() => void act('place_token', { token_id: token.id })} className="rounded-xl border border-border/50 bg-surface px-4 py-2 font-semibold hover:border-sky-400 disabled:opacity-50">{token.text}</button>
                                        ))}
                                    </div>
                                )}
                            </>
                        )}

                        {question.item_type === 'grouping' && (
                            <div className="space-y-4">
                                <div className="rounded-2xl border border-border/40 bg-surface/60 p-4">
                                    <p className="mb-3 flex items-center gap-2 text-xs uppercase tracking-wider text-text-muted"><Tags className="h-4 w-4" /> Pilih item, lalu pilih kategorinya</p>
                                    <div className="flex flex-wrap gap-2">
                                        {(question.item_pool ?? []).map((item) => (
                                            <button key={item.id} disabled={!isActive || busy} onClick={() => setSelectedGroupingItem(item.id)} className={`rounded-xl border px-4 py-2 font-bold ${selectedGroupingItem === item.id ? 'border-sky-300 bg-sky-500 text-white' : 'border-border/50 bg-surface hover:border-sky-400'} disabled:opacity-60`}>{item.text}</button>
                                        ))}
                                        {(question.item_pool?.length ?? 0) === 0 && <span className="text-sm text-emerald-300">Semua item sudah masuk kategori.</span>}
                                    </div>
                                </div>
                                <div className="grid gap-3 sm:grid-cols-2">
                                    {(question.categories ?? []).map((category) => (
                                        <div key={category.id} className="rounded-2xl border border-emerald-500/25 bg-emerald-500/5 p-4">
                                            <button disabled={!isActive || busy || !selectedGroupingItem} onClick={() => void act('categorize_item', { item_id: selectedGroupingItem, category_id: category.id })} className="w-full rounded-xl bg-emerald-500/15 px-3 py-2 text-left font-black text-emerald-200 disabled:opacity-70">{category.name}</button>
                                            <div className="mt-3 flex min-h-12 flex-wrap gap-2">
                                                {category.items.map((item) => (
                                                    <button key={item.id} disabled={!isActive || busy} onClick={() => setSelectedGroupingItem(item.id)} className={`rounded-lg px-3 py-2 text-sm font-semibold ${selectedGroupingItem === item.id ? 'bg-sky-500 text-white' : 'bg-surface'}`}>{item.text}</button>
                                                ))}
                                                {category.items.length === 0 && <span className="text-xs text-text-muted">Belum ada item</span>}
                                            </div>
                                        </div>
                                    ))}
                                </div>
                                {isActive && selectedGroupingItem && categorizedIds.has(selectedGroupingItem) && (
                                    <button disabled={busy} onClick={() => void act('uncategorize_item', { item_id: selectedGroupingItem })} className="mx-auto flex items-center gap-2 rounded-xl bg-rose-500/10 px-4 py-2 text-sm font-bold text-rose-300"><X className="h-4 w-4" /> Kembalikan ke bank item</button>
                                )}
                            </div>
                        )}

                        {question.item_type === 'matching' && (
                            <div className="space-y-4">
                                <p className="text-center text-sm text-text-muted">Pilih kartu kiri, lalu sentuh pasangan yang tepat di sebelah kanan.</p>
                                <div className="grid grid-cols-2 gap-3">
                                    <div className="space-y-2">
                                        <p className="text-xs font-bold uppercase tracking-wider text-sky-300">Kartu kiri</p>
                                        {(question.left_items ?? []).filter((item) => !matchedLeftIds.has(item.id)).map((item) => (
                                            <button key={item.id} disabled={!isActive || busy} onClick={() => setSelectedLeft(item.id)} className={`w-full rounded-xl border p-3 text-left font-bold ${selectedLeft === item.id ? 'border-sky-300 bg-sky-500 text-white' : 'border-border/50 bg-surface hover:border-sky-400'} disabled:opacity-60`}>{item.text}</button>
                                        ))}
                                    </div>
                                    <div className="space-y-2">
                                        <p className="text-xs font-bold uppercase tracking-wider text-amber-300">Kartu kanan</p>
                                        {(question.right_items ?? []).filter((item) => !matchedRightIds.has(item.id)).map((item) => (
                                            <button key={item.id} disabled={!isActive || busy || !selectedLeft} onClick={() => void act('match_pair', { left_id: selectedLeft, right_id: item.id })} className="w-full rounded-xl border border-border/50 bg-surface p-3 text-left font-bold hover:border-amber-400 disabled:opacity-60">{item.text}</button>
                                        ))}
                                    </div>
                                </div>
                                {(question.pairs?.length ?? 0) > 0 && (
                                    <div className="rounded-2xl bg-emerald-500/5 p-4">
                                        <p className="mb-3 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-emerald-300"><Link2 className="h-4 w-4" /> Pasangan kelompok</p>
                                        <div className="space-y-2">
                                            {(question.pairs ?? []).map((pair) => (
                                                <button key={pair.left.id} disabled={!isActive || busy} onClick={() => void act('unmatch_pair', { left_id: pair.left.id })} className="flex w-full items-center justify-between rounded-xl bg-surface px-4 py-3 text-left disabled:opacity-70"><span>{pair.left.text}</span><span className="text-emerald-300">↔</span><span>{pair.right.text}</span></button>
                                            ))}
                                        </div>
                                    </div>
                                )}
                            </div>
                        )}

                        {question.item_type === 'error_hunter' && (
                            <div className="space-y-4">
                                <div className="rounded-2xl border border-amber-500/25 bg-amber-500/5 p-4">
                                    <p className="mb-3 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-amber-300"><AlertTriangle className="h-4 w-4" /> Pilih kata yang salah</p>
                                    <div className="flex flex-wrap gap-2">
                                        {(question.tokens ?? []).map((token) => {
                                            const correction = question.corrections?.find((entry) => entry.token.id === token.id);
                                            return (
                                                <button key={token.id} disabled={!isActive || busy} onClick={() => { setSelectedErrorToken(token.id); setCorrectionInput(correction?.correction ?? ''); }} className={`rounded-xl border px-4 py-2 font-bold ${selectedErrorToken === token.id ? 'border-amber-300 bg-amber-500 text-slate-950' : correction ? 'border-emerald-400/50 bg-emerald-500/15 text-emerald-200' : 'border-border/50 bg-surface'} disabled:opacity-60`}>{token.text}</button>
                                            );
                                        })}
                                    </div>
                                </div>

                                {isActive && selectedErrorToken && (
                                    <div className="flex flex-col gap-2 rounded-2xl bg-surface/70 p-4 sm:flex-row">
                                        <input value={correctionInput} onChange={e => setCorrectionInput(e.target.value)} maxLength={100} placeholder="Ketik koreksi yang benar…" className="min-w-0 flex-1 rounded-xl border border-border/50 bg-surface px-4 py-3" />
                                        <button disabled={busy || correctionInput.trim() === ''} onClick={() => void act('correct_token', { token_id: selectedErrorToken, correction: correctionInput })} className="rounded-xl bg-amber-500 px-5 py-3 font-black text-slate-950 disabled:opacity-50">Simpan Koreksi</button>
                                    </div>
                                )}

                                {(question.corrections?.length ?? 0) > 0 && (
                                    <div className="rounded-2xl bg-emerald-500/5 p-4">
                                        <p className="mb-3 text-xs font-bold uppercase tracking-wider text-emerald-300">Koreksi kelompok ({question.corrections?.length}/{question.target_count})</p>
                                        <div className="space-y-2">
                                            {(question.corrections ?? []).map((entry) => (
                                                <button key={entry.token.id} disabled={!isActive || busy} onClick={() => void act('remove_correction', { token_id: entry.token.id })} className="flex w-full items-center justify-between rounded-xl bg-surface px-4 py-3 text-left disabled:opacity-70"><span className="line-through opacity-70">{entry.token.text}</span><span className="text-emerald-300">→</span><span className="font-bold">{entry.correction}</span></button>
                                            ))}
                                        </div>
                                    </div>
                                )}
                            </div>
                        )}

                        {question.item_type === 'secret_taboo' && (
                            <div className="space-y-4">
                                <div className="grid gap-3 sm:grid-cols-2">
                                    <div className="rounded-2xl border border-fuchsia-500/25 bg-fuchsia-500/10 p-4">
                                        <p className="text-xs font-bold uppercase tracking-wider text-fuchsia-300">Clue-giver</p>
                                        <p className="mt-1 text-lg font-black">{question.clue_giver?.name ?? 'Menunggu peran'}</p>
                                    </div>
                                    <div className="rounded-2xl border border-sky-500/25 bg-sky-500/10 p-4">
                                        <p className="text-xs font-bold uppercase tracking-wider text-sky-300">Recorder</p>
                                        <p className="mt-1 text-lg font-black">{question.recorder?.name ?? 'Menunggu peran'}</p>
                                    </div>
                                </div>

                                {question.taboo_phase === 'handoff' && (
                                    <div className="rounded-2xl border border-fuchsia-500/30 bg-fuchsia-500/10 p-6 text-center">
                                        <Eye className="mx-auto h-10 w-10 text-fuchsia-300" />
                                        <h3 className="mt-3 text-xl font-black">Berikan HP kepada {question.clue_giver?.name}</h3>
                                        <p className="mt-2 text-sm text-text-muted">Pastikan anggota lain tidak melihat layar. Secret word hanya tampil satu kali selama 5 detik.</p>
                                        {isActive && <button disabled={busy} onClick={() => void act('reveal_secret', {})} className="mt-5 rounded-xl bg-fuchsia-500 px-6 py-3 font-black text-white disabled:opacity-50">Saya clue-giver · Buka Secret</button>}
                                    </div>
                                )}

                                {question.taboo_phase === 'reveal' && (
                                    <div className="rounded-2xl border-2 border-fuchsia-400 bg-fuchsia-500/15 p-6 text-center">
                                        <p className="text-xs font-bold uppercase tracking-[0.25em] text-fuchsia-300">Rahasia · menutup dalam {tabooRevealRemaining}s</p>
                                        <p className="mt-4 text-4xl font-black text-fuchsia-100">{question.secret_word}</p>
                                        <p className="mt-5 text-xs font-bold uppercase tracking-wider text-rose-300">Jangan ucapkan</p>
                                        <div className="mt-2 flex flex-wrap justify-center gap-2">
                                            {(question.forbidden_words ?? []).map((word) => <span key={word} className="rounded-full bg-rose-500/20 px-4 py-2 font-bold text-rose-200">{word}</span>)}
                                        </div>
                                    </div>
                                )}

                                {question.taboo_phase === 'ready_to_clue' && (
                                    <div className="rounded-2xl border border-emerald-500/30 bg-emerald-500/10 p-6 text-center">
                                        <EyeOff className="mx-auto h-10 w-10 text-emerald-300" />
                                        <h3 className="mt-3 text-xl font-black">Secret sudah tersembunyi</h3>
                                        <p className="mt-2 text-sm text-text-muted">Clue-giver mulai menjelaskan secara lisan, lalu oper HP ke recorder.</p>
                                        {isActive && <button disabled={busy} onClick={() => void act('begin_clues', {})} className="mt-5 rounded-xl bg-emerald-500 px-6 py-3 font-black text-white disabled:opacity-50">Mulai Clue & Oper ke Recorder</button>}
                                    </div>
                                )}

                                {question.taboo_phase === 'guessing' && (
                                    <div className="space-y-4 rounded-2xl border border-sky-500/30 bg-sky-500/10 p-5">
                                        <div className="text-center">
                                            <Mic2 className="mx-auto h-9 w-9 text-sky-300" />
                                            <h3 className="mt-2 text-xl font-black">Recorder: {question.recorder?.name}</h3>
                                            <p className="mt-1 text-sm text-text-muted">Dengarkan tebakan kelompok, lalu ketik jawaban final.</p>
                                        </div>
                                        <div className="flex flex-col gap-2 sm:flex-row">
                                            <input value={tabooGuess} onChange={event => setTabooGuess(event.target.value)} maxLength={100} placeholder="Ketik tebakan kelompok…" className="min-w-0 flex-1 rounded-xl border border-border/50 bg-surface px-4 py-3" />
                                            <button disabled={!isActive || busy || tabooGuess.trim() === ''} onClick={() => void act('submit_taboo_guess', { guess: tabooGuess.trim() })} className="rounded-xl bg-sky-500 px-5 py-3 font-black text-white disabled:opacity-50">Kunci Tebakan</button>
                                        </div>
                                    </div>
                                )}

                                {question.taboo_phase === 'answered' && (
                                    <div className="rounded-2xl bg-emerald-500/10 p-5 text-center">
                                        <p className="text-xs font-bold uppercase tracking-wider text-emerald-300">Tebakan kelompok</p>
                                        <p className="mt-2 text-2xl font-black">{question.guess}</p>
                                    </div>
                                )}

                                <div className="flex items-start gap-2 rounded-xl bg-amber-500/10 p-3 text-sm text-amber-200">
                                    <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
                                    <p>Forbidden word belum diperiksa otomatis. Gunakan kejujuran kelas; guru dapat membatalkan poin bila aturan dilanggar.</p>
                                </div>
                            </div>
                        )}

                        {isActive && isComplete && !question.can_submit && (
                            <button onClick={() => void act('review_confirm', {})} disabled={busy} className="mx-auto flex items-center gap-2 rounded-xl bg-sky-500 px-6 py-3 font-black text-white disabled:opacity-50"><CheckCircle2 className="h-5 w-5" /> Review & Oper HP ({question.contributors}/{question.required_contributors})</button>
                        )}

                        {isActive && isComplete && question.can_submit && (
                            <button onClick={() => void submit()} disabled={busy} className="mx-auto flex items-center gap-2 rounded-xl bg-emerald-500 px-6 py-3 font-black text-white disabled:opacity-50"><Send className="h-5 w-5" /> Final Answer</button>
                        )}

                        {question.answer_status && question.answer_status !== 'draft' && (
                            <div className="rounded-2xl bg-sky-500/10 p-5 text-center text-sky-200"><CheckCircle2 className="mx-auto mb-2 h-8 w-8" /><p className="font-bold">Jawaban terkunci · +{question.score_earned} poin</p><p className="text-sm opacity-70">Menunggu guru membuka jawaban.</p></div>
                        )}

                        {question.correct_answer && <div className="rounded-2xl bg-emerald-500/15 p-5 text-center"><p className="text-xs uppercase tracking-widest text-emerald-300">Jawaban benar</p><p className="mt-2 text-lg font-black text-emerald-200">{question.correct_answer}</p></div>}
                    </>
                )}

                {['completed', 'cancelled'].includes(session.status) && <div className="glass rounded-2xl p-8 text-center"><CheckCircle2 className="mx-auto h-12 w-12 text-emerald-300" /><h2 className="mt-3 text-2xl font-black">Team Quest Selesai</h2><p className="mt-2 text-text-muted">Skor {session.team.name}: {session.team.score}</p><Link href={route('games.index')} className="mt-5 inline-flex rounded-xl bg-emerald-500 px-6 py-3 font-black text-white">Kembali ke Daftar Game</Link></div>}
            </div>

            {passTo && (
                <div data-hide-mobile-dock="true" className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-slate-950/90 p-6 pb-[calc(1.5rem+env(safe-area-inset-bottom))]">
                    <div className="max-w-sm text-center"><RotateCcw className="mx-auto h-14 w-14 text-sky-300" /><p className="mt-5 text-sm uppercase tracking-widest text-sky-300">Oper HP sekarang</p><h2 className="mt-2 text-3xl font-black">{passTo}</h2><button onClick={() => setPassTo(null)} className="mt-8 rounded-xl bg-sky-500 px-8 py-3 font-bold text-white">Saya siap</button></div>
                </div>
            )}
        </>
    );
}

Play.layout = (page: React.ReactNode) => <>{page}</>;

Play.layout = (page: any) => <StudentLayout title="Team Quest">{page}</StudentLayout>;