import { Form, Head, Link, router, useForm } from '@inertiajs/react';
import {
    ArrowLeft,
    BookOpen,
    Check,
    ChevronDown,
    ClipboardCheck,
    Copy,
    ExternalLink,
    Eye,
    FileText,
    GraduationCap,
    GripVertical,
    LayoutList,
    Link2,
    Lock,
    Pencil,
    Play,
    Plus,
    Save,
    Tag,
    Trash2,
    Users,
    X,
    ImagePlus,
} from 'lucide-react';
import { useEffect, useRef, 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,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    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';
import * as AdminCourseController from '@/actions/App/Http/Controllers/Admin/CourseController';

type Lesson = {
    id: number;
    title: string;
    type: string;
    duration_minutes: number;
    is_preview: boolean;
    order: number;
};
type Quiz = {
    id: number;
    title: string;
    duration_minutes: number;
    passing_score: number;
    order: number;
};
type Assignment = {
    id: number;
    title: string;
    deadline: string | null;
    max_score: number;
    order: number;
};
type Chapter = {
    id: number;
    title: string;
    order: number;
    lessons: Lesson[];
    quizzes: Quiz[];
    assignments: Assignment[];
};

type MergedItem =
    | (Lesson & { kind: 'lesson' })
    | (Quiz & { kind: 'quiz' })
    | (Assignment & { kind: 'assignment' });

function buildItems(chapter: Chapter): MergedItem[] {
    const lessons = chapter.lessons.map((l) => ({
        kind: 'lesson' as const,
        ...l,
    }));
    const quizzes = chapter.quizzes.map((q) => ({
        kind: 'quiz' as const,
        ...q,
    }));
    const assignments = chapter.assignments.map((a) => ({
        kind: 'assignment' as const,
        ...a,
    }));
    const all = [...lessons, ...quizzes, ...assignments];
    const orders = all.map((i) => i.order);
    if (new Set(orders).size === orders.length && all.length > 0) {
        return all.sort((a, b) => a.order - b.order);
    }
    return [
        ...lessons.sort((a, b) => a.order - b.order),
        ...quizzes.sort((a, b) => a.order - b.order),
        ...assignments.sort((a, b) => a.order - b.order),
    ];
}

type Course = {
    id: number;
    title: string;
    slug: string;
    description: string | null;
    status: string;
    price_type: string;
    price: number;
    level: string;
    is_sequential: boolean;
    has_landing_page: boolean;
    landing_page_html: string | null;
    affiliate_enabled: boolean;
    alumni_commission_rate: number | null;
    non_alumni_commission_rate: number | null;
    bank_name: string | null;
    bank_account: string | null;
    bank_holder: string | null;
    category: { id: number; name: string } | null;
    instructor: { id: number; name: string } | null;
    chapters: Chapter[];
    thumbnail: string | null;
};

type EnrollmentItem = {
    id: number;
    status: string;
    enrolled_at: string | null;
    completed_at: string | null;
    user: {
        id: number;
        name: string;
        email: string;
        role: string;
        gender: string | null;
        birth_date: string | null;
        points: number;
        created_at: string;
        enrollments_count: number;
    };
};

type Props = {
    course: Course;
    enrollmentCount: number;
    enrollments: EnrollmentItem[];
    categories: { id: number; name: string }[];
    instructors: { id: number; name: string }[];
};

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Admin', href: '/admin' },
    { title: 'Kelas', href: '/admin/courses' },
    { title: 'Detail Kelas', href: '#' },
];

const STATUS_CONFIG: Record<
    string,
    { label: string; badge: string; dot: string; select: string }
> = {
    draft: {
        label: 'Draft',
        badge: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400',
        dot: 'bg-zinc-400',
        select: 'text-zinc-600',
    },
    pending_review: {
        label: 'Menunggu Review',
        badge: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400',
        dot: 'bg-amber-400',
        select: 'text-amber-700',
    },
    published: {
        label: 'Published',
        badge: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-400',
        dot: 'bg-emerald-500',
        select: 'text-emerald-700',
    },
    rejected: {
        label: 'Ditolak',
        badge: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400',
        dot: 'bg-red-500',
        select: 'text-red-700',
    },
    archived: {
        label: 'Diarsipkan',
        badge: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400',
        dot: 'bg-zinc-400',
        select: 'text-zinc-600',
    },
};

const LEVEL_LABELS: Record<string, string> = {
    beginner: 'Pemula',
    intermediate: 'Menengah',
    advanced: 'Lanjutan',
};

const CARD_GRADIENTS = [
    'from-blue-200 to-sky-200',
    'from-sky-200 to-cyan-200',
    'from-teal-200 to-emerald-200',
    'from-rose-200 to-pink-200',
    'from-amber-200 to-orange-200',
    'from-cyan-200 to-sky-200',
    'from-slate-200 to-gray-200',
    'from-green-200 to-teal-200',
];

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';
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 ITEM_TYPE: Record<
    string,
    { icon: React.ElementType; color: string; label: string }
> = {
    video: {
        icon: Play,
        color: 'text-blue-500 bg-blue-50 dark:bg-blue-950/40',
        label: 'Video',
    },
    text: {
        icon: FileText,
        color: 'text-slate-500 bg-slate-50 dark:bg-slate-800/50',
        label: 'Teks',
    },
    pdf: {
        icon: FileText,
        color: 'text-red-500 bg-red-50 dark:bg-red-950/40',
        label: 'PDF',
    },
    quiz: {
        icon: ClipboardCheck,
        color: 'text-orange-500 bg-orange-50 dark:bg-orange-950/40',
        label: 'Kuis',
    },
    assignment: {
        icon: GraduationCap,
        color: 'text-teal-500 bg-teal-50 dark:bg-teal-950/40',
        label: 'Tugas',
    },
};

