import { Head, Link, router, useForm, usePage } from '@inertiajs/react';
import {
    ArrowLeft,
    CheckCircle2,
    ChevronDown,
    ChevronRight,
    CircleDot,
    FileEdit,
    GripVertical,
    ListChecks,
    MessageSquare,
    Plus,
    Save,
    Trash2,
    Pencil,
} from 'lucide-react';
import { useState } from 'react';
import InputError from '@/components/input-error';
import { DeleteConfirmModal } from '@/components/delete-confirm-modal';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem } from '@/types';

type QuestionOption = { text: string; is_correct: boolean };
type Question = {
    id: number;
    type: 'multiple_choice' | 'true_false' | 'essay';
    question: string;
    options: QuestionOption[] | null;
    correct_answer: string | null;
    explanation: string | null;
    points: number;
    order: number;
};
type Quiz = {
    id: number;
    title: string;
    description: string | null;
    duration_minutes: number;
    passing_score: number;
    max_attempts: number;
    questions: Question[];
    deadline?: string | null;
    late_policy?: string;
};
type Course = { id: number; title: string; slug: string };
type Props = { course: Course; quiz: Quiz };

const TYPE_META = {
    multiple_choice: { label: 'Pilihan Ganda', icon: ListChecks,    color: 'text-blue-600 bg-blue-50 dark:bg-blue-950/40' },
    true_false:      { label: 'Benar/Salah',   icon: CircleDot,     color: 'text-emerald-600 bg-emerald-50 dark:bg-emerald-950/40' },
    essay:           { label: 'Esai',           icon: MessageSquare, color: 'text-purple-600 bg-purple-50 dark:bg-purple-950/40' },
};

const selectCls = 'border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 h-9 w-full rounded-md border px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px]';
const textareaCls = 'border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded-md border px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] placeholder:text-muted-foreground';

