import { Head, Link, useForm } from '@inertiajs/react';
import { ArrowDown, ArrowUp, CheckCircle, Plus, Trash2, BookOpen, PenTool } from 'lucide-react';
import { type FormEvent, useState } from 'react';
import AuthenticatedLayout from '@/layouts/AuthenticatedLayout';
import RichTextEditor from '@/components/RichTextEditor';
import MaterialMediaEditor, { type MaterialMediaInput } from '@/components/MaterialMediaEditor';
import AssignmentAvailabilityFields, { type ReleaseSchedule } from '@/components/AssignmentAvailabilityFields';
import AssignmentStorageFields, { type DriveSummary } from '@/components/AssignmentStorageFields';
import { cn } from '@/lib/utils';

type ClassData = { id: number; name: string };
type SubjectData = { id: number; name: string };

type AssignmentType = 'standard' | 'quiz' | 'worksheet';
type WorksheetType = 'short_answer' | 'paragraph' | 'multiple_choice' | 'ordering';
type Option = { id?: string; text: string; is_correct?: boolean };
type WorksheetItem = {
    id?: number;
    item_type: WorksheetType;
    prompt: string;
    options: Option[];
    answer_key: { accepted_answers?: string[] };
    points: number;
    is_required: boolean;
};
type QuizQuestion = {
    id?: number;
    item_type: 'multiple_choice' | 'true_false';
    question_text: string;
    question_image?: string | File | null;
    options: Array<{ text: string; is_correct: boolean }>;
    points: number;
};

interface Props {
    classes: ClassData[];
    subjects: SubjectData[];
    errors: Record<string, string>;
    releaseSchedule: ReleaseSchedule;
    drive?: DriveSummary;
}

const newOptionId = () => typeof crypto !== 'undefined' && crypto.randomUUID
    ? crypto.randomUUID()
    : `option-${Date.now()}-${Math.random()}`;

const blankWorksheetItem = (): WorksheetItem => ({
    item_type: 'short_answer',
    prompt: '',
    options: [],
    answer_key: { accepted_answers: [] },
    points: 10,
    is_required: true,
});

const blankQuizQuestion = (): QuizQuestion => ({
    item_type: 'multiple_choice',
    question_text: '',
    question_image: null,
    options: [
        { text: '', is_correct: true },
        { text: '', is_correct: false },
    ],
    points: 10,
});

const TRUE_FALSE_OPTIONS = (correctIsBenar: boolean): Array<{ text: string; is_correct: boolean }> => [
    { text: 'Benar', is_correct: correctIsBenar },
    { text: 'Salah', is_correct: !correctIsBenar },
];

