import { useForm, Link, Head, usePage, router } from '@inertiajs/react';
import { type FormEvent, useState, useEffect, useMemo, useRef } from 'react';
import { Award, Calendar, FileText, CheckCircle, AlertCircle, ExternalLink, Camera, X, Printer, Sparkles, Search, ChevronLeft, ChevronRight, Save, TableProperties, ChevronDown, Check, School } from 'lucide-react';
import { Html5Qrcode } from 'html5-qrcode';
import AuthenticatedLayout from '@/layouts/AuthenticatedLayout';
import { formatDate, cn } from '@/lib/utils';
import { evaluateKktp, getCategoryInfo } from '@/lib/kktp';
import { toast } from 'sonner';
import type { PageProps } from '@/types';
import WorksheetGradingPanel from '@/components/WorksheetGradingPanel';
import type { WorksheetItem } from '@/components/WorksheetPanel';
import SubmissionFile from '@/components/SubmissionFile';

interface Student {
    id: number;
    nisn: string;
    full_name: string;
}

interface Submission {
    id: number;
    assignment_id: number;
    student_id: number;
    submitted_at: string | null;
    submission_text: string | null;
    submission_file_path: string | null;
    submission_link: string | null;
    status: 'pending' | 'graded' | 'late' | 'physical_submitted' | 'revision_requested';
    grade: number | null;
    original_grade?: number | null;
    remedial_count?: number;
    is_remedial?: boolean;
    remedial_history?: Array<{ attempt: number; initial_score: number; remedial_score: number; date: string; notes?: string | null }> | null;
    feedback: string | null;
    answers?: Record<string, string | string[]> | null;
    grading_data?: Record<string, { score: number | null; max_points: number; feedback?: string | null; auto_graded?: boolean }> | null;
    is_late?: boolean;
}

interface TargetClass {
    id: number;
    name: string;
}

interface Assignment {
    id: number;
    title: string;
    description: string | null;
    submission_type: 'text' | 'file' | 'link' | 'physical';
    due_date: string;
    max_points: number;
    kktp?: number;
    category?: string;
    material: {
        id: number;
        title: string;
        synced_class?: { id: number; name: string } | null;
        classes?: TargetClass[];
        subject: { id: number; name: string };
    };
    allow_resubmit: boolean;
    assignment_type: 'standard' | 'quiz' | 'worksheet';
    worksheet_items: WorksheetItem[];
}

interface Props extends PageProps {
    assignment: Assignment;
    targetClasses?: TargetClass[];
    selectedClassId?: number;
    students: Student[];
    submissions: Record<number, Submission>; // Keyed by student_id
}

type StudentFilter = 'ungraded' | 'remedial' | 'remedial_done' | 'tuntas' | 'graded' | 'all';

