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

interface SentenceRearrangeQuestionProps {
    options: Array<{ text: string; order: number }>;
    onSubmit: (answerData: string[]) => void;
    disabled?: boolean;
}

export default function SentenceRearrangeQuestion({ options, onSubmit, disabled }: SentenceRearrangeQuestionProps) {
    const [items, setItems] = useState<Array<{ id: string; text: string }>>([]);
    const [selectedId, setSelectedId] = useState<string | null>(null);

    useEffect(() => {
        // Initialize and shuffle items
        const initialItems = options.map((opt, i) => ({ id: `sr_${i}`, text: opt.text }));
        setItems(initialItems.sort(() => Math.random() - 0.5));
    }, [options]);

    const handleItemClick = (id: string) => {
        if (disabled) return;
        
        if (!selectedId) {
            setSelectedId(id);
        } else if (selectedId === id) {
            setSelectedId(null);
        } else {
            // Swap items
            const newItems = [...items];
            const idx1 = newItems.findIndex(i => i.id === selectedId);
            const idx2 = newItems.findIndex(i => i.id === id);
            
            const temp = newItems[idx1];
            newItems[idx1] = newItems[idx2];
            newItems[idx2] = temp;
            
            setItems(newItems);
            setSelectedId(null);
        }
    };

    const moveLeft = (index: number, e: React.MouseEvent) => {
        e.stopPropagation();
        if (disabled || index === 0) return;
        const newItems = [...items];
        const temp = newItems[index];
        newItems[index] = newItems[index - 1];
        newItems[index - 1] = temp;
        setItems(newItems);
    };

    const moveRight = (index: number, e: React.MouseEvent) => {
        e.stopPropagation();
        if (disabled || index === items.length - 1) return;
        const newItems = [...items];
        const temp = newItems[index];
        newItems[index] = newItems[index + 1];
        newItems[index + 1] = temp;
        setItems(newItems);
    };

    const handleSubmit = () => {
        onSubmit(items.map(i => i.text));
    };

    return (
        <div className="flex flex-col gap-6 max-w-4xl mx-auto w-full">
            <div className="text-center text-slate-300 mb-2">
                Tap dua kata untuk menukar posisinya, atau gunakan panah Kiri/Kanan untuk menyusun kalimat yang padu (Kiri ke Kanan).
            </div>

            <div className="flex flex-wrap justify-center gap-3 relative p-4 bg-slate-800/50 rounded-2xl border border-slate-700/50">
                {items.map((item, index) => {
                    const isSelected = selectedId === item.id;
                    return (
                        <div 
                            key={item.id}
                            onClick={() => handleItemClick(item.id)}
                            className={cn(
                                "flex flex-col items-center gap-2 p-3 rounded-xl border-2 cursor-pointer transition-all bg-slate-800 shadow-md",
                                isSelected 
                                    ? "border-primary-500 bg-primary-500/10 scale-[1.05] z-10 shadow-primary-500/20" 
                                    : "border-slate-700 hover:border-slate-500 hover:bg-slate-700/50",
                                disabled && "pointer-events-none opacity-80"
                            )}
                        >
                            <div className="font-semibold text-slate-200 text-lg md:text-xl px-2">
                                {item.text}
                            </div>
                            
                            {!disabled && (
                                <div className="flex items-center gap-1 mt-1 border-t border-slate-700/50 pt-2 w-full justify-between">
                                    <button 
                                        onClick={(e) => moveLeft(index, e)}
                                        disabled={index === 0}
                                        className="p-1 rounded bg-slate-700/50 text-slate-400 hover:bg-slate-600 hover:text-white disabled:opacity-30 disabled:hover:bg-slate-700/50 transition-colors"
                                    >
                                        <ArrowLeft className="w-4 h-4" />
                                    </button>
                                    <div className="text-xs font-mono text-slate-500 font-bold">{index + 1}</div>
                                    <button 
                                        onClick={(e) => moveRight(index, e)}
                                        disabled={index === items.length - 1}
                                        className="p-1 rounded bg-slate-700/50 text-slate-400 hover:bg-slate-600 hover:text-white disabled:opacity-30 disabled:hover:bg-slate-700/50 transition-colors"
                                    >
                                        <ArrowRight className="w-4 h-4" />
                                    </button>
                                </div>
                            )}
                        </div>
                    );
                })}
            </div>

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