export default function MaterialWizard({ classes, subjects, errors, releaseSchedule, drive }: Props) {
    const [activeTab, setActiveTab] = useState<'material' | 'assignment'>('material');

    const form = useForm({
        // Material fields
        title: '',
        class_ids: [] as number[],
        subject_id: '',
        content: '',
        status: 'draft' as 'draft' | 'published',
        links: [] as MaterialMediaInput[],

        // Wizard flag
        has_assignment: false,

        // Assignment fields
        assignment: {
            title: '',
            description: '',
            assignment_type: 'standard' as AssignmentType,
            submission_type: 'text',
            file_storage: (drive?.ready ? 'google_drive' : 'local') as 'local' | 'google_drive',
            due_date: '',
            release_mode: 'meeting' as 'meeting' | 'schedule' | 'manual_only' | 'manual' | 'immediate',
            due_mode: 'relative' as 'relative' | 'fixed',
            due_days: 7,
            close_after_days: null as number | null,
            availability_overrides: [] as Array<{ class_id: number; opens_at: string }>,
            max_points: 100,
            allow_resubmit: false,
            synced_class_ids: [] as number[],
            quiz_config: { max_attempts: 3, shuffle_questions: true, shuffle_options: true },
            quiz_questions: [blankQuizQuestion()] as QuizQuestion[],
            worksheet_items: [blankWorksheetItem()] as WorksheetItem[],
        }
    });

    const worksheetTotal = form.data.assignment.worksheet_items.reduce((total, item) => total + Number(item.points || 0), 0);
    const targetAssignmentClassIds = (form.data.assignment.synced_class_ids && form.data.assignment.synced_class_ids.length > 0)
        ? form.data.assignment.synced_class_ids.filter((id) => form.data.class_ids.includes(id))
        : form.data.class_ids;

    function toggleClass(classId: number) {
        const nextClassIds = form.data.class_ids.includes(classId)
            ? form.data.class_ids.filter((id) => id !== classId)
            : [...form.data.class_ids, classId];

        const nextSyncedClassIds = form.data.assignment.synced_class_ids.length > 0
            ? form.data.assignment.synced_class_ids.filter((id) => nextClassIds.includes(id))
            : nextClassIds;

        form.setData({
            ...form.data,
            class_ids: nextClassIds,
            assignment: {
                ...form.data.assignment,
                synced_class_ids: nextSyncedClassIds.length > 0 ? nextSyncedClassIds : nextClassIds,
            },
        });
    }

    function updateAssignment(changes: Partial<typeof form.data.assignment>) {
        form.setData('assignment', { ...form.data.assignment, ...changes });
    }

    function updateWorksheetItem(index: number, changes: Partial<WorksheetItem>) {
        const worksheet_items = form.data.assignment.worksheet_items.map((item, itemIndex) => itemIndex === index ? { ...item, ...changes } : item);
        updateAssignment({ worksheet_items });
    }

    function changeWorksheetType(index: number, type: WorksheetType) {
        const options = type === 'multiple_choice'
            ? [{ id: newOptionId(), text: '', is_correct: true }, { id: newOptionId(), text: '', is_correct: false }]
            : type === 'ordering'
                ? [{ id: newOptionId(), text: '' }, { id: newOptionId(), text: '' }]
                : [];
        updateWorksheetItem(index, { item_type: type, options, answer_key: { accepted_answers: [] } });
    }

    function updateWorksheetOption(itemIndex: number, optionIndex: number, changes: Partial<Option>) {
        const item = form.data.assignment.worksheet_items[itemIndex];
        const options = item.options.map((option, index) => index === optionIndex ? { ...option, ...changes } : option);
        updateWorksheetItem(itemIndex, { options });
    }

    function move<T>(items: T[], from: number, to: number): T[] {
        if (to < 0 || to >= items.length) return items;
        const next = [...items];
        const [selected] = next.splice(from, 1);
        next.splice(to, 0, selected);
        return next;
    }

    function submit(event: FormEvent) {
        event.preventDefault();
        
        let payload = form.data;
        if (payload.has_assignment) {
            const assignment = { ...payload.assignment };
            assignment.synced_class_ids = (assignment.synced_class_ids && assignment.synced_class_ids.length > 0)
                ? assignment.synced_class_ids.filter((id: number) => payload.class_ids.includes(id))
                : payload.class_ids;
            
            if (assignment.assignment_type === 'standard') {
                delete (assignment as any).worksheet_items;
                delete (assignment as any).quiz_questions;
                delete (assignment as any).quiz_config;
            } else if (assignment.assignment_type === 'worksheet') {
                assignment.max_points = Math.max(1, worksheetTotal);
                assignment.submission_type = 'text';
                delete (assignment as any).quiz_questions;
                delete (assignment as any).quiz_config;
            } else if (assignment.assignment_type === 'quiz') {
                assignment.submission_type = 'quiz';
                delete (assignment as any).worksheet_items;
            }
            
            payload = { ...payload, assignment: assignment as any };
        }

        form.transform(() => payload);
        form.post('/materials/wizard', { forceFormData: true });
    }

    // Custom error checking
    const materialErrors = Object.keys(errors).filter(k => !k.startsWith('assignment'));
    const assignmentErrors = Object.keys(errors).filter(k => k.startsWith('assignment'));

    return (
        <AuthenticatedLayout title="Buat Materi & Tugas" backHref="/materials" hideMobileDock>
            <Head title="Buat Materi & Tugas" />
            
            <div className="mx-auto max-w-5xl space-y-6">
                
                {/* Custom Tabs */}
                <div className="flex gap-2 p-1.5 bg-surface/40 rounded-2xl w-fit mx-auto mb-6 border border-border/40">
                    <button
                        type="button"
                        onClick={() => setActiveTab('material')}
                        className={cn(
                            "flex items-center gap-2 rounded-xl px-6 py-2.5 text-sm font-bold transition-all",
                            activeTab === 'material' 
                                ? "bg-primary-500 text-white shadow-lg shadow-primary-500/30" 
                                : "text-text-muted hover:bg-surface-hover hover:text-text-light"
                        )}
                    >
                        <BookOpen className="h-4.5 w-4.5" />
                        Materi Utama
                        {materialErrors.length > 0 && <span className="ml-2 flex h-5 w-5 items-center justify-center rounded-full bg-rose-500 text-[10px] text-white">{materialErrors.length}</span>}
                    </button>
                    
                    <button
                        type="button"
                        onClick={() => setActiveTab('assignment')}
                        className={cn(
                            "flex items-center gap-2 rounded-xl px-6 py-2.5 text-sm font-bold transition-all",
                            activeTab === 'assignment' 
                                ? "bg-primary-500 text-white shadow-lg shadow-primary-500/30" 
                                : "text-text-muted hover:bg-surface-hover hover:text-text-light"
                        )}
                    >
                        <PenTool className="h-4.5 w-4.5" />
                        Penugasan {form.data.has_assignment ? '(Aktif)' : '(Opsional)'}
                        {form.data.has_assignment && assignmentErrors.length > 0 && <span className="ml-2 flex h-5 w-5 items-center justify-center rounded-full bg-rose-500 text-[10px] text-white">{assignmentErrors.length}</span>}
                    </button>
                </div>

                <form onSubmit={submit} className="space-y-6">
                    {/* MATERI TAB */}
                    <div className={cn("space-y-6", activeTab !== 'material' && "hidden")}>
                        <div className="glass rounded-2xl p-6 space-y-5">
                            <div>
                                <h3 className="text-lg font-semibold text-text-light">Informasi Dasar Materi</h3>
                                <p className="text-xs text-text-muted">Materi dapat dibagikan ke beberapa kelas yang kakak ajar.</p>
                            </div>
                            <div>
                                <label className="mb-1.5 block text-sm font-medium text-text-muted">Judul Materi</label>
                                <input value={form.data.title} onChange={(event) => form.setData('title', event.target.value)} className={cn('w-full rounded-xl border bg-surface px-4 py-2.5 text-sm', errors.title ? 'border-rose-500' : 'border-border')} required={activeTab === 'material'} />
                                {errors.title && <p className="mt-1 text-xs text-rose-400">{errors.title}</p>}
                            </div>
                            <div>
                                <div className="mb-2 flex items-center justify-between gap-3">
                                    <label className="text-sm font-medium text-text-muted">Kelas Tujuan</label>
                                    {classes.length > 1 && (
                                        <button
                                            type="button"
                                            onClick={() => {
                                                const all = form.data.class_ids.length === classes.length ? [] : classes.map((item) => item.id);
                                                form.setData({
                                                    ...form.data,
                                                    class_ids: all,
                                                    assignment: {
                                                        ...form.data.assignment,
                                                        synced_class_ids: all,
                                                    },
                                                });
                                            }}
                                            className="text-xs font-semibold text-primary-400"
                                        >
                                            {form.data.class_ids.length === classes.length ? 'Batalkan semua' : 'Pilih semua'}
                                        </button>
                                    )}
                                </div>
                                <div className="flex flex-wrap gap-2 rounded-xl border border-border bg-surface p-3">
                                    {classes.map((item) => <button key={item.id} type="button" onClick={() => toggleClass(item.id)} className={cn('rounded-xl border px-3 py-2 text-xs font-semibold', form.data.class_ids.includes(item.id) ? 'border-primary-500 bg-primary-500/20 text-primary-300' : 'border-border text-text-muted')}>Kelas {item.name}</button>)}
                                </div>
                                {(errors.class_ids || errors['class_ids.0']) && <p className="mt-1 text-xs text-rose-400">{errors.class_ids || errors['class_ids.0']}</p>}
                            </div>
                            <div>
                                <label className="mb-1.5 block text-sm font-medium text-text-muted">Mata Pelajaran</label>
                                <select value={form.data.subject_id} onChange={(event) => form.setData('subject_id', event.target.value)} className="w-full rounded-xl border border-border bg-surface px-4 py-2.5 text-sm" required={activeTab === 'material'}>
                                    <option value="">Pilih mata pelajaran</option>
                                    {subjects.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}
                                </select>
                                {errors.subject_id && <p className="mt-1 text-xs text-rose-400">{errors.subject_id}</p>}
                            </div>
                        </div>

                        <div className="glass rounded-2xl p-6 space-y-4">
                            <h3 className="text-lg font-semibold text-text-light">Konten Materi</h3>
                            <RichTextEditor value={form.data.content} onChange={(value) => form.setData('content', value)} placeholder="Tuliskan tujuan belajar, petunjuk listening, atau ringkasan materi..." />
                        </div>

                        <MaterialMediaEditor value={form.data.links} onChange={(value) => form.setData('links', value)} errors={errors} isActive={activeTab === 'material'} />
                        
                        <div className="flex justify-end pt-4">
                            <button type="button" onClick={() => setActiveTab('assignment')} className="rounded-xl bg-surface px-6 py-2.5 text-sm font-semibold border border-primary-500/30 text-primary-400">
                                Lanjut ke Penugasan (Opsional)
                            </button>
                        </div>
                    </div>

                    {/* TUGAS TAB */}
                    <div className={cn("space-y-6", activeTab !== 'assignment' && "hidden")}>
                        <div className="glass rounded-2xl p-6">
                            <label className="flex items-center gap-3 cursor-pointer">
                                <div className="relative flex items-center">
                                    <input 
                                        type="checkbox" 
                                        className="peer sr-only"
                                        checked={form.data.has_assignment}
                                        onChange={(e) => {
                                            form.setData('has_assignment', e.target.checked);
                                            if (e.target.checked && !form.data.assignment.title) {
                                                updateAssignment({ title: form.data.title ? `Tugas: ${form.data.title}` : '' });
                                            }
                                        }} 
                                    />
                                    <div className="h-6 w-11 rounded-full bg-surface-lighter transition-colors peer-checked:bg-primary-500"></div>
                                    <div className="absolute left-1 top-1 h-4 w-4 rounded-full bg-white transition-transform peer-checked:translate-x-5"></div>
                                </div>
                                <div>
                                    <div className="font-semibold text-text-light">Sertakan Tugas / Quiz</div>
                                    <div className="text-xs text-text-muted">Aktifkan ini jika ingin membuat latihan soal, PR, atau lembar kerja untuk materi ini.</div>
                                </div>
                            </label>
                        </div>

                        {form.data.has_assignment && (
                            <div className="space-y-6 animate-in slide-in-from-bottom-2 fade-in duration-300">
                                <section className="glass rounded-2xl p-6 space-y-5 border border-primary-500/20">
                                    <div>
                                        <label className="mb-1.5 block text-sm font-medium text-text-muted">Judul Penugasan</label>
                                        <input value={form.data.assignment.title} onChange={(event) => updateAssignment({ title: event.target.value })} className="w-full rounded-xl border border-border bg-surface px-4 py-2.5 text-sm" required={form.data.has_assignment && activeTab === 'assignment'} />
                                        {errors['assignment.title'] && <p className="mt-1 text-xs text-rose-400">{errors['assignment.title']}</p>}
                                    </div>
                                    <div>
                                        <label className="mb-1.5 block text-sm font-medium text-text-muted">Petunjuk Pengerjaan</label>
                                        <RichTextEditor compact value={form.data.assignment.description || ''} onChange={(value) => updateAssignment({ description: value })} placeholder="Tuliskan petunjuk untuk siswa..." />
                                    </div>
                                    <div className="grid gap-3 sm:grid-cols-3">
                                        {([
                                            ['standard', 'Tugas Biasa', 'Teks, file, link, atau fisik'],
                                            ['worksheet', 'Worksheet', 'LKPD interaktif & autosave'],
                                            ['quiz', 'Quiz', 'Pilihan ganda otomatis'],
                                        ] as const).map(([type, label, description]) => (
                                            <button key={type} type="button" onClick={() => updateAssignment({ assignment_type: type })} className={cn('rounded-xl border-2 p-4 text-left transition-colors', form.data.assignment.assignment_type === type ? 'border-primary-500 bg-primary-500/10' : 'border-border bg-surface hover:border-primary-500/50')}>
                                                <span className="font-bold text-text-light">{label}</span>
                                                <span className="mt-1 block text-xs text-text-muted">{description}</span>
                                            </button>
                                        ))}
                                    </div>
                                </section>

                                {form.data.class_ids.length > 1 && (
                                    <section className="glass rounded-2xl p-6 space-y-3">
                                        <div className="flex flex-wrap items-center justify-between gap-2">
                                            <div>
                                                <h3 className="text-sm font-bold text-text-light">Target Kelas Penugasan</h3>
                                                <p className="text-xs text-text-muted">
                                                    Pilih kelas yang menerima tugas ini. Siswa di kelas lain tetap menerima materi, namun tidak melihat tugas ini.
                                                </p>
                                            </div>
                                            <div className="flex items-center gap-2 text-xs">
                                                <button
                                                    type="button"
                                                    onClick={() => updateAssignment({ synced_class_ids: [...form.data.class_ids] })}
                                                    className="text-primary-400 hover:underline"
                                                >
                                                    Pilih Semua
                                                </button>
                                                <span className="text-text-muted">·</span>
                                                <button
                                                    type="button"
                                                    onClick={() => {
                                                        if (form.data.class_ids.length > 0) {
                                                            updateAssignment({ synced_class_ids: [form.data.class_ids[0]] });
                                                        }
                                                    }}
                                                    className="text-text-muted hover:underline"
                                                >
                                                    Hanya 1 Kelas
                                                </button>
                                            </div>
                                        </div>

                                        <div className="flex flex-wrap gap-2.5 pt-1">
                                            {form.data.class_ids.map((classId) => {
                                                const classObj = classes.find((c) => c.id === classId);
                                                const currentSelected = (form.data.assignment.synced_class_ids && form.data.assignment.synced_class_ids.length > 0)
                                                    ? form.data.assignment.synced_class_ids.filter((id) => form.data.class_ids.includes(id))
                                                    : form.data.class_ids;
                                                const isChecked = currentSelected.includes(classId);

                                                return (
                                                    <button
                                                        key={classId}
                                                        type="button"
                                                        onClick={() => {
                                                            if (isChecked) {
                                                                if (currentSelected.length === 1) return;
                                                                updateAssignment({ synced_class_ids: currentSelected.filter((id) => id !== classId) });
                                                            } else {
                                                                updateAssignment({ synced_class_ids: [...currentSelected, classId] });
                                                            }
                                                        }}
                                                        className={cn(
                                                            'inline-flex items-center gap-2 rounded-xl border px-3.5 py-2 text-sm font-semibold transition-all',
                                                            isChecked
                                                                ? 'border-primary-500 bg-primary-500/15 text-primary-300 shadow-sm'
                                                                : 'border-border bg-surface text-text-muted hover:border-border-hover'
                                                        )}
                                                    >
                                                        <span className={cn(
                                                            'flex h-4 w-4 items-center justify-center rounded border text-[10px] font-bold',
                                                            isChecked ? 'border-primary-400 bg-primary-500 text-white' : 'border-border'
                                                        )}>
                                                            {isChecked ? '✓' : ''}
                                                        </span>
                                                        {classObj?.name ? `Kelas ${classObj.name}` : `Kelas ${classId}`}
                                                    </button>
                                                );
                                            })}
                                        </div>
                                        {errors['assignment.synced_class_ids'] && (
                                            <p className="text-xs text-rose-400">{errors['assignment.synced_class_ids']}</p>
                                        )}
                                    </section>
                                )}

                                {form.data.assignment.assignment_type === 'standard' && (
                                    <section className="glass rounded-2xl p-6">
                                        <label className="mb-2 block text-sm font-medium text-text-muted">Cara Mengumpulkan</label>
                                        <select value={form.data.assignment.submission_type} onChange={(event) => updateAssignment({ submission_type: event.target.value as any })} className="w-full rounded-xl border border-border bg-surface px-4 py-2.5 text-sm">
                                            <option value="text">Jawaban Teks</option><option value="file">Upload File</option><option value="link">Tautan Web</option><option value="physical">Kumpul Fisik</option>
                                        </select>
                                        {form.data.assignment.submission_type === 'file' && <AssignmentStorageFields value={form.data.assignment.file_storage} onChange={(value) => updateAssignment({ file_storage: value })} drive={drive} error={errors['assignment.file_storage']} />}
                                    </section>
                                )}

                                {form.data.assignment.assignment_type === 'worksheet' && (
                                    <section className="glass rounded-2xl p-6 space-y-5">
                                        <div className="flex flex-wrap items-center justify-between gap-3">
                                            <div><h3 className="text-lg font-semibold text-text-light">Worksheet Builder</h3><p className="text-xs text-text-muted">Total nilai: {worksheetTotal} poin</p></div>
                                            <button type="button" onClick={() => updateAssignment({ worksheet_items: [...form.data.assignment.worksheet_items, blankWorksheetItem()] })} className="inline-flex items-center gap-1 rounded-lg bg-primary-500 px-3 py-2 text-xs font-bold text-white"><Plus className="h-4 w-4" /> Tambah Pertanyaan</button>
                                        </div>
                                        {errors['assignment.worksheet_items'] && <p className="text-sm text-rose-400">{errors['assignment.worksheet_items']}</p>}
                                        {form.data.assignment.worksheet_items.map((item, index) => (
                                            <article key={item.id ?? index} className="rounded-2xl border border-border/50 bg-surface/60 p-5 space-y-4">
                                                <div className="flex flex-wrap items-center gap-2">
                                                    <span className="mr-auto text-sm font-bold text-text-light">Pertanyaan {index + 1}</span>
                                                    <button type="button" disabled={index === 0} onClick={() => updateAssignment({ worksheet_items: move(form.data.assignment.worksheet_items, index, index - 1) })} className="rounded-lg p-1.5 text-text-muted disabled:opacity-30"><ArrowUp className="h-4 w-4" /></button>
                                                    <button type="button" disabled={index === form.data.assignment.worksheet_items.length - 1} onClick={() => updateAssignment({ worksheet_items: move(form.data.assignment.worksheet_items, index, index + 1) })} className="rounded-lg p-1.5 text-text-muted disabled:opacity-30"><ArrowDown className="h-4 w-4" /></button>
                                                    <button type="button" disabled={form.data.assignment.worksheet_items.length === 1} onClick={() => updateAssignment({ worksheet_items: form.data.assignment.worksheet_items.filter((_, itemIndex) => itemIndex !== index) })} className="rounded-lg p-1.5 text-rose-400 disabled:opacity-30"><Trash2 className="h-4 w-4" /></button>
                                                </div>
                                                <div className="grid gap-3 sm:grid-cols-3">
                                                    <select value={item.item_type} onChange={(event) => changeWorksheetType(index, event.target.value as WorksheetType)} className="rounded-xl border border-border bg-surface px-3 py-2 text-sm">
                                                        <option value="short_answer">Short Answer</option><option value="paragraph">Paragraph</option><option value="multiple_choice">Multiple Choice</option><option value="ordering">Menyusun Urutan</option>
                                                    </select>
                                                    <label className="flex items-center gap-2 rounded-xl border border-border bg-surface px-3 py-2 text-sm"><input type="checkbox" checked={item.is_required} onChange={(event) => updateWorksheetItem(index, { is_required: event.target.checked })} /> Wajib dijawab</label>
                                                    <label className="flex items-center gap-2 rounded-xl border border-border bg-surface px-3 py-2 text-sm">Poin <input type="number" min={1} max={1000} value={item.points} onChange={(event) => updateWorksheetItem(index, { points: Number(event.target.value) })} className="min-w-0 flex-1 bg-transparent text-right" /></label>
                                                </div>
                                                <RichTextEditor compact value={item.prompt} onChange={(value) => updateWorksheetItem(index, { prompt: value })} placeholder="Tuliskan pertanyaan..." />
                                                {errors[`assignment.worksheet_items.${index}.prompt`] && <p className="text-xs text-rose-400">{errors[`assignment.worksheet_items.${index}.prompt`]}</p>}

                                                {item.item_type === 'short_answer' && (
                                                    <div><label className="mb-1 block text-xs font-medium text-text-muted">Kunci jawaban otomatis (pisahkan dengan koma, boleh kosong untuk dinilai manual)</label><input value={(item.answer_key.accepted_answers || []).join(', ')} onChange={(event) => updateWorksheetItem(index, { answer_key: { accepted_answers: event.target.value.split(',').map((value) => value.trim()).filter(Boolean) } })} className="w-full rounded-xl border border-border bg-surface px-3 py-2 text-sm" /></div>
                                                )}
                                                {(item.item_type === 'multiple_choice' || item.item_type === 'ordering') && (
                                                    <div className="space-y-2">
                                                        <p className="text-xs font-medium text-text-muted">{item.item_type === 'ordering' ? 'Urutkan bagian sesuai jawaban benar.' : 'Tandai satu jawaban benar.'}</p>
                                                        {item.options.map((option, optionIndex) => (
                                                            <div key={option.id ?? optionIndex} className="space-y-1">
                                                                <div className="flex items-center gap-2">
                                                                    {item.item_type === 'multiple_choice' ? (
                                                                        <button type="button" onClick={() => updateWorksheetItem(index, { options: item.options.map((value, valueIndex) => ({ ...value, is_correct: valueIndex === optionIndex })) })} className={cn('flex h-7 w-7 shrink-0 items-center justify-center rounded-full border-2', option.is_correct ? 'border-emerald-500 bg-emerald-500' : 'border-border')}><CheckCircle className={`h-4 w-4 ${option.is_correct ? 'text-white' : 'text-transparent'}`} /></button>
                                                                    ) : <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-primary-500/10 text-xs font-bold text-primary-300">{optionIndex + 1}</span>}
                                                                    <input value={option.text} onChange={(event) => updateWorksheetOption(index, optionIndex, { text: event.target.value })} className="min-w-0 flex-1 rounded-xl border border-border bg-surface px-3 py-2 text-sm" required={form.data.has_assignment && activeTab === 'assignment'} />
                                                                    {item.item_type === 'ordering' && <><button type="button" disabled={optionIndex === 0} onClick={() => updateWorksheetItem(index, { options: move(item.options, optionIndex, optionIndex - 1) })} className="p-1 text-text-muted"><ArrowUp className="h-4 w-4" /></button><button type="button" disabled={optionIndex === item.options.length - 1} onClick={() => updateWorksheetItem(index, { options: move(item.options, optionIndex, optionIndex + 1) })} className="p-1 text-text-muted"><ArrowDown className="h-4 w-4" /></button></>}
                                                                    <button type="button" disabled={item.options.length <= 2} onClick={() => updateWorksheetItem(index, { options: item.options.filter((_, valueIndex) => valueIndex !== optionIndex) })} className="p-1 text-rose-400 disabled:opacity-30"><Trash2 className="h-4 w-4" /></button>
                                                                </div>
                                                                {errors[`assignment.worksheet_items.${index}.options.${optionIndex}.text`] && <p className="text-xs text-rose-400 ml-9">{errors[`assignment.worksheet_items.${index}.options.${optionIndex}.text`]}</p>}
                                                            </div>
                                                        ))}
                                                        <button type="button" disabled={item.options.length >= 20} onClick={() => updateWorksheetItem(index, { options: [...item.options, { id: newOptionId(), text: '', is_correct: false }] })} className="text-xs font-semibold text-primary-400">+ Tambah opsi</button>
                                                        {errors[`assignment.worksheet_items.${index}.options`] && <p className="text-xs text-rose-400">{errors[`assignment.worksheet_items.${index}.options`]}</p>}
                                                    </div>
                                                )}
                                            </article>
                                        ))}
                                        
                                        <div className="pt-4 border-t border-border/50 flex justify-center">
                                            <button type="button" onClick={() => updateAssignment({ worksheet_items: [...form.data.assignment.worksheet_items, blankWorksheetItem()] })} className="inline-flex items-center gap-2 rounded-xl border-2 border-primary-500/20 bg-surface px-6 py-3 text-sm font-bold text-primary-500 transition-colors hover:bg-primary-500/10 disabled:opacity-50">
                                                <Plus className="h-5 w-5" /> Tambah Pertanyaan Berikutnya
                                            </button>
                                        </div>
                                    </section>
                                )}

                                {form.data.assignment.assignment_type === 'quiz' && (
                                    <section className="glass rounded-2xl p-6 space-y-5">
                                        <div className="flex flex-wrap items-center justify-between gap-3">
                                            <div>
                                                <h3 className="text-lg font-semibold text-text-light">Quiz Builder</h3>
                                                <p className="text-xs text-text-muted">Jawaban dinilai otomatis & skor terbaik masuk leaderboard.</p>
                                            </div>
                                            <button type="button" onClick={() => updateAssignment({ quiz_questions: [...form.data.assignment.quiz_questions, blankQuizQuestion()] })} className="rounded-lg bg-primary-500 px-3 py-2 text-xs font-bold text-white">+ Soal</button>
                                        </div>

                                        {/* Quiz config */}
                                        <div className="rounded-xl border border-border/50 bg-surface/60 p-4 grid gap-4 sm:grid-cols-3">
                                            <label className="flex flex-col gap-1 text-xs font-medium text-text-muted">
                                                Maks. percobaan
                                                <input
                                                    type="number"
                                                    min={1}
                                                    max={10}
                                                    value={form.data.assignment.quiz_config.max_attempts ?? 3}
                                                    onChange={(event) => updateAssignment({ quiz_config: { ...form.data.assignment.quiz_config, max_attempts: Number(event.target.value) } })}
                                                    className="rounded-lg border border-border bg-surface px-3 py-2 text-sm"
                                                />
                                            </label>
                                            <label className="flex items-center gap-2 rounded-lg border border-border bg-surface px-3 py-2.5 text-xs font-medium text-text-muted">
                                                <input type="checkbox" checked={form.data.assignment.quiz_config.shuffle_questions ?? true} onChange={(event) => updateAssignment({ quiz_config: { ...form.data.assignment.quiz_config, shuffle_questions: event.target.checked } })} />
                                                Acak urutan soal
                                            </label>
                                            <label className="flex items-center gap-2 rounded-lg border border-border bg-surface px-3 py-2.5 text-xs font-medium text-text-muted">
                                                <input type="checkbox" checked={form.data.assignment.quiz_config.shuffle_options ?? true} onChange={(event) => updateAssignment({ quiz_config: { ...form.data.assignment.quiz_config, shuffle_options: event.target.checked } })} />
                                                Acak urutan opsi
                                            </label>
                                        </div>

                                        {form.data.assignment.quiz_questions.map((question, index) => (
                                            <article key={question.id ?? index} className="rounded-xl border border-border bg-surface/60 p-4 space-y-3">
                                                <div className="flex flex-wrap items-center gap-2">
                                                    <strong className="mr-auto text-sm">Soal {index + 1}</strong>
                                                    <select
                                                        value={question.item_type}
                                                        onChange={(event) => {
                                                            const type = event.target.value as QuizQuestion['item_type'];
                                                            updateAssignment({ quiz_questions: form.data.assignment.quiz_questions.map((value, valueIndex) => valueIndex === index
                                                                ? { ...value, item_type: type, options: type === 'true_false' ? TRUE_FALSE_OPTIONS(true) : [{ text: '', is_correct: true }, { text: '', is_correct: false }] }
                                                                : value) });
                                                        }}
                                                        className="rounded-lg border border-border bg-surface px-2 py-1 text-xs"
                                                    >
                                                        <option value="multiple_choice">Pilihan Ganda</option>
                                                        <option value="true_false">Benar / Salah</option>
                                                    </select>
                                                    <input type="number" min={1} value={question.points} onChange={(event) => updateAssignment({ quiz_questions: form.data.assignment.quiz_questions.map((value, valueIndex) => valueIndex === index ? { ...value, points: Number(event.target.value) } : value) })} className="w-20 rounded-lg border border-border bg-surface px-2 py-1 text-sm" title="Poin soal" />
                                                    <button type="button" onClick={() => updateAssignment({ quiz_questions: form.data.assignment.quiz_questions.filter((_, valueIndex) => valueIndex !== index) })} className="text-rose-400"><Trash2 className="h-4 w-4" /></button>
                                                </div>
                                                <RichTextEditor compact value={question.question_text} onChange={(value) => updateAssignment({ quiz_questions: form.data.assignment.quiz_questions.map((item, valueIndex) => valueIndex === index ? { ...item, question_text: value } : item) })} />

                                                {/* Gambar soal */}
                                                <div className="flex flex-wrap items-center gap-3">
                                                    <label className="flex cursor-pointer items-center gap-2 rounded-lg border border-dashed border-border bg-surface px-3 py-2 text-xs font-medium text-text-muted hover:bg-surface-hover">
                                                        <Plus className="h-4 w-4" />
                                                        {question.question_image ? 'Ganti gambar' : 'Tambah gambar soal'}
                                                        <input
                                                            type="file"
                                                            accept="image/*"
                                                            className="hidden"
                                                            onChange={(event) => {
                                                                const file = event.target.files?.[0];
                                                                if (!file) return;
                                                                updateAssignment({ quiz_questions: form.data.assignment.quiz_questions.map((item, valueIndex) => valueIndex === index ? { ...item, question_image: file } : item) });
                                                            }}
                                                        />
                                                    </label>
                                                    {question.question_image && typeof question.question_image === 'string' && (
                                                        <div className="relative">
                                                            <img src={`/storage/${question.question_image}`} alt="Gambar soal" className="h-16 w-24 rounded-lg border border-border object-cover" />
                                                            <button type="button" onClick={() => updateAssignment({ quiz_questions: form.data.assignment.quiz_questions.map((item, valueIndex) => valueIndex === index ? { ...item, question_image: null } : item) })} className="absolute -top-1.5 -right-1.5 rounded-full bg-rose-500 p-0.5 text-white"><Trash2 className="h-3 w-3" /></button>
                                                        </div>
                                                    )}
                                                    {question.question_image && typeof question.question_image !== 'string' && (
                                                        <span className="text-xs text-primary-300 font-semibold">Gambar baru: {question.question_image.name}</span>
                                                    )}
                                                </div>

                                                {question.item_type === 'multiple_choice' ? (
                                                    <div className="space-y-2">
                                                        {question.options.map((option, optionIndex) => (
                                                            <div key={optionIndex} className="flex items-center gap-2">
                                                                <button type="button" onClick={() => updateAssignment({ quiz_questions: form.data.assignment.quiz_questions.map((item, valueIndex) => valueIndex === index ? { ...item, options: item.options.map((entry, entryIndex) => ({ ...entry, is_correct: entryIndex === optionIndex })) } : item) })} className={cn('h-6 w-6 rounded-full border', option.is_correct ? 'border-emerald-500 bg-emerald-500' : 'border-border')} title={option.is_correct ? 'Jawaban benar' : 'Tandai sebagai jawaban benar'} />
                                                                <input value={option.text} onChange={(event) => updateAssignment({ quiz_questions: form.data.assignment.quiz_questions.map((item, valueIndex) => valueIndex === index ? { ...item, options: item.options.map((entry, entryIndex) => entryIndex === optionIndex ? { ...entry, text: event.target.value } : entry) } : item) })} className="flex-1 rounded-lg border border-border bg-surface px-3 py-2 text-sm" required={form.data.has_assignment && activeTab === 'assignment'} placeholder={`Opsi ${String.fromCharCode(65 + optionIndex)}`} />
                                                                <button type="button" disabled={question.options.length <= 2} onClick={() => updateAssignment({ quiz_questions: form.data.assignment.quiz_questions.map((item, valueIndex) => valueIndex === index ? { ...item, options: item.options.filter((_, entryIndex) => entryIndex !== optionIndex) } : item) })} className="p-1 text-rose-400 disabled:opacity-30"><Trash2 className="h-4 w-4" /></button>
                                                            </div>
                                                        ))}
                                                        <button type="button" disabled={question.options.length >= 20} onClick={() => updateAssignment({ quiz_questions: form.data.assignment.quiz_questions.map((item, valueIndex) => valueIndex === index ? { ...item, options: [...item.options, { text: '', is_correct: false }] } : item) })} className="text-xs font-semibold text-primary-400">+ Tambah opsi</button>
                                                    </div>
                                                ) : (
                                                    <div className="grid gap-2 sm:grid-cols-2">
                                                        {TRUE_FALSE_OPTIONS(question.options.some((o) => o.text === 'Benar' && o.is_correct)).map((option) => (
                                                            <button
                                                                key={option.text}
                                                                type="button"
                                                                onClick={() => updateAssignment({ quiz_questions: form.data.assignment.quiz_questions.map((item, valueIndex) => valueIndex === index ? { ...item, options: TRUE_FALSE_OPTIONS(option.is_correct) } : item) })}
                                                                className={cn(
                                                                    'rounded-xl border-2 px-4 py-3 text-sm font-bold transition-all',
                                                                    option.is_correct ? 'border-emerald-500 bg-emerald-500/10 text-emerald-300' : 'border-border bg-surface text-text-muted'
                                                                )}
                                                            >
                                                                {option.text} {option.is_correct && '(Jawaban benar)'}
                                                            </button>
                                                        ))}
                                                    </div>
                                                )}
                                            </article>
                                        ))}
                                        {errors['assignment.quiz_questions'] && <p className="text-sm text-rose-400">{errors['assignment.quiz_questions']}</p>}
                                    </section>
                                )}

                                <AssignmentAvailabilityFields value={form.data.assignment} classIds={targetAssignmentClassIds} classes={classes.filter((c) => form.data.class_ids.includes(c.id))} subjectId={Number(form.data.subject_id)} releaseSchedule={releaseSchedule} errors={errors} errorPrefix="assignment." onChange={updateAssignment} />

                                <section className="glass rounded-2xl p-6 space-y-4">
                                    <div><label className="mb-1 block text-sm text-text-muted">Nilai Maksimal</label><input type="number" min={1} disabled={form.data.assignment.assignment_type === 'worksheet'} value={form.data.assignment.assignment_type === 'worksheet' ? worksheetTotal : form.data.assignment.max_points} onChange={(event) => updateAssignment({ max_points: Number(event.target.value) })} className="w-full rounded-xl border border-border bg-surface px-3 py-2.5 text-sm disabled:opacity-60" /></div>
                                    <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={form.data.assignment.allow_resubmit} onChange={(event) => updateAssignment({ allow_resubmit: event.target.checked })} /> Izinkan submit ulang setelah guru meminta revisi</label>
                                </section>
                            </div>
                        )}
                        
                        <div className="flex justify-between pt-4">
                            <button type="button" onClick={() => setActiveTab('material')} className="rounded-xl bg-surface px-5 py-2.5 text-sm font-semibold">
                                Kembali ke Materi
                            </button>
                        </div>
                    </div>

                    {/* SUBMIT ACTIONS (ALWAYS VISIBLE) */}
                    {Object.keys(errors).length > 0 && (
                        <div className="rounded-xl bg-rose-500/10 p-4 text-sm font-medium text-rose-400 border border-rose-500/20">
                            Penyimpanan gagal! Terdapat {Object.keys(errors).length} isian yang belum lengkap atau salah. 
                            {materialErrors.length > 0 && ` Materi (${materialErrors.length} error).`}
                            {assignmentErrors.length > 0 && ` Tugas (${assignmentErrors.length} error).`}
                        </div>
                    )}

                    <div className="glass mobile-safe-floating-bottom sticky z-10 flex flex-col gap-4 rounded-2xl border-t border-primary-500/10 p-6 shadow-xl sm:flex-row sm:items-center sm:justify-between">
                        <div className="flex gap-4">
                            <label className="flex items-center gap-2 text-sm"><input type="radio" checked={form.data.status === 'draft'} onChange={() => form.setData('status', 'draft')} /> Draft</label>
                            <label className="flex items-center gap-2 text-sm text-teal-400"><input type="radio" checked={form.data.status === 'published'} onChange={() => form.setData('status', 'published')} /> Publish</label>
                        </div>
                        <div className="flex justify-end gap-3">
                            <Link href="/materials" className="rounded-xl bg-surface px-5 py-2.5 text-sm font-semibold hover:bg-surface-lighter transition-colors">Batal</Link>
                            <button type="submit" disabled={form.processing} className="rounded-xl bg-primary-500 px-6 py-2.5 text-sm font-bold text-white transition-colors hover:bg-primary-600 focus:ring-4 focus:ring-primary-500/20 disabled:opacity-50">
                                Simpan {form.data.has_assignment ? 'Materi & Tugas' : 'Materi'}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </AuthenticatedLayout>
    );
}