import re

file_path = "resources/js/pages/Game/Form.tsx"

with open(file_path, "r", encoding="utf-8") as f:
    content = f.read()

# 1. Update imports
content = content.replace(
    "import { ArrowLeft, Plus, Trash2, Save, Upload, X, Image as ImageIcon } from 'lucide-react';",
    "import { ArrowLeft, Plus, Trash2, Save, Upload, X, Image as ImageIcon, ChevronRight, Check } from 'lucide-react';"
)

# 2. Update state and setup
state_setup_old = """    const [isClassDropdownOpen, setIsClassDropdownOpen] = useState(false);
    const dropdownRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
                setIsClassDropdownOpen(false);
            }
        };
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, []);"""

state_setup_new = """    const queryParams = new URLSearchParams(window.location.search);
    const initialStep = queryParams.get('step') === '2' ? 'questions' : 'settings';
    const [activeTab, setActiveTab] = useState<'settings' | 'questions'>(initialStep);
    
    // Derived state for classes grouped by grade level
    const gradeLevels = [7, 8, 9];
    const [selectedGrade, setSelectedGrade] = useState<number | null>(null);
"""
content = content.replace(state_setup_old, state_setup_new)

# 3. Update useForm and submit
submit_old = """    const submit = (e: React.FormEvent) => {
        e.preventDefault();
        
        // Cek minimal 1 opsi benar per soal (hanya untuk PG dan Benar/Salah)
        const isValid = data.items.every((item: any) => {
            if (['multiple_choice', 'true_false'].includes(item.item_type || 'multiple_choice')) {
                return item.options.some((opt: any) => opt.is_correct);
            }
            return true; 
        });
        
        if (!isValid) {
            alert('Setiap soal Pilihan Ganda/Benar Salah harus memiliki minimal 1 jawaban benar!');
            return;
        }

        if (data.game_mode === 'faction' && data.synced_class_ids.length < 2) {
            alert('Mode Faction Wars membutuhkan minimal 2 kelas yang dipilih!');
            return;
        }

        if (isEditing) {
            post(route('games.update', game.id), {
                forceFormData: true,
            });
        } else {
            post(route('games.store'), {
                forceFormData: true,
            });
        }
    };"""

submit_new = """    const nextStep = () => {
        if (data.title === '' || data.subject_id === '' || data.synced_class_ids.length === 0) {
            alert('Harap lengkapi Pengaturan Dasar terlebih dahulu (Judul, Mapel, Kelas).');
            return;
        }
        if (data.game_mode === 'faction' && data.synced_class_ids.length < 2) {
            alert('Mode Faction Wars membutuhkan minimal 2 kelas yang dipilih!');
            return;
        }
        
        if (!isEditing) {
            // Automatically save step 1 and redirect to step 2
            let formData = { ...data, _redirect_to_edit: true, status: 'draft', items: [] };
            post(route('games.store'), {
                forceFormData: true,
                data: formData
            });
        } else {
            setActiveTab('questions');
            window.scrollTo(0, 0);
        }
    };

    const submit = (e?: React.FormEvent) => {
        if (e) e.preventDefault();
        
        if (activeTab === 'settings' && !isEditing) {
            nextStep();
            return;
        }

        if (activeTab === 'questions' || isEditing) {
            const isValid = data.items.every((item: any) => {
                if (['multiple_choice', 'true_false'].includes(item.item_type || 'multiple_choice')) {
                    return item.options.some((opt: any) => opt.is_correct);
                }
                return true; 
            });
            
            if (!isValid && data.items.length > 0) {
                alert('Setiap soal Pilihan Ganda/Benar Salah harus memiliki minimal 1 jawaban benar!');
                return;
            }
        }

        if (data.game_mode === 'faction' && data.synced_class_ids.length < 2) {
            alert('Mode Faction Wars membutuhkan minimal 2 kelas yang dipilih!');
            return;
        }

        if (isEditing) {
            post(route('games.update', game.id), {
                forceFormData: true,
                preserveScroll: true,
            });
        } else {
            post(route('games.store'), {
                forceFormData: true,
            });
        }
    };"""
content = content.replace(submit_old, submit_new)


