import { Link, Head } from '@inertiajs/react';
import { useEffect, useMemo, useState } from 'react';
import { FileSignature, Clock, AlertCircle, ArrowRight, CheckCircle2, ClipboardCheck, ClipboardCopy, LockKeyhole, Search, Users, X } from 'lucide-react';
import { toast } from 'sonner';
import AuthenticatedLayout from '@/layouts/AuthenticatedLayout';
import StudentLayout from '@/layouts/StudentLayout';
import PeriodSelector from '@/components/PeriodSelector';
import WhatsAppShareButton from '@/components/WhatsAppShareButton';
import { formatDate, cn } from '@/lib/utils';
import { getCategoryInfo } from '@/lib/kktp';
import type { PageProps, AcademicYearWithSemesters } from '@/types';

interface Assignment {
    id: number;
    title: string;
    due_date: string;
    effective_due_at?: string | null;
    access?: { status: 'open' | 'locked' | 'closed'; message: string };
    submission_type: string;
    category?: string;
    kktp?: number;
    classes?: Array<{ id: number; name: string }>;
    submission_progress?: SubmissionProgressSummary;
    material: {
        id: number;
        title: string;
        status: 'draft' | 'published';
        classes?: Array<{ id: number; name: string }>;
        synced_class: { name: string } | null;
        subject: { name: string } | null;
    };
}

interface SubmissionProgressSummary {
    submitted_students: number;
    total_students: number;
    missing_students: number;
    percentage: number;
}

interface SubmissionProgressStudent {
    id: number;
    nisn: string | null;
    full_name: string;
    class_id: number;
    class_name: string;
}

interface SubmissionProgressClass {
    id: number;
    name: string;
    submitted_students: number;
    total_students: number;
    missing_students: number;
}

interface SubmissionProgressDetail {
    summary: SubmissionProgressSummary;
    classes: SubmissionProgressClass[];
    missing_students: SubmissionProgressStudent[];
    submitted_students: SubmissionProgressStudent[];
}

interface Submission {
    id: number;
    assignment_id: number;
    status: string;
    grade?: number;
    is_late?: boolean;
}

interface Props extends PageProps {
    assignments: Assignment[];
    submissions?: Record<number, Submission>;
    periods?: AcademicYearWithSemesters[];
    selectedPeriod?: number | null;
}