export default function AssignmentReview({ assignment, targetClasses, selectedClassId, students, submissions }: Props) {
    const { errors } = usePage().props;
    const activeClassId = selectedClassId || (targetClasses && targetClasses.length > 0 ? targetClasses[0].id : assignment.material.synced_class?.id);
    const displayClassName = targetClasses?.find(c => c.id === activeClassId)?.name || assignment.material.synced_class?.name || '-';

    const [isClassDropdownOpen, setIsClassDropdownOpen] = useState(false);
    const [showIntervalBreakdown, setShowIntervalBreakdown] = useState(false);
    const classDropdownRef = useRef<HTMLDivElement>(null);
    const storageKey = `uticlass_assignment_${assignment.id}_last_class`;

    // Close class dropdown when clicking outside
    useEffect(() => {
        function handleClickOutside(event: MouseEvent) {
            if (classDropdownRef.current && !classDropdownRef.current.contains(event.target as Node)) {
                setIsClassDropdownOpen(false);
            }
        }
        if (isClassDropdownOpen) {
            document.addEventListener('mousedown', handleClickOutside);
        }
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [isClassDropdownOpen]);

    // Anti-reset & sync active class with localStorage
    useEffect(() => {
        if (typeof window === 'undefined') return;

        const searchParams = new URLSearchParams(window.location.search);
        const urlClassId = searchParams.get('class_id');
        const savedClassId = localStorage.getItem(storageKey);

        if (!urlClassId && savedClassId && targetClasses && targetClasses.some((c) => String(c.id) === savedClassId)) {
            if (String(activeClassId) !== savedClassId) {
                router.visit(`/assignments/${assignment.id}/review?class_id=${savedClassId}`, {
                    replace: true,
                    preserveScroll: true,
                    preserveState: false,
                });
                return;
            }
        }

        if (activeClassId) {
            localStorage.setItem(storageKey, String(activeClassId));
        }
    }, [activeClassId, assignment.id, targetClasses, storageKey]);

    const handleSelectClass = (classId: number) => {
        setIsClassDropdownOpen(false);
        if (typeof window !== 'undefined') {
            localStorage.setItem(storageKey, String(classId));
        }
        router.visit(`/assignments/${assignment.id}/review?class_id=${classId}`, {
            preserveScroll: true,
        });
    };

    const [selectedStudent, setSelectedStudent] = useState<Student | null>(null);
    const [isScanning, setIsScanning] = useState(false);
    const [isScanSessionActive, setIsScanSessionActive] = useState(false);
    const [autoNextScan, setAutoNextScan] = useState(true);
    const [searchQuery, setSearchQuery] = useState('');
    const [studentFilter, setStudentFilter] = useState<StudentFilter>('ungraded');

    const kktpThreshold = assignment.kktp ?? 75;
    const categoryInfo = getCategoryInfo(assignment.category);

    const submission = selectedStudent ? submissions[selectedStudent.id] : null;

    const stats = useMemo(() => {
        let graded = 0;
        let needsRemedial = 0;
        let remedialDone = 0;
        let pureTuntas = 0;
        let tuntas = 0;
        let sangatBaik = 0;
        let baik = 0;
        let cukup = 0;
        let perluBimbingan = 0;

        students.forEach((student) => {
            const sub = submissions[student.id];
            if (sub?.status === 'graded' && sub.grade !== null && sub.grade !== undefined) {
                graded++;
                const g = Number(sub.grade);
                const isRemedialCompleted = Boolean(sub.is_remedial || (sub.original_grade !== null && sub.original_grade !== undefined));

                if (isRemedialCompleted) {
                    remedialDone++;
                }

                if (g >= 90) {
                    sangatBaik++;
                    tuntas++;
                    if (!isRemedialCompleted) pureTuntas++;
                } else if (g >= kktpThreshold) {
                    baik++;
                    tuntas++;
                    if (!isRemedialCompleted) pureTuntas++;
                } else if (g >= 60) {
                    cukup++;
                    needsRemedial++;
                } else {
                    perluBimbingan++;
                    needsRemedial++;
                }
            }
        });

        const ungraded = students.length - graded;
        const tuntasPercentage = graded > 0 ? Math.round((tuntas / graded) * 100) : 0;

        return {
            total: students.length,
            graded,
            ungraded,
            remedial: needsRemedial, // backward compatible
            needsRemedial,
            remedialDone,
            pureTuntas,
            tuntas,
            sangatBaik,
            baik,
            cukup,
            perluBimbingan,
            tuntasPercentage,
        };
    }, [students, submissions, kktpThreshold]);

    const gradedStudentCount = stats.graded;

    const filteredStudents = useMemo(() => {
        const query = searchQuery.trim().toLocaleLowerCase('id-ID');

        return students.filter((student) => {
            const sub = submissions[student.id];
            const isGraded = sub?.status === 'graded' && sub.grade !== null && sub.grade !== undefined;
            const grade = isGraded ? Number(sub.grade) : null;
            const isRemedialCompleted = isGraded && Boolean(sub.is_remedial || (sub.original_grade !== null && sub.original_grade !== undefined));
            const isNeedsRemedial = isGraded && grade! < kktpThreshold;
            const isTuntas = isGraded && grade! >= kktpThreshold;

            let matchesFilter = true;
            if (studentFilter === 'ungraded') matchesFilter = !isGraded;
            else if (studentFilter === 'graded') matchesFilter = isGraded;
            else if (studentFilter === 'remedial') matchesFilter = isNeedsRemedial;
            else if (studentFilter === 'remedial_done') matchesFilter = isRemedialCompleted;
            else if (studentFilter === 'tuntas') matchesFilter = isTuntas;
            else if (studentFilter === 'all') matchesFilter = true;

            const matchesSearch = !query
                || student.full_name.toLocaleLowerCase('id-ID').includes(query)
                || student.nisn.toLocaleLowerCase('id-ID').includes(query);

            return matchesFilter && matchesSearch;
        });
    }, [searchQuery, studentFilter, students, submissions, kktpThreshold]);

    const selectedStudentIndex = selectedStudent
        ? filteredStudents.findIndex((student) => student.id === selectedStudent.id)
        : -1;
    const previousStudent = selectedStudentIndex > 0 ? filteredStudents[selectedStudentIndex - 1] : null;
    const nextStudent = selectedStudentIndex >= 0 && selectedStudentIndex < filteredStudents.length - 1
        ? filteredStudents[selectedStudentIndex + 1]
        : null;

    useEffect(() => {
        let html5QrCode: Html5Qrcode;

        if (isScanning) {
            html5QrCode = new Html5Qrcode("qr-reader");
            html5QrCode.start(
                { facingMode: "environment" },
                {
                    fps: 10,
                    qrbox: { width: 250, height: 250 }
                },
                (decodedText) => {
                    const scannedStudent = students.find(s => s.nisn === decodedText);
                    if (scannedStudent) {
                        selectStudent(scannedStudent, true);
                        setIsScanning(false);
                        toast.success(`Terdeteksi: ${scannedStudent.full_name}`, {
                            description: `NISN: ${scannedStudent.nisn}`
                        });
                    } else {
                        toast.error("Siswa dengan NISN " + decodedText + " tidak ditemukan di kelas ini.");
                    }
                },
                (errorMessage) => {
                    // Ignore background scan errors
                }
            ).catch((err) => {
                console.error("Camera error", err);
                toast.error("Gagal mengakses kamera. Pastikan browser memiliki izin kamera.");
                setIsScanning(false);
                setIsScanSessionActive(false);
            });
        }

        return () => {
            if (html5QrCode && html5QrCode.isScanning) {
                html5QrCode.stop().catch(console.error);
            }
        };
    }, [isScanning, students]);

    useEffect(() => {
        if (!selectedStudent || window.innerWidth >= 1024) return;

        const previousOverflow = document.body.style.overflow;
        document.body.style.overflow = 'hidden';

        return () => {
            document.body.style.overflow = previousOverflow;
        };
    }, [selectedStudent]);

    const [isQuickMode, setIsQuickMode] = useState(false);
    const [batchGrades, setBatchGrades] = useState<Record<number, { grade: string; feedback: string }>>({});
    const [isSavingBatch, setIsSavingBatch] = useState(false);

    useEffect(() => {
        const initial: Record<number, { grade: string; feedback: string }> = {};
        students.forEach((s) => {
            const sub = submissions[s.id];
            initial[s.id] = {
                grade: sub?.grade !== null && sub?.grade !== undefined ? String(sub.grade) : '',
                feedback: sub?.feedback || '',
            };
        });
        setBatchGrades(initial);
    }, [students, submissions]);

    const modifiedCount = useMemo(() => {
        let count = 0;
        Object.entries(batchGrades).forEach(([studentIdStr, data]) => {
            const studentId = Number(studentIdStr);
            const origSub = submissions[studentId];
            const origGrade = origSub?.grade !== null && origSub?.grade !== undefined ? String(origSub.grade) : '';
            const origFeedback = origSub?.feedback || '';
            if (data.grade !== '' && (data.grade !== origGrade || data.feedback !== origFeedback)) {
                count++;
            }
        });
        return count;
    }, [batchGrades, submissions]);

    const updateStudentGrade = (studentId: number, newGrade: string) => {
        setBatchGrades((prev) => ({
            ...prev,
            [studentId]: {
                grade: newGrade,
                feedback: prev[studentId]?.feedback || '',
            },
        }));
    };

    const updateStudentFeedback = (studentId: number, newFeedback: string) => {
        setBatchGrades((prev) => ({
            ...prev,
            [studentId]: {
                grade: prev[studentId]?.grade || '',
                feedback: newFeedback,
            },
        }));
    };

    const handleQuickKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, currentIndex: number) => {
        if (e.key === 'Enter' || e.key === 'ArrowDown') {
            e.preventDefault();
            const nextIndex = currentIndex + 1;
            if (nextIndex < filteredStudents.length) {
                const nextStudent = filteredStudents[nextIndex];
                const nextInput = document.getElementById(`quick-grade-${nextStudent.id}`);
                nextInput?.focus();
                (nextInput as HTMLInputElement)?.select();
            }
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            const prevIndex = currentIndex - 1;
            if (prevIndex >= 0) {
                const prevStudent = filteredStudents[prevIndex];
                const prevInput = document.getElementById(`quick-grade-${prevStudent.id}`);
                prevInput?.focus();
                (prevInput as HTMLInputElement)?.select();
            }
        }
    };

    const handleSaveBatch = () => {
        const itemsToSave: { student_id: number; grade: number; feedback?: string }[] = [];

        Object.entries(batchGrades).forEach(([studentIdStr, data]) => {
            const studentId = Number(studentIdStr);
            if (data.grade !== '' && !isNaN(Number(data.grade))) {
                const origSub = submissions[studentId];
                const origGrade = origSub?.grade !== null && origSub?.grade !== undefined ? String(origSub.grade) : '';
                const origFeedback = origSub?.feedback || '';
                if (data.grade !== origGrade || data.feedback !== origFeedback) {
                    itemsToSave.push({
                        student_id: studentId,
                        grade: Number(data.grade),
                        feedback: data.feedback ? data.feedback.trim() : undefined,
                    });
                }
            }
        });

        if (itemsToSave.length === 0) {
            toast.info('Tidak ada perubahan nilai yang perlu disimpan.');
            return;
        }

        setIsSavingBatch(true);
        const batchUrl = `/assignments/${assignment.id}/batch-grade${activeClassId ? `?class_id=${activeClassId}` : ''}`;
        router.post(batchUrl, {
            grades: itemsToSave,
        }, {
            preserveScroll: true,
            onSuccess: () => {
                setIsSavingBatch(false);
                toast.success(`${itemsToSave.length} nilai siswa berhasil disimpan!`);
            },
            onError: () => {
                setIsSavingBatch(false);
                toast.error('Gagal menyimpan nilai. Periksa kembali input Anda.');
            },
        });
    };

    const form = useForm({
        grade: '',
        feedback: '',
        status: 'graded' as 'graded' | 'physical_submitted' | 'late' | 'pending' | 'revision_requested',
        is_remedial: false,
        original_grade: '' as string | number,
    });

    function openScanner() {
        setIsScanSessionActive(true);
        setIsScanning(true);
    }

    function closeScanner() {
        setIsScanning(false);
        setIsScanSessionActive(false);
    }

    function selectStudent(student: Student, fromScanner = false) {
        if (!fromScanner) {
            setIsScanSessionActive(false);
        }

        setSelectedStudent(student);
        form.clearErrors();
        const sub = submissions[student.id];
        const isRemedialInitial = Boolean(sub?.is_remedial || (sub?.original_grade !== null && sub?.original_grade !== undefined));
        const originalScore = sub?.original_grade ?? (sub?.grade !== null && sub?.grade !== undefined && Number(sub.grade) < kktpThreshold ? sub.grade : '');

        if (sub) {
            form.setData({
                grade: sub.grade !== null ? String(sub.grade) : '',
                feedback: sub.feedback || '',
                status: sub.status,
                is_remedial: isRemedialInitial,
                original_grade: originalScore !== null && originalScore !== undefined && originalScore !== '' ? String(originalScore) : '',
            });
        } else {
            form.setData({
                grade: String(assignment.max_points), // Default to max points for fast grading
                feedback: '',
                status: assignment.submission_type === 'physical' ? 'physical_submitted' : 'pending',
                is_remedial: false,
                original_grade: '',
            });
        }
    }

    function handleSubmitGrade(e: FormEvent<HTMLFormElement>) {
        e.preventDefault();
        if (!selectedStudent || form.processing) return;

        const sub = submissions[selectedStudent.id];
        const baseUrl = sub
            ? `/submissions/${sub.id}/grade`
            : `/assignments/${assignment.id}/grade-student/${selectedStudent.id}`;
        const routeUrl = activeClassId ? `${baseUrl}?class_id=${activeClassId}` : baseUrl;

        form.post(routeUrl, {
            preserveScroll: true,
            onSuccess: () => {
                setSelectedStudent(null);

                if (isScanSessionActive && autoNextScan) {
                    setTimeout(() => {
                        setIsScanning(true);
                    }, 300);
                } else {
                    setIsScanSessionActive(false);
                }
            }
        });
    }

    function moveToStudent(student: Student | null) {
        if (!student || form.processing) return;
        selectStudent(student);
    }

    function handleRequestRevision() {
        if (!selectedStudent || !submission || form.processing) return;
        if (!form.data.feedback.trim()) {
            form.setError('feedback', 'Tuliskan catatan perbaikan sebelum meminta revisi.');
            document.getElementById('assignment-feedback')?.focus();
            return;
        }
        if (!confirm('Apakah Anda yakin ingin meminta siswa untuk merevisi tugas ini?')) return;

        const revUrl = `/submissions/${submission.id}/request-revision${activeClassId ? `?class_id=${activeClassId}` : ''}`;
        form.post(revUrl, {
            preserveScroll: true,
            onSuccess: () => {
                setSelectedStudent(null);
            }
        });
    }

    function getStatusBadge(studentId: number) {
        const sub = submissions[studentId];
        if (!sub) {
            return (
                <span className="inline-flex items-center rounded-md bg-zinc-500/10 px-2 py-0.5 text-xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-500/20">
                    Belum Mengumpulkan
                </span>
            );
        }

        switch (sub.status) {
            case 'graded': {
                const kktp = evaluateKktp(sub.grade, kktpThreshold);
                const isRemedialCompleted = Boolean(sub.is_remedial || (sub.original_grade !== null && sub.original_grade !== undefined));

                if (kktp) {
                    return (
                        <span
                            className={cn(
                                'inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-xs font-bold transition-all shadow-xs',
                                isRemedialCompleted
                                    ? 'bg-amber-500/15 text-amber-300 border border-amber-500/30'
                                    : kktp.badgeClass,
                            )}
                            title={
                                isRemedialCompleted
                                    ? `Tuntas Remedial (Nilai Rapor: ${sub.grade}, Nilai Awal: ${sub.original_grade ?? '-'}). Siap masuk rapor.`
                                    : `${kktp.predikat} (${sub.grade}): ${kktp.ketercapaian}. Tindak Lanjut: ${kktp.tindakLanjut}`
                            }
                        >
                            <span className={cn('h-1.5 w-1.5 rounded-full shrink-0', isRemedialCompleted ? 'bg-amber-400' : kktp.dotClass)} />
                            <span className="tabular-nums font-black">{sub.grade}</span>
                            <span className="opacity-40 font-normal">·</span>
                            <span>{isRemedialCompleted ? 'Remedial' : kktp.predikat}</span>
                            {isRemedialCompleted ? (
                                <span className="rounded bg-amber-400/20 px-1 py-0.5 text-[9px] font-black uppercase tracking-wider text-amber-200">
                                    {sub.original_grade !== null && sub.original_grade !== undefined ? `Awal: ${sub.original_grade}` : 'Rapor'}
                                </span>
                            ) : (
                                !kktp.isTuntas && (
                                    <span className="rounded bg-rose-500/25 px-1 py-0.5 text-[9px] font-black uppercase tracking-wider text-rose-300">
                                        Perlu Remedial
                                    </span>
                                )
                            )}
                            {sub.is_late && <span className="opacity-60 text-[10px]">· Telat</span>}
                        </span>
                    );
                }
                return (
                    <span className={cn(
                        "inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset",
                        isRemedialCompleted
                            ? "bg-amber-500/10 text-amber-300 ring-amber-500/30"
                            : "bg-emerald-500/10 text-emerald-400 ring-emerald-500/20"
                    )}>
                        {isRemedialCompleted ? `Tuntas Remedial (${sub.grade})` : `Selesai Dinilai (${sub.grade})`}
                        {sub.is_late ? ' · Terlambat' : ''}
                    </span>
                );
            }
            case 'physical_submitted':
                return (
                    <span className="inline-flex items-center rounded-md bg-blue-500/10 px-2 py-0.5 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-500/20">
                        Kumpul Fisik
                    </span>
                );
            case 'late':
                return (
                    <span className="inline-flex items-center rounded-md bg-rose-500/10 px-2 py-0.5 text-xs font-medium text-rose-400 ring-1 ring-inset ring-rose-500/20">
                        Terlambat
                    </span>
                );
            case 'revision_requested':
                return (
                    <span className="inline-flex items-center rounded-md bg-orange-500/10 px-2 py-0.5 text-xs font-medium text-orange-400 ring-1 ring-inset ring-orange-500/20">
                        Minta Revisi
                    </span>
                );
            default:
                return (
                    <span className="inline-flex items-center rounded-md bg-amber-500/10 px-2 py-0.5 text-xs font-medium text-amber-400 ring-1 ring-inset ring-amber-500/20 animate-pulse">
                        Perlu Diperiksa{sub.is_late ? ' · Terlambat' : ''}
                    </span>
                );
        }
    }

    return (
        <AuthenticatedLayout
            title={`Periksa: ${assignment.title}`}
            backHref={`/materials/${assignment.material.id}`}
        >
            <Head title={`Periksa: ${assignment.title}`} />

            <div className="space-y-4 sm:space-y-6 min-w-0">
                {/* Top Control Bar: Luxury Class Selector & Badges */}
                <div className="flex flex-col gap-2.5 sm:flex-row sm:items-center sm:justify-between">
                    <div className="flex items-center gap-2 flex-wrap min-w-0">
                        {targetClasses && targetClasses.length > 1 ? (
                            <div className="relative" ref={classDropdownRef}>
                                <button
                                    type="button"
                                    onClick={() => setIsClassDropdownOpen((prev) => !prev)}
                                    className="group inline-flex items-center gap-2 rounded-xl border border-primary-500/40 bg-surface/90 px-3 py-1.5 sm:px-3.5 sm:py-2 text-xs font-bold text-text-light shadow-md shadow-primary-500/10 backdrop-blur-xl transition-all hover:border-primary-400 hover:bg-surface-hover active:scale-[0.98]"
                                    aria-haspopup="true"
                                    aria-expanded={isClassDropdownOpen}
                                    title="Pilih kelas untuk menilai tugas"
                                >
                                    <div className="flex h-6 w-6 items-center justify-center rounded-lg bg-primary-500/15 text-primary-300 group-hover:bg-primary-500/25 transition-colors">
                                        <School className="h-3.5 w-3.5" />
                                    </div>
                                    <div className="flex flex-col items-start leading-none text-left">
                                        <span className="text-[9px] sm:text-[10px] font-semibold text-text-muted">Kelas Penilaian</span>
                                        <span className="text-xs font-black text-text-light">Kelas {displayClassName}</span>
                                    </div>
                                    <span className="rounded-md bg-primary-500/20 px-1.5 py-0.5 text-[10px] font-black text-primary-300">
                                        {students.length} Siswa
                                    </span>
                                    <ChevronDown
                                        className={cn(
                                            'h-4 w-4 text-text-muted transition-transform duration-200',
                                            isClassDropdownOpen && 'rotate-180 text-primary-400'
                                        )}
                                    />
                                </button>

                                {isClassDropdownOpen && (
                                    <div className="absolute left-0 top-full mt-1.5 w-64 origin-top-left rounded-2xl border border-border/80 bg-surface/95 p-1.5 shadow-2xl backdrop-blur-2xl ring-1 ring-black/10 z-50 animate-in fade-in zoom-in-95 duration-150">
                                        <div className="border-b border-border/40 px-3 py-2 text-[10px] font-black uppercase tracking-wider text-text-muted flex items-center justify-between">
                                            <span>Pilih Kelas Target</span>
                                            <span className="text-primary-400 font-bold">{targetClasses.length} Kelas</span>
                                        </div>
                                        <div className="mt-1 max-h-60 overflow-y-auto space-y-1">
                                            {targetClasses.map((c) => {
                                                const isActive = c.id === activeClassId;
                                                return (
                                                    <button
                                                        key={c.id}
                                                        type="button"
                                                        onClick={() => handleSelectClass(c.id)}
                                                        className={cn(
                                                            'flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-xs font-bold transition-colors text-left',
                                                            isActive
                                                                ? 'bg-primary-500/15 text-primary-300 border border-primary-500/30'
                                                                : 'text-text hover:bg-surface-hover hover:text-text-light'
                                                        )}
                                                    >
                                                        <div className="flex items-center gap-2.5">
                                                            <div className={cn(
                                                                "flex h-6 w-6 items-center justify-center rounded-lg text-xs font-black",
                                                                isActive ? "bg-primary-500 text-white" : "bg-surface-hover text-text-muted"
                                                            )}>
                                                                {c.name.slice(0, 2)}
                                                            </div>
                                                            <span>Kelas {c.name}</span>
                                                        </div>
                                                        {isActive && <Check className="h-4 w-4 text-primary-400" />}
                                                    </button>
                                                );
                                            })}
                                        </div>
                                    </div>
                                )}
                            </div>
                        ) : (
                            <span className="inline-flex items-center gap-2 rounded-xl border border-border bg-surface px-3 py-1.5 text-xs font-bold text-text-light">
                                <School className="h-3.5 w-3.5 text-primary-400" /> Kelas: {displayClassName}
                            </span>
                        )}

                        <span className="rounded-lg border border-border bg-surface px-2.5 py-1.5 text-xs text-text-muted" title={`Mapel: ${assignment.material.subject.name}`}>
                            {assignment.material.subject.name}
                        </span>
                        <span className={cn('rounded-lg px-2.5 py-1.5 text-xs font-bold', categoryInfo.badgeClass)}>
                            {categoryInfo.label}
                        </span>
                        <span className="rounded-lg border border-cyan-500/30 bg-cyan-500/10 px-2.5 py-1.5 text-xs font-bold text-cyan-400">
                            KKTP &ge; {kktpThreshold}
                        </span>
                    </div>

                    <div className="hidden sm:flex items-center gap-2 text-xs">
                        <span className="inline-flex items-center gap-1 rounded-lg border border-border bg-surface px-3 py-1.5 font-semibold text-primary-300">
                            <Award className="h-3.5 w-3.5 text-amber-400" /> Max {assignment.max_points} Poin
                        </span>
                    </div>
                </div>

                {/* Assignment Title Area & Quick Controls */}
                <div className="glass flex flex-col items-stretch gap-3 rounded-2xl p-3.5 sm:p-5 sm:flex-row sm:items-center sm:justify-between">
                    <div className="min-w-0">
                        <h2 className="text-base sm:text-lg font-black text-text-light truncate">
                            {assignment.title}
                        </h2>
                        <p className="text-xs text-text-muted mt-0.5 truncate">
                            Materi: {assignment.material.title} (Kelas {displayClassName})
                        </p>
                        <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-text-muted">
                            <span className="flex items-center gap-1">
                                <Calendar className="h-3.5 w-3.5" /> Batas: {formatDate(assignment.due_date)}
                            </span>
                            <span className="capitalize">
                                Kumpul: <strong className="text-text-light">{assignment.submission_type}</strong>
                            </span>
                        </div>
                    </div>
                    
                    <div className="grid grid-cols-2 sm:flex sm:items-center gap-2 shrink-0">
                        <button
                            type="button"
                            onClick={openScanner}
                            className="col-span-2 sm:col-span-1 inline-flex min-h-10 items-center justify-center gap-2 rounded-xl bg-emerald-600 px-4 py-2 text-xs font-bold text-white shadow-lg shadow-emerald-500/20 transition-all hover:bg-emerald-500 active:scale-95"
                            title="Buka scanner kamera QR Code buku siswa"
                        >
                            <Camera className="h-4 w-4" /> Scanner QR Buku
                        </button>

                        <button
                            type="button"
                            onClick={() => {
                                setIsQuickMode((prev) => !prev);
                                if (selectedStudent) setSelectedStudent(null);
                            }}
                            className={cn(
                                'inline-flex min-h-10 items-center justify-center gap-1.5 rounded-xl px-3 py-2 text-xs font-bold shadow-xs transition-all',
                                isQuickMode
                                    ? 'bg-amber-500 text-slate-950 shadow-amber-500/20 ring-2 ring-amber-400'
                                    : 'border border-border/60 bg-surface text-text hover:bg-surface-hover hover:text-text-light'
                            )}
                            title={isQuickMode ? 'Kembali ke mode pemeriksaan detail' : 'Mode input nilai cepat langsung di tabel'}
                        >
                            <TableProperties className={cn('h-4 w-4 shrink-0', isQuickMode ? 'text-slate-950' : 'text-amber-400')} />
                            <span>{isQuickMode ? 'Mode Detail' : 'Input Cepat'}</span>
                        </button>

                        <Link
                            href={`/assignments/${assignment.id}/print-recap${activeClassId ? `?class_id=${activeClassId}` : ''}`}
                            target="_blank"
                            className="inline-flex min-h-10 items-center justify-center gap-1.5 rounded-xl border border-border/60 bg-surface px-3 py-2 text-xs font-semibold text-text shadow-xs transition-colors hover:bg-surface-hover hover:text-text-light"
                            title="Buka dokumen cetak rekapitulasi nilai dan berita acara remedial"
                        >
                            <Printer className="h-4 w-4 text-cyan-400" />
                            <span>Cetak Rekap</span>
                        </Link>

                        {activeClassId && (
                            <Link
                                href={`/classes/${activeClassId}/print-qr`}
                                target="_blank"
                                className="hidden sm:inline-flex min-h-10 items-center justify-center gap-1.5 rounded-xl border border-border/60 bg-surface px-3 py-2 text-xs font-semibold text-text shadow-xs transition-colors hover:bg-surface-hover"
                                title="Cetak stiker QR Code buku catatan siswa kelas ini"
                            >
                                <Printer className="h-4 w-4 text-emerald-400" />
                                <span>Label QR</span>
                            </Link>
                        )}
                    </div>
                </div>

                {/* Quiz banner: auto-graded, tidak perlu pemeriksaan manual */}
                {assignment.assignment_type === 'quiz' && (
                    <div className="rounded-2xl border border-emerald-500/20 bg-emerald-500/5 p-5 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                        <div>
                            <p className="text-sm font-bold text-emerald-300">Quiz Dinilai Otomatis</p>
                            <p className="text-xs text-text-muted mt-1">
                                Nilai dihitung sistem saat siswa submit — tidak perlu diperiksa manual. Leaderboard menampilkan skor terbaik per siswa.
                            </p>
                        </div>
                        <Link
                            href={route('quiz.leaderboard.teacher', assignment.id)}
                            className="inline-flex items-center justify-center gap-2 rounded-xl bg-emerald-500 px-4 py-2.5 text-xs font-bold text-white hover:bg-emerald-400 transition-colors shadow-lg shadow-emerald-500/20"
                        >
                            <Award className="h-4 w-4" /> Lihat Leaderboard Quiz
                        </Link>
                    </div>
                )}

                {/* Scanner Modal */}
                {isScanning && (
                    <div data-hide-mobile-dock="true" className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-black/80 p-4 pb-[calc(1rem+env(safe-area-inset-bottom))] backdrop-blur-sm animate-in fade-in duration-200">
                        <div className="bg-surface rounded-2xl p-6 max-w-md w-full shadow-2xl relative border border-border/40">
                            <button 
                                onClick={closeScanner}
                                className="absolute right-4 top-4 p-2 bg-surface-hover rounded-full text-text-muted hover:text-rose-400 transition"
                            >
                                <X className="h-5 w-5" />
                            </button>
                            <h3 className="text-base font-bold text-text-light mb-1 flex items-center gap-2">
                                <Camera className="h-5 w-5 text-emerald-500 animate-pulse" />
                                Arahkan ke QR Code Buku Siswa
                            </h3>
                            <p className="text-xs text-text-muted mb-4">
                                Tempelkan stiker QR pada buku siswa. Sistem akan otomatis memilih siswa.
                            </p>

                            <div className="rounded-xl overflow-hidden bg-black aspect-square flex items-center justify-center border-2 border-emerald-500/40 shadow-inner">
                                <div id="qr-reader" className="w-full h-full"></div>
                            </div>

                            <div className="mt-4 flex items-center justify-between bg-surface/50 p-2.5 rounded-xl border border-border/30 text-xs">
                                <label htmlFor="modal-auto-scan" className="text-text-muted font-medium cursor-pointer">
                                    Mode Scan Beruntun (otomatis lanjut)
                                </label>
                                <input
                                    id="modal-auto-scan"
                                    type="checkbox"
                                    checked={autoNextScan}
                                    onChange={(e) => setAutoNextScan(e.target.checked)}
                                    className="rounded border-border text-emerald-500 focus:ring-emerald-500 h-4 w-4 cursor-pointer"
                                />
                            </div>

                        </div>
                    </div>
                )}

                {/* KKTP Diagnostic Summary Bar */}
                <div className="glass rounded-2xl p-3.5 sm:p-5 border border-border/60 shadow-sm">
                    <div className="flex flex-col gap-2.5 sm:flex-row sm:items-center sm:justify-between">
                        <div>
                            <div className="flex items-center gap-2 flex-wrap">
                                <span className="text-xs font-bold uppercase tracking-wider text-text-muted">Ketercapaian TP (KKTP: {kktpThreshold})</span>
                                <span className={cn(
                                    "rounded-full px-2.5 py-0.5 text-[10px] font-black uppercase tracking-wider",
                                    stats.tuntasPercentage >= 75
                                        ? "bg-emerald-500/15 text-emerald-300 border border-emerald-500/30"
                                        : stats.tuntasPercentage >= 50
                                            ? "bg-amber-500/15 text-amber-300 border border-amber-500/30"
                                            : "bg-rose-500/15 text-rose-300 border border-rose-500/30"
                                )}>
                                    {stats.graded > 0 ? `${stats.tuntasPercentage}% Tuntas` : 'Belum Ada Nilai'}
                                </span>
                            </div>
                            <p className="mt-1 text-xs sm:text-sm font-semibold text-text-light flex flex-wrap items-center gap-1.5">
                                <span>{stats.graded} dari {stats.total} siswa dinilai</span>
                                {stats.needsRemedial > 0 && (
                                    <span className="text-rose-400 font-bold">
                                        · {stats.needsRemedial} perlu remedial
                                    </span>
                                )}
                                {stats.remedialDone > 0 && (
                                    <span className="text-amber-300 font-bold">
                                        · {stats.remedialDone} tuntas via remedial
                                    </span>
                                )}
                                {stats.graded > 0 && stats.needsRemedial === 0 && (
                                    <span className="text-emerald-400 font-bold">
                                        · Semua tuntas! 🎉
                                    </span>
                                )}
                            </p>
                        </div>

                        <div className="flex items-center gap-2">
                            {stats.needsRemedial > 0 && (
                                <button
                                    type="button"
                                    onClick={() => setStudentFilter(studentFilter === 'remedial' ? 'all' : 'remedial')}
                                    className={cn(
                                        "inline-flex items-center justify-center gap-1.5 rounded-xl px-3 py-1.5 text-xs font-bold transition-all shrink-0",
                                        studentFilter === 'remedial'
                                            ? "bg-rose-500 text-white shadow-lg shadow-rose-500/20"
                                            : "bg-rose-500/10 text-rose-300 border border-rose-500/30 hover:bg-rose-500/20"
                                    )}
                                >
                                    <AlertCircle className="h-3.5 w-3.5" />
                                    <span>{studentFilter === 'remedial' ? 'Tampilkan Semua' : `Filter ${stats.needsRemedial} Remedial`}</span>
                                </button>
                            )}

                            {stats.graded > 0 && (
                                <button
                                    type="button"
                                    onClick={() => setShowIntervalBreakdown((prev) => !prev)}
                                    className="sm:hidden inline-flex items-center gap-1 text-[11px] font-bold text-text-muted hover:text-text-light bg-surface-hover/60 px-2.5 py-1.5 rounded-xl border border-border/40"
                                >
                                    <span>{showIntervalBreakdown ? 'Tutup Rincian' : 'Rincian Nilai'}</span>
                                    <ChevronDown className={cn("h-3.5 w-3.5 transition-transform", showIntervalBreakdown && "rotate-180")} />
                                </button>
                            )}
                        </div>
                    </div>

                    {stats.graded > 0 && (
                        <div className={cn("mt-3 space-y-2.5", !showIntervalBreakdown && "hidden sm:block")}>
                            {/* Visual multi-segment progress bar */}
                            <div className="h-2 w-full overflow-hidden rounded-full bg-surface-hover flex">
                                {stats.sangatBaik > 0 && (
                                    <div
                                        style={{ width: `${(stats.sangatBaik / stats.total) * 100}%` }}
                                        className="bg-emerald-500 transition-all"
                                        title={`Sangat Baik (90-100): ${stats.sangatBaik} siswa`}
                                    />
                                )}
                                {stats.baik > 0 && (
                                    <div
                                        style={{ width: `${(stats.baik / stats.total) * 100}%` }}
                                        className="bg-cyan-500 transition-all"
                                        title={`Baik (75-89): ${stats.baik} siswa`}
                                    />
                                )}
                                {stats.cukup > 0 && (
                                    <div
                                        style={{ width: `${(stats.cukup / stats.total) * 100}%` }}
                                        className="bg-amber-500 transition-all"
                                        title={`Cukup (60-74): ${stats.cukup} siswa`}
                                    />
                                )}
                                {stats.perluBimbingan > 0 && (
                                    <div
                                        style={{ width: `${(stats.perluBimbingan / stats.total) * 100}%` }}
                                        className="bg-rose-500 transition-all"
                                        title={`Perlu Bimbingan (<60): ${stats.perluBimbingan} siswa`}
                                    />
                                )}
                            </div>

                            {/* Interval breakdown pills */}
                            <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 text-[11px] text-text-muted">
                                <span className="flex items-center gap-1.5">
                                    <span className="h-2 w-2 rounded-full bg-emerald-400" />
                                    <span>Sangat Baik (90-100):</span>
                                    <strong className="text-emerald-300 tabular-nums">{stats.sangatBaik}</strong>
                                </span>
                                <span className="flex items-center gap-1.5">
                                    <span className="h-2 w-2 rounded-full bg-cyan-400" />
                                    <span>Baik (75-89):</span>
                                    <strong className="text-cyan-300 tabular-nums">{stats.baik}</strong>
                                </span>
                                <span className="flex items-center gap-1.5">
                                    <span className="h-2 w-2 rounded-full bg-amber-400" />
                                    <span>Cukup (60-74):</span>
                                    <strong className="text-amber-300 tabular-nums">{stats.cukup}</strong>
                                </span>
                                <span className="flex items-center gap-1.5">
                                    <span className="h-2 w-2 rounded-full bg-rose-400" />
                                    <span>Perlu Bimbingan (&lt;60):</span>
                                    <strong className="text-rose-300 tabular-nums">{stats.perluBimbingan}</strong>
                                </span>
                            </div>
                        </div>
                    )}
                </div>

                {/* Split Content: Table & Grading Panel */}
                <div className="grid gap-6 lg:grid-cols-5">
                    {/* Left Column: Student Submissions Table */}
                    <div className={cn("glass overflow-hidden rounded-2xl transition-all duration-300", isQuickMode ? "lg:col-span-5" : "lg:col-span-3")}>
                        <div className="space-y-2 border-b border-border/60 bg-surface/95 p-2.5 sm:flex sm:items-center sm:gap-2 sm:space-y-0 lg:p-3">
                            <label className="relative block min-w-0 flex-1">
                                <span className="sr-only">Cari nama atau NISN siswa</span>
                                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-muted" />
                                <input
                                    type="search"
                                    data-testid="student-search"
                                    value={searchQuery}
                                    onChange={(event) => setSearchQuery(event.target.value)}
                                    placeholder="Cari nama/NISN"
                                    className="h-9 w-full rounded-xl border border-border bg-background/70 py-1.5 pl-9 pr-9 text-[13px] font-normal text-text-light outline-none transition placeholder:text-text-muted/70 focus:border-primary-400 focus:ring-2 focus:ring-primary-500/15"
                                />
                                {searchQuery && (
                                    <button
                                        type="button"
                                        onClick={() => setSearchQuery('')}
                                        aria-label="Hapus pencarian"
                                        className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded-lg p-1.5 text-text-muted hover:bg-surface-hover hover:text-text-light"
                                    >
                                        <X className="h-3.5 w-3.5" />
                                    </button>
                                )}
                            </label>

                            <div
                                role="tablist"
                                aria-label="Filter status penilaian"
                                className="flex flex-wrap items-center gap-1 rounded-2xl border border-border/60 bg-background/50 p-1 sm:w-auto"
                            >
                                {([
                                    { value: 'ungraded' as const, label: 'Belum', count: stats.ungraded, color: 'default' },
                                    { value: 'remedial' as const, label: 'Perlu Remedial', count: stats.needsRemedial, color: 'rose' },
                                    { value: 'remedial_done' as const, label: 'Hasil Remedial', count: stats.remedialDone, color: 'amber' },
                                    { value: 'tuntas' as const, label: 'Tuntas', count: stats.tuntas, color: 'emerald' },
                                    { value: 'graded' as const, label: 'Dinilai', count: stats.graded, color: 'default' },
                                    { value: 'all' as const, label: 'Semua', count: stats.total, color: 'default' },
                                ]).map((option) => (
                                    <button
                                        key={option.value}
                                        type="button"
                                        role="tab"
                                        aria-selected={studentFilter === option.value}
                                        aria-label={`${option.label}, ${option.count} siswa`}
                                        onClick={() => setStudentFilter(option.value)}
                                        className={cn(
                                            'inline-flex min-h-7 items-center justify-center gap-1 rounded-xl px-2.5 py-1 text-[11px] font-bold leading-none transition-colors',
                                            studentFilter === option.value
                                                ? option.color === 'rose'
                                                    ? 'bg-rose-500 text-white shadow-sm shadow-rose-500/20'
                                                    : option.color === 'amber'
                                                        ? 'bg-amber-500 text-white shadow-sm shadow-amber-500/20'
                                                        : option.color === 'emerald'
                                                            ? 'bg-emerald-600 text-white shadow-sm shadow-emerald-500/20'
                                                            : 'bg-primary-500 text-white shadow-sm shadow-primary-500/20'
                                                : option.color === 'rose' && option.count > 0
                                                    ? 'text-rose-400 hover:bg-rose-500/10'
                                                    : option.color === 'amber' && option.count > 0
                                                        ? 'text-amber-300 hover:bg-amber-500/10'
                                                        : 'text-text-muted hover:bg-surface-hover hover:text-text-light',
                                        )}
                                    >
                                        <span>{option.label}</span>
                                        <span
                                            className={cn(
                                                'rounded-full px-1.5 py-0.5 text-[10px] tabular-nums',
                                                studentFilter === option.value
                                                    ? 'bg-white/20 text-white'
                                                    : option.color === 'rose' && option.count > 0
                                                        ? 'bg-rose-500/20 text-rose-300 font-black'
                                                        : option.color === 'amber' && option.count > 0
                                                            ? 'bg-amber-500/20 text-amber-200 font-black'
                                                            : 'bg-surface text-text-muted',
                                            )}
                                        >
                                            {option.count}
                                        </span>
                                    </button>
                                ))}
                            </div>
                        </div>

                        <div className="divide-y divide-border/40 lg:hidden">
                            {filteredStudents.map((student, idx) => {
                                if (isQuickMode) {
                                    const val = batchGrades[student.id]?.grade ?? '';
                                    const kktp = val !== '' ? evaluateKktp(Number(val), kktpThreshold) : null;
                                    return (
                                        <div key={student.id} className="p-3.5 space-y-2 bg-surface/30">
                                            <div className="flex items-center justify-between">
                                                <div>
                                                    <span className="text-xs font-mono text-text-muted mr-1.5">#{idx + 1}</span>
                                                    <span className="font-bold text-text-light text-sm">{student.full_name}</span>
                                                    <p className="font-mono text-[10px] text-text-muted">NISN {student.nisn}</p>
                                                </div>
                                                {kktp && (
                                                    <span className={cn("inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-[10px] font-bold", kktp.badgeClass)}>
                                                        <span className={cn("h-1.5 w-1.5 rounded-full", kktp.dotClass)} />
                                                        <span>{kktp.predikat}</span>
                                                    </span>
                                                )}
                                            </div>
                                            <div className="flex items-center gap-2">
                                                <input
                                                    id={`quick-grade-m-${student.id}`}
                                                    type="number"
                                                    min="0"
                                                    max={assignment.max_points}
                                                    value={val}
                                                    onChange={(e) => updateStudentGrade(student.id, e.target.value)}
                                                    placeholder="Skor..."
                                                    className="w-24 rounded-xl border border-border bg-background px-3 py-2 text-base font-black tabular-nums text-text-light focus:border-amber-400 focus:outline-none"
                                                />
                                                <input
                                                    type="text"
                                                    value={batchGrades[student.id]?.feedback ?? ''}
                                                    onChange={(e) => updateStudentFeedback(student.id, e.target.value)}
                                                    placeholder="Catatan..."
                                                    className="flex-1 rounded-xl border border-border/60 bg-background/60 px-3 py-2 text-xs text-text focus:outline-none"
                                                />
                                            </div>
                                            <div className="flex items-center gap-1 overflow-x-auto pb-1">
                                                {[60, 70, 75, 80, 85, 90, 100]
                                                    .filter((p) => p <= assignment.max_points)
                                                    .map((point) => (
                                                        <button
                                                            key={point}
                                                            type="button"
                                                            onClick={() => updateStudentGrade(student.id, String(point))}
                                                            className="flex-1 min-w-[38px] rounded-lg border border-border/40 bg-surface/70 py-1 text-[10px] font-bold text-text-muted hover:bg-surface-hover"
                                                        >
                                                            {point}
                                                        </button>
                                                    ))}
                                            </div>
                                        </div>
                                    );
                                }

                                return (
                                    <button
                                        key={student.id}
                                        type="button"
                                        onClick={() => selectStudent(student)}
                                        className={cn(
                                            'flex w-full items-center gap-3 px-4 py-3.5 text-left transition-colors hover:bg-surface-hover/40 active:bg-primary-500/10',
                                            selectedStudent?.id === student.id && 'bg-primary-500/10',
                                        )}
                                        aria-label={`Periksa ${student.full_name}`}
                                    >
                                        <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary-500/10 text-sm font-black text-primary-300">
                                            {student.full_name.slice(0, 1)}
                                        </span>
                                        <span className="min-w-0 flex-1">
                                            <span className="block truncate text-sm font-bold text-text-light">{student.full_name}</span>
                                            <span className="mt-0.5 block font-mono text-[11px] text-text-muted">NISN {student.nisn}</span>
                                            <span className="mt-1.5 block">{getStatusBadge(student.id)}</span>
                                        </span>
                                        <ChevronRight className="h-5 w-5 shrink-0 text-text-muted" />
                                    </button>
                                );
                            })}
                        </div>

                        <div className="hidden overflow-x-auto lg:block">
                            <table className="w-full border-collapse text-left text-sm text-text">
                                <thead>
                                    <tr className="border-b border-border bg-surface/50 text-xs font-semibold uppercase tracking-wider text-text-muted">
                                        {isQuickMode ? (
                                            <>
                                                <th className="px-4 py-4 w-12 text-center">No</th>
                                                <th className="px-5 py-4 w-60">Nama Siswa</th>
                                                <th className="px-4 py-4 w-36">Nilai (0-{assignment.max_points})</th>
                                                <th className="px-4 py-4 w-48">Status KKTP</th>
                                                <th className="px-4 py-4">Catatan Singkat</th>
                                                <th className="px-4 py-4 w-28 text-right">Preset</th>
                                            </>
                                        ) : (
                                            <>
                                                <th className="px-6 py-4">Nama Siswa</th>
                                                <th className="px-6 py-4">NISN</th>
                                                <th className="px-6 py-4">Keterangan</th>
                                                <th className="px-6 py-4">Status</th>
                                                <th className="px-6 py-4 text-right">Aksi</th>
                                            </>
                                        )}
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-border/40">
                                    {filteredStudents.map((student, idx) => {
                                        if (isQuickMode) {
                                            const val = batchGrades[student.id]?.grade ?? '';
                                            const kktp = val !== '' ? evaluateKktp(Number(val), kktpThreshold) : null;
                                            return (
                                                <tr key={student.id} className="hover:bg-surface-hover/30 transition-colors">
                                                    <td className="px-4 py-3 text-center text-xs font-mono text-text-muted">
                                                        {idx + 1}
                                                    </td>
                                                    <td className="px-5 py-3">
                                                        <span className="block font-bold text-text-light text-sm">{student.full_name}</span>
                                                        <span className="block font-mono text-[11px] text-text-muted">NISN {student.nisn}</span>
                                                    </td>
                                                    <td className="px-4 py-3">
                                                        <input
                                                            id={`quick-grade-${student.id}`}
                                                            type="number"
                                                            min="0"
                                                            max={assignment.max_points}
                                                            value={val}
                                                            onChange={(e) => updateStudentGrade(student.id, e.target.value)}
                                                            onKeyDown={(e) => handleQuickKeyDown(e, idx)}
                                                            placeholder="Skor..."
                                                            className={cn(
                                                                "w-full rounded-xl border px-3 py-2 text-sm font-black tabular-nums transition-all focus:outline-none focus:ring-2",
                                                                val === ''
                                                                    ? "border-border/80 bg-background text-text-light focus:border-primary-400 focus:ring-primary-500/20"
                                                                    : kktp?.isTuntas
                                                                        ? "border-emerald-500/40 bg-emerald-500/10 text-emerald-300 focus:border-emerald-400 focus:ring-emerald-500/20"
                                                                        : "border-rose-500/40 bg-rose-500/10 text-rose-300 focus:border-rose-400 focus:ring-rose-500/20"
                                                            )}
                                                        />
                                                    </td>
                                                    <td className="px-4 py-3">
                                                        {kktp ? (
                                                            (() => {
                                                                const sub = submissions[student.id];
                                                                const isRemedialCompleted = Boolean(sub?.is_remedial || (sub?.original_grade !== null && sub?.original_grade !== undefined) || (sub?.grade !== null && Number(sub.grade) < kktpThreshold && kktp.isTuntas));
                                                                return (
                                                                    <span className={cn(
                                                                        "inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-xs font-bold",
                                                                        isRemedialCompleted && kktp.isTuntas
                                                                            ? "bg-amber-500/15 text-amber-300 border border-amber-500/30"
                                                                            : kktp.badgeClass
                                                                    )}>
                                                                        <span className={cn("h-1.5 w-1.5 rounded-full shrink-0", isRemedialCompleted && kktp.isTuntas ? "bg-amber-400" : kktp.dotClass)} />
                                                                        <span>{isRemedialCompleted && kktp.isTuntas ? 'Tuntas' : kktp.predikat}</span>
                                                                        {isRemedialCompleted && kktp.isTuntas ? (
                                                                            <span className="rounded bg-amber-400/20 px-1 py-0.2 text-[9px] font-black uppercase text-amber-200">
                                                                                Remedial
                                                                            </span>
                                                                        ) : !kktp.isTuntas ? (
                                                                            <span className="rounded bg-rose-500/25 px-1 py-0.2 text-[9px] font-black uppercase text-rose-300">
                                                                                Perlu Remedial
                                                                            </span>
                                                                        ) : null}
                                                                    </span>
                                                                );
                                                            })()
                                                        ) : (
                                                            <span className="text-xs text-text-muted opacity-40">- Belum diisi -</span>
                                                        )}
                                                    </td>
                                                    <td className="px-4 py-3">
                                                        <input
                                                            type="text"
                                                            value={batchGrades[student.id]?.feedback ?? ''}
                                                            onChange={(e) => updateStudentFeedback(student.id, e.target.value)}
                                                            placeholder="Catatan motivasi / saran (opsional)..."
                                                            className="w-full rounded-xl border border-border/60 bg-background/60 px-3 py-1.5 text-xs text-text placeholder:text-text-muted/50 focus:border-primary-400 focus:outline-none"
                                                        />
                                                    </td>
                                                    <td className="px-4 py-3 text-right">
                                                        <div className="flex items-center justify-end gap-1">
                                                            {[75, 85, 90, 100]
                                                                .filter((p) => p <= assignment.max_points)
                                                                .map((point) => (
                                                                    <button
                                                                        key={point}
                                                                        type="button"
                                                                        onClick={() => updateStudentGrade(student.id, String(point))}
                                                                        className="rounded-lg border border-border/40 bg-surface-hover/50 px-2 py-1 text-[10px] font-bold text-text-muted hover:bg-surface-hover hover:text-text-light"
                                                                    >
                                                                        {point}
                                                                    </button>
                                                                ))}
                                                        </div>
                                                    </td>
                                                </tr>
                                            );
                                        }

                                        const sub = submissions[student.id];
                                        return (
                                            <tr 
                                                key={student.id} 
                                                className={cn(
                                                    'hover:bg-surface-hover/30 transition-colors',
                                                    selectedStudent?.id === student.id ? 'bg-primary-500/10' : ''
                                                )}
                                            >
                                                <td className="px-6 py-4 font-semibold text-text-light">
                                                    {student.full_name}
                                                </td>
                                                <td className="px-6 py-4 font-mono text-xs text-text-muted">
                                                    {student.nisn}
                                                </td>
                                                <td className="px-6 py-4 text-xs text-text-muted">
                                                    {sub?.submitted_at ? formatDate(sub.submitted_at) : '-'}
                                                </td>
                                                <td className="px-6 py-4">
                                                    {getStatusBadge(student.id)}
                                                </td>
                                                <td className="px-6 py-4 text-right">
                                                    <button
                                                        onClick={() => selectStudent(student)}
                                                        className="rounded-lg bg-surface-hover px-3 py-1.5 text-xs font-medium text-text hover:bg-primary-500 hover:text-white transition-colors"
                                                    >
                                                        Periksa
                                                    </button>
                                                </td>
                                            </tr>
                                        );
                                    })}
                                </tbody>
                            </table>
                        </div>

                        {filteredStudents.length === 0 && (
                            <div className="px-5 py-12 text-center">
                                <Search className="mx-auto h-8 w-8 text-text-muted opacity-40" />
                                <p className="mt-3 text-sm font-bold text-text-light">Siswa tidak ditemukan</p>
                                <p className="mt-1 text-xs text-text-muted">Coba nama/NISN lain atau ubah filter penilaian.</p>
                                <button
                                    type="button"
                                    onClick={() => {
                                        setSearchQuery('');
                                        setStudentFilter('all');
                                    }}
                                    className="mt-4 rounded-xl bg-primary-500/10 px-4 py-2 text-xs font-bold text-primary-300"
                                >
                                    Tampilkan Semua Siswa
                                </button>
                            </div>
                        )}
                    </div>

                    {/* Right Column: Grading Form Panel (1/3 width) */}
                    {!isQuickMode && (
                        <div
                            className={cn(
                                'scroll-mt-20 lg:col-span-2',
                                selectedStudent && 'max-lg:fixed max-lg:inset-0 max-lg:z-50 max-lg:overflow-y-auto max-lg:bg-slate-50 dark:max-lg:bg-slate-950 max-lg:px-2 max-lg:pb-3 max-lg:pt-[calc(0.5rem+env(safe-area-inset-top))]',
                            )}
                            id="grading-panel"
                            data-testid={selectedStudent ? 'grading-overlay' : undefined}
                            data-hide-mobile-dock={selectedStudent ? 'true' : undefined}
                        >
                        {selectedStudent && (
                            <div className="sticky top-0 z-30 mb-2 flex items-center gap-1.5 rounded-xl border border-border/60 bg-surface/95 p-1.5 shadow-lg backdrop-blur-xl lg:hidden">
                                <button
                                    type="button"
                                    onClick={() => moveToStudent(previousStudent)}
                                    disabled={isScanSessionActive || !previousStudent || form.processing}
                                    aria-label="Siswa sebelumnya"
                                    className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-background/70 text-text-light disabled:opacity-30"
                                >
                                    <ChevronLeft className="h-4 w-4" />
                                </button>
                                <div className="min-w-0 flex-1 text-center">
                                    <p className="truncate text-xs font-black text-text-light">{selectedStudent.full_name}</p>
                                    <p className="text-[9px] font-semibold leading-tight text-text-muted">
                                        {selectedStudentIndex >= 0
                                            ? `${selectedStudentIndex + 1} dari ${filteredStudents.length} siswa tersaring`
                                            : 'Siswa dipilih dari Scanner QR'}
                                    </p>
                                </div>
                                <button
                                    type="button"
                                    onClick={() => moveToStudent(nextStudent)}
                                    disabled={isScanSessionActive || !nextStudent || form.processing}
                                    aria-label="Siswa berikutnya"
                                    className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-background/70 text-text-light disabled:opacity-30"
                                >
                                    <ChevronRight className="h-4 w-4" />
                                </button>
                                <button
                                    type="button"
                                    onClick={() => setSelectedStudent(null)}
                                    aria-label="Tutup penilaian"
                                    className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-rose-500/10 text-rose-300"
                                >
                                    <X className="h-4 w-4" />
                                </button>
                            </div>
                        )}
                        {selectedStudent ? (assignment.assignment_type === 'worksheet' ? (
                            <WorksheetGradingPanel studentName={selectedStudent.full_name} items={assignment.worksheet_items || []} submission={submission} onClose={() => setSelectedStudent(null)} />
                        ) : assignment.assignment_type === 'quiz' ? (
                            <div className="glass rounded-2xl p-6 space-y-5 border border-emerald-500/25 lg:sticky lg:top-20">
                                <div className="flex items-start justify-between gap-3">
                                    <div>
                                        <h3 className="text-lg font-bold text-text-light">Hasil Quiz</h3>
                                        <p className="text-xs text-text-muted mt-0.5">Siswa: {selectedStudent.full_name}</p>
                                    </div>
                                    <button onClick={() => setSelectedStudent(null)} className="hidden p-1.5 rounded-lg hover:bg-surface-hover text-text-muted lg:block"><X className="h-4 w-4" /></button>
                                </div>
                                <div className="h-px bg-border/40" />
                                {submission ? (
                                    <div className="space-y-3 text-sm">
                                        <div className="flex items-center justify-between rounded-xl bg-surface/60 p-4 border border-border/30">
                                            <span className="text-xs text-text-muted">Skor (grade)</span>
                                            <span className="font-black text-emerald-400">{submission.grade ?? 0}%</span>
                                        </div>
                                        <div className="flex items-center justify-between rounded-xl bg-surface/60 p-4 border border-border/30">
                                            <span className="text-xs text-text-muted">Poin leaderboard</span>
                                            <span className="font-bold text-text-light">{(submission as any).points ?? '-'}</span>
                                        </div>
                                        <div className="flex items-center justify-between rounded-xl bg-surface/60 p-4 border border-border/30">
                                            <span className="text-xs text-text-muted">Attempt</span>
                                            <span className="font-bold text-text-light">{(submission as any).attempt_number ?? 1}</span>
                                        </div>
                                        <div className="flex items-center justify-between rounded-xl bg-surface/60 p-4 border border-border/30">
                                            <span className="text-xs text-text-muted">Status</span>
                                            <span className="font-bold text-text-light capitalize">{submission.status}</span>
                                        </div>
                                        <Link
                                            href={route('quiz.leaderboard.teacher', assignment.id)}
                                            className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-emerald-500 px-4 py-2.5 text-xs font-bold text-white hover:bg-emerald-400 transition-colors"
                                        >
                                            <Award className="h-4 w-4" /> Leaderboard Quiz
                                        </Link>
                                    </div>
                                ) : (
                                    <p className="text-xs text-text-muted">Siswa ini belum mengerjakan quiz.</p>
                                )}
                            </div>
                        ) : (
                            <div className="glass space-y-3 rounded-xl border border-primary-500/25 p-3 sm:space-y-5 sm:rounded-2xl sm:p-6 lg:sticky lg:top-20 lg:max-h-[calc(100dvh-6rem)] lg:overflow-y-auto lg:scrollbar-thin">
                                <div className="flex items-start justify-between gap-3">
                                    <div className="min-w-0">
                                        <h3 className="text-base font-bold text-text-light sm:text-lg">Penilaian Tugas</h3>
                                        <p className="truncate text-[11px] text-text-muted sm:mt-0.5 sm:text-xs">Siswa: {selectedStudent.full_name}</p>
                                    </div>
                                    <div className="hidden shrink-0 items-center gap-1.5 lg:flex">
                                        <button
                                            type="button"
                                            onClick={() => moveToStudent(previousStudent)}
                                            disabled={isScanSessionActive || !previousStudent || form.processing}
                                            aria-label="Siswa sebelumnya"
                                            className="rounded-lg bg-surface-hover p-2 text-text-light disabled:opacity-30"
                                        >
                                            <ChevronLeft className="h-4 w-4" />
                                        </button>
                                        <span className="min-w-16 text-center text-[10px] font-semibold text-text-muted">
                                            {selectedStudentIndex >= 0 ? `${selectedStudentIndex + 1} / ${filteredStudents.length}` : 'QR Buku'}
                                        </span>
                                        <button
                                            type="button"
                                            onClick={() => moveToStudent(nextStudent)}
                                            disabled={isScanSessionActive || !nextStudent || form.processing}
                                            aria-label="Siswa berikutnya"
                                            className="rounded-lg bg-surface-hover p-2 text-text-light disabled:opacity-30"
                                        >
                                            <ChevronRight className="h-4 w-4" />
                                        </button>
                                        <button
                                            type="button"
                                            onClick={() => setSelectedStudent(null)}
                                            aria-label="Tutup penilaian"
                                            className="rounded-lg p-2 text-text-muted hover:bg-rose-500/10 hover:text-rose-300"
                                        >
                                            <X className="h-4 w-4" />
                                        </button>
                                    </div>
                                </div>

                                <div className="h-px bg-border/40" />

                                {/* Render Submission Content */}
                                {submission ? (
                                    <div className="space-y-3.5 bg-surface/50 rounded-xl p-4 border border-border/30 text-xs">
                                        <div className="flex items-center justify-between border-b border-border/30 pb-2">
                                            <span className="font-bold text-text-muted uppercase tracking-wider">Hasil Kerja</span>
                                            {submission.submitted_at && (
                                                <span className="text-[10px] text-text-muted">{formatDate(submission.submitted_at)}</span>
                                            )}
                                        </div>

                                        {assignment.submission_type === 'text' && (
                                            <div className="whitespace-pre-line text-text leading-relaxed bg-surface/30 p-2.5 rounded-lg border border-border/20">
                                                {submission.submission_text || 'Tidak ada teks jawaban.'}
                                            </div>
                                        )}

                                        {assignment.submission_type === 'link' && (
                                            <div>
                                                <p className="text-text-muted mb-1">Tautan Web:</p>
                                                <a 
                                                    href={submission.submission_link || '#'} 
                                                    target="_blank" 
                                                    rel="noopener noreferrer"
                                                    className="inline-flex items-center gap-1 text-primary-300 font-semibold hover:underline"
                                                >
                                                    Buka Tautan Tugas <ExternalLink className="h-3.5 w-3.5" />
                                                </a>
                                            </div>
                                        )}

                                        {assignment.submission_type === 'file' && (
                                            <div>
                                                <p className="text-text-muted mb-2">Berkas Dikirim:</p>
                                                <SubmissionFile submission={submission} />
                                            </div>
                                        )}

                                        {assignment.submission_type === 'physical' && (
                                            <p className="text-text-light italic">
                                                Tugas dikumpulkan secara fisik di kelas.
                                            </p>
                                        )}
                                    </div>
                                ) : assignment.submission_type === 'physical' ? (
                                    <div className="flex flex-col items-center rounded-lg border border-emerald-500/20 bg-emerald-500/5 px-3 py-3 text-center text-[11px] leading-snug text-text-muted sm:rounded-xl sm:p-4 sm:py-5 sm:text-xs">
                                        <CheckCircle className="mb-1 h-5 w-5 text-emerald-400 sm:mb-2 sm:h-6 sm:w-6" />
                                        <p className="font-semibold text-emerald-300">Siap Dinilai dari Buku Fisik</p>
                                        <p className="mt-0.5 sm:mt-1">Periksa buku siswa, lalu masukkan nilai di bawah.</p>
                                    </div>
                                ) : (
                                    <div className="flex flex-col items-center py-6 text-center text-text-muted bg-surface/30 rounded-xl p-4 border border-border/30 text-xs">
                                        <AlertCircle className="mb-2 h-6 w-6 opacity-30" />
                                        <p className="font-semibold">Belum Mengumpulkan</p>
                                        <p className="mt-1">Siswa ini belum mengumpulkan tugasnya via sistem.</p>
                                    </div>
                                )}

                                {/* Grading Inputs */}
                                <form
                                    onSubmit={handleSubmitGrade}
                                    className="space-y-3 max-lg:pb-[calc(4.75rem+env(safe-area-inset-bottom))] sm:space-y-4"
                                >
                                    {/* Remedial Helper Box */}
                                    {selectedStudent && (() => {
                                        const sub = submissions[selectedStudent.id];
                                        const isUnderKktp = sub?.grade !== null && sub?.grade !== undefined && Number(sub.grade) < kktpThreshold;
                                        const isAlreadyRemedial = Boolean(sub?.is_remedial || (sub?.original_grade !== null && sub?.original_grade !== undefined));
                                        if (!isUnderKktp && !isAlreadyRemedial) return null;

                                        const initialScore = sub?.original_grade ?? sub?.grade ?? '-';

                                        return (
                                            <div className="rounded-xl border border-amber-500/30 bg-amber-500/10 p-3 text-xs">
                                                <div className="flex items-center justify-between">
                                                    <span className="font-bold text-amber-300 flex items-center gap-1.5">
                                                        <Sparkles className="h-3.5 w-3.5 text-amber-400" />
                                                        {isAlreadyRemedial ? 'Data Remedial Siswa' : 'Tindak Lanjut Remedial Siswa'}
                                                    </span>
                                                    <span className="rounded bg-amber-500/20 px-2 py-0.5 font-mono text-[11px] font-black text-amber-200 border border-amber-500/30">
                                                        Nilai Awal: {initialScore}
                                                    </span>
                                                </div>
                                                <p className="mt-1 text-[11px] leading-snug text-amber-100/90">
                                                    {isAlreadyRemedial
                                                        ? `Siswa telah menyelesaikan perbaikan (${sub?.remedial_count ?? 1}x remedial). Nilai saat ini diakui untuk rapor.`
                                                        : `Nilai awal siswa belum tuntas KKTP (${kktpThreshold}). Masukkan nilai rapor yang Anda tentukan setelah siswa menjalani perbaikan.`}
                                                </p>
                                                <div className="mt-2.5 flex flex-wrap items-center gap-1.5">
                                                    <span className="text-[10px] font-semibold text-amber-200/70">Preset Cepat:</span>
                                                    <button
                                                        type="button"
                                                        onClick={() => {
                                                            form.setData('grade', String(kktpThreshold));
                                                            form.setData('is_remedial', true);
                                                        }}
                                                        className="rounded-lg border border-amber-500/30 bg-amber-500/20 px-2 py-1 text-[10px] font-bold text-amber-200 hover:bg-amber-500/30 transition-all"
                                                    >
                                                        KKTP ({kktpThreshold})
                                                    </button>
                                                    <button
                                                        type="button"
                                                        onClick={() => {
                                                            form.setData('grade', '80');
                                                            form.setData('is_remedial', true);
                                                        }}
                                                        className="rounded-lg border border-amber-400 bg-amber-500/40 px-2.5 py-1 text-[10px] font-black text-amber-100 hover:bg-amber-500/50 shadow-xs transition-all"
                                                    >
                                                        ⭐ Standar Rapor (80)
                                                    </button>
                                                    <button
                                                        type="button"
                                                        onClick={() => {
                                                            form.setData('grade', String(kktpThreshold + 5));
                                                            form.setData('is_remedial', true);
                                                        }}
                                                        className="rounded-lg border border-amber-500/30 bg-amber-500/20 px-2 py-1 text-[10px] font-bold text-amber-200 hover:bg-amber-500/30 transition-all"
                                                    >
                                                        KKTP + 5 ({kktpThreshold + 5})
                                                    </button>
                                                </div>
                                            </div>
                                        );
                                    })()}

                                    <div>
                                        <div className="mb-1 flex items-center justify-between sm:mb-1.5">
                                            <label className="text-[11px] font-medium text-text-muted sm:text-xs">
                                                Nilai (Maksimal: {assignment.max_points})
                                            </label>
                                        </div>
                                        <input
                                            type="number"
                                            value={form.data.grade}
                                            onChange={(e) => form.setData('grade', e.target.value)}
                                            placeholder="Masukkan skor..."
                                            className="w-full rounded-lg border border-border bg-surface px-3 py-1.5 text-sm font-bold text-text-light focus:border-emerald-500 focus:outline-none sm:rounded-xl sm:px-4 sm:py-2"
                                            required
                                            min="0"
                                            max={assignment.max_points}
                                        />
                                        {errors.grade && <p className="mt-1 text-xs text-rose-400">{errors.grade}</p>}

                                        {/* Quick Score Presets */}
                                        <div className="mt-1.5 flex flex-wrap justify-center gap-1 sm:mt-2 sm:gap-1.5">
                                            {[50, 60, 70, 75, 80, 85, 90, 95, 100]
                                                .filter(p => p <= assignment.max_points)
                                                .map(point => {
                                                    const pointKktp = evaluateKktp(point, kktpThreshold);
                                                    return (
                                                        <button
                                                            key={point}
                                                            type="button"
                                                            onClick={() => form.setData('grade', String(point))}
                                                            className={cn(
                                                                "rounded-md border px-2 py-0.5 text-[11px] font-bold transition-all sm:rounded-lg sm:px-2.5 sm:py-1 sm:text-xs",
                                                                form.data.grade === String(point)
                                                                    ? "bg-emerald-500 text-white border-emerald-400 shadow-xs"
                                                                    : point < kktpThreshold
                                                                        ? "bg-rose-500/10 text-rose-300 border-rose-500/30 hover:bg-rose-500/20"
                                                                        : "bg-surface-hover/60 text-text-light border-border/40 hover:bg-surface-hover"
                                                            )}
                                                        >
                                                            {point}
                                                        </button>
                                                    );
                                                })}
                                        </div>

                                        {/* Remedial Flag Checkbox */}
                                        <label className="mt-2.5 flex items-center gap-2 cursor-pointer select-none text-[11px] text-text-muted hover:text-text-light">
                                            <input
                                                type="checkbox"
                                                checked={form.data.is_remedial}
                                                onChange={(e) => form.setData('is_remedial', e.target.checked)}
                                                className="rounded border-border text-amber-500 focus:ring-amber-400 bg-surface h-4 w-4"
                                            />
                                            <span>
                                                Tandai sebagai <strong className="text-amber-300">Nilai Remedial</strong> (tercatat di Rapor & Berita Acara)
                                            </span>
                                        </label>

                                        {/* Live KKTP Feedback */}
                                        {form.data.grade !== '' && (
                                            (() => {
                                                const liveKktp = evaluateKktp(Number(form.data.grade), kktpThreshold);
                                                if (!liveKktp) return null;
                                                return (
                                                    <div className={cn(
                                                        "mt-2.5 rounded-xl p-3 border text-xs leading-relaxed transition-all animate-in fade-in duration-150",
                                                        liveKktp.isTuntas
                                                            ? "bg-emerald-500/10 border-emerald-500/25 text-emerald-300"
                                                            : "bg-rose-500/10 border-rose-500/25 text-rose-300"
                                                    )}>
                                                        <div className="flex items-center justify-between font-bold">
                                                            <span className="flex items-center gap-1.5">
                                                                <span className={cn("h-2 w-2 rounded-full", liveKktp.dotClass)} />
                                                                {liveKktp.predikat} ({form.data.grade})
                                                            </span>
                                                            <span className={cn(
                                                                "text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-md font-black",
                                                                liveKktp.isTuntas ? "bg-emerald-500/20 text-emerald-200" : "bg-rose-500/20 text-rose-200"
                                                            )}>
                                                                {liveKktp.isTuntas ? 'Tuntas TP' : 'Perlu Remedial'}
                                                            </span>
                                                        </div>
                                                        <p className="mt-1 font-medium text-text-light">{liveKktp.ketercapaian}</p>
                                                        <p className="mt-0.5 text-[11px] opacity-80">
                                                            <strong>Tindak Lanjut:</strong> {liveKktp.tindakLanjut}
                                                        </p>
                                                    </div>
                                                );
                                            })()
                                        )}
                                    </div>

                                    <div>
                                        <label htmlFor="assignment-feedback" className="mb-1 flex items-center gap-1 text-[11px] font-medium text-text-muted sm:mb-1.5 sm:gap-1.5 sm:text-xs">
                                            <Sparkles className="h-3 w-3 text-amber-400 sm:h-3.5 sm:w-3.5" /> Catatan / Feedback Guru
                                        </label>
                                        <textarea
                                            id="assignment-feedback"
                                            value={form.data.feedback}
                                            onChange={(e) => {
                                                form.setData('feedback', e.target.value);
                                                form.clearErrors('feedback');
                                            }}
                                            placeholder="Tuliskan catatan perbaikan atau saran untuk siswa..."
                                            maxLength={2000}
                                            rows={2}
                                            className="w-full rounded-lg border border-border bg-surface px-3 py-1.5 text-sm leading-snug text-text focus:border-emerald-500 focus:outline-none sm:rounded-xl sm:px-3.5 sm:py-2 sm:text-xs"
                                        />
                                        {form.errors.feedback && <p role="alert" className="mt-1 text-xs text-rose-400">{form.errors.feedback}</p>}
                                        {submission && assignment.submission_type !== 'physical' && !form.errors.feedback && (
                                            <p className="mt-1 text-[11px] leading-snug text-text-muted">
                                                {submission.status === 'revision_requested'
                                                    ? 'Revisi sudah diminta. Menunggu kiriman ulang siswa.'
                                                    : 'Catatan wajib diisi untuk meminta revisi.'}
                                            </p>
                                        )}

                                        {/* Quick Feedback Presets */}
                                        <div className="mt-1.5 grid grid-cols-1 gap-1 min-[360px]:grid-cols-2 sm:mt-2 sm:gap-1.5">
                                            {[
                                                "Tulisan perlu dirapikan agar lebih mudah dibaca ya. ✍️",
                                                "Pekerjaan baik, pertahankan! 👍",
                                                "Sudah baik, tingkatkan lagi ya! 💪",
                                                "Lengkap & tepat waktu! ✨"
                                            ].map((presetNote) => (
                                                <button
                                                    key={presetNote}
                                                    type="button"
                                                    onClick={() => {
                                                        form.setData('feedback', presetNote);
                                                        form.clearErrors('feedback');
                                                    }}
                                                    className={cn(
                                                        "flex min-h-8 w-full items-center rounded-md border px-2 py-1 text-left text-[10px] font-medium leading-tight whitespace-normal transition-all sm:min-h-9 sm:py-1.5 sm:text-[11px] sm:leading-snug",
                                                        form.data.feedback === presetNote
                                                            ? "bg-amber-500/20 text-amber-300 border-amber-500/40"
                                                            : "bg-surface/50 text-text-muted border-border/30 hover:bg-surface-hover hover:text-text-light"
                                                    )}
                                                >
                                                    {presetNote}
                                                </button>
                                            ))}
                                        </div>
                                    </div>


                                    <div className="flex flex-col gap-1.5 pt-1 max-lg:fixed max-lg:inset-x-0 max-lg:bottom-0 max-lg:z-[60] max-lg:border-t max-lg:border-border/60 max-lg:bg-surface/95 max-lg:px-2 max-lg:pt-2 max-lg:pb-[calc(0.5rem+env(safe-area-inset-bottom))] max-lg:shadow-[0_-8px_20px_rgba(0,0,0,0.3)] max-lg:backdrop-blur-xl sm:gap-2 sm:pt-2">
                                        <div className="flex gap-1.5 sm:gap-2">
                                            <button
                                                type="button"
                                                onClick={() => setSelectedStudent(null)}
                                                className="hidden flex-1 rounded-xl bg-surface hover:bg-surface-hover py-2.5 text-xs font-semibold text-text transition-colors lg:block"
                                            >
                                                Tutup
                                            </button>
                                            <button
                                                type="submit"
                                                disabled={form.processing}
                                                className="min-h-10 flex-1 rounded-lg border border-amber-400 bg-amber-500 px-2 py-2 text-[11px] font-bold text-slate-950 shadow-sm shadow-amber-500/20 transition-colors hover:bg-amber-400 disabled:opacity-40 sm:min-h-11 sm:rounded-xl sm:px-3 sm:py-2.5 sm:text-xs"
                                            >
                                                {form.processing ? 'Menyimpan...' : 'Simpan'}
                                            </button>
                                            {submission && assignment.submission_type !== 'physical' && (
                                                <button
                                                    type="button"
                                                    onClick={handleRequestRevision}
                                                    disabled={form.processing}
                                                    className="min-h-10 flex-1 whitespace-nowrap rounded-lg border border-violet-400/60 bg-violet-600 px-2 py-2 text-[11px] font-bold text-white shadow-sm shadow-violet-500/20 transition-colors hover:bg-violet-500 disabled:opacity-40 sm:min-h-11 sm:rounded-xl sm:px-3 sm:py-2.5 sm:text-xs"
                                                >
                                                    Minta Revisi
                                                </button>
                                            )}
                                        </div>
                                    </div>
                                </form>
                            </div>
                        )) : (
                            <div className="glass rounded-2xl p-8 text-center text-text-muted py-16">
                                <FileText className="mb-3 h-10 w-10 opacity-30 mx-auto" />
                                <h4 className="font-semibold">Pilih Siswa</h4>
                                <p className="text-xs mt-1">Klik tombol Periksa di samping nama siswa untuk menilai tugas mereka.</p>
                            </div>
                        )}
                    </div>
                )}
            </div>

            {/* Floating Save Bar in Quick Mode */}
            {isQuickMode && (
                <div className="fixed inset-x-0 bottom-0 z-40 border-t border-border/60 bg-surface/95 px-4 py-3 shadow-[0_-8px_30px_rgba(0,0,0,0.35)] backdrop-blur-xl animate-in slide-in-from-bottom duration-200">
                    <div className="mx-auto flex max-w-5xl items-center justify-between gap-3">
                        <div className="min-w-0">
                            <p className="text-xs font-bold text-text-light flex items-center gap-1.5 truncate">
                                <span className="h-2 w-2 rounded-full bg-amber-400 animate-pulse shrink-0" />
                                Mode Input Cepat Aktif
                            </p>
                            <p className="text-[11px] text-text-muted truncate">
                                {modifiedCount > 0 ? (
                                    <span className="font-semibold text-amber-300">{modifiedCount} nilai telah diubah (belum tersimpan)</span>
                                ) : (
                                    'Gunakan Enter atau Panah Bawah untuk lanjut ke siswa berikutnya'
                                )}
                            </p>
                        </div>
                        <div className="flex items-center gap-2 shrink-0">
                            <button
                                type="button"
                                onClick={() => setIsQuickMode(false)}
                                disabled={isSavingBatch}
                                className="rounded-xl border border-border/60 bg-surface px-3 py-2 text-xs font-semibold text-text hover:bg-surface-hover"
                            >
                                Selesai
                            </button>
                            <button
                                type="button"
                                onClick={handleSaveBatch}
                                disabled={isSavingBatch || modifiedCount === 0}
                                className="inline-flex items-center gap-2 rounded-xl bg-amber-500 px-4 py-2 text-xs font-bold text-slate-950 shadow-lg shadow-amber-500/20 hover:bg-amber-400 disabled:opacity-40 transition-all"
                            >
                                <Save className="h-4 w-4" />
                                <span>{isSavingBatch ? 'Menyimpan...' : `Simpan Semua ${modifiedCount > 0 ? `(${modifiedCount})` : ''}`}</span>
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    </AuthenticatedLayout>
);
}