# 4. Update Header and Wizard UI
ui_header_old = """            <div className="mb-6 flex items-center justify-between">
                <div className="flex items-center gap-3">
                    <Link
                        href={route('games.index')}
                        className="flex h-10 w-10 items-center justify-center rounded-xl bg-surface transition-colors hover:bg-surface-hover border border-border/40"
                    >
                        <ArrowLeft className="h-5 w-5" />
                    </Link>
                    <h2 className="text-2xl font-bold">{isEditing ? 'Edit Quiz' : 'Buat Quiz Baru'}</h2>
                </div>
                <button
                    onClick={submit}
                    disabled={processing}
                    className="flex items-center gap-2 rounded-xl bg-primary-600 px-6 py-2 font-medium text-white transition-colors hover:bg-primary-500 disabled:opacity-50"
                >
                    <Save className="h-4 w-4" />
                    {processing ? 'Menyimpan...' : 'Simpan Quiz'}
                </button>
            </div>

            <form onSubmit={submit} className="grid gap-6 lg:grid-cols-3">"""

ui_header_new = """            <div className="mb-6">
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
                    <div className="flex items-center gap-3">
                        <Link
                            href={route('games.index')}
                            className="flex h-10 w-10 items-center justify-center rounded-xl bg-surface transition-colors hover:bg-surface-hover border border-border/40"
                        >
                            <ArrowLeft className="h-5 w-5" />
                        </Link>
                        <h2 className="text-2xl font-bold">{isEditing ? 'Edit Quiz' : 'Buat Quiz Baru'}</h2>
                    </div>
                </div>

                {/* Wizard Steps */}
                <div className="flex items-center gap-2 overflow-x-auto pb-2">
                    <button 
                        type="button"
                        onClick={() => setActiveTab('settings')}
                        className={`flex items-center gap-2 px-4 py-2 rounded-full font-medium transition-all ${activeTab === 'settings' ? 'bg-primary-500 text-white shadow-lg shadow-primary-500/20' : 'bg-surface border border-border/50 hover:bg-surface-hover text-text-muted'}`}
                    >
                        <div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs ${activeTab === 'settings' ? 'bg-white/20 text-white' : 'bg-primary-500/10 text-primary-600'}`}>
                            1
                        </div>
                        Pengaturan Dasar
                    </button>
                    <div className="h-0.5 w-8 bg-border/50 rounded-full shrink-0"></div>
                    <button 
                        type="button"
                        onClick={() => {
                            if (!isEditing && activeTab === 'settings') {
                                alert('Simpan pengaturan dasar terlebih dahulu untuk lanjut ke pembuatan soal.');
                            } else {
                                setActiveTab('questions');
                            }
                        }}
                        className={`flex items-center gap-2 px-4 py-2 rounded-full font-medium transition-all ${activeTab === 'questions' ? 'bg-primary-500 text-white shadow-lg shadow-primary-500/20' : 'bg-surface border border-border/50 hover:bg-surface-hover text-text-muted'}`}
                    >
                        <div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs ${activeTab === 'questions' ? 'bg-white/20 text-white' : 'bg-primary-500/10 text-primary-600'}`}>
                            2
                        </div>
                        Pembuatan Soal
                    </button>
                </div>
            </div>

            <form onSubmit={submit} className="pb-24">"""
content = content.replace(ui_header_old, ui_header_new)


# 5. Hide/Show Tabs
content = content.replace(
    """                {/* Sidebar Pengaturan */}
                <div className="space-y-6 lg:col-span-1">""",
    """                {/* Step 1: Pengaturan Dasar */}
                <div className={`space-y-6 max-w-3xl mx-auto ${activeTab === 'settings' ? 'block' : 'hidden'}`}>"""
)


content = content.replace(
    """                {/* Daftar Soal */}
                <div className="space-y-6 lg:col-span-2">""",
    """                {/* Step 2: Pembuatan Soal */}
                <div className={`space-y-6 max-w-3xl mx-auto ${activeTab === 'questions' ? 'block' : 'hidden'}`}>"""
)

