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

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

export default function SequencingQuestion({ options, onSubmit, disabled }: SequencingQuestionProps) {
    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: `seq_${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 moveUp = (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 moveDown = (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-2xl mx-auto w-full">
            <div className="text-center text-slate-300 mb-2">
                Tap dua kotak untuk menukar posisi mereka, atau gunakan panah naik/turun untuk menyusun urutan yang benar (Atas ke Bawah).
            </div>

            <div className="flex flex-col gap-3 relative">
                {items.map((item, index) => {
                    const isSelected = selectedId === item.id;
                    return (
                        <div 
                            key={item.id}
                            onClick={() => handleItemClick(item.id)}
                            className={cn(
                                "flex items-center gap-4 p-4 rounded-xl border-2 cursor-pointer transition-all bg-slate-800 shadow-md",
                                isSelected 
                                    ? "border-primary-500 bg-primary-500/10 scale-[1.02] 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="w-8 h-8 rounded-full bg-slate-900 flex items-center justify-center font-bold text-slate-400 shrink-0 border border-slate-700">
                                {index + 1}
                            </div>
                            
                            <div className="flex-1 font-semibold text-slate-200 text-lg">
                                {item.text}
                            </div>
                            
                            {!disabled && (
                                <div className="flex flex-col gap-1 shrink-0">
                                    <button 
                                        onClick={(e) => moveUp(index, e)}
                                        disabled={index === 0}
                                        className="p-1.5 rounded bg-slate-700 text-slate-400 hover:bg-slate-600 hover:text-white disabled:opacity-30 disabled:hover:bg-slate-700"
                                    >
                                        <ArrowUp className="w-4 h-4" />
                                    </button>
                                    <button 
                                        onClick={(e) => moveDown(index, e)}
                                        disabled={index === items.length - 1}
                                        className="p-1.5 rounded bg-slate-700 text-slate-400 hover:bg-slate-600 hover:text-white disabled:opacity-30 disabled:hover:bg-slate-700"
                                    >
                                        <ArrowDown 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>
    );
}