// ── Question Form ─────────────────────────────────────────────────────────
function QuestionForm({
    courseSlug,
    quizId,
    onSuccess,
    initial,
    questionId,
}: {
    courseSlug: string;
    quizId: number;
    onSuccess: () => void;
    initial?: Question;
    questionId?: number;
}) {
    const defaultOptions: QuestionOption[] = [
        { text: '', is_correct: true },
        { text: '', is_correct: false },
        { text: '', is_correct: false },
        { text: '', is_correct: false },
    ];

    const form = useForm({
        type: initial?.type ?? 'multiple_choice',
        question: initial?.question ?? '',
        options: (initial?.options && initial.options.length > 0) ? initial.options : defaultOptions,
        correct_answer: initial?.correct_answer ?? 'true',
        explanation: initial?.explanation ?? '',
        points: initial?.points ?? 1,
    });

    function setOptionText(i: number, text: string) {
        const next = form.data.options.map((o, idx) => idx === i ? { ...o, text } : o);
        form.setData('options', next);
    }

    function setCorrect(i: number) {
        const next = form.data.options.map((o, idx) => ({ ...o, is_correct: idx === i }));
        form.setData('options', next);
    }

    function addOption() {
        form.setData('options', [...form.data.options, { text: '', is_correct: false }]);
    }

    function removeOption(i: number) {
        const next = form.data.options.filter((_, idx) => idx !== i);
        // ensure at least one is correct
        if (!next.some(o => o.is_correct) && next.length > 0) {
            next[0].is_correct = true;
        }
        form.setData('options', next);
    }

    function submit(e: React.FormEvent) {
        e.preventDefault();
        const action = questionId
            ? `/instructor/courses/${courseSlug}/quizzes/${quizId}/questions/${questionId}`
            : `/instructor/courses/${courseSlug}/quizzes/${quizId}/questions`;

        const opts = { onSuccess };
        form.transform(data => ({
            ...data,
            options: data.type === 'multiple_choice' ? data.options : null,
            correct_answer: data.type === 'true_false' ? data.correct_answer : null,
        }));
        if (questionId) {
            form.patch(action, opts);
        } else {
            form.post(action, opts);
        }
    }

    return (
        <form onSubmit={submit} className="flex flex-col gap-4">
            {/* Type */}
            <div className="grid gap-1.5">
                <Label>Tipe Soal</Label>
                <select
                    value={form.data.type}
                    onChange={e => form.setData('type', e.target.value as Question['type'])}
                    className={selectCls}
                >
                    <option value="multiple_choice">Pilihan Ganda</option>
                    <option value="true_false">Benar / Salah</option>
                    <option value="essay">Esai</option>
                </select>
            </div>

            {/* Question text */}
            <div className="grid gap-1.5">
                <Label>Pertanyaan *</Label>
                <textarea
                    value={form.data.question}
                    onChange={e => form.setData('question', e.target.value)}
                    rows={3}
                    required
                    className={textareaCls}
                    placeholder="Tulis soal di sini..."
                />
                <InputError message={form.errors.question} />
            </div>

            {/* Multiple choice */}
            {form.data.type === 'multiple_choice' && (
                <div className="grid gap-2">
                    <Label>Pilihan Jawaban</Label>
                    <p className="text-xs text-muted-foreground">Klik ✓ untuk tandai jawaban yang benar</p>
                    <div className="flex flex-col gap-2">
                        {form.data.options.map((opt, i) => (
                            <div key={i} className="flex items-center gap-2">
                                <button
                                    type="button"
                                    onClick={() => setCorrect(i)}
                                    title="Tandai sebagai jawaban benar"
                                    className={`shrink-0 transition-colors ${opt.is_correct ? 'text-emerald-600' : 'text-muted-foreground/30 hover:text-muted-foreground'}`}
                                >
                                    <CheckCircle2 className="h-5 w-5" />
                                </button>
                                <Input
                                    value={opt.text}
                                    onChange={e => setOptionText(i, e.target.value)}
                                    placeholder={`Pilihan ${String.fromCharCode(65 + i)}`}
                                    className={`flex-1 ${opt.is_correct ? 'border-emerald-400 ring-1 ring-emerald-300' : ''}`}
                                />
                                {form.data.options.length > 2 && (
                                    <button
                                        type="button"
                                        onClick={() => removeOption(i)}
                                        className="shrink-0 text-muted-foreground/40 hover:text-destructive"
                                    >
                                        <Trash2 className="h-4 w-4" />
                                    </button>
                                )}
                            </div>
                        ))}
                    </div>
                    {form.data.options.length < 6 && (
                        <button
                            type="button"
                            onClick={addOption}
                            className="flex items-center gap-1 text-xs text-primary hover:underline"
                        >
                            <Plus className="h-3.5 w-3.5" /> Tambah pilihan
                        </button>
                    )}
                </div>
            )}

            {/* True / False */}
            {form.data.type === 'true_false' && (
                <div className="grid gap-1.5">
                    <Label>Jawaban Benar</Label>
                    <div className="flex gap-3">
                        {[{ value: 'true', label: 'Benar (True)' }, { value: 'false', label: 'Salah (False)' }].map(opt => (
                            <label
                                key={opt.value}
                                className={`flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-lg border px-4 py-2.5 text-sm transition-colors ${
                                    form.data.correct_answer === opt.value
                                        ? 'border-emerald-400 bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400'
                                        : 'hover:bg-muted'
                                }`}
                            >
                                <input
                                    type="radio"
                                    name="correct_answer"
                                    value={opt.value}
                                    checked={form.data.correct_answer === opt.value}
                                    onChange={() => form.setData('correct_answer', opt.value)}
                                    className="sr-only"
                                />
                                {opt.label}
                            </label>
                        ))}
                    </div>
                </div>
            )}

            {/* Essay */}
            {form.data.type === 'essay' && (
                <div className="rounded-lg border bg-muted/30 px-3 py-2.5 text-xs text-muted-foreground">
                    Soal esai dinilai secara manual oleh instruktur setelah siswa mengumpulkan jawaban.
                </div>
            )}

            {/* Points + Explanation */}
            <div className="grid grid-cols-2 gap-3">
                <div className="grid gap-1.5">
                    <Label>Poin</Label>
                    <Input
                        type="number"
                        min="1"
                        value={form.data.points}
                        onChange={e => form.setData('points', Number(e.target.value))}
                    />
                </div>
                <div className="grid gap-1.5">
                    <Label>Penjelasan (opsional)</Label>
                    <Input
                        value={form.data.explanation}
                        onChange={e => form.setData('explanation', e.target.value)}
                        placeholder="Ditampilkan setelah jawab"
                    />
                </div>
            </div>

            <div className="flex justify-end gap-2 pt-1">
                <Button type="submit" disabled={form.processing}>
                    {form.processing && <Spinner />}
                    {questionId ? 'Simpan Perubahan' : 'Tambah Soal'}
                </Button>
            </div>
        </form>
    );
}

