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

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

export default function FillInTheBlankQuestion({ questionText, options, onSubmit, disabled }: FillInTheBlankQuestionProps) {
    const [answers, setAnswers] = useState<Record<string, string>>({});

    const textParts = useMemo(() => {
        const container = document.createElement('div');
        container.innerHTML = questionText;
        const plainQuestionText = container.textContent || '';

        // Split text by [id]
        // E.g. "Ibu pergi ke [1] untuk membeli [2]." -> ["Ibu pergi ke ", "[1]", " untuk membeli ", "[2]", "."]
        const regex = /(\[\d+\])/g;
        return plainQuestionText.split(regex);
    }, [questionText]);

    const handleInputChange = (id: string, value: string) => {
        if (disabled) return;
        setAnswers(prev => ({
            ...prev,
            [id]: value
        }));
    };

    const handleSubmit = () => {
        const answerData = Object.keys(answers).map(key => ({
            id: key,
            answer: answers[key]
        }));
        onSubmit(answerData);
    };

    // Extract expected IDs from question text
    const expectedIds = useMemo(() => {
        const ids = new Set<string>();
        textParts.forEach(part => {
            const match = part.match(/\[(\d+)\]/);
            if (match) ids.add(match[1]);
        });
        return Array.from(ids);
    }, [textParts]);

    const isAllFilled = expectedIds.every(id => answers[id] && answers[id].trim() !== '');

    return (
        <div className="flex flex-col gap-8 max-w-3xl mx-auto w-full">
            <div className="text-center text-slate-300 mb-2">
                Isi bagian yang rumpang dengan jawaban yang tepat.
            </div>

            <div className="bg-slate-800/80 p-6 md:p-8 rounded-3xl border-2 border-slate-700 shadow-xl leading-loose text-lg md:text-2xl text-slate-200">
                {textParts.map((part, idx) => {
                    const match = part.match(/\[(\d+)\]/);
                    if (match) {
                        const id = match[1];
                        return (
                            <span key={idx} className="inline-block mx-2 align-middle">
                                <input
                                    type="text"
                                    value={answers[id] || ''}
                                    onChange={(e) => handleInputChange(id, e.target.value)}
                                    placeholder="..."
                                    disabled={disabled}
                                    className={cn(
                                        "w-32 md:w-40 border-b-2 bg-slate-900/50 text-center text-primary-400 font-bold focus:outline-none focus:border-primary-500 rounded-t-lg transition-colors py-1",
                                        answers[id] ? "border-primary-500 bg-primary-500/10" : "border-slate-500",
                                        disabled && "opacity-80"
                                    )}
                                />
                            </span>
                        );
                    }
                    return <span key={idx}>{part}</span>;
                })}
            </div>

            {!disabled && (
                <div className="flex justify-center mt-4">
                    <button
                        onClick={handleSubmit}
                        className={cn(
                            "flex items-center gap-2 px-8 py-4 rounded-full font-bold text-lg transition-all",
                            isAllFilled
                                ? "bg-emerald-500 hover:bg-emerald-400 text-white shadow-lg shadow-emerald-500/30 hover:-translate-y-1" 
                                : "bg-slate-700 text-slate-400 hover:bg-slate-600"
                        )}
                    >
                        <CheckCircle2 className="w-6 h-6" />
                        {isAllFilled ? "Kirim Jawaban" : "Tetap Kirim (Belum Lengkap)"}
                    </button>
                </div>
            )}
        </div>
    );
}