function ItemIcon({ type }: { type: string }) {
    const meta = ITEM_TYPE[type] ?? ITEM_TYPE.text;
    const Icon = meta.icon;
    return (
        <span
            className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-md ${meta.color}`}
        >
            <Icon className="h-3.5 w-3.5" />
        </span>
    );
}

function buildLandingPagePrompt(course: Course): string {
    const chapterList = course.chapters.length
        ? course.chapters
              .map(
                  (c, i) =>
                      `  ${i + 1}. ${c.title} (${c.lessons.length} materi)`,
              )
              .join('\n')
        : '  (belum ada chapter dibuat)';

    return `Buatkan landing page untuk mempromosikan kelas online berjudul "${course.title}".

PENTING — ini bukan HTML statis biasa, tapi template Blade (Laravel) yang akan dirender ulang setiap halaman diakses. Supaya kontennya tetap ikut update kalau data kelas berubah (harga, judul, kurikulum, dll berubah nanti), JANGAN tulis nilai-nilai itu sebagai teks statis — WAJIB pakai variabel Blade berikut, jangan diketik manual:

- {{ $course->title }} — judul kelas
- {{ $course->description }} — deskripsi kelas
- {{ $course->price_type === 'free' ? 'Gratis' : 'Rp '.number_format($course->price, 0, ',', '.') }} — harga
- {{ $course->level }} — level (beginner/intermediate/advanced)
- {{ $course->instructor->name ?? '' }} — nama instruktur
- {{ $course->category->name ?? '' }} — nama kategori
- {{ $course->slug }} — untuk link tombol daftar, contoh: href="/courses/{{ $course->slug }}"
- $course->chapters — daftar chapter/modul kurikulum, tiap chapter punya ->title dan ->lessons (masing-masing lesson punya ->title dan ->duration_minutes)

Kurikulum WAJIB ditampilkan secara dinamis pakai loop Blade, contoh:
@foreach ($course->chapters as $chapter)
    {{ $chapter->title }}
    @foreach ($chapter->lessons as $lesson)
        {{ $lesson->title }} ({{ $lesson->duration_minutes }} menit)
    @endforeach
@endforeach

Data kelas saat ini (untuk referensi gaya bahasa/nada saja, TETAP tulis pakai variabel di atas, bukan nilai ini):
- Judul: ${course.title}
- Deskripsi: ${course.description ?? '(belum ada deskripsi, buat sendiri yang menarik)'}
- Level: ${LEVEL_LABELS[course.level] ?? course.level}
- Instruktur: ${course.instructor?.name ?? '-'}
- Kategori: ${course.category?.name ?? '-'}
- Kurikulum saat ini:
${chapterList}

Elemen wajib ada:
1. Hero section dengan judul kelas dan kalimat ajakan (CTA) yang jelas.
2. Tombol "Daftar Sekarang" / "Beli Sekarang" yang mengarah ke href="/courses/{{ $course->slug }}".
3. Ringkasan manfaat atau poin-poin yang akan didapat peserta.
4. Bagian "Kurikulum" / "Yang akan kamu pelajari" — WAJIB pakai loop $course->chapters seperti contoh di atas, jangan diketik manual.
5. Bagian harga yang jelas terlihat (pakai variabel harga di atas).
6. Testimoni (boleh placeholder jika belum ada data asli).
7. FAQ singkat (opsional tapi disarankan).
8. Footer sederhana khusus untuk halaman ini.

Ketentuan teknis (WAJIB dipatuhi):
- Output HANYA kode Blade (boleh HTML lengkap dengan <html>/<head>/<body>, atau cukup potongan section — keduanya boleh), tanpa penjelasan tambahan di luar kode.
- JANGAN sertakan <nav> atau header navigasi situs — halaman ini sudah punya navbar bawaan sendiri, kalau ditambah jadi dobel.
- JANGAN pakai <script type="module" src="..."> yang mengambil file dari domain lain — akan diblokir CORS browser dan halaman jadi kosong. Kalau butuh interaktivitas, pakai <script> biasa yang isinya ditulis langsung (inline).
- Styling pakai <style> inline di dalam kode ini atau inline style attribute, jangan bergantung ke stylesheet dari domain lain.
- Semua gambar pakai URL publik yang bisa diakses langsung (atau placeholder seperti https://picsum.photos/...).`;
}

function ToggleSwitch({
    checked,
    onChange,
}: {
    checked: boolean;
    onChange: (v: boolean) => void;
}) {
    return (
        <button
            type="button"
            role="switch"
            aria-checked={checked}
            onClick={() => onChange(!checked)}
            className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none ${checked ? 'bg-blue-500' : 'bg-input'}`}
        >
            <span
                className={`pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ${checked ? 'translate-x-4' : 'translate-x-0'}`}
            />
        </button>
    );
}

// ── Modals ──────────────────────────────────────────────────────────────────
function AddChapterModal({ courseSlug }: { courseSlug: string }) {
    const [open, setOpen] = useState(false);
    const { data, setData, post, processing, errors, reset } = useForm({
        title: '',
    });

    function submit(e: React.FormEvent) {
        e.preventDefault();
        post(`/instructor/courses/${courseSlug}/chapters`, {
            preserveScroll: true,
            onSuccess: () => {
                setOpen(false);
                reset();
            },
        });
    }

    return (
        <Dialog
            open={open}
            onOpenChange={(v) => {
                if (!v) reset();
                setOpen(v);
            }}
        >
            <DialogTrigger asChild>
                <Button variant="outline" size="sm" className="gap-1.5">
                    <Plus className="h-3.5 w-3.5" /> Tambah Chapter
                </Button>
            </DialogTrigger>
            <DialogContent className="max-w-sm">
                <DialogTitle>Tambah Chapter</DialogTitle>
                <form onSubmit={submit} className="mt-3 flex flex-col gap-4">
                    <div className="grid gap-1.5">
                        <Label htmlFor="ch-title">Judul Chapter *</Label>
                        <Input
                            id="ch-title"
                            required
                            autoFocus
                            value={data.title}
                            onChange={(e) => setData('title', e.target.value)}
                            placeholder="Mis: Pendahuluan, Bab 1, ..."
                        />
                        <InputError message={errors.title} />
                    </div>
                    <div className="flex justify-end gap-2">
                        <Button
                            type="button"
                            variant="outline"
                            onClick={() => setOpen(false)}
                        >
                            Batal
                        </Button>
                        <Button type="submit" disabled={processing}>
                            {processing && <Spinner />} Tambah
                        </Button>
                    </div>
                </form>
            </DialogContent>
        </Dialog>
    );
}

function AddQuizModal({
    courseSlug,
    chapterId,
}: {
    courseSlug: string;
    chapterId: number;
}) {
    const [open, setOpen] = useState(false);
    const { data, setData, post, processing, errors, reset } = useForm({
        title: '',
        description: '',
        duration_minutes: 30,
        passing_score: 70,
        max_attempts: 3,
        deadline: '',
        late_policy: 'closed',
    });

    function submit(e: React.FormEvent) {
        e.preventDefault();
        post(
            `/instructor/courses/${courseSlug}/chapters/${chapterId}/quizzes`,
            {
                preserveScroll: true,
                onSuccess: () => {
                    setOpen(false);
                    reset();
                },
            },
        );
    }

    return (
        <Dialog
            open={open}
            onOpenChange={(v) => {
                if (!v) reset();
                setOpen(v);
            }}
        >
            <DialogTrigger asChild>
                <button className="flex items-center gap-1.5 rounded-md bg-amber-500 px-2.5 py-1.5 text-xs font-medium text-white transition-colors hover:bg-amber-600">
                    <Plus className="h-3.5 w-3.5" /> Kuis
                </button>
            </DialogTrigger>
            <DialogContent className="max-w-md">
                <DialogTitle>Tambah Kuis</DialogTitle>
                <form onSubmit={submit} className="mt-3 flex flex-col gap-4">
                    <div className="grid gap-1.5">
                        <Label>Judul *</Label>
                        <Input
                            required
                            autoFocus
                            value={data.title}
                            onChange={(e) => setData('title', e.target.value)}
                            placeholder="Kuis Bab 1"
                        />
                        <InputError message={errors.title} />
                    </div>
                    <div className="grid gap-1.5">
                        <Label>Deskripsi</Label>
                        <textarea
                            value={data.description}
                            onChange={(e) =>
                                setData('description', e.target.value)
                            }
                            rows={2}
                            className={textareaCls}
                            placeholder="Opsional"
                        />
                    </div>
                    <div className="grid grid-cols-3 gap-3">
                        <div className="grid gap-1.5">
                            <Label>Durasi (mnt)</Label>
                            <Input
                                type="number"
                                min="1"
                                value={data.duration_minutes}
                                onChange={(e) =>
                                    setData(
                                        'duration_minutes',
                                        Number(e.target.value),
                                    )
                                }
                            />
                        </div>
                        <div className="grid gap-1.5">
                            <Label>Lulus (%)</Label>
                            <Input
                                type="number"
                                min="0"
                                max="100"
                                value={data.passing_score}
                                onChange={(e) =>
                                    setData(
                                        'passing_score',
                                        Number(e.target.value),
                                    )
                                }
                            />
                        </div>
                        <div className="grid gap-1.5">
                            <Label>Maks Coba</Label>
                            <Input
                                type="number"
                                min="1"
                                value={data.max_attempts}
                                onChange={(e) =>
                                    setData(
                                        'max_attempts',
                                        Number(e.target.value),
                                    )
                                }
                            />
                        </div>
                    </div>
                    <div className="grid gap-1.5">
                        <Label>
                            Batas Waktu Pengerjaan (Hari setelah mendaftar -
                            opsional)
                        </Label>
                        <Input
                            type="number"
                            min="0"
                            placeholder="Contoh: 7"
                            value={data.deadline}
                            onChange={(e) =>
                                setData('deadline', e.target.value)
                            }
                        />
                        <InputError message={errors.deadline} />
                    </div>
                    <div className="grid gap-1.5">
                        <Label>Kebijakan Setelah Deadline</Label>
                        <select
                            value={data.late_policy}
                            onChange={(e) =>
                                setData('late_policy', e.target.value)
                            }
                            className={selectCls}
                        >
                            <option value="closed">
                                Ditutup — tidak bisa dikerjakan setelah deadline
                            </option>
                            <option value="allowed">
                                Boleh terlambat — tetap bisa dikerjakan
                            </option>
                        </select>
                    </div>
                    <div className="flex justify-end gap-2">
                        <Button
                            type="button"
                            variant="outline"
                            onClick={() => setOpen(false)}
                        >
                            Batal
                        </Button>
                        <Button type="submit" disabled={processing}>
                            {processing && <Spinner />} Tambah
                        </Button>
                    </div>
                </form>
            </DialogContent>
        </Dialog>
    );
}

function AddAssignmentModal({
    courseSlug,
    chapterId,
}: {
    courseSlug: string;
    chapterId: number;
}) {
    const [open, setOpen] = useState(false);
    const { data, setData, post, processing, errors, reset } = useForm({
        title: '',
        instructions: '',
        deadline: '',
        late_policy: 'closed',
        max_score: 100,
        submission_type: 'file',
    });

    function submit(e: React.FormEvent) {
        e.preventDefault();
        post(
            `/instructor/courses/${courseSlug}/chapters/${chapterId}/assignments`,
            {
                preserveScroll: true,
                onSuccess: () => {
                    setOpen(false);
                    reset();
                },
            },
        );
    }

    return (
        <Dialog
            open={open}
            onOpenChange={(v) => {
                if (!v) reset();
                setOpen(v);
            }}
        >
            <DialogTrigger asChild>
                <button className="flex items-center gap-1.5 rounded-md bg-emerald-600 px-2.5 py-1.5 text-xs font-medium text-white transition-colors hover:bg-emerald-700">
                    <Plus className="h-3.5 w-3.5" /> Tugas
                </button>
            </DialogTrigger>
            <DialogContent className="max-w-md">
                <DialogTitle>Tambah Tugas</DialogTitle>
                <form onSubmit={submit} className="mt-3 flex flex-col gap-4">
                    <div className="grid gap-1.5">
                        <Label>Judul *</Label>
                        <Input
                            required
                            autoFocus
                            value={data.title}
                            onChange={(e) => setData('title', e.target.value)}
                            placeholder="Tugas Praktik Bab 1"
                        />
                        <InputError message={errors.title} />
                    </div>
                    <div className="grid gap-1.5">
                        <Label>Instruksi</Label>
                        <textarea
                            value={data.instructions}
                            onChange={(e) =>
                                setData('instructions', e.target.value)
                            }
                            rows={3}
                            className={textareaCls}
                            placeholder="Langkah-langkah pengerjaan..."
                        />
                    </div>
                    <div className="grid grid-cols-2 gap-3">
                        <div className="grid gap-1.5">
                            <Label>Deadline (Hari setelah mendaftar)</Label>
                            <Input
                                type="number"
                                min="0"
                                placeholder="Contoh: 7"
                                value={data.deadline}
                                onChange={(e) =>
                                    setData('deadline', e.target.value)
                                }
                            />
                            <InputError message={errors.deadline} />
                        </div>
                        <div className="grid gap-1.5">
                            <Label>Nilai Maks</Label>
                            <Input
                                type="number"
                                min="1"
                                value={data.max_score}
                                onChange={(e) =>
                                    setData('max_score', Number(e.target.value))
                                }
                            />
                        </div>
                    </div>
                    <div className="grid gap-1.5">
                        <Label>Tipe Pengumpulan</Label>
                        <select
                            value={data.submission_type}
                            onChange={(e) =>
                                setData('submission_type', e.target.value)
                            }
                            className={selectCls}
                        >
                            <option value="file">Hanya File</option>
                            <option value="text">
                                Hanya Teks / Rich Editor
                            </option>
                            <option value="both">File & Teks (Keduanya)</option>
                        </select>
                        <InputError message={errors.submission_type} />
                    </div>
                    <div className="grid gap-1.5">
                        <Label>Kebijakan Setelah Deadline</Label>
                        <select
                            value={data.late_policy}
                            onChange={(e) =>
                                setData('late_policy', e.target.value)
                            }
                            className={selectCls}
                        >
                            <option value="closed">
                                Ditutup — tidak bisa dikumpulkan setelah
                                deadline
                            </option>
                            <option value="allowed">
                                Boleh terlambat — tetap bisa dikumpulkan
                            </option>
                        </select>
                    </div>
                    <div className="flex justify-end gap-2">
                        <Button
                            type="button"
                            variant="outline"
                            onClick={() => setOpen(false)}
                        >
                            Batal
                        </Button>
                        <Button type="submit" disabled={processing}>
                            {processing && <Spinner />} Tambah
                        </Button>
                    </div>
                </form>
            </DialogContent>
        </Dialog>
    );
}

function EditCourseDialog({
    course,
    categories,
    instructors,
}: {
    course: Course;
    categories: { id: number; name: string }[];
    instructors: { id: number; name: string }[];
}) {
    const [open, setOpen] = useState(false);
    const [thumbPreview, setThumbPreview] = useState<string | null>(
        course.thumbnail,
    );
    const [priceType, setPriceType] = useState<string>(course.price_type);
    const thumbInputRef = useRef<HTMLInputElement>(null);

    function handleThumbChange(e: React.ChangeEvent<HTMLInputElement>) {
        const file = e.target.files?.[0];
        if (!file) return;
        setThumbPreview(URL.createObjectURL(file));
    }

    function clearThumb() {
        setThumbPreview(null);
        if (thumbInputRef.current) thumbInputRef.current.value = '';
    }

    function handleClose(val: boolean) {
        if (!val) {
            setThumbPreview(course.thumbnail);
            if (thumbInputRef.current) thumbInputRef.current.value = '';
        }
        setOpen(val);
    }

    return (
        <Dialog open={open} onOpenChange={handleClose}>
            <DialogTrigger asChild>
                <Button
                    variant="outline"
                    size="sm"
                    className="w-full gap-1.5 border-blue-200 bg-blue-50/50 text-blue-600 shadow-xs hover:bg-blue-100 hover:text-blue-700 dark:border-blue-900/50 dark:bg-blue-950/20 dark:text-blue-400 dark:hover:bg-blue-950/40"
                >
                    <Pencil className="h-3.5 w-3.5" /> Edit Informasi
                </Button>
            </DialogTrigger>
            <DialogContent className="max-h-[90vh] max-w-md overflow-y-auto">
                <DialogTitle>Edit Informasi Kelas</DialogTitle>
                <Form
                    action={AdminCourseController.update(course.id).url}
                    method="post"
                    onSuccess={() => {
                        setOpen(false);
                        router.reload({ preserveScroll: true });
                    }}
                    className="mt-3 flex flex-col gap-3"
                >
                    {({ errors, processing }) => (
                        <>
                            <input type="hidden" name="_method" value="PATCH" />
                            <div className="grid gap-1.5">
                                <Label>Gambar Cover Kelas</Label>
                                <input
                                    ref={thumbInputRef}
                                    type="file"
                                    name="thumbnail"
                                    accept="image/*"
                                    className="hidden"
                                    onChange={handleThumbChange}
                                />
                                {thumbPreview ? (
                                    <div className="relative w-full overflow-hidden rounded-xl border">
                                        <img
                                            src={thumbPreview}
                                            alt="Preview"
                                            className="h-36 w-full object-cover"
                                        />
                                        <button
                                            type="button"
                                            onClick={clearThumb}
                                            className="absolute top-2 right-2 flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white hover:bg-black/80"
                                        >
                                            <X className="h-4 w-4" />
                                        </button>
                                    </div>
                                ) : (
                                    <button
                                        type="button"
                                        onClick={() =>
                                            thumbInputRef.current?.click()
                                        }
                                        className="flex h-36 w-full flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed transition-colors hover:border-blue-400 hover:bg-blue-50/50 dark:hover:bg-blue-950/20"
                                    >
                                        <ImagePlus className="h-7 w-7 text-muted-foreground" />
                                        <span className="text-sm text-muted-foreground">
                                            Klik untuk upload gambar cover
                                        </span>
                                        <span className="text-xs text-muted-foreground">
                                            PNG, JPG, WEBP — maks. 2MB
                                        </span>
                                    </button>
                                )}
                                <InputError message={errors.thumbnail} />
                            </div>
                            <div className="grid gap-1.5">
                                <Label>Judul</Label>
                                <Input
                                    name="title"
                                    defaultValue={course.title}
                                />
                                <InputError message={errors.title} />
                            </div>
                            <div className="grid gap-1.5">
                                <Label>Deskripsi</Label>
                                <textarea
                                    name="description"
                                    rows={3}
                                    defaultValue={course.description ?? ''}
                                    className={textareaCls}
                                />
                            </div>
                            <div className="grid gap-1.5">
                                <Label>Instruktur</Label>
                                <select
                                    name="instructor_id"
                                    defaultValue={course.instructor?.id ?? ''}
                                    className={selectCls}
                                >
                                    <option value="">-- Pilih --</option>
                                    {instructors.map((i) => (
                                        <option key={i.id} value={i.id}>
                                            {i.name}
                                        </option>
                                    ))}
                                </select>
                            </div>
                            <div className="grid gap-1.5">
                                <Label>Kategori</Label>
                                <select
                                    name="category_id"
                                    defaultValue={course.category?.id ?? ''}
                                    className={selectCls}
                                >
                                    <option value="">-- Pilih --</option>
                                    {categories.map((c) => (
                                        <option key={c.id} value={c.id}>
                                            {c.name}
                                        </option>
                                    ))}
                                </select>
                            </div>
                            <div className="grid grid-cols-2 gap-3">
                                <div className="grid gap-1.5">
                                    <Label>Level</Label>
                                    <select
                                        name="level"
                                        defaultValue={course.level}
                                        className={selectCls}
                                    >
                                        <option value="beginner">Pemula</option>
                                        <option value="intermediate">
                                            Menengah
                                        </option>
                                        <option value="advanced">
                                            Lanjutan
                                        </option>
                                    </select>
                                </div>
                                <div className="grid gap-1.5">
                                    <Label>Harga</Label>
                                    <select
                                        name="price_type"
                                        defaultValue={course.price_type}
                                        className={selectCls}
                                        onChange={(e) =>
                                            setPriceType(e.target.value)
                                        }
                                    >
                                        <option value="free">Gratis</option>
                                        <option value="paid">Berbayar</option>
                                    </select>
                                </div>
                            </div>

                            {priceType === 'paid' && (
                                <div className="mt-1 flex flex-col gap-3 rounded-xl border bg-blue-50/50 p-4 dark:bg-blue-950/20">
                                    <div className="grid gap-1">
                                        <Label
                                            htmlFor="price_input"
                                            className="text-xs font-semibold"
                                        >
                                            Harga (Rp) *
                                        </Label>
                                        <Input
                                            id="price_input"
                                            name="price"
                                            type="number"
                                            min="0"
                                            defaultValue={course.price}
                                            required
                                        />
                                        <InputError message={errors.price} />
                                    </div>
                                </div>
                            )}

                            <div className="flex justify-end gap-2 pt-1">
                                <Button
                                    type="button"
                                    variant="outline"
                                    onClick={() => handleClose(false)}
                                >
                                    Batal
                                </Button>
                                <Button
                                    type="submit"
                                    disabled={processing}
                                    className="gap-1.5"
                                >
                                    {processing ? (
                                        <Spinner />
                                    ) : (
                                        <Save className="h-3.5 w-3.5" />
                                    )}{' '}
                                    Simpan
                                </Button>
                            </div>
                        </>
                    )}
                </Form>
            </DialogContent>
        </Dialog>
    );
}

// ── Chapter Card ────────────────────────────────────────────────────────────
type ChapterCardProps = {
    chapter: Chapter;
    courseId: number;
    courseSlug: string;
    chapterIndex: number;
    globalLessonOffset: number;
    isSequential: boolean;
    isDragging: boolean;
    isDragOver: boolean;
    onDragStart: () => void;
    onDragOver: (e: React.DragEvent) => void;
    onDragEnd: () => void;
    onDrop: () => void;
};

function ChapterCard({
    chapter,
    courseId,
    courseSlug,
    chapterIndex,
    globalLessonOffset,
    isSequential,
    isDragging,
    isDragOver,
    onDragStart,
    onDragOver,
    onDragEnd,
    onDrop,
}: ChapterCardProps) {
    const [expanded, setExpanded] = useState(true);
    const [items, setItems] = useState<MergedItem[]>(() => buildItems(chapter));
    const [draggingIdx, setDraggingIdx] = useState<number | null>(null);
    const dragRef = useRef<number | null>(null);
    const [delChapterModal, setDelChapterModal] = useState(false);
    const [delItemModal, setDelItemModal] = useState<MergedItem | null>(null);
    const [editing, setEditing] = useState(false);
    const {
        data: editData,
        setData: setEditData,
        patch: patchChapter,
        processing: editProcessing,
        reset: resetEdit,
    } = useForm({ title: chapter.title });

    useEffect(() => {
        setItems(buildItems(chapter));
    }, [chapter]);

    const isFirstChapter = chapterIndex === 0;

    const chapterBlockedReason =
        items.length > 0
            ? `Chapter tidak dapat dihapus karena masih memiliki ${items.length} materi. Hapus semua materi terlebih dahulu.`
            : undefined;

    function del() {
        setDelChapterModal(true);
    }

    function confirmDel() {
        router.delete(
            `/instructor/courses/${courseSlug}/chapters/${chapter.id}`,
        );
    }

    function delItem(item: MergedItem) {
        setDelItemModal(item);
    }

    function confirmDelItem() {
        if (!delItemModal) return;
        if (delItemModal.kind === 'lesson')
            router.delete(
                `/instructor/courses/${courseSlug}/chapters/${chapter.id}/lessons/${delItemModal.id}`,
            );
        if (delItemModal.kind === 'quiz')
            router.delete(
                `/instructor/courses/${courseSlug}/chapters/${chapter.id}/quizzes/${delItemModal.id}`,
            );
        if (delItemModal.kind === 'assignment')
            router.delete(
                `/instructor/courses/${courseSlug}/chapters/${chapter.id}/assignments/${delItemModal.id}`,
            );
        setDelItemModal(null);
    }

    function handleItemDragStart(i: number) {
        dragRef.current = i;
        setDraggingIdx(i);
    }

    function handleItemDragOver(e: React.DragEvent, i: number) {
        e.preventDefault();
        e.stopPropagation();
        const from = dragRef.current;
        if (from === null || from === i) return;
        setItems((prev) => {
            const next = [...prev];
            const [moved] = next.splice(from, 1);
            next.splice(i, 0, moved);
            return next;
        });
        dragRef.current = i;
        setDraggingIdx(i);
    }

    function handleItemDrop(e: React.DragEvent) {
        e.stopPropagation();
        setDraggingIdx(null);
        dragRef.current = null;
        router.patch(
            AdminCourseController.reorderItems({
                course: courseId,
                chapter: chapter.id,
            }).url,
            { items: items.map((it) => ({ type: it.kind, id: it.id })) },
            { preserveScroll: true },
        );
    }

    function handleItemDragEnd() {
        setDraggingIdx(null);
        dragRef.current = null;
    }

    function startEdit(e: React.MouseEvent) {
        e.stopPropagation();
        setEditData('title', chapter.title);
        setEditing(true);
    }

    function saveEdit(e: React.FormEvent) {
        e.preventDefault();
        patchChapter(
            `/instructor/courses/${courseSlug}/chapters/${chapter.id}`,
            {
                preserveScroll: true,
                onSuccess: () => {
                    setEditing(false);
                    resetEdit();
                },
            },
        );
    }

    function itemMeta(item: MergedItem): { sub: string; href: string | null } {
        if (item.kind === 'lesson') {
            const type = ITEM_TYPE[item.type]?.label ?? item.type;
            const dur =
                item.duration_minutes > 0
                    ? ` · ${item.duration_minutes} mnt`
                    : '';
            const prev = item.is_preview ? ' · Preview' : '';
            return {
                sub: `${type}${dur}${prev}`,
                href: `/instructor/courses/${courseSlug}/lessons/${item.id}`,
            };
        }
        if (item.kind === 'quiz') {
            return {
                sub: `Kuis · ${item.duration_minutes} mnt · Lulus ${item.passing_score}%`,
                href: `/instructor/courses/${courseSlug}/quizzes/${item.id}`,
            };
        }
        const deadline = item.deadline
            ? ` · Deadline ${item.deadline} hari setelah mendaftar`
            : '';
        return {
            sub: `Tugas · Nilai maks ${item.max_score}${deadline}`,
            href: `/instructor/courses/${courseSlug}/assignments/${item.id}/submissions`,
        };
    }

    function itemIcon(item: MergedItem) {
        if (item.kind === 'quiz') return <ItemIcon type="quiz" />;
        if (item.kind === 'assignment') return <ItemIcon type="assignment" />;
        return <ItemIcon type={item.type} />;
    }

    let lessonCounter = globalLessonOffset;

    const totalItems = items.length;

    return (
        <div
            className={[
                'overflow-hidden rounded-xl border bg-card shadow-xs transition-all duration-150 select-none',
                isDragging
                    ? 'scale-[0.99] opacity-40 shadow-none'
                    : 'opacity-100',
                isDragOver && !isDragging
                    ? 'border-blue-300/60 shadow-md ring-2 ring-blue-100'
                    : '',
            ].join(' ')}
            onDragOver={(e) => {
                e.preventDefault();
                onDragOver(e);
            }}
            onDrop={onDrop}
        >
            {/* Chapter header */}
            {editing ? (
                <form
                    onSubmit={saveEdit}
                    className="flex items-center gap-2 px-4 py-2.5"
                >
                    <div className="shrink-0 cursor-grab touch-none text-muted-foreground/30">
                        <GripVertical className="h-4 w-4" />
                    </div>
                    <span
                        className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-bold ${
                            isSequential && !isFirstChapter
                                ? 'bg-amber-100 text-amber-700'
                                : 'bg-blue-100 text-blue-700'
                        }`}
                    >
                        {chapterIndex + 1}
                    </span>
                    <Input
                        autoFocus
                        value={editData.title}
                        onChange={(e) => setEditData('title', e.target.value)}
                        className="h-8 flex-1 text-sm font-semibold"
                        onClick={(e) => e.stopPropagation()}
                    />
                    <button
                        type="submit"
                        disabled={editProcessing}
                        className="shrink-0 rounded-md p-1.5 text-emerald-600 transition-colors hover:bg-emerald-50"
                    >
                        <Check className="h-4 w-4" />
                    </button>
                    <button
                        type="button"
                        onClick={() => setEditing(false)}
                        className="shrink-0 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted"
                    >
                        <X className="h-4 w-4" />
                    </button>
                </form>
            ) : (
                <div
                    className={`flex items-center gap-3 px-4 py-3 select-none ${expanded ? '' : ''}`}
                >
                    <div
                        draggable
                        onDragStart={onDragStart}
                        onDragEnd={onDragEnd}
                        className="shrink-0 cursor-grab touch-none text-muted-foreground/30 hover:text-muted-foreground/60 active:cursor-grabbing"
                    >
                        <GripVertical className="h-4 w-4" />
                    </div>

                    {/* Chapter number badge */}
                    <span
                        className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-bold ${
                            isSequential && !isFirstChapter
                                ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
                                : 'bg-blue-100 text-blue-700'
                        }`}
                    >
                        {chapterIndex + 1}
                    </span>

                    {/* Title area */}
                    <div
                        className="flex flex-1 cursor-pointer items-center gap-2 overflow-hidden"
                        onClick={() => setExpanded((v) => !v)}
                    >
                        <p className="flex-1 truncate text-sm font-semibold">
                            {chapter.title}
                        </p>
                        {isSequential && !isFirstChapter && (
                            <span className="hidden shrink-0 items-center gap-1 rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-medium text-amber-600 sm:flex dark:bg-amber-900/20 dark:text-amber-400">
                                <Lock className="h-2.5 w-2.5" /> Terkunci
                            </span>
                        )}
                        <span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
                            {totalItems} item
                        </span>
                    </div>

                    <button
                        onClick={startEdit}
                        className="shrink-0 rounded-md border border-blue-200/60 bg-blue-50/50 p-1.5 text-blue-600 transition-colors hover:bg-blue-100 hover:text-blue-700 dark:bg-blue-950/20 dark:text-blue-400 dark:hover:bg-blue-950/40"
                    >
                        <Pencil className="h-3.5 w-3.5" />
                    </button>
                    <button
                        onClick={del}
                        className="shrink-0 rounded-md border border-destructive/20 bg-destructive/5 p-1.5 text-destructive transition-colors hover:bg-destructive/15 hover:text-destructive dark:bg-red-950/20 dark:text-red-400 dark:hover:bg-red-950/40"
                    >
                        <Trash2 className="h-3.5 w-3.5" />
                    </button>
                    <button
                        onClick={() => setExpanded((v) => !v)}
                        className="shrink-0 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted"
                    >
                        <ChevronDown
                            className={`h-4 w-4 transition-transform duration-200 ${expanded ? '' : '-rotate-90'}`}
                        />
                    </button>
                </div>
            )}

            {expanded && (
                <>
                    <div className="border-t">
                        {items.length === 0 && (
                            <div className="flex items-center gap-2 px-12 py-5">
                                <p className="text-xs text-muted-foreground italic">
                                    Belum ada konten di chapter ini
                                </p>
                            </div>
                        )}

                        {items.map((item, i) => {
                            const { sub, href } = itemMeta(item);
                            const isDragging = draggingIdx === i;
                            let lessonSeqNum: number | null = null;
                            let isLessonLocked = false;
                            if (item.kind === 'lesson') {
                                lessonSeqNum = lessonCounter + 1;
                                isLessonLocked =
                                    isSequential && lessonCounter > 0;
                                lessonCounter++;
                            }

                            return (
                                <div
                                    key={`${item.kind}-${item.id}`}
                                    draggable
                                    onDragStart={() => handleItemDragStart(i)}
                                    onDragOver={(e) => handleItemDragOver(e, i)}
                                    onDrop={handleItemDrop}
                                    onDragEnd={handleItemDragEnd}
                                    className={[
                                        'group flex items-center gap-3 border-b px-4 py-2.5 select-none last:border-0',
                                        'transition-all duration-150',
                                        isDragging
                                            ? 'scale-[0.99] bg-muted/40 opacity-40'
                                            : 'opacity-100 hover:bg-muted/20',
                                    ].join(' ')}
                                >
                                    <div className="shrink-0 cursor-grab text-muted-foreground/25 hover:text-muted-foreground/60 active:cursor-grabbing">
                                        <GripVertical className="h-3.5 w-3.5" />
                                    </div>

                                    {isSequential && item.kind === 'lesson' && (
                                        <span
                                            className={`flex h-5 w-5 shrink-0 items-center justify-center rounded text-[10px] font-bold ${
                                                isLessonLocked
                                                    ? 'bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400'
                                                    : 'bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400'
                                            }`}
                                        >
                                            {isLessonLocked ? (
                                                <Lock className="h-2.5 w-2.5" />
                                            ) : (
                                                lessonSeqNum
                                            )}
                                        </span>
                                    )}
                                    {isSequential && item.kind !== 'lesson' && (
                                        <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-muted text-[10px]">
                                            <Lock className="h-2.5 w-2.5 text-muted-foreground" />
                                        </span>
                                    )}

                                    {itemIcon(item)}

                                    <div
                                        className="min-w-0 flex-1"
                                        draggable={false}
                                    >
                                        {href ? (
                                            <Link
                                                href={href}
                                                className="block truncate text-sm font-medium underline-offset-2 hover:text-blue-600 hover:underline"
                                                onMouseDown={(e) =>
                                                    e.stopPropagation()
                                                }
                                            >
                                                {item.title}
                                            </Link>
                                        ) : (
                                            <p className="truncate text-sm font-medium">
                                                {item.title}
                                            </p>
                                        )}
                                        <p className="text-xs text-muted-foreground">
                                            {sub}
                                        </p>
                                    </div>

                                    <button
                                        onClick={() => delItem(item)}
                                        className="hidden shrink-0 rounded-md border border-destructive/20 bg-destructive/5 p-1.5 text-destructive transition-colors group-hover:flex hover:bg-destructive/15 hover:text-destructive dark:bg-red-950/20 dark:text-red-400 dark:hover:bg-red-950/40"
                                    >
                                        <Trash2 className="h-3.5 w-3.5" />
                                    </button>
                                </div>
                            );
                        })}
                    </div>

                    {/* Add content row */}
                    <div className="flex items-center gap-2 border-t bg-muted/10 px-4 py-2.5">
                        <span className="mr-1 text-xs font-medium text-muted-foreground">
                            Tambah:
                        </span>
                        <Link
                            href={`/instructor/courses/${courseSlug}/chapters/${chapter.id}/lessons/create`}
                            className="flex items-center gap-1.5 rounded-md bg-blue-200 px-2.5 py-1.5 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-300 dark:bg-blue-900/40 dark:text-blue-300 dark:hover:bg-blue-900/60"
                        >
                            <Plus className="h-3.5 w-3.5" /> Materi
                        </Link>
                        <AddQuizModal
                            courseSlug={courseSlug}
                            chapterId={chapter.id}
                        />
                        <AddAssignmentModal
                            courseSlug={courseSlug}
                            chapterId={chapter.id}
                        />
                    </div>
                </>
            )}

            <DeleteConfirmModal
                open={delChapterModal}
                onClose={() => setDelChapterModal(false)}
                onConfirm={confirmDel}
                title={`Hapus chapter "${chapter.title}"?`}
                description="Chapter dan semua isinya akan dihapus permanen."
                blockedReason={chapterBlockedReason}
            />
            <DeleteConfirmModal
                open={!!delItemModal}
                onClose={() => setDelItemModal(null)}
                onConfirm={confirmDelItem}
                title={
                    delItemModal
                        ? `Hapus ${delItemModal.kind === 'lesson' ? 'materi' : delItemModal.kind === 'quiz' ? 'kuis' : 'tugas'} "${delItemModal.title}"?`
                        : ''
                }
                description="Item ini akan dihapus permanen."
            />
        </div>
    );
}

// ── Affiliate Settings Card ──────────────────────────────────────────────────
function AffiliateSettingsCard({ course }: { course: Course }) {
    const [enabled, setEnabled] = useState(course.affiliate_enabled);
    const [alumniRate, setAlumniRate] = useState<string>(
        course.alumni_commission_rate?.toString() ?? '',
    );
    const [nonAlumniRate, setNonAlumniRate] = useState<string>(
        course.non_alumni_commission_rate?.toString() ?? '',
    );
    const [saving, setSaving] = useState(false);
    const [saved, setSaved] = useState(false);

    useEffect(() => {
        setEnabled(course.affiliate_enabled);
        setAlumniRate(course.alumni_commission_rate?.toString() ?? '');
        setNonAlumniRate(course.non_alumni_commission_rate?.toString() ?? '');
    }, [course]);

    function save() {
        setSaving(true);
        router.patch(
            `/admin/courses/${course.id}/affiliate`,
            {
                affiliate_enabled: enabled,
                alumni_commission_rate:
                    alumniRate !== '' ? parseFloat(alumniRate) : null,
                non_alumni_commission_rate:
                    nonAlumniRate !== '' ? parseFloat(nonAlumniRate) : null,
            },
            {
                preserveScroll: true,
                onSuccess: () => {
                    setSaved(true);
                    setTimeout(() => setSaved(false), 2000);
                },
                onFinish: () => setSaving(false),
            },
        );
    }

    return (
        <div className="rounded-xl border border-blue-100 bg-white shadow-xs dark:border-blue-900/30 dark:bg-card">
            <div className="flex items-center gap-2 border-b border-blue-100 bg-blue-50/60 px-4 py-3 dark:border-blue-900/20 dark:bg-blue-950/20">
                <Link2 className="h-4 w-4 shrink-0 text-blue-500" />
                <p className="min-w-0 truncate text-sm font-semibold text-blue-900 dark:text-blue-100">
                    Pengaturan Affiliate
                </p>
                {course.id && (
                    <a
                        href={`/admin/courses/${course.id}/affiliators`}
                        className="ml-auto shrink-0 text-xs font-semibold whitespace-nowrap text-blue-600 hover:underline"
                    >
                        Lihat Affiliator →
                    </a>
                )}
            </div>
            <div className="flex flex-col gap-4 px-4 py-4">
                <div className="flex items-center justify-between gap-3">
                    <div className="min-w-0">
                        <p className="text-sm font-medium">
                            Aktifkan Affiliate
                        </p>
                        <p className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
                            Izinkan affiliator membagikan kelas ini
                        </p>
                    </div>
                    <ToggleSwitch checked={enabled} onChange={setEnabled} />
                </div>

                {enabled && (
                    <>
                        <div className="grid gap-1.5">
                            <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
                                Komisi Alumni (%)
                            </label>
                            <input
                                type="number"
                                min="0"
                                max="100"
                                step="0.01"
                                value={alumniRate}
                                onChange={(e) => setAlumniRate(e.target.value)}
                                placeholder="Contoh: 20"
                                className="h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
                            />
                            <p className="text-[11px] text-muted-foreground">
                                Untuk anggota yang sudah pernah ikut kelas ini
                            </p>
                        </div>
                        <div className="grid gap-1.5">
                            <label className="text-xs font-semibold text-gray-700 dark:text-gray-300">
                                Komisi Non-alumni (%)
                            </label>
                            <input
                                type="number"
                                min="0"
                                max="100"
                                step="0.01"
                                value={nonAlumniRate}
                                onChange={(e) =>
                                    setNonAlumniRate(e.target.value)
                                }
                                placeholder="Contoh: 10"
                                className="h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
                            />
                            <p className="text-[11px] text-muted-foreground">
                                Untuk affiliator yang sudah disetujui admin
                                (non-alumni)
                            </p>
                        </div>
                    </>
                )}

                <div className="flex items-center gap-3">
                    <Button
                        size="sm"
                        onClick={save}
                        disabled={saving}
                        className="gap-1.5 border border-blue-200 bg-blue-100 text-xs text-blue-700 shadow-xs hover:bg-blue-200"
                    >
                        {saving ? (
                            <Spinner />
                        ) : (
                            <Save className="h-3.5 w-3.5" />
                        )}{' '}
                        Simpan
                    </Button>
                    {saved && (
                        <span className="flex items-center gap-1 text-xs font-semibold text-emerald-600">
                            <Check className="h-3.5 w-3.5" />
                            Tersimpan
                        </span>
                    )}
                </div>
            </div>
        </div>
    );
}

// ── Stat Card ────────────────────────────────────────────────────────────────
function StatCard({
    value,
    label,
    bgClass,
    textClass,
}: {
    value: number;
    label: string;
    bgClass: string;
    textClass: string;
}) {
    return (
        <div className={`rounded-xl p-4 shadow-xs ${bgClass}`}>
            <p className={`text-2xl font-bold tracking-tight ${textClass}`}>
                {value}
            </p>
            <p className={`mt-0.5 text-xs opacity-70 ${textClass}`}>{label}</p>
        </div>
    );
}

// ── Main Page ───────────────────────────────────────────────────────────────
export default function AdminCourseShow({
    course,
    enrollmentCount,
    enrollments,
    categories,
    instructors,
}: Props) {
    const [currentStatus, setCurrentStatus] = useState(course.status);
    const sc = STATUS_CONFIG[currentStatus] ?? STATUS_CONFIG.draft;
    const [isSequential, setIsSequential] = useState(course.is_sequential);
    const [hasLandingPage, setHasLandingPage] = useState(
        course.has_landing_page,
    );
    const [landingPageHtml, setLandingPageHtml] = useState(
        course.landing_page_html ?? '',
    );
    const [savingLandingPage, setSavingLandingPage] = useState(false);
    const [promptCopied, setPromptCopied] = useState(false);
    const [chapters, setChapters] = useState<Chapter[]>(course.chapters);
    const dragChapterRef = useRef<number | null>(null);
    const [draggingChapterIdx, setDraggingChapterIdx] = useState<number | null>(
        null,
    );

    useEffect(() => {
        setCurrentStatus(course.status);
    }, [course.status]);
    useEffect(() => {
        setChapters(course.chapters);
    }, [course.chapters]);
    useEffect(() => {
        setIsSequential(course.is_sequential);
    }, [course.is_sequential]);
    useEffect(() => {
        setHasLandingPage(course.has_landing_page);
    }, [course.has_landing_page]);
    useEffect(() => {
        setLandingPageHtml(course.landing_page_html ?? '');
    }, [course.landing_page_html]);
    const [deleteModal, setDeleteModal] = useState(false);
    const [selectedEnrollmentForDelete, setSelectedEnrollmentForDelete] =
        useState<EnrollmentItem | null>(null);

    const totalLessons = chapters.reduce((a, c) => a + c.lessons.length, 0);
    const totalQuizzesAssignments = chapters.reduce(
        (a, c) => a + c.quizzes.length + c.assignments.length,
        0,
    );

    const courseBlockedReason =
        chapters.length > 0
            ? `Kelas tidak dapat dihapus karena masih memiliki ${chapters.length} chapter. Hapus semua chapter terlebih dahulu.`
            : enrollmentCount > 0
              ? `Kelas tidak dapat dihapus karena ada ${enrollmentCount} siswa yang terdaftar.`
              : undefined;

    function changeStatus(newStatus: string) {
        setCurrentStatus(newStatus);
        router.patch(
            AdminCourseController.updateStatus(course.id).url,
            { status: newStatus },
            {
                preserveScroll: true,
                onError: () => setCurrentStatus(course.status),
            },
        );
    }

    function toggleSequential(value: boolean) {
        setIsSequential(value);
        router.patch(
            AdminCourseController.updateSequential(course.id).url,
            { is_sequential: value },
            { preserveScroll: true },
        );
    }

    function saveLandingPage() {
        setSavingLandingPage(true);
        router.patch(
            AdminCourseController.updateLandingPage(course.id).url,
            {
                has_landing_page: hasLandingPage,
                landing_page_html: landingPageHtml,
            },
            {
                preserveScroll: true,
                onFinish: () => setSavingLandingPage(false),
            },
        );
    }

    async function copyLandingPagePrompt() {
        const text = buildLandingPagePrompt(course);

        try {
            if (navigator.clipboard && window.isSecureContext) {
                await navigator.clipboard.writeText(text);
            } else {
                const textarea = document.createElement('textarea');
                textarea.value = text;
                textarea.style.position = 'fixed';
                textarea.style.opacity = '0';
                document.body.appendChild(textarea);
                textarea.focus();
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
            }
            setPromptCopied(true);
            setTimeout(() => setPromptCopied(false), 2000);
        } catch {
            alert(
                'Gagal menyalin otomatis. Silakan salin manual dari kotak teks di atas.',
            );
        }
    }

    function deleteCourse() {
        setDeleteModal(true);
    }

    function confirmDeleteCourse() {
        router.delete(AdminCourseController.destroy(course.id).url, {
            onSuccess: () => router.visit('/admin/courses'),
        });
    }

    function confirmDeleteEnrollment() {
        if (!selectedEnrollmentForDelete) return;
        router.delete(`/admin/enrollments/${selectedEnrollmentForDelete.id}`, {
            preserveScroll: true,
            onSuccess: () => setSelectedEnrollmentForDelete(null),
        });
    }

    function handleChapterDragStart(index: number) {
        dragChapterRef.current = index;
        setDraggingChapterIdx(index);
    }

    function handleChapterDragOver(overIndex: number, e: React.DragEvent) {
        e.preventDefault();
        const from = dragChapterRef.current;
        if (from === null || from === overIndex) return;
        setChapters((prev) => {
            const next = [...prev];
            const [moved] = next.splice(from, 1);
            next.splice(overIndex, 0, moved);
            return next;
        });
        dragChapterRef.current = overIndex;
        setDraggingChapterIdx(overIndex);
    }

    function handleChapterDrop() {
        setDraggingChapterIdx(null);
        dragChapterRef.current = null;
        router.patch(
            AdminCourseController.reorderChapters(course.id).url,
            {
                order: chapters.map((ch) => ch.id),
            },
            { preserveScroll: true },
        );
    }

    function handleChapterDragEnd() {
        setDraggingChapterIdx(null);
        dragChapterRef.current = null;
    }

    const lessonOffsets = chapters.reduce<{ offsets: number[]; total: number }>(
        (acc, ch) => {
            acc.offsets.push(acc.total);
            acc.total += ch.lessons.length;
            return acc;
        },
        { offsets: [], total: 0 },
    );

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

            <div className="flex flex-col gap-0">
                {/* ── Page Header ── */}
                <div className="border-b border-blue-100 bg-gradient-to-br from-blue-50 via-white to-indigo-50 px-4 py-5 md:px-8 dark:border-blue-900/30 dark:from-blue-950/30 dark:via-card dark:to-indigo-950/20">
                    {/* Back link */}
                    <Link
                        href="/admin/courses"
                        className="mb-4 inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
                    >
                        <ArrowLeft className="h-3.5 w-3.5" /> Kembali ke daftar
                        kelas
                    </Link>

                    <div className="flex flex-wrap items-start justify-between gap-4">
                        {/* Title + meta */}
                        <div className="min-w-0 flex-1">
                            <div className="flex flex-wrap items-center gap-2.5">
                                <h1 className="text-xl font-bold tracking-tight sm:text-2xl">
                                    {course.title}
                                </h1>
                                <span
                                    className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold ${sc.badge}`}
                                >
                                    <span
                                        className={`h-1.5 w-1.5 rounded-full ${sc.dot}`}
                                    />
                                    {sc.label}
                                </span>
                                {isSequential && (
                                    <span className="inline-flex items-center gap-1 rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
                                        <Lock className="h-3 w-3" /> Berurutan
                                    </span>
                                )}
                            </div>

                            {/* Meta chips */}
                            <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground">
                                <span className="flex items-center gap-1">
                                    <Users className="h-3.5 w-3.5 shrink-0" />
                                    <span className="font-medium text-foreground">
                                        {enrollmentCount}
                                    </span>{' '}
                                    siswa
                                </span>
                                {course.instructor && (
                                    <span className="flex items-center gap-1">
                                        <span className="h-3.5 w-px bg-border" />
                                        {course.instructor.name}
                                    </span>
                                )}
                                <span className="flex items-center gap-1">
                                    <span className="h-3.5 w-px bg-border" />
                                    {LEVEL_LABELS[course.level] ?? course.level}
                                </span>
                                {course.category && (
                                    <span className="flex items-center gap-1">
                                        <span className="h-3.5 w-px bg-border" />
                                        <Tag className="h-3 w-3 shrink-0" />
                                        {course.category.name}
                                    </span>
                                )}
                                <span className="flex items-center gap-1">
                                    <span className="h-3.5 w-px bg-border" />
                                    <span
                                        className={`font-semibold ${course.price_type === 'free' ? 'text-emerald-600 dark:text-emerald-400' : 'text-foreground'}`}
                                    >
                                        {course.price_type === 'free'
                                            ? 'Gratis'
                                            : `Rp ${course.price.toLocaleString('id-ID')}`}
                                    </span>
                                </span>
                            </div>
                        </div>

                        {/* Actions */}
                        <div className="flex shrink-0 flex-wrap items-center gap-2">
                            <div className="relative flex items-center">
                                <span
                                    className={`pointer-events-none absolute left-3 h-2 w-2 rounded-full ${sc.dot}`}
                                />
                                <select
                                    value={currentStatus}
                                    onChange={(e) =>
                                        changeStatus(e.target.value)
                                    }
                                    className="h-8 cursor-pointer appearance-none rounded-md border bg-background pr-8 pl-7 text-sm shadow-xs focus:ring-2 focus:ring-ring/50 focus:outline-none"
                                >
                                    {Object.entries(STATUS_CONFIG).map(
                                        ([value, cfg]) => (
                                            <option key={value} value={value}>
                                                {cfg.label}
                                            </option>
                                        ),
                                    )}
                                </select>
                                <ChevronDown className="pointer-events-none absolute right-2.5 h-3.5 w-3.5 text-muted-foreground" />
                            </div>

                            <Button
                                variant="outline"
                                size="sm"
                                asChild
                                className="border-zinc-200 bg-zinc-50/50 text-zinc-600 shadow-xs hover:bg-zinc-100 hover:text-zinc-700 dark:border-zinc-800 dark:bg-zinc-950/20 dark:text-zinc-400 dark:hover:bg-zinc-950/40"
                            >
                                <Link
                                    href={`/courses/${course.slug}`}
                                    target="_blank"
                                    className="gap-1.5"
                                >
                                    <ExternalLink className="h-3.5 w-3.5" />{' '}
                                    Lihat Publik
                                </Link>
                            </Button>

                            <Button
                                variant="outline"
                                size="sm"
                                onClick={deleteCourse}
                                className="gap-1.5 border-red-200 bg-red-50/50 text-red-600 shadow-xs hover:bg-red-100 hover:text-red-700 dark:border-red-900/50 dark:bg-red-950/20 dark:text-red-400 dark:hover:bg-red-950/40"
                            >
                                <Trash2 className="h-3.5 w-3.5" /> Hapus
                            </Button>
                        </div>
                    </div>
                </div>

                {/* ── Main Content ── */}
                <div className="px-4 py-6 md:px-8">
                    <div className="grid gap-6 lg:grid-cols-[1fr_288px]">
                        {/* ── Curriculum Panel ── */}
                        <div className="flex flex-col gap-4">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center gap-2.5">
                                    <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/30">
                                        <LayoutList className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                                    </div>
                                    <div>
                                        <h2 className="text-sm leading-none font-semibold">
                                            Kurikulum
                                        </h2>
                                        <p className="mt-0.5 text-xs text-muted-foreground">
                                            {chapters.length} chapter ·{' '}
                                            {totalLessons} materi
                                        </p>
                                    </div>
                                </div>
                                <AddChapterModal courseSlug={course.slug} />
                            </div>

                            {chapters.length === 0 ? (
                                <div className="rounded-xl border border-dashed border-blue-200 bg-blue-50/40 p-14 text-center dark:border-blue-800/50 dark:bg-blue-950/20">
                                    <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30">
                                        <BookOpen className="h-6 w-6 text-blue-400" />
                                    </div>
                                    <p className="text-sm font-medium text-blue-900 dark:text-blue-200">
                                        Belum ada chapter
                                    </p>
                                    <p className="mt-1 text-xs text-blue-600/70 dark:text-blue-400/70">
                                        Klik "+ Tambah Chapter" untuk mulai
                                        menyusun materi
                                    </p>
                                </div>
                            ) : (
                                <div className="flex flex-col gap-2.5">
                                    {isSequential && (
                                        <div className="flex items-start gap-2.5 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-700 dark:border-amber-800/40 dark:bg-amber-900/20 dark:text-amber-400">
                                            <Lock className="mt-0.5 h-3.5 w-3.5 shrink-0" />
                                            <p>
                                                <strong>
                                                    Mode Berurutan aktif.
                                                </strong>{' '}
                                                Siswa harus menyelesaikan semua
                                                materi di setiap chapter sebelum
                                                bisa mengakses chapter
                                                berikutnya. Seret chapter untuk
                                                mengatur urutan.
                                            </p>
                                        </div>
                                    )}

                                    {chapters.map((ch, i) => (
                                        <ChapterCard
                                            key={ch.id}
                                            chapter={ch}
                                            courseId={course.id}
                                            courseSlug={course.slug}
                                            chapterIndex={i}
                                            globalLessonOffset={
                                                lessonOffsets.offsets[i] ?? 0
                                            }
                                            isSequential={isSequential}
                                            isDragging={
                                                draggingChapterIdx === i
                                            }
                                            isDragOver={
                                                draggingChapterIdx !== null &&
                                                draggingChapterIdx !== i
                                            }
                                            onDragStart={() =>
                                                handleChapterDragStart(i)
                                            }
                                            onDragOver={(e) =>
                                                handleChapterDragOver(i, e)
                                            }
                                            onDragEnd={handleChapterDragEnd}
                                            onDrop={handleChapterDrop}
                                        />
                                    ))}
                                </div>
                            )}
                        </div>

                        {/* ── Sidebar ── */}
                        <div className="flex flex-col gap-4 self-start lg:sticky lg:top-20">
                            {/* Stats Grid */}
                            <div className="grid grid-cols-2 gap-3">
                                <StatCard
                                    value={chapters.length}
                                    label="Chapter"
                                    bgClass="bg-blue-100 dark:bg-blue-900/30"
                                    textClass="text-blue-800 dark:text-blue-200"
                                />
                                <StatCard
                                    value={enrollmentCount}
                                    label="Siswa Aktif"
                                    bgClass="bg-emerald-100 dark:bg-emerald-900/30"
                                    textClass="text-emerald-800 dark:text-emerald-200"
                                />
                                <StatCard
                                    value={totalLessons}
                                    label="Materi"
                                    bgClass="bg-teal-100 dark:bg-teal-900/30"
                                    textClass="text-teal-800 dark:text-teal-200"
                                />
                                <StatCard
                                    value={totalQuizzesAssignments}
                                    label="Kuis & Tugas"
                                    bgClass="bg-amber-100 dark:bg-amber-900/30"
                                    textClass="text-amber-800 dark:text-amber-200"
                                />
                            </div>

                            {/* Course Info */}
                            <div className="overflow-hidden rounded-xl border border-blue-100 bg-white shadow-xs dark:border-blue-900/30 dark:bg-card">
                                <div className="flex items-center justify-between border-b border-blue-100 bg-blue-50/60 px-4 py-3 dark:border-blue-900/20 dark:bg-blue-950/20">
                                    <p className="text-sm font-semibold text-blue-900 dark:text-blue-100">
                                        Informasi Kelas
                                    </p>
                                </div>
                                {course.thumbnail ? (
                                    <div className="relative aspect-video w-full overflow-hidden border-b bg-slate-100 dark:bg-slate-900">
                                        <img
                                            src={course.thumbnail}
                                            alt={course.title}
                                            className="h-full w-full object-cover"
                                        />
                                    </div>
                                ) : (
                                    <div
                                        className={`relative aspect-video w-full overflow-hidden border-b bg-gradient-to-br ${CARD_GRADIENTS[course.id % CARD_GRADIENTS.length]} flex items-center justify-center`}
                                    >
                                        <BookOpen className="h-10 w-10 text-slate-500/50" />
                                    </div>
                                )}
                                <div className="divide-y px-4 py-1">
                                    <InfoRow
                                        label="Kategori"
                                        value={
                                            course.category?.name ??
                                            'Tanpa kategori'
                                        }
                                    />
                                    <InfoRow
                                        label="Level"
                                        value={
                                            LEVEL_LABELS[course.level] ??
                                            course.level
                                        }
                                    />
                                    <InfoRow
                                        label="Instruktur"
                                        value={course.instructor?.name ?? '-'}
                                    />
                                    <InfoRow
                                        label="Harga"
                                        value={
                                            course.price_type === 'free'
                                                ? 'Gratis'
                                                : `Rp ${course.price.toLocaleString('id-ID')}`
                                        }
                                        valueClass={
                                            course.price_type === 'free'
                                                ? 'text-emerald-600 dark:text-emerald-400 font-semibold'
                                                : undefined
                                        }
                                    />
                                </div>
                                {course.description && (
                                    <div className="border-t px-4 py-3">
                                        <p className="line-clamp-4 text-xs leading-relaxed text-muted-foreground">
                                            {course.description}
                                        </p>
                                    </div>
                                )}
                                <div className="border-t px-4 py-3">
                                    <EditCourseDialog
                                        course={course}
                                        categories={categories}
                                        instructors={instructors}
                                    />
                                </div>
                            </div>

                            {/* Access Settings */}
                            <div className="rounded-xl border border-teal-100 bg-white shadow-xs dark:border-teal-900/30 dark:bg-card">
                                <div className="border-b border-teal-100 bg-teal-50/60 px-4 py-3 dark:border-teal-900/20 dark:bg-teal-950/20">
                                    <p className="text-sm font-semibold text-teal-900 dark:text-teal-100">
                                        Pengaturan Akses
                                    </p>
                                </div>
                                <div className="px-4 py-4">
                                    <div className="flex items-center justify-between gap-3">
                                        <div className="min-w-0">
                                            <p className="text-sm font-medium">
                                                Mode Berurutan
                                            </p>
                                            <p className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
                                                Materi terkunci hingga chapter
                                                sebelumnya selesai
                                            </p>
                                        </div>
                                        <ToggleSwitch
                                            checked={isSequential}
                                            onChange={toggleSequential}
                                        />
                                    </div>

                                    {isSequential && (
                                        <div className="mt-3 rounded-lg bg-amber-50 px-3 py-2.5 dark:bg-amber-900/20">
                                            <p className="text-xs leading-relaxed text-amber-700 dark:text-amber-400">
                                                Siswa harus menyelesaikan semua
                                                lesson di Chapter 1 sebelum bisa
                                                membuka Chapter 2, dan
                                                seterusnya.
                                            </p>
                                        </div>
                                    )}
                                </div>
                            </div>

                            {/* Landing Page Kustom */}
                            <div className="rounded-xl border border-orange-100 bg-white shadow-xs dark:border-orange-900/30 dark:bg-card">
                                <div className="border-b border-orange-100 bg-orange-50/60 px-4 py-3 dark:border-orange-900/20 dark:bg-orange-950/20">
                                    <p className="text-sm font-semibold text-orange-900 dark:text-orange-100">
                                        Landing Page Kustom
                                    </p>
                                </div>
                                <div className="flex flex-col gap-3 px-4 py-4">
                                    <div className="flex items-center justify-between gap-3">
                                        <div className="min-w-0">
                                            <p className="text-sm font-medium">
                                                Aktifkan Landing Page HTML
                                            </p>
                                            <p className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
                                                Jika aktif, halaman kelas ini
                                                diganti sepenuhnya oleh HTML di
                                                bawah.
                                            </p>
                                        </div>
                                        <ToggleSwitch
                                            checked={hasLandingPage}
                                            onChange={setHasLandingPage}
                                        />
                                    </div>

                                    {hasLandingPage && (
                                        <div className="rounded-lg border border-input bg-muted/40 p-3">
                                            <div className="mb-1.5 flex items-center justify-between gap-2">
                                                <p className="text-xs font-semibold">
                                                    Prompt untuk AI
                                                </p>
                                                <button
                                                    type="button"
                                                    onClick={
                                                        copyLandingPagePrompt
                                                    }
                                                    className="flex items-center gap-1 rounded-md border border-input bg-background px-2 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:text-foreground"
                                                >
                                                    {promptCopied ? (
                                                        <>
                                                            <Check className="h-3 w-3" />{' '}
                                                            Tersalin
                                                        </>
                                                    ) : (
                                                        <>
                                                            <Copy className="h-3 w-3" />{' '}
                                                            Salin
                                                        </>
                                                    )}
                                                </button>
                                            </div>
                                            <p className="mb-2 text-[11px] leading-relaxed text-muted-foreground">
                                                Salin prompt ini dan tempel ke
                                                ChatGPT/Claude untuk generate
                                                HTML landing page kelas ini —
                                                sudah termasuk data kelas dan
                                                elemen yang wajib ada (tombol
                                                daftar, harga, dll) supaya tetap
                                                ada walau tidak pakai halaman
                                                detail bawaan.
                                            </p>
                                            <pre className="max-h-40 overflow-y-auto rounded-md bg-background px-2.5 py-2 font-mono text-[11px] leading-relaxed whitespace-pre-wrap">
                                                {buildLandingPagePrompt(course)}
                                            </pre>
                                        </div>
                                    )}

                                    {hasLandingPage && (
                                        <textarea
                                            value={landingPageHtml}
                                            onChange={(e) =>
                                                setLandingPageHtml(
                                                    e.target.value,
                                                )
                                            }
                                            rows={10}
                                            placeholder={
                                                '<html>...{{ $course->title }}...</html>'
                                            }
                                            spellCheck={false}
                                            className="w-full rounded-lg border border-input bg-background px-3 py-2 font-mono text-xs shadow-xs placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
                                        />
                                    )}

                                    <Button
                                        type="button"
                                        size="sm"
                                        onClick={saveLandingPage}
                                        disabled={savingLandingPage}
                                        className="gap-1.5 self-end rounded-lg bg-orange-600 hover:bg-orange-700"
                                    >
                                        {savingLandingPage
                                            ? 'Menyimpan…'
                                            : 'Simpan Landing Page'}
                                    </Button>
                                </div>
                            </div>

                            {/* Affiliate Settings */}
                            <AffiliateSettingsCard course={course} />
                        </div>
                    </div>

                    {/* ── Enrollments ── */}
                    <div className="mt-6 rounded-xl border border-emerald-100 bg-white shadow-xs dark:border-emerald-900/30 dark:bg-card">
                        <div className="flex items-center justify-between border-b border-emerald-100 bg-emerald-50/60 px-4 py-3 dark:border-emerald-900/20 dark:bg-emerald-950/20">
                            <div className="flex items-center gap-2">
                                <Users className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
                                <p className="text-sm font-semibold text-emerald-900 dark:text-emerald-100">
                                    Peserta Terdaftar
                                </p>
                            </div>
                            <span className="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">
                                {enrollments.length}
                            </span>
                        </div>

                        {enrollments.length === 0 ? (
                            <div className="flex flex-col items-center justify-center py-10 text-center">
                                <Users className="mb-2 h-8 w-8 text-emerald-200 dark:text-emerald-800" />
                                <p className="text-sm text-muted-foreground">
                                    Belum ada peserta
                                </p>
                            </div>
                        ) : (
                            <div className="divide-y">
                                {enrollments.map((e) => (
                                    <div
                                        key={e.id}
                                        className="flex items-center justify-between gap-3 px-4 py-3"
                                    >
                                        <div className="min-w-0 flex-1">
                                            <p className="truncate text-sm font-medium">
                                                {e.user.name}
                                            </p>
                                            <p className="truncate text-xs text-muted-foreground">
                                                {e.user.email}
                                            </p>
                                            <div className="mt-1 flex items-center gap-2">
                                                <span
                                                    className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${
                                                        e.status === 'active'
                                                            ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
                                                            : e.status ===
                                                                'completed'
                                                              ? 'bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
                                                              : 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400'
                                                    }`}
                                                >
                                                    {e.status === 'active'
                                                        ? 'Aktif'
                                                        : e.status ===
                                                            'completed'
                                                          ? 'Selesai'
                                                          : e.status}
                                                </span>
                                                {e.enrolled_at && (
                                                    <span className="text-[10px] text-muted-foreground">
                                                        Terdaftar:{' '}
                                                        {new Date(
                                                            e.enrolled_at,
                                                        ).toLocaleDateString(
                                                            'id-ID',
                                                            {
                                                                day: 'numeric',
                                                                month: 'short',
                                                                year: 'numeric',
                                                            },
                                                        )}
                                                    </span>
                                                )}
                                            </div>
                                        </div>
                                        <div className="flex shrink-0 items-center gap-1.5">
                                            <Link
                                                href={`/admin/users/${e.user.id}`}
                                            >
                                                <button
                                                    type="button"
                                                    className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 text-blue-700 transition-colors hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400"
                                                    title="Detail Profil"
                                                >
                                                    <Eye className="h-4 w-4" />
                                                </button>
                                            </Link>
                                            <button
                                                type="button"
                                                className="flex h-8 w-8 items-center justify-center rounded-lg bg-red-100 text-red-700 transition-colors hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400"
                                                title="Hapus Peserta"
                                                onClick={() =>
                                                    setSelectedEnrollmentForDelete(
                                                        e,
                                                    )
                                                }
                                            >
                                                <Trash2 className="h-4 w-4" />
                                            </button>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                </div>
            </div>

            <DeleteConfirmModal
                open={deleteModal}
                onClose={() => setDeleteModal(false)}
                onConfirm={confirmDeleteCourse}
                title={`Hapus kelas "${course.title}"?`}
                description="Tindakan ini tidak dapat dibatalkan."
                blockedReason={courseBlockedReason}
            />

            <DeleteConfirmModal
                open={!!selectedEnrollmentForDelete}
                onClose={() => setSelectedEnrollmentForDelete(null)}
                onConfirm={confirmDeleteEnrollment}
                title={`Hapus peserta "${selectedEnrollmentForDelete?.user.name}" dari kelas ini?`}
                description="Tindakan ini akan menghapus seluruh data progres belajar dan tugas dari peserta tersebut di kelas ini."
            />
        </>
    );
}

function InfoRow({
    label,
    value,
    valueClass,
}: {
    label: string;
    value: string;
    valueClass?: string;
}) {
    return (
        <div className="flex items-center justify-between gap-3 py-2.5">
            <span className="shrink-0 text-xs text-muted-foreground">
                {label}
            </span>
            <span
                className={`truncate text-right text-xs font-medium ${valueClass ?? 'text-foreground'}`}
            >
                {value}
            </span>
        </div>
    );
}

AdminCourseShow.layout = (page: React.ReactNode) => (
    <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>
);