// ── Question Card ─────────────────────────────────────────────────────────
function QuestionCard({ q, courseSlug, quizId, index }: { q: Question; courseSlug: string; quizId: number; index: number }) {
    const [editOpen, setEditOpen] = useState(false);
    const [deleteOpen, setDeleteOpen] = useState(false);
    const meta = TYPE_META[q.type];
    const Icon = meta.icon;

    return (
        <div className="overflow-hidden rounded-xl border bg-card shadow-xs">
            <div className="flex items-start gap-3 p-4">
                <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-bold text-muted-foreground">
                    {index + 1}
                </span>
                <div className="min-w-0 flex-1">
                    <div className="mb-1.5 flex flex-wrap items-center gap-2">
                        <span className={`flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${meta.color}`}>
                            <Icon className="h-3 w-3" />
                            {meta.label}
                        </span>
                        <span className="text-xs text-muted-foreground">{q.points} poin</span>
                    </div>
                    <p className="text-sm font-medium leading-relaxed">{q.question}</p>

                    {q.type === 'multiple_choice' && q.options && (
                        <div className="mt-3 flex flex-col gap-1.5">
                            {q.options.map((opt, i) => (
                                <div
                                    key={i}
                                    className={`flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm ${
                                        opt.is_correct
                                            ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400'
                                            : 'bg-muted/40 text-muted-foreground'
                                    }`}
                                >
                                    <span className="font-mono text-xs">{String.fromCharCode(65 + i)}.</span>
                                    <span className="flex-1">{opt.text}</span>
                                    {opt.is_correct && <CheckCircle2 className="h-3.5 w-3.5 shrink-0" />}
                                </div>
                            ))}
                        </div>
                    )}

                    {q.type === 'true_false' && (
                        <p className="mt-2 text-sm text-muted-foreground">
                            Jawaban: <span className="font-medium text-foreground">{q.correct_answer === 'true' ? 'Benar (True)' : 'Salah (False)'}</span>
                        </p>
                    )}

                    {q.explanation && (
                        <p className="mt-2 text-xs text-muted-foreground">
                            <span className="font-medium">Penjelasan:</span> {q.explanation}
                        </p>
                    )}
                </div>

                <div className="flex shrink-0 items-center gap-1">
                    <Dialog open={editOpen} onOpenChange={setEditOpen}>
                        <DialogTrigger asChild>
                            <button className="rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground">
                                <FileEdit className="h-4 w-4" />
                            </button>
                        </DialogTrigger>
                        <DialogContent className="max-h-[90vh] max-w-lg overflow-y-auto">
                            <DialogTitle>Edit Soal #{index + 1}</DialogTitle>
                            <div className="mt-3">
                                {/* key={q.id} forces re-mount so useForm reinitializes from latest data */}
                                <QuestionForm
                                    key={q.id}
                                    courseSlug={courseSlug}
                                    quizId={quizId}
                                    questionId={q.id}
                                    initial={q}
                                    onSuccess={() => setEditOpen(false)}
                                />
                            </div>
                        </DialogContent>
                    </Dialog>
                    <button onClick={() => setDeleteOpen(true)} className="rounded-md p-1.5 text-muted-foreground hover:bg-destructive/10 hover:text-destructive">
                        <Trash2 className="h-4 w-4" />
                    </button>
                    <GripVertical className="h-4 w-4 text-muted-foreground/30" />
                </div>
            </div>

            <DeleteConfirmModal
                open={deleteOpen}
                onClose={() => setDeleteOpen(false)}
                onConfirm={() => router.delete(`/instructor/courses/${courseSlug}/quizzes/${quizId}/questions/${q.id}`)}
                title={`Hapus Soal Nomor ${index + 1}?`}
                description="Soal ini akan dihapus permanen dari kuis."
            />
        </div>
    );
}

