import React, { useState, useEffect } from 'react';
import { cn } from '@/lib/utils';
import { CheckCircle2, RotateCcw } from 'lucide-react';

interface JumbledWordQuestionProps {
    options: Array<{ answer: string }>;
    onSubmit: (answerData: { answer: string }) => void;
    disabled?: boolean;
}

export default function JumbledWordQuestion({ options, onSubmit, disabled }: JumbledWordQuestionProps) {
    const [originalWord, setOriginalWord] = useState('');
    const [jumbledLetters, setJumbledLetters] = useState<Array<{ id: string; char: string; used: boolean }>>([]);
    const [selectedLetters, setSelectedLetters] = useState<Array<{ id: string; char: string }>>([]);

    useEffect(() => {
        if (options && options.length > 0 && options[0].answer) {
            const word = options[0].answer.trim().toUpperCase();
            setOriginalWord(word);
            
            // Create array of letter objects and shuffle
            const letters = word.split('').map((char, index) => ({
                id: `char_${index}_${Math.random().toString(36).substr(2, 9)}`,
                char,
                used: false
            }));
            
            setJumbledLetters(letters.sort(() => Math.random() - 0.5));
            setSelectedLetters([]);
        }
    }, [options]);

    const handleLetterClick = (letter: { id: string; char: string; used: boolean }) => {
        if (disabled || letter.used) return;
        
        // Mark as used in jumbled letters
        setJumbledLetters(prev => prev.map(l => l.id === letter.id ? { ...l, used: true } : l));
        
        // Add to selected letters
        setSelectedLetters(prev => [...prev, { id: letter.id, char: letter.char }]);
    };

    const handleSelectedClick = (letter: { id: string; char: string }, index: number) => {
        if (disabled) return;
        
        // Remove from selected letters
        setSelectedLetters(prev => prev.filter((_, i) => i !== index));
        
        // Mark as unused in jumbled letters
        setJumbledLetters(prev => prev.map(l => l.id === letter.id ? { ...l, used: false } : l));
    };

    const handleReset = () => {
        if (disabled) return;
        setJumbledLetters(prev => prev.map(l => ({ ...l, used: false })));
        setSelectedLetters([]);
    };

    const handleSubmit = () => {
        const formedWord = selectedLetters.map(l => l.char).join('');
        onSubmit({ answer: formedWord });
    };

    return (
        <div className="flex flex-col gap-8 max-w-3xl mx-auto w-full items-center">
            <div className="text-center text-slate-300">
                Susun huruf-huruf acak di bawah ini menjadi kata yang benar dengan cara menyentuh/mengkliknya.
            </div>

            {/* Answer Slots */}
            <div className="flex flex-wrap justify-center gap-2 md:gap-3 min-h-[60px] p-4 w-full bg-slate-800/50 rounded-2xl border-2 border-slate-700/50">
                {selectedLetters.length === 0 && !disabled && (
                    <div className="text-slate-500 font-medium italic flex items-center justify-center w-full">
                        Kata yang disusun akan muncul di sini...
                    </div>
                )}
                
                {selectedLetters.map((letter, index) => (
                    <button
                        key={`${letter.id}_${index}`}
                        onClick={() => handleSelectedClick(letter, index)}
                        disabled={disabled}
                        className={cn(
                            "w-10 h-12 md:w-14 md:h-16 flex items-center justify-center rounded-xl font-bold text-xl md:text-3xl text-white shadow-lg transition-transform",
                            disabled ? "bg-primary-600/80 cursor-default" : "bg-primary-600 hover:bg-primary-500 hover:-translate-y-1 active:scale-95 cursor-pointer",
                            "border-b-4 border-primary-700"
                        )}
                    >
                        {letter.char}
                    </button>
                ))}
            </div>

            {/* Action Bar */}
            <div className="flex justify-between w-full items-center">
                <button
                    onClick={handleReset}
                    disabled={disabled || selectedLetters.length === 0}
                    className="flex items-center gap-2 px-4 py-2 rounded-lg text-rose-400 hover:bg-rose-400/10 transition-colors disabled:opacity-30"
                >
                    <RotateCcw className="w-5 h-5" />
                    <span className="font-semibold">Reset</span>
                </button>

                <div className="text-sm font-medium text-slate-400">
                    {selectedLetters.length} / {originalWord.length} Huruf
                </div>
            </div>

            {/* Jumbled Letters Pool */}
            <div className="flex flex-wrap justify-center gap-2 md:gap-3 w-full p-4">
                {jumbledLetters.map((letter) => (
                    <button
                        key={letter.id}
                        onClick={() => handleLetterClick(letter)}
                        disabled={disabled || letter.used}
                        className={cn(
                            "w-12 h-14 md:w-16 md:h-20 flex items-center justify-center rounded-xl font-bold text-2xl md:text-4xl shadow-md transition-all",
                            letter.used 
                                ? "bg-slate-800 text-slate-700 border-2 border-slate-800/50 scale-95 opacity-40 cursor-default" 
                                : "bg-slate-700 text-white border-b-4 border-slate-900 hover:bg-slate-600 hover:-translate-y-1 active:scale-95 cursor-pointer hover:shadow-xl hover:shadow-slate-900/20"
                        )}
                    >
                        {letter.char}
                    </button>
                ))}
            </div>

            {/* Submit Button */}
            {!disabled && (
                <div className="flex justify-center mt-4">
                    <button
                        onClick={handleSubmit}
                        disabled={selectedLetters.length === 0}
                        className={cn(
                            "flex items-center gap-2 px-8 py-4 rounded-full font-bold text-lg transition-all shadow-lg",
                            selectedLetters.length > 0
                                ? "bg-emerald-500 hover:bg-emerald-400 text-white shadow-emerald-500/30 hover:-translate-y-1"
                                : "bg-slate-700 text-slate-400 cursor-not-allowed opacity-50"
                        )}
                    >
                        <CheckCircle2 className="w-6 h-6" />
                        Kirim Jawaban
                    </button>
                </div>
            )}
        </div>
    );
}