import React, { useState, useEffect, useRef } from 'react';
import { Settings, Play, RotateCcw, CheckCircle, XCircle, Trophy, Check } from 'lucide-react';

// --- DATA KATAKANA ---
const KATAKANA_DATA = {
    'Seion (Dasar)': {
        'A-O': [
            { char: 'ア', romaji: 'a' }, { char: 'イ', romaji: 'i' }, 
            { char: 'ウ', romaji: 'u' }, { char: 'エ', romaji: 'e' }, { char: 'オ', romaji: 'o' }
        ],
        'Ka-Ko': [
            { char: 'カ', romaji: 'ka' }, { char: 'キ', romaji: 'ki' }, 
            { char: 'ク', romaji: 'ku' }, { char: 'ケ', romaji: 'ke' }, { char: 'コ', romaji: 'ko' }
        ],
        'Sa-So': [
            { char: 'サ', romaji: 'sa' }, { char: 'シ', romaji: 'shi' }, 
            { char: 'ス', romaji: 'su' }, { char: 'セ', romaji: 'se' }, { char: 'ソ', romaji: 'so' }
        ],
        'Ta-To': [
            { char: 'タ', romaji: 'ta' }, { char: 'チ', romaji: 'chi' }, 
            { char: 'ツ', romaji: 'tsu' }, { char: 'テ', romaji: 'te' }, { char: 'ト', romaji: 'to' }
        ],
        'Na-No': [
            { char: 'ナ', romaji: 'na' }, { char: 'ニ', romaji: 'ni' }, 
            { char: 'ヌ', romaji: 'nu' }, { char: 'ネ', romaji: 'ne' }, { char: 'ノ', romaji: 'no' }
        ],
        'Ha-Ho': [
            { char: 'ハ', romaji: 'ha' }, { char: 'ヒ', romaji: 'hi' }, 
            { char: 'フ', romaji: 'fu' }, { char: 'ヘ', romaji: 'he' }, { char: 'ホ', romaji: 'ho' }
        ],
        'Ma-Mo': [
            { char: 'マ', romaji: 'ma' }, { char: 'ミ', romaji: 'mi' }, 
            { char: 'ム', romaji: 'mu' }, { char: 'メ', romaji: 'me' }, { char: 'モ', romaji: 'mo' }
        ],
        'Ya-Yo': [
            { char: 'ヤ', romaji: 'ya' }, { char: 'ユ', romaji: 'yu' }, { char: 'ヨ', romaji: 'yo' }
        ],
        'Ra-Ro': [
            { char: 'ラ', romaji: 'ra' }, { char: 'リ', romaji: 'ri' }, 
            { char: 'ル', romaji: 'ru' }, { char: 'レ', romaji: 're' }, { char: 'ロ', romaji: 'ro' }
        ],
        'Wa-N': [
            { char: 'ワ', romaji: 'wa' }, { char: 'ヲ', romaji: 'wo' }, { char: 'ン', romaji: 'n' }
        ]
    },
    'Dakuten (Suara Tebal)': {
        'Ga-Go': [
            { char: 'ガ', romaji: 'ga' }, { char: 'ギ', romaji: 'gi' }, 
            { char: 'グ', romaji: 'gu' }, { char: 'ゲ', romaji: 'ge' }, { char: 'ゴ', romaji: 'go' }
        ],
        'Za-Zo': [
            { char: 'ザ', romaji: 'za' }, { char: 'ジ', romaji: 'ji' }, 
            { char: 'ズ', romaji: 'zu' }, { char: 'ゼ', romaji: 'ze' }, { char: 'ゾ', romaji: 'zo' }
        ],
        'Da-Do': [
            { char: 'ダ', romaji: 'da' }, { char: 'ヂ', romaji: 'ji' }, 
            { char: 'ヅ', romaji: 'zu' }, { char: 'デ', romaji: 'de' }, { char: 'ド', romaji: 'do' }
        ],
        'Ba-Bo': [
            { char: 'バ', romaji: 'ba' }, { char: 'ビ', romaji: 'bi' }, 
            { char: 'ブ', romaji: 'bu' }, { char: 'ベ', romaji: 'be' }, { char: 'ボ', romaji: 'bo' }
        ],
    },
    'Handakuten (Suara P)': {
        'Pa-Po': [
            { char: 'パ', romaji: 'pa' }, { char: 'ピ', romaji: 'pi' }, 
            { char: 'プ', romaji: 'pu' }, { char: 'ペ', romaji: 'pe' }, { char: 'ポ', romaji: 'po' }
        ]
    }
};