// ── Quiz Settings Form ────────────────────────────────────────────────────
// ── Quiz Settings Modal ───────────────────────────────────────────────────
function QuizSettingsModal({ course, quiz }: { course: Course; quiz: Quiz }) {
    const [open, setOpen] = useState(false);
    const form = useForm({
        title: quiz.title,
        description: quiz.description ?? '',
        duration_minutes: quiz.duration_minutes,
        passing_score: quiz.passing_score,
        max_attempts: quiz.max_attempts,
        deadline: quiz.deadline ?? '',
        late_policy: quiz.late_policy ?? 'closed',
    });

    function submit(e: React.FormEvent) {
        e.preventDefault();
        form.patch(`/instructor/courses/${course.slug}/quizzes/${quiz.id}`, {
            onSuccess: () => setOpen(false),
        });
    }

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <Button variant="outline" size="sm" className="h-7 gap-1 text-blue-600 border-blue-200 hover:bg-blue-50 hover:text-blue-700 shadow-sm dark:border-blue-900/50 dark:text-blue-400 dark:hover:bg-blue-950/40">
                    <Pencil className="h-3 w-3" /> Edit
                </Button>
            </DialogTrigger>
            <DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
                <DialogTitle className="text-lg font-bold text-blue-900 dark:text-blue-100">Pengaturan Kuis</DialogTitle>
                <form onSubmit={submit} className="mt-4 flex flex-col gap-4">
                    <div className="grid gap-1.5">
                        <Label htmlFor="title" className="text-xs font-semibold">Judul Kuis</Label>
                        <Input id="title" value={form.data.title} onChange={e => form.setData('title', e.target.value)} required />
                        <InputError message={form.errors.title} />
                    </div>
                    <div className="grid gap-1.5">
                        <Label htmlFor="description" className="text-xs font-semibold">Deskripsi</Label>
                        <textarea
                            id="description"
                            value={form.data.description}
                            onChange={e => form.setData('description', e.target.value)}
                            rows={3}
                            className={textareaCls}
                            placeholder="Deskripsi kuis..."
                        />
                        <InputError message={form.errors.description} />
                    </div>
                    <div className="grid grid-cols-3 gap-2">
                        <div className="grid gap-1.5">
                            <Label htmlFor="duration_minutes" className="text-xs font-semibold">Durasi (mnt)</Label>
                            <Input id="duration_minutes" type="number" min="1" value={form.data.duration_minutes} onChange={e => form.setData('duration_minutes', Number(e.target.value))} required />
                            <InputError message={form.errors.duration_minutes} />
                        </div>
                        <div className="grid gap-1.5">
                            <Label htmlFor="passing_score" className="text-xs font-semibold">Lulus (%)</Label>
                            <Input id="passing_score" type="number" min="0" max="100" value={form.data.passing_score} onChange={e => form.setData('passing_score', Number(e.target.value))} required />
                            <InputError message={form.errors.passing_score} />
                        </div>
                        <div className="grid gap-1.5">
                            <Label htmlFor="max_attempts" className="text-xs font-semibold">Maks Coba</Label>
                            <Input id="max_attempts" type="number" min="1" value={form.data.max_attempts} onChange={e => form.setData('max_attempts', Number(e.target.value))} required />
                            <InputError message={form.errors.max_attempts} />
                        </div>
                    </div>
                    <div className="grid gap-1.5">
                        <Label htmlFor="deadline" className="text-xs font-semibold">Tenggat Waktu (Hari setelah mendaftar)</Label>
                        <Input id="deadline" type="number" min="0" placeholder="Contoh: 7" value={form.data.deadline} onChange={e => form.setData('deadline', e.target.value)} />
                        <InputError message={form.errors.deadline} />
                    </div>
                    <div className="grid gap-1.5">
                        <Label htmlFor="late_policy" className="text-xs font-semibold">Kebijakan Terlambat</Label>
                        <select
                            id="late_policy"
                            value={form.data.late_policy}
                            onChange={e => form.setData('late_policy', e.target.value)}
                            className="h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
                        >
                            <option value="closed">Tolak Pengumpulan</option>
                            <option value="allowed">Izinkan</option>
                        </select>
                        <InputError message={form.errors.late_policy} />
                    </div>
                    <div className="mt-2 flex justify-end gap-2">
                        <Button type="button" variant="outline" onClick={() => setOpen(false)}>
                            Batal
                        </Button>
                        <Button type="submit" disabled={form.processing} className="bg-blue-600 hover:bg-blue-700 text-white">
                            {form.processing && <Spinner />} Simpan Perubahan
                        </Button>
                    </div>
                </form>
            </DialogContent>
        </Dialog>
    );
}

