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

interface GroupingQuestionProps {
    options: Array<{ category: string; items: string[] }>;
    onSubmit: (answerData: Array<{ category: string; items: string[] }>) => void;
    disabled?: boolean;
}

export default function GroupingQuestion({ options, onSubmit, disabled }: GroupingQuestionProps) {
    const [unassignedItems, setUnassignedItems] = useState<Array<{ id: string; text: string }>>([]);
    const [categories, setCategories] = useState<Array<{ name: string; items: Array<{ id: string; text: string }> }>>([]);
    const [selectedItemId, setSelectedItemId] = useState<string | null>(null);

    useEffect(() => {
        const allItems: Array<{ id: string; text: string }> = [];
        const cats = options.map((opt, cIdx) => {
            opt.items.forEach((itemText, iIdx) => {
                allItems.push({ id: `item_${cIdx}_${iIdx}`, text: itemText });
            });
            return { name: opt.category, items: [] };
        });

        // Shuffle all items
        const shuffledItems = allItems.sort(() => Math.random() - 0.5);
        setUnassignedItems(shuffledItems);
        setCategories(cats);
    }, [options]);

    const handleItemClick = (id: string) => {
        if (disabled) return;
        if (selectedItemId === id) {
            setSelectedItemId(null);
        } else {
            setSelectedItemId(id);
        }
    };

    const handleCategoryClick = (categoryName: string) => {
        if (disabled || !selectedItemId) return;

        // Find the selected item
        let itemToMove: { id: string; text: string } | undefined;
        
        // Remove from unassigned
        const newUnassigned = unassignedItems.filter(item => {
            if (item.id === selectedItemId) {
                itemToMove = item;
                return false;
            }
            return true;
        });

        // Remove from any other category
        const newCategories = categories.map(cat => {
            const filteredItems = cat.items.filter(item => {
                if (item.id === selectedItemId) {
                    itemToMove = item;
                    return false;
                }
                return true;
            });
            return { ...cat, items: filteredItems };
        });

        if (itemToMove) {
            // Add to the targeted category
            const targetCat = newCategories.find(c => c.name === categoryName);
            if (targetCat) {
                targetCat.items.push(itemToMove);
            }
            setUnassignedItems(newUnassigned);
            setCategories(newCategories);
        }
        
        setSelectedItemId(null);
    };

    const handleRemoveFromCategory = (itemId: string, categoryName: string) => {
        if (disabled) return;
        let itemToMove: { id: string; text: string } | undefined;
        
        const newCategories = categories.map(cat => {
            if (cat.name === categoryName) {
                const filtered = cat.items.filter(item => {
                    if (item.id === itemId) {
                        itemToMove = item;
                        return false;
                    }
                    return true;
                });
                return { ...cat, items: filtered };
            }
            return cat;
        });

        if (itemToMove) {
            setUnassignedItems([...unassignedItems, itemToMove]);
            setCategories(newCategories);
        }
    };

    const handleSubmit = () => {
        const answerData = categories.map(cat => ({
            category: cat.name,
            items: cat.items.map(i => i.text)
        }));
        onSubmit(answerData);
    };

    const allAssigned = unassignedItems.length === 0;

    return (
        <div className="flex flex-col gap-6">
            <div className="text-center text-slate-300 mb-2">
                Tap item di bawah, lalu tap kotak kategori untuk memindahkannya.
            </div>

            {/* Categories */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {categories.map((cat, idx) => (
                    <div 
                        key={idx}
                        onClick={() => handleCategoryClick(cat.name)}
                        className={cn(
                            "min-h-[150px] p-4 rounded-2xl border-2 transition-all flex flex-col",
                            selectedItemId 
                                ? "border-primary-500 border-dashed bg-primary-500/10 cursor-pointer hover:bg-primary-500/20" 
                                : "border-slate-700 bg-slate-800/50"
                        )}
                    >
                        <h4 className="font-bold text-center mb-4 text-slate-200 border-b border-slate-700 pb-2">{cat.name}</h4>
                        <div className="flex flex-wrap gap-2 flex-1 items-start content-start">
                            {cat.items.map(item => (
                                <button
                                    key={item.id}
                                    onClick={(e) => { e.stopPropagation(); handleRemoveFromCategory(item.id, cat.name); }}
                                    className="px-3 py-1.5 bg-slate-700 hover:bg-slate-600 text-sm font-medium rounded-lg text-slate-100 transition-colors shadow-sm"
                                    disabled={disabled}
                                >
                                    {item.text} ✕
                                </button>
                            ))}
                            {cat.items.length === 0 && (
                                <div className="w-full h-full flex items-center justify-center text-slate-500 text-sm italic">
                                    {selectedItemId ? "Tap untuk meletakkan item ke sini" : "Kosong"}
                                </div>
                            )}
                        </div>
                    </div>
                ))}
            </div>

            {/* Unassigned Items */}
            <div className="mt-4 p-4 rounded-2xl bg-slate-800/80 border border-slate-700 min-h-[100px]">
                <h4 className="text-sm font-medium text-slate-400 mb-3 uppercase tracking-wider">Item yang belum dikelompokkan:</h4>
                <div className="flex flex-wrap gap-3">
                    {unassignedItems.length === 0 ? (
                        <div className="text-emerald-400 font-medium w-full text-center py-4">
                            Semua item telah dikelompokkan!
                        </div>
                    ) : (
                        unassignedItems.map(item => {
                            const isSelected = selectedItemId === item.id;
                            return (
                                <button
                                    key={item.id}
                                    onClick={() => handleItemClick(item.id)}
                                    className={cn(
                                        "px-4 py-2 font-medium rounded-xl transition-all shadow-md transform hover:-translate-y-0.5",
                                        isSelected 
                                            ? "bg-primary-500 text-white shadow-primary-500/30 scale-105 ring-2 ring-primary-300 ring-offset-2 ring-offset-slate-800" 
                                            : "bg-slate-700 text-slate-200 hover:bg-slate-600"
                                    )}
                                    disabled={disabled}
                                >
                                    {item.text}
                                </button>
                            );
                        })
                    )}
                </div>
            </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",
                            allAssigned
                                ? "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" />
                        {allAssigned ? "Kirim Jawaban" : "Tetap Kirim (Belum Selesai)"}
                    </button>
                </div>
            )}
        </div>
    );
}