export default function AssignmentIndex({ auth, assignments, submissions, periods, selectedPeriod }: Props) {
    const isGuru = auth.user.role === 'guru' || auth.user.role === 'admin';
    const [progressAssignment, setProgressAssignment] = useState<Assignment | null>(null);

    const renderClassNames = (assignment: Assignment) => {
        if (assignment.classes && assignment.classes.length > 0) {
            return assignment.classes.map((classItem) => classItem.name).join(', ');
        }
        if (assignment.material.classes && assignment.material.classes.length > 0) {
            return assignment.material.classes.map((c) => c.name).join(', ');
        }
        return assignment.material.synced_class?.name ?? '-';
    };

    const getStatusLabel = (assignment: Assignment) => {
        const sub = submissions?.[assignment.id];
        if (sub) {
            switch (sub.status) {
                case 'graded':
                    return <span className="inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-1 text-[10px] font-bold text-emerald-300 ring-1 ring-inset ring-emerald-500/20">Dinilai{sub.grade !== undefined ? ` · ${sub.grade}` : ''}{sub.is_late ? ' · Terlambat' : ''}</span>;
                case 'pending':
                    return <span className="inline-flex items-center rounded-full bg-amber-500/10 px-2 py-1 text-[10px] font-bold text-amber-300 ring-1 ring-inset ring-amber-500/20">Menunggu Penilaian{sub.is_late ? ' · Terlambat' : ''}</span>;
                case 'revision_requested':
                    return <span className="inline-flex items-center rounded-full bg-orange-500/10 px-2 py-1 text-[10px] font-bold text-orange-300 ring-1 ring-inset ring-orange-500/20">Perlu Revisi</span>;
                case 'late':
                    return <span className="inline-flex items-center rounded-full bg-rose-500/10 px-2 py-1 text-[10px] font-bold text-rose-300 ring-1 ring-inset ring-rose-500/20">Terlambat</span>;
                case 'physical_submitted':
                    return <span className="inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-[10px] font-bold text-blue-300 ring-1 ring-inset ring-blue-500/20">Tugas Fisik Diterima</span>;
            }
        }

        if (assignment.access && assignment.access.status !== 'open') return <span className="inline-flex items-center gap-1 rounded-full bg-amber-500/10 px-2 py-1 text-[10px] font-bold text-amber-300 ring-1 ring-inset ring-amber-500/20"><LockKeyhole className="h-3 w-3" /> {assignment.access.status === 'closed' ? 'Ditutup' : 'Menunggu Jadwal'}</span>;
        if (assignment.submission_type === 'physical') return <span className="inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-[10px] font-bold text-blue-300 ring-1 ring-inset ring-blue-500/20">Dikerjakan di Kelas</span>;

        const isLate = new Date(assignment.effective_due_at || assignment.due_date) < new Date();
        if (isLate) return <span className="inline-flex items-center rounded-full bg-rose-500/10 px-2 py-1 text-[10px] font-bold text-rose-300 ring-1 ring-inset ring-rose-500/20">Belum Mengumpulkan</span>;
        return <span className="inline-flex items-center rounded-full bg-surface-hover px-2 py-1 text-[10px] font-bold text-text-muted ring-1 ring-inset ring-border/50">Belum Dikerjakan</span>;
    };

    const getStudentActionLabel = (assignment: Assignment) => {
        const status = submissions?.[assignment.id]?.status;
        if (status === 'graded') return 'Lihat Nilai';
        if (status === 'revision_requested') return 'Kirim Revisi';
        if (assignment.access && assignment.access.status !== 'open') return 'Lihat Materi';
        if (assignment.submission_type === 'physical') return 'Lihat Instruksi';
        if (status) return 'Lihat Tugas';
        return 'Kerjakan Tugas';
    };

    const renderSubmissionProgress = (assignment: Assignment, compact = false) => {
        const progress = assignment.submission_progress ?? {
            submitted_students: 0,
            total_students: 0,
            missing_students: 0,
            percentage: 0,
        };

        const isComplete = progress.total_students > 0 && progress.missing_students === 0;

        return (
            <button
                type="button"
                onClick={() => setProgressAssignment(assignment)}
                className={`group w-full rounded-xl text-left transition-colors hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 ${compact ? 'min-w-0 p-2' : 'min-w-[150px] p-2'}`}
                aria-label={`Lihat detail pengumpulan ${assignment.title}`}
            >
                <div className="flex items-center justify-between gap-1.5">
                    <span className={compact ? 'text-[11px] font-bold text-text-light' : 'text-sm font-bold text-text-light'}>
                        {progress.submitted_students}/{progress.total_students} siswa
                    </span>
                    {isComplete ? (
                        <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-semibold text-emerald-300 ring-1 ring-inset ring-emerald-500/30 shadow-[0_0_8px_rgba(16,185,129,0.15)]">
                            <CheckCircle2 className="h-3 w-3 text-emerald-400 shrink-0" />
                            <span>Semua terkumpul</span>
                        </span>
                    ) : (
                        <span className="text-[10px] font-medium text-amber-400 group-hover:text-amber-300">
                            · {progress.missing_students} belum mengumpulkan
                        </span>
                    )}
                </div>
                <span className="mt-2 block h-1.5 overflow-hidden rounded-full bg-surface-hover ring-1 ring-inset ring-border/40">
                    <span
                        className={`block h-full rounded-full transition-all ${
                            isComplete
                                ? 'bg-gradient-to-r from-emerald-500 to-teal-400 shadow-[0_0_10px_rgba(16,185,129,0.4)]'
                                : 'bg-emerald-500'
                        }`}
                        style={{ width: `${progress.percentage}%` }}
                    />
                </span>
                <span className="mt-1 flex items-center justify-between gap-2 text-[9px] font-medium text-text-muted group-hover:text-primary-300">
                    <span className={isComplete ? 'font-semibold text-emerald-400/90' : ''}>
                        {progress.percentage}% terkumpul {isComplete ? '· Lengkap' : ''}
                    </span>
                    <span>Lihat nama siswa →</span>
                </span>
            </button>
        );
    };

    return (
        <>
            <Head title="Tugas Siswa" />

            <div className="space-y-6">
                <div className="flex items-center justify-between">
                    <div>
                        <p className="text-sm text-text-muted">
                            {isGuru 
                                ? `Total: ${assignments.length} Tugas terdaftar` 
                                : `Total: ${assignments.length} Tugas untuk dikerjakan`}
                        </p>
                    </div>
                </div>

                {isGuru ? (
                    <>
                        {/* Period Filter Toolbar */}
                        <div className="glass rounded-2xl p-2.5 sm:p-4">
                            <PeriodSelector
                                selectedYearId={selectedPeriod}
                                baseUrl="/assignments"
                                compact
                            />
                        </div>

                        {/* Desktop Table */}
                        <div className="hidden md:block glass overflow-hidden rounded-2xl">
                            <div className="overflow-x-auto">
                                <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">
                                            <th className="px-6 py-4">Tugas</th>
                                            <th className="px-6 py-4">Materi & Kelas</th>
                                            <th className="px-6 py-4">Tenggat Waktu</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">
                                        {assignments.length > 0 ? (
                                            assignments.map((assignment) => {
                                                const progress = assignment.submission_progress;
                                                const isComplete = (progress?.total_students ?? 0) > 0 && (progress?.missing_students ?? 1) === 0;
                                                const categoryInfo = getCategoryInfo(assignment.category);

                                                return (
                                                    <tr 
                                                        key={assignment.id} 
                                                        className={`transition-all ${
                                                            isComplete 
                                                                ? 'border-l-4 border-l-emerald-500 bg-emerald-500/[0.03] hover:bg-emerald-500/[0.06]' 
                                                                : 'hover:bg-surface-hover/30'
                                                        }`}
                                                    >
                                                        <td className="px-6 py-4">
                                                            <div className="flex items-center gap-3">
                                                                <div className={`flex h-9 w-9 items-center justify-center rounded-full transition-colors ${
                                                                    isComplete 
                                                                        ? 'bg-emerald-500/15 text-emerald-400 ring-1 ring-emerald-500/30 shadow-[0_0_10px_rgba(16,185,129,0.2)]' 
                                                                        : 'bg-primary-500/10 text-primary-400'
                                                                }`}>
                                                                    {isComplete ? <CheckCircle2 className="h-4.5 w-4.5" /> : <FileSignature className="h-4.5 w-4.5" />}
                                                                </div>
                                                                <div className="flex flex-col gap-1">
                                                                    <span className="font-semibold text-text-light">{assignment.title}</span>
                                                                    <div className="flex items-center gap-2">
                                                                        <span className={cn('px-1.5 py-0.5 rounded text-[10px] font-bold', categoryInfo.badgeClass)}>
                                                                            {categoryInfo.shortLabel}
                                                                        </span>
                                                                        <span className="text-[10px] font-medium text-cyan-400">
                                                                            KKTP: &ge;{assignment.kktp ?? 75}
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td className="px-6 py-4">
                                                            <div className="flex flex-col">
                                                                <span className="text-primary-300 font-medium">
                                                                    {assignment.material.title}
                                                                </span>
                                                                <span className="text-xs text-text-muted">
                                                                    {assignment.material.subject?.name} • Kelas {renderClassNames(assignment)}
                                                                </span>
                                                            </div>
                                                        </td>
                                                        <td className="px-6 py-4">
                                                            <div className="flex items-center gap-1.5 text-xs text-text-muted">
                                                                <Clock className="h-3.5 w-3.5" />
                                                                <span>{formatDate(assignment.due_date)}</span>
                                                            </div>
                                                        </td>
                                                        <td className="px-6 py-4 font-semibold">
                                                            {renderSubmissionProgress(assignment)}
                                                        </td>
                                                        <td className="px-6 py-4 text-right">
                                                            <div className="flex flex-wrap items-center justify-end gap-2.5">
                                                                {isComplete && (
                                                                    <span className="inline-flex items-center gap-1.5 rounded-xl bg-gradient-to-r from-emerald-500/20 via-emerald-500/10 to-teal-500/15 px-3 py-1.5 text-xs font-bold text-emerald-300 ring-1 ring-inset ring-emerald-500/30 shadow-[0_0_15px_rgba(16,185,129,0.2)]">
                                                                        <CheckCircle2 className="h-4 w-4 text-emerald-400 shrink-0 drop-shadow-[0_0_6px_rgba(16,185,129,0.6)]" />
                                                                        <span>Lengkap</span>
                                                                    </span>
                                                                )}
                                                                {assignment.material.status === 'published' && (
                                                                    <WhatsAppShareButton
                                                                        path={`/materials/${assignment.material.id}?assignment=${assignment.id}`}
                                                                        title={assignment.title}
                                                                        kind="tugas"
                                                                    />
                                                                )}
                                                                <Link
                                                                    href={`/assignments/${assignment.id}/review`}
                                                                    className={`inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium transition-all ${
                                                                        isComplete
                                                                            ? 'bg-surface hover:bg-emerald-500/15 hover:text-emerald-300 ring-1 ring-border/60'
                                                                            : 'bg-surface hover:bg-surface-hover'
                                                                    }`}
                                                                >
                                                                    Review
                                                                </Link>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                );
                                            })
                                        ) : (
                                            <tr>
                                                <td colSpan={5} className="px-6 py-12 text-center text-text-muted">
                                                    <div className="flex flex-col items-center">
                                                        <AlertCircle className="h-10 w-10 opacity-30 mb-3" />
                                                        <p className="font-medium text-base">Belum ada tugas</p>
                                                    </div>
                                                </td>
                                            </tr>
                                        )}
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        {/* Mobile Cards */}
                        <div className="grid grid-cols-1 gap-4 md:hidden">
                            {assignments.length > 0 ? (
                                assignments.map((assignment) => {
                                    const progress = assignment.submission_progress;
                                    const isComplete = (progress?.total_students ?? 0) > 0 && (progress?.missing_students ?? 1) === 0;
                                    const categoryInfo = getCategoryInfo(assignment.category);

                                    return (
                                        <div 
                                            key={assignment.id} 
                                            className={`glass flex flex-col gap-2.5 rounded-xl p-3.5 text-[10px] transition-all ${
                                                isComplete ? 'border-l-4 border-l-emerald-500 bg-emerald-500/[0.03] ring-1 ring-emerald-500/25' : ''
                                            }`}
                                        >
                                            <div className="flex items-start gap-2.5">
                                                <div className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition-colors ${
                                                    isComplete 
                                                        ? 'bg-emerald-500/15 text-emerald-400 ring-1 ring-emerald-500/30 shadow-[0_0_8px_rgba(16,185,129,0.2)]' 
                                                        : 'bg-primary-500/10 text-primary-400'
                                                }`}>
                                                    {isComplete ? <CheckCircle2 className="h-4 w-4" /> : <FileSignature className="h-4 w-4" />}
                                                </div>
                                                <div className="min-w-0 flex-1 pt-0.5">
                                                    <span className="block line-clamp-2 text-sm font-semibold leading-tight text-text-light">{assignment.title}</span>
                                                    <div className="mt-1 flex items-center gap-1.5 flex-wrap">
                                                        <span className={cn('px-1.5 py-0.5 rounded text-[9px] font-bold', categoryInfo.badgeClass)}>
                                                            {categoryInfo.shortLabel}
                                                        </span>
                                                        <span className="text-[9px] font-medium text-cyan-400">
                                                            KKTP &ge;{assignment.kktp ?? 75}
                                                        </span>
                                                    </div>
                                                </div>
                                                <Link
                                                    href={`/assignments/${assignment.id}/review`}
                                                    aria-label={`Review tugas ${assignment.title}`}
                                                    className={`inline-flex min-h-9 shrink-0 items-center gap-1.5 rounded-lg px-3 py-2 text-[11px] font-bold text-white shadow-sm transition-colors focus:outline-none focus-visible:ring-2 ${
                                                        isComplete 
                                                            ? 'bg-emerald-600 hover:bg-emerald-500 shadow-emerald-600/20 focus-visible:ring-emerald-400' 
                                                            : 'bg-primary-500 hover:bg-primary-400 shadow-primary-500/20 focus-visible:ring-primary-300'
                                                    }`}
                                                >
                                                    <ClipboardCheck className="h-3.5 w-3.5" />
                                                    Review
                                                </Link>
                                            </div>

                                            {isComplete && (
                                                <div className="flex items-center justify-between rounded-lg bg-gradient-to-r from-emerald-500/15 via-emerald-500/10 to-teal-500/15 px-3 py-1.5 ring-1 ring-inset ring-emerald-500/30 text-emerald-300">
                                                    <div className="flex items-center gap-1.5 font-bold text-[11px]">
                                                        <CheckCircle2 className="h-3.5 w-3.5 text-emerald-400 drop-shadow-[0_0_6px_rgba(16,185,129,0.6)]" />
                                                        <span>Semua Tugas Terkumpul</span>
                                                    </div>
                                                    <span className="font-semibold text-[10px] text-emerald-400">100% Lengkap</span>
                                                </div>
                                            )}

                                            <div className="border-b border-border/40 pb-2">
                                                <div className="flex min-w-0 items-start justify-between gap-2">
                                                    <span className="min-w-0 truncate text-[11px] font-semibold text-primary-300">
                                                        {assignment.material.title}
                                                    </span>
                                                    <span className="inline-flex shrink-0 items-center gap-1 rounded-full bg-surface/80 px-2 py-1 text-[10px] font-semibold text-text-light ring-1 ring-inset ring-border/50">
                                                        <Clock className="h-3 w-3 text-amber-400" />
                                                        {formatDate(assignment.due_date)}
                                                    </span>
                                                </div>
                                                <span className="mt-1 block break-words text-text-muted leading-snug">
                                                    {assignment.material.subject?.name ?? '-'} • Kelas {renderClassNames(assignment)}
                                                </span>
                                            </div>

                                            <div className="-mx-1 rounded-lg bg-surface/35">
                                                {renderSubmissionProgress(assignment, true)}
                                            </div>
                                            {assignment.material.status === 'published' && (
                                                <div className="flex justify-end border-t border-border/40 pt-2.5">
                                                    <WhatsAppShareButton
                                                        path={`/materials/${assignment.material.id}?assignment=${assignment.id}`}
                                                        title={assignment.title}
                                                        kind="tugas"
                                                    />
                                                </div>
                                            )}
                                        </div>
                                    );
                                })
                            ) : (
                                <div className="glass rounded-xl p-8 text-center text-text-muted">
                                    <div className="flex flex-col items-center">
                                        <AlertCircle className="h-8 w-8 opacity-30 mb-2" />
                                        <p className="font-medium text-sm">Belum ada tugas</p>
                                    </div>
                                </div>
                            )}
                        </div>
                    </>
                ) : (
                    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                        {assignments.length > 0 ? (
                            assignments.map((assignment) => (
                                <div
                                    key={assignment.id}
                                    className="glass group flex h-full flex-col rounded-2xl p-4 transition-all hover:border-primary-500/40 sm:p-5"
                                >
                                    <div className="flex items-start justify-between gap-3">
                                        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-primary-500/10 text-primary-400">
                                            <FileSignature className="h-4.5 w-4.5" />
                                        </div>
                                        {getStatusLabel(assignment)}
                                    </div>

                                    <h3 className="mt-3 line-clamp-2 text-base font-bold leading-snug text-text-light group-hover:text-primary-300 transition-colors">{assignment.title}</h3>
                                    <p className="mt-1 line-clamp-2 text-xs font-medium leading-relaxed text-primary-300">{assignment.material.title}</p>

                                    <div className="mt-4 flex flex-wrap items-center gap-x-3 gap-y-1.5 border-t border-border/40 pt-3 text-[11px] text-text-muted">
                                        <span className="font-medium">{assignment.material.subject?.name ?? 'Mata Pelajaran'}</span>
                                        <span className="inline-flex items-center gap-1 font-medium text-text">
                                            <Clock className="h-3.5 w-3.5 text-amber-400" />
                                            {formatDate(assignment.effective_due_at || assignment.due_date)}
                                        </span>
                                    </div>

                                    <div className="mt-auto flex flex-wrap items-center gap-2 pt-4">
                                        <Link
                                            href={`/materials/${assignment.material.id}?assignment=${assignment.id}`}
                                            className="inline-flex min-h-10 min-w-[140px] flex-1 items-center justify-center gap-2 rounded-xl bg-primary-500 px-3 py-2.5 text-xs font-bold text-white shadow-sm shadow-primary-500/20 transition-colors hover:bg-primary-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-300"
                                        >
                                            {getStudentActionLabel(assignment)}
                                            <ArrowRight className="h-4 w-4 shrink-0" />
                                        </Link>
                                        <WhatsAppShareButton
                                            path={`/materials/${assignment.material.id}?assignment=${assignment.id}`}
                                            title={assignment.title}
                                            kind="tugas"
                                        />
                                    </div>
                                </div>
                            ))
                        ) : (
                            <div className="col-span-full glass rounded-2xl p-12 text-center text-text-muted py-20">
                                <AlertCircle className="mb-3 h-12 w-12 opacity-30 mx-auto" />
                                <h4 className="font-semibold text-lg text-text-light">Belum Ada Tugas</h4>
                                <p className="text-sm mt-1">Hore! Belum ada tugas yang perlu dikerjakan saat ini.</p>
                            </div>
                        )}
                    </div>
                )}

                {progressAssignment && (
                    <SubmissionProgressModal
                        assignment={progressAssignment}
                        onClose={() => setProgressAssignment(null)}
                    />
                )}
            </div>
        </>
    );
}

function SubmissionProgressModal({ assignment, onClose }: { assignment: Assignment; onClose: () => void }) {
    const [detail, setDetail] = useState<SubmissionProgressDetail | null>(null);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState('');
    const [activeTab, setActiveTab] = useState<'missing' | 'submitted'>('missing');
    const [activeClass, setActiveClass] = useState<number | 'all'>('all');
    const [search, setSearch] = useState('');
    const [reloadKey, setReloadKey] = useState(0);

    useEffect(() => {
        const controller = new AbortController();
        const previousOverflow = document.body.style.overflow;
        document.body.style.overflow = 'hidden';

        const handleKeyDown = (event: KeyboardEvent) => {
            if (event.key === 'Escape') onClose();
        };
        window.addEventListener('keydown', handleKeyDown);

        setIsLoading(true);
        setError('');

        fetch(`/assignments/${assignment.id}/submission-progress`, {
            headers: { Accept: 'application/json' },
            signal: controller.signal,
        })
            .then(async (response) => {
                if (!response.ok) throw new Error('Detail pengumpulan tidak dapat dimuat.');
                return response.json() as Promise<SubmissionProgressDetail>;
            })
            .then(setDetail)
            .catch((fetchError: Error) => {
                if (fetchError.name !== 'AbortError') {
                    setError(fetchError.message);
                }
            })
            .finally(() => {
                if (!controller.signal.aborted) setIsLoading(false);
            });

        return () => {
            controller.abort();
            document.body.style.overflow = previousOverflow;
            window.removeEventListener('keydown', handleKeyDown);
        };
    }, [assignment.id, onClose, reloadKey]);

    const students = activeTab === 'missing'
        ? detail?.missing_students ?? []
        : detail?.submitted_students ?? [];

    const visibleStudents = useMemo(() => {
        const normalizedSearch = search.trim().toLocaleLowerCase('id-ID');

        return students.filter((student) => {
            const matchesClass = activeClass === 'all' || student.class_id === activeClass;
            const matchesSearch = !normalizedSearch
                || student.full_name.toLocaleLowerCase('id-ID').includes(normalizedSearch)
                || (student.nisn ?? '').includes(normalizedSearch);

            return matchesClass && matchesSearch;
        });
    }, [activeClass, search, students]);

    const groupedStudents = useMemo(() => {
        if (!detail) return [];

        return detail.classes
            .filter((classInfo) => activeClass === 'all' || classInfo.id === activeClass)
            .map((classInfo) => ({
                classInfo,
                students: visibleStudents.filter((student) => student.class_id === classInfo.id),
            }))
            .filter((group) => group.students.length > 0);
    }, [activeClass, detail, visibleStudents]);

    async function copyVisibleStudents() {
        if (visibleStudents.length === 0) return;

        const groupedText = groupedStudents.map(({ classInfo, students: classStudents }) => [
            `Kelas ${classInfo.name}`,
            ...classStudents.map((student, index) => `${index + 1}. ${student.full_name}`),
        ].join('\n')).join('\n\n');

        const label = activeTab === 'missing' ? 'Belum mengumpulkan' : 'Sudah mengumpulkan';
        const text = `${label} — ${assignment.title}\n\n${groupedText}`;

        try {
            await navigator.clipboard.writeText(text);
            toast.success(`${visibleStudents.length} nama berhasil disalin.`);
        } catch {
            toast.error('Daftar belum dapat disalin. Coba izinkan akses clipboard browser.');
        }
    }

    return (
        <div
            data-hide-mobile-dock="true"
            className="fixed inset-0 z-50 flex items-end justify-center bg-black/75 p-0 backdrop-blur-sm sm:items-center sm:p-4"
            role="dialog"
            aria-modal="true"
            aria-labelledby="submission-progress-title"
            onMouseDown={(event) => {
                if (event.target === event.currentTarget) onClose();
            }}
        >
            <div className="flex h-[calc(100dvh-1rem)] w-full max-w-4xl flex-col overflow-hidden rounded-t-3xl border border-border/60 bg-surface shadow-2xl sm:h-auto sm:max-h-[calc(100dvh-2rem)] sm:rounded-3xl">
                <div className="flex items-start justify-between gap-4 border-b border-border/50 px-5 py-4 sm:px-6">
                    <div className="min-w-0">
                        <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-primary-300">Detail Pengumpulan</p>
                        <h2 id="submission-progress-title" className="mt-1 truncate text-base font-bold text-text-light sm:text-lg">
                            {assignment.title}
                        </h2>
                        <p className="mt-0.5 truncate text-xs text-text-muted">{assignment.material.title}</p>
                    </div>
                    <button
                        type="button"
                        onClick={onClose}
                        className="shrink-0 rounded-xl p-2 text-text-muted transition-colors hover:bg-surface-hover hover:text-text-light"
                        aria-label="Tutup detail pengumpulan"
                    >
                        <X className="h-5 w-5" />
                    </button>
                </div>

                <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-6 sm:py-5">
                    {isLoading ? (
                        <div className="flex min-h-72 flex-col items-center justify-center text-text-muted">
                            <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary-400 border-t-transparent" />
                            <p className="mt-3 text-xs">Memuat daftar siswa…</p>
                        </div>
                    ) : error || !detail ? (
                        <div className="flex min-h-72 flex-col items-center justify-center text-center">
                            <AlertCircle className="h-10 w-10 text-rose-400" />
                            <p className="mt-3 text-sm font-semibold text-text-light">Detail belum berhasil dimuat</p>
                            <p className="mt-1 text-xs text-text-muted">{error}</p>
                            <button
                                type="button"
                                onClick={() => setReloadKey((key) => key + 1)}
                                className="mt-4 rounded-xl bg-primary-500 px-4 py-2 text-xs font-bold text-white hover:bg-primary-400"
                            >
                                Coba Lagi
                            </button>
                        </div>
                    ) : (
                        <div className="space-y-5">
                            <div className="grid grid-cols-3 gap-2 sm:gap-3">
                                <SummaryCard label="Siswa sasaran" value={detail.summary.total_students} icon={<Users className="h-4 w-4" />} tone="primary" />
                                <SummaryCard label="Sudah kumpul" value={detail.summary.submitted_students} icon={<CheckCircle2 className="h-4 w-4" />} tone="emerald" />
                                <SummaryCard label="Belum kumpul" value={detail.summary.missing_students} icon={<AlertCircle className="h-4 w-4" />} tone="amber" />
                            </div>

                            <div>
                                <div className="mb-2 flex items-center justify-between text-[10px] font-semibold text-text-muted">
                                    <span>Progres seluruh kelas</span>
                                    <span>{detail.summary.percentage}%</span>
                                </div>
                                <div className="h-2 overflow-hidden rounded-full bg-surface-hover ring-1 ring-inset ring-border/40">
                                    <div className="h-full rounded-full bg-emerald-500" style={{ width: `${detail.summary.percentage}%` }} />
                                </div>
                            </div>

                            <div className="flex gap-2 overflow-x-auto pb-1">
                                <ClassFilterButton active={activeClass === 'all'} onClick={() => setActiveClass('all')}>
                                    Semua Kelas
                                </ClassFilterButton>
                                {detail.classes.map((classInfo) => (
                                    <ClassFilterButton
                                        key={classInfo.id}
                                        active={activeClass === classInfo.id}
                                        onClick={() => setActiveClass(classInfo.id)}
                                    >
                                        {classInfo.name} · {classInfo.missing_students} belum
                                    </ClassFilterButton>
                                ))}
                            </div>

                            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                                <div className="inline-flex rounded-xl bg-surface-hover/70 p-1">
                                    <button
                                        type="button"
                                        onClick={() => setActiveTab('missing')}
                                        className={`rounded-lg px-3 py-2 text-[11px] font-bold transition-colors ${activeTab === 'missing' ? 'bg-amber-500 text-slate-950' : 'text-text-muted hover:text-text-light'}`}
                                    >
                                        Belum ({detail.summary.missing_students})
                                    </button>
                                    <button
                                        type="button"
                                        onClick={() => setActiveTab('submitted')}
                                        className={`rounded-lg px-3 py-2 text-[11px] font-bold transition-colors ${activeTab === 'submitted' ? 'bg-emerald-500 text-slate-950' : 'text-text-muted hover:text-text-light'}`}
                                    >
                                        Sudah ({detail.summary.submitted_students})
                                    </button>
                                </div>

                                <div className="flex gap-2">
                                    <label className="relative min-w-0 flex-1 sm:w-64">
                                        <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"
                                            value={search}
                                            onChange={(event) => setSearch(event.target.value)}
                                            placeholder="Cari nama atau NISN"
                                            className="w-full rounded-xl border border-border/60 bg-surface-hover py-2.5 pl-9 pr-3 text-xs text-text-light outline-none placeholder:text-text-muted focus:border-primary-400"
                                        />
                                    </label>
                                    <button
                                        type="button"
                                        onClick={copyVisibleStudents}
                                        disabled={visibleStudents.length === 0}
                                        className="inline-flex shrink-0 items-center gap-2 rounded-xl border border-border/60 bg-surface-hover px-3 py-2 text-[11px] font-bold text-text-light transition-colors hover:border-primary-400 hover:text-primary-300 disabled:cursor-not-allowed disabled:opacity-40"
                                        title="Salin daftar yang sedang ditampilkan"
                                    >
                                        <ClipboardCopy className="h-4 w-4" />
                                        <span className="hidden sm:inline">Salin Daftar</span>
                                    </button>
                                </div>
                            </div>

                            {groupedStudents.length > 0 ? (
                                <div className="space-y-3">
                                    {groupedStudents.map(({ classInfo, students: classStudents }) => (
                                        <section key={classInfo.id} className="overflow-hidden rounded-2xl border border-border/50 bg-background/20">
                                            <div className="flex items-center justify-between border-b border-border/40 bg-surface-hover/50 px-4 py-2.5">
                                                <h3 className="text-xs font-bold text-text-light">Kelas {classInfo.name}</h3>
                                                <span className="text-[10px] font-semibold text-text-muted">{classStudents.length} siswa</span>
                                            </div>
                                            <div className="divide-y divide-border/30">
                                                {classStudents.map((student) => (
                                                    <div key={student.id} className="flex items-center justify-between gap-4 px-4 py-3">
                                                        <div className="min-w-0">
                                                            <p className="truncate text-xs font-semibold text-text-light sm:text-sm">{student.full_name}</p>
                                                            <p className="mt-0.5 text-[10px] text-text-muted">NISN: {student.nisn || '-'}</p>
                                                        </div>
                                                        <span className={`shrink-0 rounded-full px-2.5 py-1 text-[9px] font-bold ${activeTab === 'missing' ? 'bg-amber-500/10 text-amber-300 ring-1 ring-amber-500/20' : 'bg-emerald-500/10 text-emerald-300 ring-1 ring-emerald-500/20'}`}>
                                                            {activeTab === 'missing' ? 'Belum' : 'Sudah'}
                                                        </span>
                                                    </div>
                                                ))}
                                            </div>
                                        </section>
                                    ))}
                                </div>
                            ) : (
                                <div className="rounded-2xl border border-dashed border-border p-10 text-center">
                                    <CheckCircle2 className="mx-auto h-9 w-9 text-emerald-400/70" />
                                    <p className="mt-3 text-sm font-semibold text-text-light">Tidak ada siswa pada daftar ini</p>
                                    <p className="mt-1 text-xs text-text-muted">Coba ubah tab, filter kelas, atau kata pencarian.</p>
                                </div>
                            )}
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}

function SummaryCard({ label, value, icon, tone }: { label: string; value: number; icon: React.ReactNode; tone: 'primary' | 'emerald' | 'amber' }) {
    const tones = {
        primary: 'bg-primary-500/10 text-primary-300 ring-primary-500/20',
        emerald: 'bg-emerald-500/10 text-emerald-300 ring-emerald-500/20',
        amber: 'bg-amber-500/10 text-amber-300 ring-amber-500/20',
    };

    return (
        <div className={`rounded-2xl p-3 ring-1 ring-inset sm:p-4 ${tones[tone]}`}>
            <div className="flex items-center gap-1.5 text-[9px] font-bold uppercase tracking-wider sm:text-[10px]">
                {icon}
                <span className="truncate">{label}</span>
            </div>
            <p className="mt-2 text-xl font-black text-text-light sm:text-2xl">{value}</p>
        </div>
    );
}

function ClassFilterButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
    return (
        <button
            type="button"
            onClick={onClick}
            className={`shrink-0 rounded-xl border px-3 py-2 text-[10px] font-bold transition-colors ${active ? 'border-primary-400 bg-primary-500 text-white' : 'border-border/60 bg-surface-hover text-text-muted hover:text-text-light'}`}
        >
            {children}
        </button>
    );
}

AssignmentIndex.layout = (page: any) => {
    const role = page.props?.auth?.user?.role;
    if (role === 'siswa') {
        return <StudentLayout title="Tugas Siswa">{page}</StudentLayout>;
    }
    return <AuthenticatedLayout title="Tugas Siswa">{page}</AuthenticatedLayout>;
};