import { useForm, usePage, Link, Head } from '@inertiajs/react';
import { type ChangeEvent, type FormEvent, useEffect, useState, useRef } from 'react';
import { 
    ArrowLeft, Calendar, Award, BookOpen, CheckCircle, 
    Clock, Link2, Play, FileVideo, FileAudio, AlertCircle, Upload, ExternalLink, LockKeyhole
} from 'lucide-react';
import StudentLayout from '@/layouts/StudentLayout';
import { formatDate, cn } from '@/lib/utils';
import MaterialMediaRenderer, { type MaterialMediaResource } from '@/components/MaterialMediaRenderer';
import WorksheetPanel, { type WorksheetItem } from '@/components/WorksheetPanel';
import RichTextContent from '@/components/RichTextContent';
import SubmissionConfirmationModal from '@/components/SubmissionConfirmationModal';
import WhatsAppShareButton from '@/components/WhatsAppShareButton';
import { toast } from 'sonner';
import type { PageProps } from '@/types';
import SubmissionFile from '@/components/SubmissionFile';
import { ASSIGNMENT_FILE_ACCEPT, validateAssignmentFile } from '@/lib/assignment-files';
import StudentAssignmentFilePicker from '@/components/StudentAssignmentFilePicker';
import { convertImagesToPdf, type ImagePageItem } from '@/lib/image-to-pdf';

type LinkItem = MaterialMediaResource;

interface Assignment {
    id: number;
    title: string;
    description: string | null;
    submission_type: 'text' | 'file' | 'link' | 'physical';
    file_storage?: 'local' | 'google_drive';
    file_max_mb?: number;
    due_date: string;
    max_points: number;
    assignment_type: 'standard' | 'quiz' | 'worksheet';
    worksheet_items: WorksheetItem[];
    effective_due_at?: string | null;
    access?: { status: 'open' | 'locked' | 'closed'; opens_at: string | null; due_at: string | null; closes_at: string | null; message: string };
}