# 6. Replace Class Selection Dropdown logic with Grade/Class checkboxes
class_dropdown_old = """                            <div className="relative" ref={dropdownRef}>
                                <label className="block text-sm font-medium mb-1">Kelas yang Ditugaskan</label>
                                
                                {/* Selected Tags Container */}
                                <div 
                                    className="min-h-[42px] p-2 bg-surface border border-border/50 rounded-xl cursor-text flex flex-wrap gap-2 items-center focus-within:border-primary-500 focus-within:ring-1 focus-within:ring-primary-500 transition-all"
                                    onClick={() => setIsClassDropdownOpen(true)}
                                >
                                    {data.synced_class_ids.length === 0 && (
                                        <span className="text-text-muted text-sm ml-1">Pilih kelas...</span>
                                    )}
                                    {data.synced_class_ids.map((id: number) => {
                                        const c = classes.find(cls => cls.id === id);
                                        if (!c) return null;
                                        return (
                                            <span key={id} className="flex items-center gap-1 bg-primary-600 text-white text-xs px-2.5 py-1 rounded-lg">
                                                {c.name}
                                                <button 
                                                    type="button"
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        setData('synced_class_ids', data.synced_class_ids.filter((selectedId: number) => selectedId !== id));
                                                    }}
                                                    className="hover:bg-primary-700 rounded-full p-0.5 transition-colors"
                                                >
                                                    <X className="h-3 w-3" />
                                                </button>
                                            </span>
                                        );
                                    })}
                                    <input 
                                        type="text" 
                                        className="flex-1 min-w-[50px] border-none bg-transparent focus:ring-0 text-sm p-0 text-text-light placeholder-text-muted"
                                        placeholder={data.synced_class_ids.length === 0 ? "" : "Ketik untuk mencari..."}
                                        onClick={() => setIsClassDropdownOpen(true)}
                                        readOnly // Simplified for MVP, can add filtering later if needed
                                    />
                                </div>

                                {/* Dropdown Menu */}
                                {isClassDropdownOpen && (
                                    <div className="absolute z-50 w-full mt-2 bg-surface border border-border/50 shadow-2xl rounded-xl max-h-48 overflow-y-auto">
                                        <div className="p-1">
                                            {classes.map(c => {
                                                const isSelected = data.synced_class_ids.includes(c.id);
                                                return (
                                                    <div 
                                                        key={c.id} 
                                                        onClick={() => {
                                                            if (isSelected) {
                                                                setData('synced_class_ids', data.synced_class_ids.filter((id: number) => id !== c.id));
                                                            } else {
                                                                setData('synced_class_ids', [...data.synced_class_ids, c.id]);
                                                            }
                                                            // Keep dropdown open for multiple selections
                                                        }}
                                                        className={`px-3 py-2 text-sm rounded-lg cursor-pointer transition-colors flex items-center justify-between ${
                                                            isSelected ? 'bg-primary-500/10 text-primary-400 font-medium' : 'hover:bg-surface-hover text-text-light'
                                                        }`}
                                                    >
                                                        {c.name}
                                                        {isSelected && <X className="h-3 w-3 opacity-50" />}
                                                    </div>
                                                );
                                            })}
                                        </div>
                                    </div>
                                )}
                                {errors.synced_class_ids && <p className="text-rose-400 text-xs mt-1">{errors.synced_class_ids}</p>}
                            </div>"""