// --- COMPONENTS ---

const Checkbox = ({ label, checked, onChange }) => (
    <label className="flex items-center space-x-3 p-3 bg-white rounded-lg border border-slate-200 cursor-pointer hover:bg-blue-50 transition-all shadow-sm group">
        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${checked ? 'bg-blue-600 border-blue-600' : 'border-slate-300 group-hover:border-blue-400'}`}>
            {checked && <Check size={14} className="text-white" strokeWidth={3} />}
        </div>
        <input 
            type="checkbox" 
            className="hidden" 
            checked={checked} 
            onChange={onChange}
        />
        <span className="text-slate-700 font-medium select-none">{label}</span>
    </label>
);

const Button = ({ children, onClick, variant = 'primary', disabled = false, className = '' }) => {
    const baseStyle = "px-6 py-3 rounded-xl font-bold transition-all transform active:scale-95 shadow-md flex items-center justify-center gap-2";
    const variants = {
        primary: "bg-blue-600 text-white hover:bg-blue-700 disabled:bg-slate-300 disabled:cursor-not-allowed disabled:shadow-none",
        secondary: "bg-white text-slate-700 border border-slate-200 hover:bg-slate-50",
        danger: "bg-red-500 text-white hover:bg-red-600",
        success: "bg-green-500 text-white hover:bg-green-600"
    };
    return (
        <button 
            onClick={onClick} 
            disabled={disabled}
            className={`${baseStyle} ${variants[variant]} ${className}`}
        >
            {children}
        </button>
    );
};

// --- MAIN APP COMPONENT ---

export default function App() {
    const [appState, setAppState] = useState('setup'); // setup, quiz, result
    
    // Settings State
    const [selectedGroups, setSelectedGroups] = useState(['A-O', 'Ka-Ko', 'Sa-So', 'Ta-To', 'Na-No']);
    const [gameMode, setGameMode] = useState('fixed'); // fixed, endless
    const [questionCount, setQuestionCount] = useState(20);
    
    // Quiz State
    const [quizQueue, setQuizQueue] = useState([]);
    const [currentIndex, setCurrentIndex] = useState(0);
    const [score, setScore] = useState(0);
    const [streak, setStreak] = useState(0);
    const [input, setInput] = useState('');
    const [feedback, setFeedback] = useState(null); // 'correct', 'incorrect', null
    const [shake, setShake] = useState(false);
    
    const inputRef = useRef(null);

    // Helpers
    const getAllGroups = () => {
        let groups = [];
        Object.keys(KATAKANA_DATA).forEach(category => {
            Object.keys(KATAKANA_DATA[category]).forEach(group => {
                groups.push(group);
            });
        });
        return groups;
    };

    const toggleGroup = (group) => {
        if (selectedGroups.includes(group)) {
            setSelectedGroups(selectedGroups.filter(g => g !== group));
        } else {
            setSelectedGroups([...selectedGroups, group]);
        }
    };

    const toggleAll = () => {
        const all = getAllGroups();
        if (selectedGroups.length === all.length) {
            setSelectedGroups([]);
        } else {
            setSelectedGroups(all);
        }
    };

    const shuffleArray = (array) => {
        return array.sort(() => Math.random() - 0.5);
    };

    // Start Game Logic
    const startGame = () => {
        let pool = [];
        Object.values(KATAKANA_DATA).forEach(category => {
            Object.entries(category).forEach(([groupName, chars]) => {
                if (selectedGroups.includes(groupName)) {
                    pool = [...pool, ...chars];
                }
            });
        });

        if (pool.length === 0) return;

        let queue = [];
        if (gameMode === 'fixed') {
            // Fill queue up to questionCount, reusing pool if necessary
            while (queue.length < questionCount) {
                queue = [...queue, ...shuffleArray([...pool])];
            }
            queue = queue.slice(0, questionCount);
        } else {
            // Endless: initial pool
            queue = shuffleArray([...pool]);
        }

        setQuizQueue(queue);
        setCurrentIndex(0);
        setScore(0);
        setStreak(0);
        setInput('');
        setFeedback(null);
        setAppState('quiz');
    };

    // Answer Logic
    const handleSubmit = (e) => {
        e.preventDefault();
        if (feedback) return; // Prevent double submission during animation

        const currentQuestion = quizQueue[currentIndex];
        const isCorrect = input.toLowerCase().trim() === currentQuestion.romaji;

        if (isCorrect) {
            setFeedback('correct');
            setScore(s => s + 1);
            setStreak(s => s + 1);
        } else {
            setFeedback('incorrect');
            setStreak(0);
            setShake(true);
            setTimeout(() => setShake(false), 500);
        }

        // Delay for next question
        setTimeout(() => {
            setFeedback(null);
            setInput('');
            
            if (gameMode === 'fixed') {
                if (currentIndex + 1 >= quizQueue.length) {
                    setAppState('result');
                } else {
                    setCurrentIndex(prev => prev + 1);
                }
            } else {
                // Endless mode
                if (currentIndex + 1 >= quizQueue.length) {
                    // Reshuffle current pool to add more questions seamlessly
                    let pool = [];
                    Object.values(KATAKANA_DATA).forEach(category => {
                        Object.entries(category).forEach(([groupName, chars]) => {
                            if (selectedGroups.includes(groupName)) {
                                pool = [...pool, ...chars];
                            }
                        });
                    });
                    setQuizQueue([...quizQueue, ...shuffleArray(pool)]);
                }
                setCurrentIndex(prev => prev + 1);
            }
        }, isCorrect ? 600 : 1500); 
    };

    // Focus input on mount/update
    useEffect(() => {
        if (appState === 'quiz' && !feedback && inputRef.current) {
            inputRef.current.focus();
        }
    }, [appState, feedback, currentIndex]);

    // --- VIEWS ---

    if (appState === 'setup') {
        return (
            <div className="min-h-screen flex flex-col items-center justify-center p-4 bg-slate-100 font-sans">
                <div className="bg-white w-full max-w-2xl rounded-2xl shadow-xl overflow-hidden flex flex-col max-h-[90vh]">
                    <div className="bg-blue-600 p-6 text-white text-center shrink-0">
                        <h1 className="text-3xl font-bold mb-2 flex items-center justify-center gap-2">
                            <Trophy className="w-8 h-8 text-yellow-300" />
                            Kuis Katakana
                        </h1>
                        <p className="opacity-90 text-blue-100">Mastering Japanese Katakana</p>
                    </div>
                    
                    <div className="p-6 overflow-y-auto custom-scroll flex-1">
                        {/* Game Mode */}
                        <div className="mb-8">
                            <h3 className="text-lg font-bold text-slate-800 mb-3 flex items-center gap-2">
                                <Settings className="w-5 h-5" /> Mode Permainan
                            </h3>
                            <div className="flex gap-4 flex-col sm:flex-row">
                                <button 
                                    onClick={() => setGameMode('fixed')}
                                    className={`flex-1 p-4 rounded-xl border-2 text-left transition-all ${gameMode === 'fixed' ? 'border-blue-500 bg-blue-50 text-blue-700' : 'border-slate-200 hover:border-blue-300'}`}
                                >
                                    <div className="font-bold flex items-center gap-2"><CheckCircle size={18} /> Latihan Standar</div>
                                    <div className="text-sm opacity-75 mt-1">Jumlah soal ditentukan. Cocok untuk latihan harian.</div>
                                </button>
                                <button 
                                    onClick={() => setGameMode('endless')}
                                    className={`flex-1 p-4 rounded-xl border-2 text-left transition-all ${gameMode === 'endless' ? 'border-purple-500 bg-purple-50 text-purple-700' : 'border-slate-200 hover:border-purple-300'}`}
                                >
                                    <div className="font-bold flex items-center gap-2"><RotateCcw size={18} /> Tanpa Batas</div>
                                    <div className="text-sm opacity-75 mt-1">Ulang terus menerus. Uji ketahananmu!</div>
                                </button>
                            </div>

                            {gameMode === 'fixed' && (
                                <div className="mt-4 bg-slate-50 p-4 rounded-xl border border-slate-200">
                                    <div className="flex justify-between mb-2">
                                        <label className="text-sm font-bold text-slate-700">Jumlah Soal</label>
                                        <span className="text-sm font-bold text-blue-600">{questionCount}</span>
                                    </div>
                                    <input 
                                        type="range" 
                                        min="5" max="100" step="5" 
                                        value={questionCount} 
                                        onChange={(e) => setQuestionCount(Number(e.target.value))}
                                        className="w-full h-2 bg-slate-300 rounded-lg appearance-none cursor-pointer accent-blue-600"
                                    />
                                </div>
                            )}
                        </div>

                        {/* Character Selection */}
                        <div>
                            <div className="flex justify-between items-center mb-3 sticky top-0 bg-white py-2 z-10 border-b border-slate-100">
                                <h3 className="text-lg font-bold text-slate-800">Pilih Huruf</h3>
                                <button onClick={toggleAll} className="text-sm text-blue-600 font-bold hover:underline px-3 py-1 rounded hover:bg-blue-50">
                                    {selectedGroups.length === getAllGroups().length ? 'Hapus Semua' : 'Pilih Semua'}
                                </button>
                            </div>
                            
                            {Object.entries(KATAKANA_DATA).map(([category, groups]) => (
                                <div key={category} className="mb-6">
                                    <h4 className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">{category}</h4>
                                    <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                                        {Object.keys(groups).map(group => (
                                            <Checkbox 
                                                key={group} 
                                                label={group} 
                                                checked={selectedGroups.includes(group)}
                                                onChange={() => toggleGroup(group)}
                                            />
                                        ))}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                    <div className="p-6 border-t border-slate-100 bg-slate-50 shrink-0">
                        <Button 
                            onClick={startGame} 
                            className="w-full text-lg shadow-lg shadow-blue-200"
                            disabled={selectedGroups.length === 0}
                        >
                            <Play size={20} fill="currentColor" /> Mulai Kuis
                        </Button>
                    </div>
                </div>
            </div>
        );
    }

    if (appState === 'quiz') {
        const currentQuestion = quizQueue[currentIndex];
        
        return (
            <div className="min-h-screen flex flex-col items-center justify-center p-4 bg-slate-900 text-white relative overflow-hidden font-sans">
                <style>{`
                    @keyframes shake {
                        0%, 100% { transform: translateX(0); }
                        25% { transform: translateX(-5px); }
                        75% { transform: translateX(5px); }
                    }
                    .animate-shake { animation: shake 0.3s ease-in-out; }
                    @keyframes pop {
                        0% { transform: scale(1); }
                        50% { transform: scale(1.1); }
                        100% { transform: scale(1); }
                    }
                    .animate-pop { animation: pop 0.2s ease-in-out; }
                `}</style>

                {/* Background decoration */}
                <div className="absolute top-0 left-0 w-full h-full opacity-5 pointer-events-none select-none">
                        <div className="absolute top-10 left-10 text-9xl font-black rotate-12">ア</div>
                        <div className="absolute bottom-20 right-10 text-9xl font-black -rotate-12">ン</div>
                </div>

                {/* Header */}
                <div className="w-full max-w-md flex justify-between items-center mb-8 relative z-10">
                    <div className="bg-slate-800/80 backdrop-blur px-4 py-2 rounded-full flex items-center gap-2 border border-slate-700">
                        <Trophy size={16} className="text-yellow-400" />
                        <span className="font-bold">{score}</span>
                    </div>
                    <div className="text-slate-400 font-mono font-bold">
                        {gameMode === 'fixed' ? `${currentIndex + 1} / ${questionCount}` : `Streak: ${streak}`}
                    </div>
                    <button 
                        onClick={() => setAppState('result')}
                        className="text-sm bg-red-500/20 text-red-300 px-3 py-1.5 rounded-lg hover:bg-red-500/30 transition-colors font-medium"
                    >
                        Akhiri
                    </button>
                </div>

                {/* Card Area */}
                <div className="relative w-full max-w-xs aspect-square mb-8 z-10">
                    <div 
                        className={`
                            w-full h-full bg-white rounded-3xl shadow-2xl flex flex-col items-center justify-center relative
                            transition-all duration-300
                            ${shake ? 'animate-shake ring-8 ring-red-500/50' : ''}
                            ${feedback === 'correct' ? 'animate-pop ring-8 ring-green-500/50' : ''}
                        `}
                    >
                        <span className="text-[9rem] leading-none font-black text-slate-800 mb-4 select-none">
                            {currentQuestion.char}
                        </span>
                        
                        {feedback === 'incorrect' && (
                            <div className="absolute bottom-8 flex flex-col items-center animate-bounce">
                                <span className="text-red-500 font-bold text-sm uppercase tracking-widest">Jawaban</span>
                                <span className="text-red-600 font-black text-3xl">{currentQuestion.romaji}</span>
                            </div>
                        )}
                        {feedback === 'correct' && (
                            <div className="absolute bottom-8 flex items-center gap-2 text-green-600 font-bold text-2xl">
                                <CheckCircle size={28} /> Benar!
                            </div>
                        )}
                    </div>
                </div>

                {/* Input Area */}
                <form onSubmit={handleSubmit} className="w-full max-w-md relative z-10">
                    <input 
                        ref={inputRef}
                        type="text" 
                        value={input}
                        onChange={(e) => setInput(e.target.value)}
                        disabled={feedback !== null}
                        placeholder="Ketik Romaji..." 
                        className="w-full bg-slate-800 border-2 border-slate-700 text-center text-3xl py-5 rounded-2xl text-white focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 focus:outline-none transition-all placeholder-slate-600 font-bold"
                        autoComplete="off"
                    />
                    <div className="mt-4 text-center text-slate-500 text-sm font-medium">
                        Tekan <span className="bg-slate-700 text-slate-300 px-1.5 py-0.5 rounded border border-slate-600 mx-1">Enter</span> untuk jawab
                    </div>
                </form>
                
                {/* Progress Bar for Fixed Mode */}
                {gameMode === 'fixed' && (
                    <div className="fixed top-0 left-0 w-full h-2 bg-slate-800">
                        <div 
                            className="h-full bg-blue-500 transition-all duration-300 shadow-[0_0_10px_rgba(59,130,246,0.5)]" 
                            style={{ width: `${((currentIndex) / questionCount) * 100}%` }}
                        ></div>
                    </div>
                )}
            </div>
        );
    }

    if (appState === 'result') {
        const totalQuestions = gameMode === 'fixed' ? questionCount : currentIndex;
        const percentage = totalQuestions > 0 ? Math.round((score / totalQuestions) * 100) : 0;
        
        let message = "Terus Belajar!";
        let subMessage = "Jangan menyerah, coba lagi!";
        if (percentage >= 90) { message = "Luar Biasa! 🎉"; subMessage = "Kamu sudah sangat mahir!"; }
        else if (percentage >= 70) { message = "Bagus Sekali! 👍"; subMessage = "Sedikit lagi sempurna!"; }
        else if (percentage >= 50) { message = "Cukup Bagus 👌"; subMessage = "Tingkatkan lagi latihanmu."; }

        return (
            <div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-b from-blue-600 to-indigo-800 font-sans">
                <div className="bg-white w-full max-w-md rounded-3xl shadow-2xl p-8 text-center animate-pop relative overflow-hidden">
                    <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-blue-400 to-purple-500"></div>
                    
                    <div className="w-24 h-24 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-6 shadow-inner">
                        <Trophy size={48} strokeWidth={1.5} />
                    </div>
                    
                    <h2 className="text-3xl font-black text-slate-800 mb-1">Hasil Kuis</h2>
                    <p className="text-slate-500 mb-8 font-medium">{gameMode === 'fixed' ? 'Mode Latihan Standar' : 'Mode Tanpa Batas'}</p>
                    
                    <div className="grid grid-cols-2 gap-4 mb-8">
                        <div className="bg-green-50 p-4 rounded-2xl border border-green-100">
                            <div className="text-4xl font-black text-green-600">{score}</div>
                            <div className="text-xs text-green-800 font-bold uppercase tracking-wider mt-1">Benar</div>
                        </div>
                        <div className="bg-blue-50 p-4 rounded-2xl border border-blue-100">
                            <div className="text-4xl font-black text-blue-600">{percentage}%</div>
                            <div className="text-xs text-blue-800 font-bold uppercase tracking-wider mt-1">Akurasi</div>
                        </div>
                    </div>

                    <div className="mb-8">
                        <h3 className="text-xl font-bold text-slate-800">{message}</h3>
                        <p className="text-slate-500 text-sm">{subMessage}</p>
                    </div>

                    <div className="flex flex-col gap-3">
                        <Button onClick={() => setAppState('setup')} variant="primary" className="w-full shadow-blue-200">
                            <RotateCcw size={18} /> Main Lagi
                        </Button>
                    </div>
                </div>
            </div>
        );
    }
}