interface Submission {
    id: number;
    assignment_id: number;
    submitted_at: string | null;
    submission_text: string | null;
    submission_file_path: string | null;
    has_file?: boolean;
    submission_file_name?: string | null;
    submission_file_mime?: string | null;
    submission_link: string | null;
    status: 'pending' | 'graded' | 'late' | 'physical_submitted' | 'revision_requested';
    grade: number | 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 Material {
    id: number;
    title: string;
    content: string | null;
    classes?: Array<{ id: number; name: string }>;
    synced_class: { id: number; name: string } | null;
    subject: { id: number; name: string } | null;
    teacher: { id: number; name: string } | null;
    links: LinkItem[];
    assignments: Assignment[];
}

interface QuizState {
    max_attempts: number;
    attempts_used: number;
    has_draft: boolean;
    best_grade: number | null;
}

interface Props extends PageProps {
    material: Material;
    submissions: Record<number, Submission>; // Keyed by assignment_id
    quizState?: Record<number, QuizState>;
    errors: Record<string, string>;
}

export default function MaterialDetail({ material, submissions, quizState, errors }: Props) {
    const { url } = usePage();
    const classNames = material.classes?.length
        ? material.classes.map((classItem) => classItem.name).join(', ')
        : material.synced_class?.name ?? '-';
    const requestedAssignmentId = Number(new URLSearchParams(url.split('?')[1]).get('assignment'));
    const initialAssignmentId = requestedAssignmentId && material.assignments.some((assignment) => assignment.id === requestedAssignmentId)
        ? requestedAssignmentId
        : material.assignments[0]?.id ?? null;
    const [selectedAssignmentId, setSelectedAssignmentId] = useState<number | null>(
        initialAssignmentId
    );
    const [isConfirmingSubmission, setIsConfirmingSubmission] = useState(false);
    const [fileError, setFileError] = useState<string | null>(null);

    // Multi-page image to PDF conversion states
    const [imagePages, setImagePages] = useState<ImagePageItem[]>([]);
    const [isConverting, setIsConverting] = useState(false);
    const [conversionProgress, setConversionProgress] = useState(0);
    const [conversionMessage, setConversionMessage] = useState('');
    const [preparedPdfFile, setPreparedPdfFile] = useState<File | null>(null);
    const imagePagesRef = useRef<ImagePageItem[]>(imagePages);
    imagePagesRef.current = imagePages;

    useEffect(() => {
        setSelectedAssignmentId(initialAssignmentId);
    }, [initialAssignmentId]);

    const activeAssignment = material.assignments.find(a => a.id === selectedAssignmentId);
    const submission = activeAssignment ? submissions[activeAssignment.id] : null;
    const isRevisionSubmission = submission?.status === 'revision_requested';
    const assignmentHeader = activeAssignment && (
        <div className="space-y-4 text-left">
            <div className="flex flex-wrap items-center justify-between gap-3">
                <span className={cn(
                    'inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-[10px] font-medium ring-1 ring-inset',
                    activeAssignment.assignment_type === 'quiz'
                        ? 'bg-emerald-500/10 text-emerald-400 ring-emerald-500/20'
                        : activeAssignment.assignment_type === 'worksheet'
                            ? 'bg-primary-500/10 text-primary-400 ring-primary-500/20'
                            : 'bg-amber-500/10 text-amber-400 ring-amber-500/20 capitalize',
                )}>
                    {activeAssignment.assignment_type === 'quiz'
                        ? <><Play className="h-3 w-3" /> Quiz — Dinilai Otomatis</>
                        : activeAssignment.assignment_type === 'worksheet'
                            ? 'Worksheet Interaktif'
                            : `Tipe: ${activeAssignment.submission_type}`}
                </span>
                <WhatsAppShareButton
                    path={`/materials/${material.id}?assignment=${activeAssignment.id}`}
                    title={activeAssignment.title}
                    kind="tugas"
                    label="Bagikan tugas"
                />
            </div>
            {material.assignments.length > 1 && (
                <div className="flex flex-wrap gap-2" aria-label="Pilih tugas">
                    {material.assignments.map((assignment, index) => (
                        <button
                            key={assignment.id}
                            type="button"
                            onClick={() => setSelectedAssignmentId(assignment.id)}
                            aria-pressed={selectedAssignmentId === assignment.id}
                            className={cn(
                                'rounded-xl border px-4 py-2.5 text-xs font-bold transition-colors',
                                selectedAssignmentId === assignment.id
                                    ? 'border-primary-500/50 bg-primary-500 text-white shadow-lg shadow-primary-500/30'
                                    : 'border-border/50 bg-surface text-text-muted hover:bg-surface-hover hover:text-text-light',
                            )}
                        >
                            Tugas {index + 1}
                        </button>
                    ))}
                </div>
            )}
        </div>
    );

    // Submission form
    const form = useForm({
        submission_text: '',
        submission_link: '',
        file: null as File | null,
    });
    const uploadProgress = activeAssignment?.submission_type === 'file'
        ? form.progress?.percentage ?? (form.processing ? 0 : undefined)
        : undefined;
    const processingLabel = uploadProgress !== undefined
        ? (uploadProgress < 100 ? `Mengunggah ${uploadProgress}%` : 'Menyimpan...')
        : 'Mengirim...';

    useEffect(() => {
        imagePages.forEach((p) => URL.revokeObjectURL(p.previewUrl));
        setImagePages([]);
        setPreparedPdfFile(null);
        form.reset('file');
        form.clearErrors('file');
        setFileError(null);
        setIsConfirmingSubmission(false);
    }, [selectedAssignmentId]);

    useEffect(() => {
        return () => {
            imagePagesRef.current.forEach((p) => URL.revokeObjectURL(p.previewUrl));
        };
    }, []);

    async function handleSubmit(e: FormEvent) {
        e.preventDefault();
        if (!activeAssignment || activeAssignment.submission_type === 'physical') return;

        if (activeAssignment.submission_type === 'file') {
            // Jika siswa mengunggah foto, gabungkan & kompresi ke berkas PDF
            if (imagePages.length > 0) {
                setIsConverting(true);
                setConversionProgress(5);
                setConversionMessage('Mempersiapkan halaman foto...');
                setFileError(null);

                try {
                    const cleanTitle = (activeAssignment.title || 'Tugas').replace(/[^a-zA-Z0-9_\-]/g, '_');
                    const compiledPdf = await convertImagesToPdf(imagePages, {
                        filename: `Tugas_${cleanTitle}.pdf`,
                        onProgress: (p) => {
                            setConversionProgress(p.percent);
                            setConversionMessage(p.message);
                        },
                    });

                    const error = validateAssignmentFile(compiledPdf, activeAssignment.file_max_mb ?? 20);
                    if (error) {
                        setFileError(error);
                        return;
                    }

                    setPreparedPdfFile(compiledPdf);
                    form.setData('file', compiledPdf);
                    setIsConfirmingSubmission(true);
                } catch (err: any) {
                    setFileError(err?.message || 'Gagal menyusun dokumen PDF dari foto.');
                } finally {
                    setIsConverting(false);
                }
                return;
            }

            const error = validateAssignmentFile(form.data.file, activeAssignment.file_max_mb ?? 20);
            setFileError(error);
            if (error) return;
        }

        setIsConfirmingSubmission(true);
    }

    function submitAssignment() {
        if (!activeAssignment || activeAssignment.submission_type === 'physical') return;

        const fileToSubmit = preparedPdfFile || form.data.file;
        if (activeAssignment.submission_type === 'file' && !fileToSubmit) {
            setFileError('Pilih berkas tugas terlebih dahulu.');
            setIsConfirmingSubmission(false);
            return;
        }

        if (activeAssignment.submission_type === 'file' && preparedPdfFile) {
            form.transform((data) => ({
                ...data,
                file: preparedPdfFile,
            }));
        } else {
            form.transform((data) => data);
        }

        form.post(`/assignments/${activeAssignment.id}/submit`, {
            onSuccess: () => {
                setIsConfirmingSubmission(false);
                imagePages.forEach((p) => URL.revokeObjectURL(p.previewUrl));
                setImagePages([]);
                setPreparedPdfFile(null);
                form.reset();
                setFileError(null);
                toast.success('Tugas berhasil dikirim!');
            },
            onError: () => setIsConfirmingSubmission(false),
        });
    }

    return (
        <>
            <Head title={material.title} />

            <div className="mx-auto max-w-7xl space-y-6">
                <Link
                    href="/materials"
                    className="inline-flex items-center gap-1 text-sm text-text-muted hover:text-text transition-colors"
                >
                    <ArrowLeft className="h-4 w-4" /> Kembali ke Daftar Materi
                </Link>

                <div className="grid items-start gap-6 lg:grid-cols-5">
                    {/* Left Column: Material Content & Links */}
                    <div className="min-w-0 space-y-6 lg:col-span-2">
                        {/* Header card */}
                        <div className="glass rounded-2xl p-5 sm:p-6 space-y-4">
                            <div className="flex flex-wrap items-center justify-between gap-3">
                                <div className="flex min-w-0 flex-wrap items-center gap-2">
                                    <span className="inline-flex items-center rounded-md bg-emerald-500/10 px-2.5 py-0.5 text-xs font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20">
                                        Kelas {classNames}
                                    </span>
                                    <span className="inline-flex items-center rounded-md bg-primary-500/10 px-2.5 py-0.5 text-xs font-medium text-primary-300 ring-1 ring-inset ring-primary-500/20">
                                        {material.subject?.name ?? '-'}
                                    </span>
                                </div>
                                <WhatsAppShareButton path={`/materials/${material.id}`} title={material.title} kind="materi" label="Bagikan materi" />
                            </div>

                            <h2 className="text-2xl font-bold text-text-light">{material.title}</h2>
                            <p className="text-xs text-text-muted">Diajarkan oleh: <span className="text-text-light font-medium">{material.teacher?.name ?? '-'}</span></p>
                            
                            <div className="h-px bg-border/40" />

                            {/* Content */}
                            <RichTextContent
                                html={material.content || '<p>Materi ini tidak memiliki konten teks tambahan.</p>'}
                                className="max-w-none text-sm text-text/90 leading-relaxed"
                            />
                        </div>

                        {/* Attachments */}
                        <div className="glass rounded-2xl p-6 space-y-4 lg:sticky lg:top-20">
                            <h3 className="text-lg font-semibold text-text-light">Media & Referensi Pembelajaran</h3>
                            <MaterialMediaRenderer resources={material.links} />
                        </div>
                    </div>

                    {/* Right Column: Assignments & Submission Form */}
                    <div className="min-w-0 space-y-6 lg:col-span-3">
                        {activeAssignment ? (activeAssignment.access && activeAssignment.access.status !== 'open' && !submission ? (
                            <div className="glass rounded-2xl border border-amber-500/25 p-5 text-center sm:p-6">
                                {assignmentHeader}
                                <div className="mx-auto mt-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-amber-500/10 text-amber-300"><LockKeyhole className="h-6 w-6" /></div>
                                <p className="mt-4 text-[10px] font-bold uppercase tracking-wider text-amber-300">Tugas dikunci</p>
                                <h3 className="mt-1 text-lg font-bold text-text-light">{activeAssignment.title}</h3>
                                <p className="mx-auto mt-2 max-w-md text-xs leading-relaxed text-text-muted">{activeAssignment.access.message}</p>
                                {activeAssignment.access.opens_at && <p className="mt-4 inline-flex items-center gap-1 rounded-lg bg-surface px-3 py-2 text-xs text-text-muted"><Calendar className="h-3.5 w-3.5" /> Dibuka {formatDate(activeAssignment.access.opens_at)}</p>}
                            </div>
                        ) : activeAssignment.assignment_type === 'quiz' ? (
                            (() => {
                                const state = quizState?.[activeAssignment.id];
                                const canAttempt = !state || state.attempts_used < state.max_attempts || state.has_draft;

                                return (
                                    <div className="glass rounded-2xl p-5 sm:p-6 space-y-4 border border-emerald-500/20">
                                        {assignmentHeader}
                                        <div>
                                            <h3 className="text-lg font-bold text-text-light">{activeAssignment.title}</h3>
                                            {activeAssignment.description && (
                                                <RichTextContent html={activeAssignment.description} className="mt-1.5 text-xs text-text-muted leading-relaxed" />
                                            )}
                                        </div>

                                        <div className="grid grid-cols-2 gap-y-1.5 gap-x-2 text-[10px] text-text-muted border-t border-border/30 pt-3">
                                            <span className="flex items-center gap-1 font-semibold text-primary-300">
                                                <Award className="h-3.5 w-3.5" /> Quiz otomatis
                                            </span>
                                            <span className="flex items-center gap-1">
                                                <Calendar className="h-3.5 w-3.5" /> Due: {formatDate(activeAssignment.effective_due_at || activeAssignment.due_date)}
                                            </span>
                                        </div>

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

                                        {state && (
                                            <div className="rounded-xl bg-surface/50 p-4 border border-border/30 text-xs space-y-2">
                                                <div className="flex items-center justify-between">
                                                    <span className="text-text-muted">Percobaan digunakan</span>
                                                    <span className="font-bold text-text-light">
                                                        {state.attempts_used} / {state.max_attempts}
                                                    </span>
                                                </div>
                                                {state.has_draft && (
                                                    <p className="flex items-center gap-1.5 text-amber-300">
                                                        <AlertCircle className="h-3.5 w-3.5" /> Ada sesi yang belum diselesaikan.
                                                    </p>
                                                )}
                                                {state.best_grade !== null && (
                                                    <div className="flex items-center justify-between border-t border-border/30 pt-2">
                                                        <span className="text-text-muted">Skor terbaik</span>
                                                        <span className="font-bold text-emerald-400">{state.best_grade}%</span>
                                                    </div>
                                                )}
                                            </div>
                                        )}

                                        <div className="flex flex-wrap gap-3">
                                            {canAttempt && (
                                                <Link
                                                    href={route('quiz.start', activeAssignment.id)}
                                                    className="inline-flex items-center gap-2 rounded-xl bg-emerald-500 px-5 py-2.5 text-xs font-bold text-white hover:bg-emerald-400 transition-all shadow-lg shadow-emerald-500/20"
                                                >
                                                    <Play className="h-4 w-4" />
                                                    {state?.attempts_used ? 'Lanjutkan / Mulai Lagi' : 'Mulai Quiz'}
                                                </Link>
                                            )}
                                            {state && state.best_grade !== null && (
                                                <Link
                                                    href={route('quiz.result', activeAssignment.id)}
                                                    className="inline-flex items-center gap-2 rounded-xl bg-surface border border-border/50 px-5 py-2.5 text-xs font-bold text-text-light hover:bg-surface-hover transition-all"
                                                >
                                                    <Award className="h-4 w-4 text-emerald-400" />
                                                    Lihat Hasil
                                                </Link>
                                            )}
                                            {!canAttempt && (
                                                <p className="text-xs text-text-muted italic py-2">
                                                    Semua percobaan sudah digunakan.
                                                </p>
                                            )}
                                        </div>
                                    </div>
                                );
                            })()
                        ) : activeAssignment.assignment_type === 'worksheet' ? (
                            <WorksheetPanel assignment={activeAssignment} submission={submission} header={assignmentHeader} />
                        ) : (
                            <div className="glass rounded-2xl p-5 sm:p-6 space-y-4 border border-border/40">
                                {assignmentHeader}
                                <div>
                                    <h3 className="text-lg font-bold text-text-light">{activeAssignment.title}</h3>
                                    {activeAssignment.description && (
                                        <RichTextContent html={activeAssignment.description} className="mt-1.5 text-xs text-text-muted leading-relaxed" />
                                    )}
                                </div>

                                <div className="grid grid-cols-2 gap-y-1.5 gap-x-2 text-[10px] text-text-muted border-t border-border/30 pt-3">
                                    <span className="flex items-center gap-1 font-semibold text-primary-300">
                                        <Award className="h-3.5 w-3.5" /> Max {activeAssignment.max_points} Poin
                                    </span>
                                    <span className="col-span-2 flex items-center gap-1">
                                        <Calendar className="h-3.5 w-3.5" /> Due: {formatDate(activeAssignment.effective_due_at || activeAssignment.due_date)}
                                    </span>
                                </div>

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

                                {/* Submission Area */}
                                {submission ? (
                                    /* Already Submitted View */
                                    <div className="space-y-4">
                                        <div className="rounded-xl bg-surface/50 p-4 border border-border/30 text-xs space-y-3">
                                            <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 Pengiriman</span>
                                                {submission.submitted_at && (
                                                    <span className="text-[10px] text-text-muted">{formatDate(submission.submitted_at)}</span>
                                                )}
                                            </div>
                                            {submission.is_late && <span className="inline-flex rounded-md bg-rose-500/10 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-rose-300">Terlambat</span>}

                                            {activeAssignment.submission_type === 'text' && (
                                                <p className="text-text bg-surface/30 p-2 rounded-lg border border-border/20 leading-relaxed whitespace-pre-line">
                                                    {submission.submission_text}
                                                </p>
                                            )}

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

                                            {activeAssignment.submission_type === 'file' && (
                                                <SubmissionFile submission={submission} />
                                            )}

                                            {activeAssignment.submission_type === 'physical' && (
                                                <p className="text-text-light font-semibold italic text-emerald-400">
                                                    Konfirmasi kumpul fisik terkirim.
                                                </p>
                                            )}
                                        </div>

                                            {submission.status === 'graded' && (
                                                <div className="rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-4 space-y-2">
                                                    <div className="flex items-center justify-between text-xs">
                                                        <span className="font-bold text-emerald-400">TUGAS DINILAI</span>
                                                        <span className="font-bold text-lg text-emerald-300">
                                                            {submission.grade} <span className="text-xs text-text-muted font-normal">/ {activeAssignment.max_points}</span>
                                                        </span>
                                                    </div>
                                                    {submission.feedback && (
                                                        <div className="text-xs border-t border-emerald-500/10 pt-2 mt-1">
                                                            <p className="text-text-muted font-medium">Feedback Guru:</p>
                                                            <p className="text-text-light italic mt-0.5">{submission.feedback}</p>
                                                        </div>
                                                    )}
                                                </div>
                                            )}
                                            
                                            {submission.status === 'revision_requested' && (
                                                <div className="rounded-xl border border-orange-500/30 bg-orange-500/10 p-4 space-y-3">
                                                    <div className="flex items-center gap-2 text-xs font-bold text-orange-400">
                                                        <AlertCircle className="h-4 w-4" /> GURU MEMINTA REVISI TUGAS
                                                    </div>
                                                    {submission.feedback && (
                                                        <div className="text-xs border-t border-orange-500/20 pt-2 mt-1">
                                                            <p className="text-text-muted font-medium mb-1">Catatan Guru:</p>
                                                            <p className="text-text-light italic">{submission.feedback}</p>
                                                        </div>
                                                    )}
                                                </div>
                                            )}

                                            {(submission.status === 'pending' || submission.status === 'late' || submission.status === 'physical_submitted') && (
                                                <div className="rounded-xl bg-surface/30 p-4 border border-border/20 flex items-center gap-2 text-xs text-text-muted">
                                                    <Clock className="h-4.5 w-4.5 text-amber-400" />
                                                    <span>Menunggu pemeriksaan & nilai dari guru.</span>
                                                </div>
                                            )}

                                        {submission.status === 'revision_requested' && (
                                            <div className="mt-6 pt-4 border-t border-border/30">
                                                <form onSubmit={handleSubmit} className="space-y-4">
                                                    <h4 className="text-xs font-bold uppercase tracking-wider text-orange-400 mb-2">Submit Ulang Jawaban</h4>

                                                    {activeAssignment.submission_type === 'text' && (
                                                        <div>
                                                            <textarea
                                                                value={form.data.submission_text}
                                                                onChange={(e) => form.setData('submission_text', e.target.value)}
                                                                placeholder="Tuliskan perbaikan jawaban Anda..."
                                                                rows={5}
                                                                className="w-full rounded-xl border border-border bg-surface px-4 py-2.5 text-xs text-text focus:border-primary-400 focus:outline-none"
                                                                required
                                                            />
                                                            {errors.submission_text && <p className="mt-1 text-xs text-rose-400">{errors.submission_text}</p>}
                                                        </div>
                                                    )}

                                                    {activeAssignment.submission_type === 'link' && (
                                                        <div>
                                                            <input
                                                                type="url"
                                                                value={form.data.submission_link}
                                                                onChange={(e) => form.setData('submission_link', e.target.value)}
                                                                placeholder="https://..."
                                                                className="w-full rounded-xl border border-border bg-surface px-4 py-2 text-xs text-text focus:border-primary-400"
                                                                required
                                                            />
                                                            {errors.submission_link && <p className="mt-1 text-xs text-rose-400">{errors.submission_link}</p>}
                                                        </div>
                                                    )}

                                                    {activeAssignment.submission_type === 'file' && (
                                                        <StudentAssignmentFilePicker
                                                            file={form.data.file}
                                                            onChangeFile={(newFile) => {
                                                                form.clearErrors('file');
                                                                setFileError(null);
                                                                setPreparedPdfFile(null);
                                                                form.setData('file', newFile);
                                                            }}
                                                            imagePages={imagePages}
                                                            onChangeImagePages={(newPages) => {
                                                                form.clearErrors('file');
                                                                setFileError(null);
                                                                setPreparedPdfFile(null);
                                                                setImagePages(newPages);
                                                            }}
                                                            fileMaxMb={activeAssignment.file_max_mb ?? 20}
                                                            isGoogleDrive={activeAssignment.file_storage === 'google_drive'}
                                                            error={fileError || form.errors.file}
                                                            disabled={form.processing || isConverting}
                                                            isConverting={isConverting}
                                                            conversionProgress={conversionProgress}
                                                            conversionMessage={conversionMessage}
                                                        />
                                                    )}

                                                    <button
                                                        type="submit"
                                                        disabled={form.processing || isConverting}
                                                        className="w-full rounded-xl bg-orange-500 py-2.5 text-xs font-bold text-white hover:bg-orange-600 disabled:opacity-50 transition-all shadow-lg shadow-orange-500/20"
                                                    >
                                                        {isConverting
                                                            ? (conversionMessage || 'Menyusun PDF...')
                                                            : (form.processing ? processingLabel : 'Kirim Revisi Tugas')}
                                                    </button>
                                                </form>
                                            </div>
                                        )}
                                    </div>
                                ) : (
                                    activeAssignment.submission_type === 'physical' ? (
                                        <div className="rounded-2xl border border-primary-500/20 bg-primary-500/5 p-5 text-center">
                                            <div className="mx-auto flex h-11 w-11 items-center justify-center rounded-xl bg-primary-500/10 text-primary-300 ring-1 ring-inset ring-primary-500/20">
                                                <BookOpen className="h-5 w-5" />
                                            </div>
                                            <h4 className="mt-3 text-sm font-bold text-text-light">Dikumpulkan langsung di kelas</h4>
                                            <p className="mx-auto mt-1.5 max-w-md text-xs leading-relaxed text-text-muted">
                                                Kerjakan tugas fisik sesuai petunjuk, lalu serahkan langsung kepada guru. Kamu tidak perlu mengirim atau mengonfirmasi apa pun melalui aplikasi.
                                            </p>
                                        </div>
                                    ) : (
                                    /* Form to Submit Assignment */
                                    <form onSubmit={handleSubmit} className="space-y-4">
                                        <h4 className="text-xs font-bold uppercase tracking-wider text-text-muted">Kirim Jawaban</h4>

                                        {activeAssignment.submission_type === 'text' && (
                                            <div>
                                                <textarea
                                                    value={form.data.submission_text}
                                                    onChange={(e) => form.setData('submission_text', e.target.value)}
                                                    placeholder="Tuliskan jawaban lengkap Anda di sini..."
                                                    rows={5}
                                                    className="w-full rounded-xl border border-border bg-surface px-4 py-2.5 text-xs text-text focus:border-primary-400 focus:outline-none"
                                                    required
                                                />
                                                {errors.submission_text && (
                                                    <p className="mt-1 text-xs text-rose-400">{errors.submission_text}</p>
                                                )}
                                            </div>
                                        )}

                                        {activeAssignment.submission_type === 'link' && (
                                            <div>
                                                <input
                                                    type="url"
                                                    value={form.data.submission_link}
                                                    onChange={(e) => form.setData('submission_link', e.target.value)}
                                                    placeholder="https://google.docs/..."
                                                    className="w-full rounded-xl border border-border bg-surface px-4 py-2 text-xs text-text focus:border-primary-400"
                                                    required
                                                />
                                                {errors.submission_link && (
                                                    <p className="mt-1 text-xs text-rose-400">{errors.submission_link}</p>
                                                )}
                                            </div>
                                        )}

                                        {activeAssignment.submission_type === 'file' && (
                                            <StudentAssignmentFilePicker
                                                file={form.data.file}
                                                onChangeFile={(newFile) => {
                                                    form.clearErrors('file');
                                                    setFileError(null);
                                                    setPreparedPdfFile(null);
                                                    form.setData('file', newFile);
                                                }}
                                                imagePages={imagePages}
                                                onChangeImagePages={(newPages) => {
                                                    form.clearErrors('file');
                                                    setFileError(null);
                                                    setPreparedPdfFile(null);
                                                    setImagePages(newPages);
                                                }}
                                                fileMaxMb={activeAssignment.file_max_mb ?? 20}
                                                isGoogleDrive={activeAssignment.file_storage === 'google_drive'}
                                                error={fileError || form.errors.file}
                                                disabled={form.processing || isConverting}
                                                isConverting={isConverting}
                                                conversionProgress={conversionProgress}
                                                conversionMessage={conversionMessage}
                                            />
                                        )}

                                        <button
                                            type="submit"
                                            disabled={form.processing || isConverting}
                                            className="w-full rounded-xl bg-primary-500 py-2.5 text-xs font-bold text-white hover:bg-primary-400 disabled:opacity-50 transition-all glow-primary"
                                        >
                                            {isConverting
                                                ? (conversionMessage || 'Menyusun PDF...')
                                                : (form.processing ? processingLabel : 'Kirim Tugas Sekarang')}
                                        </button>
                                    </form>
                                    )
                                )}
                            </div>
                        )) : (
                            <div className="glass rounded-2xl p-6 text-center text-text-muted py-10">
                                <AlertCircle className="mb-2 h-8 w-8 opacity-30 mx-auto" />
                                <p className="text-xs">Tidak ada tugas dalam materi ini.</p>
                            </div>
                        )}
                    </div>
                </div>
            </div>

            {activeAssignment && activeAssignment.submission_type !== 'physical' && (
                <SubmissionConfirmationModal
                    isOpen={isConfirmingSubmission}
                    assignmentTitle={activeAssignment.title}
                    message={isRevisionSubmission
                        ? 'Periksa kembali perbaikan jawaban atau berkas sebelum mengirim revisi.'
                        : 'Periksa kembali jawaban atau berkas yang dipilih sebelum mengirim tugas.'
                    }
                    details={activeAssignment.submission_type === 'file'
                        ? [{
                            label: 'Berkas',
                            value: (preparedPdfFile || form.data.file)
                                ? `${(preparedPdfFile || form.data.file)!.name} (${(((preparedPdfFile || form.data.file)!.size) / 1024 / 1024).toFixed(2)} MB${imagePages.length > 0 ? ` · ${imagePages.length} Halaman Foto` : ''})`
                                : '-',
                        }]
                        : activeAssignment.submission_type === 'link'
                            ? [{ label: 'Tautan', value: form.data.submission_link || '-' }]
                            : [{
                                label: 'Jawaban',
                                value: form.data.submission_text.length > 140
                                    ? `${form.data.submission_text.slice(0, 140)}…`
                                    : form.data.submission_text || '-',
                            }]
                    }
                    confirmLabel={isRevisionSubmission ? 'Ya, Kirim Revisi' : 'Ya, Kirim Tugas'}
                    isProcessing={form.processing}
                    uploadProgress={uploadProgress}
                    onClose={() => setIsConfirmingSubmission(false)}
                    onConfirm={submitAssignment}
                />
            )}
        </>
    );
}

MaterialDetail.layout = (page: any) => <StudentLayout title="Detail Materi Pelajaran">{page}</StudentLayout>;