class_dropdown_new = """                            <div>
                                <label className="block text-sm font-medium mb-2">Kelas yang Ditugaskan</label>
                                
                                <div className="space-y-4">
                                    <div className="flex gap-2">
                                        {gradeLevels.map(grade => (
                                            <button
                                                key={grade}
                                                type="button"
                                                onClick={() => setSelectedGrade(grade)}
                                                className={`flex-1 py-2 text-sm font-bold rounded-xl border transition-all ${selectedGrade === grade ? 'bg-primary-500/10 border-primary-500 text-primary-600' : 'bg-surface border-border/50 hover:bg-surface-hover text-text-muted'}`}
                                            >
                                                Kelas {grade}
                                            </button>
                                        ))}
                                    </div>

                                    {selectedGrade && (
                                        <div className="p-4 bg-surface-hover/50 rounded-xl border border-border/40 grid grid-cols-2 sm:grid-cols-3 gap-3">
                                            {classes.filter(c => c.name.includes(` ${selectedGrade}`) || c.name.startsWith(`${selectedGrade}`)).map(c => {
                                                const isSelected = data.synced_class_ids.includes(c.id);
                                                return (
                                                    <label 
                                                        key={c.id} 
                                                        className={`flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition-all ${isSelected ? 'border-primary-500 bg-primary-500/10' : 'border-border/50 bg-surface hover:bg-surface-hover'}`}
                                                    >
                                                        <div className={`w-5 h-5 rounded flex items-center justify-center shrink-0 border ${isSelected ? 'bg-primary-500 border-primary-500 text-white' : 'border-border'}`}>
                                                            {isSelected && <Check className="w-3.5 h-3.5" />}
                                                        </div>
                                                        <input 
                                                            type="checkbox" 
                                                            className="hidden"
                                                            checked={isSelected}
                                                            onChange={() => {
                                                                if (isSelected) {
                                                                    setData('synced_class_ids', data.synced_class_ids.filter((id: number) => id !== c.id));
                                                                } else {
                                                                    setData('synced_class_ids', [...data.synced_class_ids, c.id]);
                                                                }
                                                            }}
                                                        />
                                                        <span className="text-sm font-medium">{c.name}</span>
                                                    </label>
                                                );
                                            })}
                                        </div>
                                    )}

                                    {/* Preview Selected Classes */}
                                    {data.synced_class_ids.length > 0 && (
                                        <div className="flex flex-wrap gap-2 pt-2">
                                            <span className="text-xs text-text-muted flex items-center py-1">Terpilih:</span>
                                            {data.synced_class_ids.map((id: number) => {
                                                const c = classes.find(cls => cls.id === id);
                                                if (!c) return null;
                                                return (
                                                    <span key={id} className="flex items-center gap-1 bg-primary-600 text-white text-xs px-2.5 py-1 rounded-lg">
                                                        {c.name}
                                                        <button 
                                                            type="button"
                                                            onClick={(e) => {
                                                                e.stopPropagation();
                                                                setData('synced_class_ids', data.synced_class_ids.filter((selectedId: number) => selectedId !== id));
                                                            }}
                                                            className="hover:bg-primary-700 rounded-full p-0.5 transition-colors"
                                                        >
                                                            <X className="h-3 w-3" />
                                                        </button>
                                                    </span>
                                                );
                                            })}
                                        </div>
                                    )}
                                </div>
                                {errors.synced_class_ids && <p className="text-rose-400 text-xs mt-1">{errors.synced_class_ids}</p>}
                            </div>"""

content = content.replace(class_dropdown_old, class_dropdown_new)


# 7. Add Sticky Footer at the bottom before </form>
footer_ui = """                {/* Floating Action Bar */}
                <div className="fixed bottom-0 left-0 right-0 p-4 z-40 bg-surface/80 backdrop-blur-md border-t border-border/40">
                    <div className="max-w-3xl mx-auto flex items-center justify-between">
                        <div className="text-sm text-text-muted font-medium">
                            {activeTab === 'settings' ? 'Tahap 1: Pengaturan' : 'Tahap 2: Soal'}
                        </div>
                        <div className="flex items-center gap-3">
                            {activeTab === 'settings' ? (
                                <button
                                    type="button"
                                    onClick={nextStep}
                                    disabled={processing}
                                    className="flex items-center gap-2 rounded-full bg-primary-600 px-6 py-2.5 font-bold text-white transition-all hover:bg-primary-500 disabled:opacity-50 shadow-lg shadow-primary-500/30"
                                >
                                    {processing ? 'Menyimpan...' : 'Lanjut Buat Soal'}
                                    <ChevronRight className="h-5 w-5" />
                                </button>
                            ) : (
                                <button
                                    type="button"
                                    onClick={() => submit()}
                                    disabled={processing}
                                    className="flex items-center gap-2 rounded-full bg-emerald-500 px-6 py-2.5 font-bold text-white transition-all hover:bg-emerald-400 disabled:opacity-50 shadow-lg shadow-emerald-500/30"
                                >
                                    <Save className="h-5 w-5" />
                                    {processing ? 'Menyimpan...' : 'Simpan Semua'}
                                </button>
                            )}
                        </div>
                    </div>
                </div>
            </form>"""

content = content.replace("            </form>", footer_ui)


with open(file_path, "w", encoding="utf-8") as f:
    f.write(content)

print("Modification complete.")