import { Head, Link, router } from '@inertiajs/react';
import axios from 'axios';
import { BarChart3, CheckCircle2, Clock, Trophy, Users, Volume2, Wifi, WifiOff } from 'lucide-react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import AuthenticatedLayout from '@/layouts/AuthenticatedLayout';
import { toast } from 'sonner';

interface Team {
    id: number; name: string; color: string; score: number; connected: boolean; active_member?: string;
    turn_number: number; answer_status?: string; progress: number; score_earned: number;
    correct_ratio?: number; contributors?: number; required_contributors?: number; time_taken_ms?: number;
}
interface Session {
    uuid: string; status: string; current_item_index: number; question_started_at?: string; timer_seconds: number;
    total_items: number; game: { title: string; subject?: string }; class_name?: string;
}
interface Question {
    id: number; item_type: string; question_text: string; total_tokens: number; unit_label: string; correct_answer?: string;
    audio_url?: string; replay_limit?: number; audio_play_count?: number; audio_completed_once?: boolean;
    clue_seconds?: number; forbidden_check_automatic?: boolean;
}
interface Props { session: Session; question?: Question | null; teams: Team[] }

export default function Play({ session: initialSession, question: initialQuestion, teams: initialTeams }: Props) {
    const [session, setSession] = useState(initialSession);
    const [question, setQuestion] = useState(initialQuestion);
    const [teams, setTeams] = useState(initialTeams);
    const [now, setNow] = useState(Date.now());
    const autoRevealKey = useRef<string | null>(null);
    const audioRef = useRef<HTMLAudioElement | null>(null);
    const [audioBusy, setAudioBusy] = useState(false);

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

    useEffect(() => {
        const poll = window.setInterval(() => void refresh(), 1500);
        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 post = (name: string) => router.post(route(name, session.uuid), {}, { preserveScroll: true, onSuccess: () => void refresh() });

    const playListeningAudio = async () => {
        if (!question?.audio_url || !audioRef.current || audioBusy) return;
        setAudioBusy(true);
        try {
            const response = await axios.post(route('team-quest.host.audio.start', session.uuid));
            setSession(response.data.session);
            setQuestion(response.data.question);
            setTeams(response.data.teams);
            audioRef.current.currentTime = 0;
            await audioRef.current.play();
        } catch (error: any) {
            toast.error(error.response?.data?.message ?? error.response?.data?.errors?.audio?.[0] ?? 'Audio tidak dapat diputar.');
            setAudioBusy(false);
        }
    };

    const completeListeningAudio = async () => {
        try {
            const response = await axios.post(route('team-quest.host.audio.complete', session.uuid));
            setSession(response.data.session);
            setQuestion(response.data.question);
            setTeams(response.data.teams);
        } catch (error: any) {
            toast.error(error.response?.data?.errors?.audio?.[0] ?? 'Status audio tidak dapat diselesaikan.');
        } finally {
            setAudioBusy(false);
        }
    };

    useEffect(() => {
        const key = `${session.current_item_index}:${session.question_started_at}`;
        if (session.status === 'question_active' && remaining === 0 && autoRevealKey.current !== key) {
            autoRevealKey.current = key;
            router.post(route('team-quest.host.reveal', session.uuid), {}, { preserveScroll: true, onSuccess: () => void refresh() });
        }
    }, [refresh, remaining, session.current_item_index, session.question_started_at, session.status, session.uuid]);

    return (
        <AuthenticatedLayout title={`Team Quest: ${session.game.title}`}>
            <Head title={`Team Quest - ${session.game.title}`} />
            <div className="space-y-5">
                <div className="flex flex-wrap items-center justify-between gap-3">
                    <div>
                        <p className="text-sm text-emerald-300">{session.class_name} · Soal {session.current_item_index + 1}/{session.total_items}</p>
                    </div>
                    {session.status === 'question_active' && (
                        <div className={`flex items-center gap-2 rounded-2xl px-5 py-3 text-2xl font-black ${remaining <= 5 ? 'bg-rose-500/20 text-rose-300' : 'bg-amber-500/15 text-amber-200'}`}>
                            <Clock className="h-6 w-6" /> {remaining}s
                        </div>
                    )}
                </div>

                {question && (
                    <div className="glass rounded-2xl border border-border/40 p-6 text-center">
                        <p className="text-sm uppercase tracking-widest text-text-muted">{question.item_type === 'sentence_rearrange' ? 'Sentence Relay' : question.item_type === 'grouping' ? 'Category Relay' : question.item_type === 'matching' ? 'Match Chain' : question.item_type === 'listen_and_build' ? 'Listen and Build' : question.item_type === 'error_hunter' ? 'Error Hunter' : 'Secret Taboo'}</p>
                        <h2 className="mt-3 text-2xl font-bold">{question.question_text}</h2>
                        {question.item_type === 'listen_and_build' && question.audio_url && (
                            <div className="mt-5">
                                <audio ref={audioRef} src={question.audio_url} preload="metadata" onEnded={() => void completeListeningAudio()} />
                                <button onClick={() => void playListeningAudio()} disabled={audioBusy || (question.audio_play_count ?? 0) >= (question.replay_limit ?? 2)} className="mx-auto flex items-center gap-2 rounded-xl bg-sky-500 px-6 py-3 font-black text-white disabled:opacity-50">
                                    <Volume2 className="h-5 w-5" /> {audioBusy ? 'Audio sedang diputar…' : `Putar Audio (${question.audio_play_count ?? 0}/${question.replay_limit ?? 2})`}
                                </button>
                                <p className="mt-2 text-xs text-text-muted">Token HP {question.audio_completed_once ? 'sudah terbuka' : 'terbuka setelah audio selesai'}.</p>
                            </div>
                        )}
                        {question.item_type === 'secret_taboo' && (
                            <div className="mt-5 rounded-xl border border-fuchsia-500/25 bg-fuchsia-500/10 p-4 text-sm text-fuchsia-100">
                                Secret word hanya tampil di HP clue-giver selama 5 detik. Waktu clue {question.clue_seconds ?? 45} detik dan pelanggaran forbidden word diperiksa manual oleh kelas.
                            </div>
                        )}
                        {question.correct_answer && <div className="mt-5 rounded-xl bg-emerald-500/15 p-4 text-xl font-black text-emerald-300">{question.correct_answer}</div>}
                    </div>
                )}

                <div className="grid gap-3 md:grid-cols-2 2xl:grid-cols-4">
                    {teams.map((team, index) => (
                        <div key={team.id} className="glass min-w-0 rounded-2xl border border-border/40 p-4">
                            <div className="flex items-center justify-between">
                                <h3 className="flex items-center gap-2 font-bold">{index + 1}. {team.name} {team.connected ? <Wifi className="h-4 w-4 text-emerald-300" aria-label="Terhubung" /> : <WifiOff className="h-4 w-4 text-rose-300" aria-label="Terputus" />}</h3>
                                <span className="font-black text-amber-300">{team.score}</span>
                            </div>
                            <div className="mt-3 h-2 overflow-hidden rounded-full bg-surface-hover">
                                <div className="h-full bg-emerald-500" style={{ width: `${question ? Math.min(100, team.progress / question.total_tokens * 100) : 0}%` }} />
                            </div>
                            <div className="mt-2 flex justify-between text-xs text-text-muted">
                                <span>{team.progress}/{question?.total_tokens ?? 0} {question?.unit_label ?? 'item'}</span>
                                <span>{team.answer_status ?? 'menunggu'}</span>
                            </div>
                            {team.active_member && <p className="mt-3 flex min-w-0 items-start gap-1 break-words text-sm"><Users className="mt-0.5 h-4 w-4 shrink-0 text-sky-300" /> Giliran {team.active_member}</p>}
                            {team.score_earned > 0 && <p className="mt-2 text-sm font-bold text-emerald-300">+{team.score_earned} poin</p>}
                            {team.correct_ratio !== undefined && team.correct_ratio !== null && (
                                <div className="mt-3 rounded-xl bg-surface/70 p-3 text-xs text-text-muted">
                                    <p><span className="font-bold text-text-main">{Math.round(team.correct_ratio * 100)}%</span> jawaban benar</p>
                                    <p className="mt-1">Partisipasi {team.contributors ?? 0}/{team.required_contributors ?? 0} · {Math.round((team.time_taken_ms ?? 0) / 1000)} detik</p>
                                </div>
                            )}
                        </div>
                    ))}
                </div>

                <div className="flex flex-wrap justify-center gap-3">
                    {session.status === 'question_active' && <button onClick={() => post('team-quest.host.reveal')} className="rounded-xl bg-amber-500 px-5 py-3 font-bold text-slate-950">Tutup & Reveal</button>}
                    {session.status === 'revealing' && <button onClick={() => post('team-quest.host.leaderboard')} className="inline-flex items-center gap-2 rounded-xl bg-sky-500 px-5 py-3 font-bold text-white"><Trophy className="h-5 w-5" /> Tampilkan Leaderboard</button>}
                    {session.status === 'leaderboard' && <button onClick={() => post('team-quest.host.next')} className="rounded-xl bg-emerald-500 px-5 py-3 font-bold text-white">{session.current_item_index + 1 >= session.total_items ? 'Selesaikan Game' : 'Soal Berikutnya'}</button>}
                    {['completed', 'cancelled'].includes(session.status) && <div className="inline-flex items-center gap-2 rounded-xl bg-emerald-500/15 px-5 py-3 font-bold text-emerald-300"><CheckCircle2 className="h-5 w-5" /> Team Quest selesai</div>}
                    {['completed', 'cancelled'].includes(session.status) && <Link href={route('team-quest.report', session.uuid)} className="inline-flex items-center gap-2 rounded-xl bg-sky-500 px-5 py-3 font-bold text-white"><BarChart3 className="h-5 w-5" /> Buka Report</Link>}
                    {['completed', 'cancelled'].includes(session.status) && <Link href={route('games.index')} className="rounded-xl bg-surface px-5 py-3 font-bold text-text-light">Kembali ke Game</Link>}
                    {!['completed', 'cancelled'].includes(session.status) && <button onClick={() => post('team-quest.host.end')} className="rounded-xl bg-rose-500/10 px-5 py-3 text-rose-300">Akhiri Sesi</button>}
                </div>
            </div>
        </AuthenticatedLayout>
    );
}