// ── Main ──────────────────────────────────────────────────────────────────
export default function InstructorQuizEdit({ course, quiz }: Props) {
    const [addOpen, setAddOpen] = useState(false);
    const [settingsOpen, setSettingsOpen] = useState(true);
    const totalPoints = quiz.questions.reduce((a, q) => a + q.points, 0);

    const { auth } = usePage().props as { auth: { user: { role: string } } };
    const isAdmin = auth.user.role === 'admin';
    const courseBackUrl = isAdmin ? `/admin/courses/${course.id}` : `/instructor/courses/${course.slug}`;
    const listBackUrl = isAdmin ? '/admin/courses' : '/instructor/courses';

    const breadcrumbs: BreadcrumbItem[] = [
        { title: isAdmin ? 'Admin' : 'Kelas Saya', href: listBackUrl },
        { title: course.title, href: courseBackUrl },
        { title: quiz.title, href: '#' },
    ];

    return (
        <>
            <Head title={`${quiz.title} — ${course.title}`} />

            <div className="px-4 py-6 md:px-8">
                <Link href={courseBackUrl} className="mb-4 flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground">
                    <ArrowLeft className="h-4 w-4" /> Kembali ke kelas
                </Link>

                <div className="grid gap-6 lg:grid-cols-[1fr_300px]">
                    {/* Questions */}
                    <div className="flex flex-col gap-4">
                        <div className="flex items-center justify-between">
                            <div>
                                <h1 className="text-xl font-bold">{quiz.title}</h1>
                                <p className="text-sm text-muted-foreground">
                                    {quiz.questions.length} soal · {totalPoints} poin total
                                </p>
                            </div>
                            <div className="flex items-center gap-2">
                                <Link
                                    href={`/instructor/courses/${course.slug}/quizzes/${quiz.id}/attempts`}
                                    className="inline-flex items-center gap-1.5 rounded-md border border-blue-200 bg-blue-50 px-3 py-1.5 text-xs font-semibold text-blue-600 hover:bg-blue-100 dark:border-blue-900/50 dark:bg-blue-950/30 dark:text-blue-400"
                                >
                                    <MessageSquare className="h-3.5 w-3.5" /> Jawaban Essay
                                </Link>
                            <Dialog open={addOpen} onOpenChange={setAddOpen}>
                                <DialogTrigger asChild>
                                    <Button><Plus className="h-4 w-4" /> Tambah Soal</Button>
                                </DialogTrigger>
                                <DialogContent className="max-h-[90vh] max-w-lg overflow-y-auto">
                                    <DialogTitle>Tambah Soal Baru</DialogTitle>
                                    <div className="mt-3">
                                        <QuestionForm
                                            courseSlug={course.slug}
                                            quizId={quiz.id}
                                            onSuccess={() => setAddOpen(false)}
                                        />
                                    </div>
                                </DialogContent>
                            </Dialog>
                            </div>
                        </div>

                        {quiz.questions.length === 0 ? (
                            <div className="rounded-xl border border-dashed p-16 text-center">
                                <ListChecks className="mx-auto mb-3 h-10 w-10 text-muted-foreground/30" />
                                <p className="font-medium text-muted-foreground">Belum ada soal</p>
                                <p className="mt-1 text-sm text-muted-foreground">Klik "Tambah Soal" untuk mulai membuat soal kuis</p>
                                <Button className="mt-4" onClick={() => setAddOpen(true)}>
                                    <Plus className="h-4 w-4" /> Tambah Soal Pertama
                                </Button>
                            </div>
                        ) : (
                            <div className="flex flex-col gap-3">
                                {quiz.questions.map((q, i) => (
                                    <QuestionCard key={q.id} q={q} courseSlug={course.slug} quizId={quiz.id} index={i} />
                                ))}
                                <button
                                    onClick={() => setAddOpen(true)}
                                    className="flex items-center justify-center gap-2 rounded-xl border border-dashed py-4 text-sm text-muted-foreground hover:border-primary/50 hover:text-primary"
                                >
                                    <Plus className="h-4 w-4" /> Tambah soal lagi
                                </button>
                            </div>
                        )}
                    </div>

                    {/* Sidebar */}
                    <div className="flex flex-col gap-4">
                        {/* Stats */}
                        <div className="grid grid-cols-3 gap-2">
                            {[
                                { label: 'Soal', value: quiz.questions.length },
                                { label: 'Poin', value: totalPoints },
                                { label: 'Lulus', value: `${quiz.passing_score}%` },
                            ].map(s => (
                                <div key={s.label} className="rounded-xl border bg-card p-3 text-center shadow-xs">
                                    <p className="text-xl font-bold">{s.value}</p>
                                    <p className="text-xs text-muted-foreground">{s.label}</p>
                                </div>
                            ))}
                        </div>

                        {/* Type breakdown */}
                        {quiz.questions.length > 0 && (
                            <div className="rounded-xl border bg-card p-4 shadow-xs">
                                <p className="mb-3 text-sm font-semibold">Jenis Soal</p>
                                <div className="flex flex-col gap-2">
                                    {(['multiple_choice', 'true_false', 'essay'] as const).map(t => {
                                        const count = quiz.questions.filter(q => q.type === t).length;
                                        if (count === 0) return null;
                                        const meta = TYPE_META[t];
                                        const Icon = meta.icon;
                                        return (
                                            <div key={t} className="flex items-center gap-2 text-sm">
                                                <span className={`flex h-6 w-6 items-center justify-center rounded-md ${meta.color}`}>
                                                    <Icon className="h-3.5 w-3.5" />
                                                </span>
                                                <span className="flex-1 text-muted-foreground">{meta.label}</span>
                                                <span className="font-medium">{count}</span>
                                            </div>
                                        );
                                    })}
                                </div>
                            </div>
                        )}

                        {/* Settings Card */}
                        <div className="rounded-xl border border-blue-100 bg-white p-4 shadow-sm dark:border-blue-900/30 dark:bg-card">
                            <div className="flex items-center justify-between mb-3 border-b border-blue-50 pb-2 dark:border-blue-950">
                                <h3 className="text-sm font-semibold text-blue-900 dark:text-blue-100">Pengaturan Kuis</h3>
                                <QuizSettingsModal course={course} quiz={quiz} />
                            </div>
                            <div className="space-y-2.5 text-xs text-muted-foreground">
                                <p><strong className="text-blue-950 dark:text-blue-100">Durasi:</strong> {quiz.duration_minutes} menit</p>
                                <p><strong className="text-blue-950 dark:text-blue-100">Passing Score:</strong> Minimal {quiz.passing_score}%</p>
                                <p><strong className="text-blue-950 dark:text-blue-100">Maks Percobaan:</strong> {quiz.max_attempts}×</p>
                                {quiz.deadline && <p><strong className="text-blue-950 dark:text-blue-100">Tenggat Waktu:</strong> {quiz.deadline} hari setelah mendaftar</p>}
                                <p><strong className="text-blue-950 dark:text-blue-100">Terlambat:</strong> {quiz.late_policy === 'allowed' ? 'Diizinkan' : 'Ditolak'}</p>
                                {quiz.description && (
                                    <div className="mt-2.5 pt-2.5 border-t border-blue-50 dark:border-blue-950">
                                        <p className="font-semibold text-blue-950 dark:text-blue-100 mb-1">Deskripsi:</p>
                                        <p className="leading-relaxed">{quiz.description}</p>
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

InstructorQuizEdit.layout = (page: React.ReactNode) => {
    const props = (page as React.ReactElement)?.props as Props | undefined;
    const isAdmin = props?.auth?.user?.role === 'admin';
    const courseBackUrl = props?.course ? (isAdmin ? `/admin/courses/${props.course.id}` : `/instructor/courses/${props.course.slug}`) : '#';
    const listBackUrl = isAdmin ? '/admin/courses' : '/instructor/courses';
    const breadcrumbs: BreadcrumbItem[] = props?.course
        ? [
              { title: isAdmin ? 'Admin' : 'Kelas Saya', href: listBackUrl },
              { title: props.course.title, href: courseBackUrl },
              { title: props.quiz?.title ?? 'Kuis', href: '#' },
          ]
        : [];
    return <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>;
};