import { Form, Head, Link, router } from '@inertiajs/react';
import { BookOpen, ChevronLeft, ChevronRight, ExternalLink, ImagePlus, Plus, Search, Trash2, Users, X, Pencil, Save } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { DeleteConfirmModal } from '@/components/delete-confirm-modal';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinner';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem } from '@/types';

type CourseItem = {
    id: number;
    title: string;
    slug: string;
    description: string | null;
    thumbnail: string | null;
    status: 'draft' | 'pending_review' | 'published' | 'rejected' | 'archived';
    price_type: 'free' | 'paid';
    level: string;
    enrollments_count: number;
    chapters_count: number;
    instructor: { id: number; name: string } | null;
    category: { id: number; name: string } | null;
};

type Paginator<T> = {
    data: T[];
    current_page: number;
    last_page: number;
    total: number;
    links: { url: string | null; label: string; active: boolean }[];
};

type Category = { id: number; name: string };
type Instructor = { id: number; name: string };

type Props = {
    courses: Paginator<CourseItem>;
    filters: { search?: string; status?: string };
    categories: Category[];
    instructors: Instructor[];
};

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

const STATUS_CONFIG: Record<string, { label: string; statusBadge: string; dot: string }> = {
    draft:          { label: 'Draft',        statusBadge: 'bg-slate-100/90 text-slate-600 border-slate-300/50',   dot: 'bg-slate-400' },
    pending_review: { label: 'Perlu Review', statusBadge: 'bg-amber-100/90 text-amber-700 border-amber-300/50',   dot: 'bg-amber-500' },
    published:      { label: 'Aktif',        statusBadge: 'bg-emerald-100/90 text-emerald-700 border-emerald-300/50', dot: 'bg-emerald-500' },
    rejected:       { label: 'Ditolak',      statusBadge: 'bg-red-100/90 text-red-600 border-red-300/50',         dot: 'bg-red-500' },
    archived:       { label: 'Arsip',        statusBadge: 'bg-slate-100/90 text-slate-500 border-slate-300/50',   dot: 'bg-slate-300' },
};

const CARD_GRADIENTS = [
    'from-blue-200 to-indigo-200',
    'from-sky-200 to-blue-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-purple-200 to-indigo-200',
    'from-green-200 to-teal-200',
];

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

const STATUS_FILTERS = [
    { value: '', label: 'Semua' },
    { value: 'published', label: 'Aktif' },
    { value: 'pending_review', label: 'Perlu Review' },
    { value: 'draft', label: 'Draft' },
    { value: 'rejected', label: 'Ditolak' },
    { value: 'archived', label: 'Arsip' },
];

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

function StatusDot({ status }: { status: string }) {
    const cfg = STATUS_CONFIG[status] ?? STATUS_CONFIG.draft;
    return (
        <span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold ${cfg.statusBadge} border`}>
            <span className={`h-1.5 w-1.5 rounded-full ${cfg.dot}`} />
            {cfg.label}
        </span>
    );
}

function CreateCourseModal({ categories, instructors }: { categories: Category[]; instructors: Instructor[] }) {
    const [open, setOpen] = useState(false);
    const [priceType, setPriceType] = useState<'free' | 'paid'>('free');
    const [thumbPreview, setThumbPreview] = useState<string | null>(null);
    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) { clearThumb(); setPriceType('free'); }
        setOpen(val);
    }

    return (
        <Dialog open={open} onOpenChange={handleClose}>
            <DialogTrigger asChild>
                <Button className="gap-2 bg-blue-600 hover:bg-blue-700 shadow-sm">
                    <Plus className="h-4 w-4" />
                    Buat Kelas
                </Button>
            </DialogTrigger>
            <DialogContent className="max-h-[90vh] max-w-xl overflow-y-auto">
                <DialogTitle>Buat Kelas Baru</DialogTitle>
                <Form
                    action="/admin/courses"
                    method="post"
                    onSuccess={() => { clearThumb(); setOpen(false); }}
                    className="mt-2 flex flex-col gap-4"
                >
                    {({ errors, processing }) => (
                        <>
                            <div className="grid gap-2">
                                <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 right-2 top-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>
                                )}
                                {errors.thumbnail && <p className="text-xs text-destructive">{errors.thumbnail}</p>}
                            </div>
                            <div className="grid gap-2">
                                <Label htmlFor="title">Judul Kelas *</Label>
                                <Input id="title" name="title" required autoFocus placeholder="Mis: Manajemen Keuangan UMKM" />
                                {errors.title && <p className="text-xs text-destructive">{errors.title}</p>}
                            </div>
                            <div className="grid gap-2">
                                <Label htmlFor="description">Deskripsi</Label>
                                <textarea id="description" name="description" rows={3} className={textareaCls} placeholder="Jelaskan apa yang akan dipelajari siswa..." />
                            </div>
                            <div className="grid gap-2">
                                <Label htmlFor="instructor_id">Instruktur *</Label>
                                <select id="instructor_id" name="instructor_id" required className={selectCls}>
                                    <option value="">-- Pilih Instruktur --</option>
                                    {instructors.map((i) => (
                                        <option key={i.id} value={i.id}>{i.name}</option>
                                    ))}
                                </select>
                                {errors.instructor_id && <p className="text-xs text-destructive">{errors.instructor_id}</p>}
                            </div>
                            <div className="grid grid-cols-2 gap-3">
                                <div className="grid gap-2">
                                    <Label htmlFor="category_id">Kategori</Label>
                                    <select id="category_id" name="category_id" className={selectCls}>
                                        <option value="">-- Pilih Kategori --</option>
                                        {categories.map((c) => (
                                            <option key={c.id} value={c.id}>{c.name}</option>
                                        ))}
                                    </select>
                                </div>
                                <div className="grid gap-2">
                                    <Label htmlFor="level">Level *</Label>
                                    <select id="level" name="level" required className={selectCls}>
                                        <option value="beginner">Pemula</option>
                                        <option value="intermediate">Menengah</option>
                                        <option value="advanced">Lanjutan</option>
                                    </select>
                                </div>
                            </div>
                            <div className="grid gap-2">
                                <Label>Tipe Harga *</Label>
                                <div className="flex gap-4">
                                    <label className="flex cursor-pointer items-center gap-2 text-sm">
                                        <input type="radio" name="price_type" value="free" checked={priceType === 'free'} onChange={() => setPriceType('free')} />
                                        Gratis
                                    </label>
                                    <label className="flex cursor-pointer items-center gap-2 text-sm">
                                        <input type="radio" name="price_type" value="paid" checked={priceType === 'paid'} onChange={() => setPriceType('paid')} />
                                        Berbayar
                                    </label>
                                </div>
                            </div>
                            {priceType === 'paid' && (
                                <div className="grid gap-1.5">
                                    <Label htmlFor="price">Harga (Rp) *</Label>
                                    <Input id="price" name="price" type="number" min="0" placeholder="150000" required />
                                    {errors.price && <p className="text-xs text-destructive">{errors.price}</p>}
                                </div>
                            )}
                            <div className="flex justify-end gap-2 pt-1">
                                <Button type="button" variant="outline" onClick={() => setOpen(false)}>Batal</Button>
                                <Button type="submit" disabled={processing} className="bg-blue-600 hover:bg-blue-700">
                                    {processing && <Spinner />}
                                    Buat Kelas
                                </Button>
                            </div>
                        </>
                    )}
                </Form>
            </DialogContent>
        </Dialog>
    );
}

function EditCourseModal({
    course,
    categories,
    instructors,
    open,
    onClose,
}: {
    course: CourseItem;
    categories: Category[];
    instructors: Instructor[];
    open: boolean;
    onClose: () => void;
}) {
    const [thumbPreview, setThumbPreview] = useState<string | null>(course.thumbnail);
    const [priceType, setPriceType] = useState<string>(course.price_type);
    const thumbInputRef = useRef<HTMLInputElement>(null);

    // Sync priceType state when modal opens or course changes
    useEffect(() => {
        if (open) {
            setPriceType(course.price_type);
            setThumbPreview(course.thumbnail);
        }
    }, [open, course]);

    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 = '';
            onClose();
        }
    }

    return (
        <Dialog open={open} onOpenChange={handleClose}>
            <DialogContent className="max-h-[90vh] max-w-md overflow-y-auto">
                <DialogTitle>Edit Informasi Kelas</DialogTitle>
                <Form
                    action={`/admin/courses/${course.id}`}
                    method="post"
                    onSuccess={() => { onClose(); 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 right-2 top-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>
                                )}
                                {errors.thumbnail && <p className="text-xs text-destructive">{errors.thumbnail}</p>}
                            </div>
                            <div className="grid gap-1.5">
                                <Label htmlFor="title_edit">Judul *</Label>
                                <Input id="title_edit" name="title" defaultValue={course.title} required />
                                {errors.title && <p className="text-xs text-destructive">{errors.title}</p>}
                            </div>
                            <div className="grid gap-1.5">
                                <Label htmlFor="description_edit">Deskripsi</Label>
                                <textarea id="description_edit" name="description" rows={3} defaultValue={course.description ?? ''} className={textareaCls} />
                            </div>
                            <div className="grid gap-1.5">
                                <Label htmlFor="instructor_id_edit">Instruktur *</Label>
                                <select id="instructor_id_edit" name="instructor_id" defaultValue={course.instructor?.id ?? ''} required 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 htmlFor="category_id_edit">Kategori</Label>
                                <select id="category_id_edit" 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 htmlFor="level_edit">Level *</Label>
                                    <select id="level_edit" name="level" defaultValue={course.level} required 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 htmlFor="price_type_edit">Harga *</Label>
                                    <select 
                                        id="price_type_edit" 
                                        name="price_type" 
                                        defaultValue={course.price_type} 
                                        required 
                                        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="rounded-xl border bg-blue-50/50 p-4 dark:bg-blue-950/20 mt-1 flex flex-col gap-3">
                                    <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 />
                                        {errors.price && <p className="text-xs text-destructive">{errors.price}</p>}
                                    </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 bg-blue-600 hover:bg-blue-700">
                                    {processing ? <Spinner /> : <Save className="h-3.5 w-3.5" />} Simpan
                                </Button>
                            </div>
                        </>
                    )}
                </Form>
            </DialogContent>
        </Dialog>
    );
}

export default function AdminCoursesIndex({ courses, filters, categories, instructors }: Props) {
    const [search, setSearch] = useState(filters.search ?? '');
    const [deleteModal, setDeleteModal] = useState<{ open: boolean; course: CourseItem | null }>({ open: false, course: null });
    const [editingCourse, setEditingCourse] = useState<CourseItem | null>(null);

    function applySearch(e: React.SyntheticEvent<HTMLFormElement>) {
        e.preventDefault();
        router.get('/admin/courses', { search, status: filters.status }, { preserveState: true, replace: true });
    }

    function changeStatus(courseId: number, status: string) {
        router.patch(`/admin/courses/${courseId}/status`, { status });
    }

    function openDeleteModal(course: CourseItem) {
        setDeleteModal({ open: true, course });
    }

    function confirmDelete() {
        if (!deleteModal.course) return;
        router.delete(`/admin/courses/${deleteModal.course.id}`, {
            onSuccess: () => setDeleteModal({ open: false, course: null }),
        });
    }

    const deleteBlockedReason = deleteModal.course
        ? deleteModal.course.chapters_count > 0
            ? `Kelas tidak dapat dihapus karena masih memiliki ${deleteModal.course.chapters_count} chapter. Hapus semua chapter terlebih dahulu.`
            : deleteModal.course.enrollments_count > 0
            ? `Kelas tidak dapat dihapus karena ada ${deleteModal.course.enrollments_count} siswa yang terdaftar.`
            : undefined
        : undefined;

    const activeFilter = filters.status ?? '';

    return (
        <>
            <Head title="Manajemen Kelas" />

            <div className="flex flex-col gap-6 p-4 md:p-6">
                {/* Header */}
                <div className="relative overflow-hidden rounded-2xl border border-blue-100 bg-gradient-to-br from-blue-50 via-white to-indigo-50 p-5 shadow-sm dark:border-blue-800/30 dark:from-blue-950/40 dark:via-card dark:to-indigo-950/30">
                    <div className="relative z-10 flex items-center justify-between">
                        <div className="flex items-center gap-3">
                            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-100 dark:bg-blue-800/60">
                                <BookOpen className="h-5 w-5 text-blue-600 dark:text-blue-300" />
                            </div>
                            <div>
                                <h1 className="text-xl font-bold text-blue-900 dark:text-blue-100">Manajemen Kelas</h1>
                                <p className="text-sm text-blue-600 dark:text-blue-400">
                                    <span className="font-semibold">{courses.total}</span> kelas terdaftar
                                </p>
                            </div>
                        </div>
                        <CreateCourseModal categories={categories} instructors={instructors} />
                    </div>
                    <div className="absolute -right-4 -top-4 h-20 w-20 rounded-full bg-blue-100/40 dark:bg-blue-700/10" />
                    <div className="absolute right-10 -bottom-6 h-28 w-28 rounded-full bg-indigo-100/30 dark:bg-indigo-700/10" />
                </div>

                <div className="flex flex-row flex-wrap items-center justify-between gap-4 border-b border-blue-50 pb-4 dark:border-blue-900/20">
                    <form onSubmit={applySearch} className="relative flex-1 max-w-sm">
                        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                        <Input
                            placeholder="Cari nama kelas..."
                            className="pl-9 pr-20 h-9 rounded-xl border-blue-100/80 focus-visible:ring-blue-200"
                            value={search}
                            onChange={(e) => setSearch(e.target.value)}
                        />
                        <button
                            type="submit"
                            className="absolute right-1 top-1/2 -translate-y-1/2 rounded-lg bg-blue-600 px-3 py-1 text-xs font-semibold text-white hover:bg-blue-700 transition-colors"
                        >
                            Cari
                        </button>
                    </form>

                    <div className="flex flex-wrap gap-1.5">
                        {STATUS_FILTERS.map((f) => {
                            const isActive = activeFilter === f.value;
                            return (
                                <button
                                    key={f.value}
                                    onClick={() => router.get('/admin/courses', { search: filters.search, status: f.value || undefined }, { preserveState: true, replace: true })}
                                    className={`rounded-full px-3.5 py-1.5 text-xs font-medium transition-all cursor-pointer ${
                                        isActive
                                            ? 'bg-blue-600 text-white shadow-xs'
                                            : 'bg-zinc-100 text-zinc-700 hover:bg-zinc-200 hover:text-blue-700 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700/80 dark:hover:text-blue-400'
                                    }`}
                                >
                                    {f.label}
                                </button>
                            );
                        })}
                    </div>
                </div>

                {/* Grid */}
                {courses.data.length === 0 ? (
                    <div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-blue-200 py-16 text-center dark:border-blue-800">
                        <div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-50 dark:bg-blue-900/20">
                            <BookOpen className="h-7 w-7 text-blue-400" />
                        </div>
                        <p className="font-semibold text-blue-900 dark:text-blue-100">Tidak ada kelas ditemukan</p>
                        <p className="mt-1 text-xs text-muted-foreground">Coba ubah filter atau kata kunci pencarian</p>
                    </div>
                ) : (
                    <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                        {courses.data.map((course) => {
                            const gradient = CARD_GRADIENTS[course.id % CARD_GRADIENTS.length];
                            const initials = course.title
                                .split(' ')
                                .slice(0, 2)
                                .map((w) => w[0])
                                .join('')
                                .toUpperCase();
                            return (
                                <div
                                    key={course.id}
                                    className="group flex flex-col overflow-hidden rounded-2xl shadow-md transition-all duration-200 hover:shadow-xl hover:-translate-y-1"
                                >
                                    {/* Colorful header */}
                                    <div
                                        className={`relative cursor-pointer overflow-hidden p-5 ${course.thumbnail ? '' : `bg-gradient-to-br ${gradient}`}`}
                                        style={course.thumbnail ? { backgroundImage: `url(${course.thumbnail})`, backgroundSize: 'cover', backgroundPosition: 'center' } : undefined}
                                        onClick={() => router.visit(`/admin/courses/${course.id}`)}
                                    >
                                        {/* Overlay when thumbnail is set */}
                                        {course.thumbnail && (
                                            <div className="absolute inset-0 bg-gradient-to-br from-black/60 via-black/40 to-black/20" />
                                        )}

                                        {/* Decorative circles */}
                                        <div className="absolute -right-6 -top-6 h-24 w-24 rounded-full bg-slate-900/5" />
                                        <div className="absolute -right-2 bottom-0 h-16 w-16 rounded-full bg-slate-900/5" />
                                        <div className="absolute left-1/2 -bottom-8 h-20 w-20 rounded-full bg-slate-900/3" />

                                        {/* Top row: status + price */}
                                        <div className="relative flex items-center justify-between mb-4">
                                            <StatusDot status={course.status} />
                                            <span className={`rounded-full px-2.5 py-1 text-xs font-semibold border ${
                                                course.price_type === 'free'
                                                    ? 'bg-emerald-100/90 text-emerald-700 border-emerald-300/50'
                                                    : 'bg-white/70 text-slate-700 border-slate-300/50'
                                            }`}>
                                                {course.price_type === 'free' ? '✦ Gratis' : `Rp ${course.price.toLocaleString('id-ID')}`}
                                            </span>
                                        </div>

                                        {/* Big initials icon */}
                                        <div className="relative mb-3 flex items-center gap-3">
                                            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-white/60 text-2xl font-bold text-slate-700 shadow-sm">
                                                {initials}
                                            </div>
                                            <div className="min-w-0 flex-1">
                                                <p className={`font-bold leading-snug line-clamp-2 text-base ${course.thumbnail ? 'text-white' : 'text-slate-800'}`}>
                                                    {course.title}
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    {/* White body */}
                                    <div
                                        className="flex flex-1 cursor-pointer flex-col gap-2.5 bg-white px-4 pt-3 pb-2 dark:bg-card"
                                        onClick={() => router.visit(`/admin/courses/${course.id}`)}
                                    >
                                        <div className="flex flex-col gap-1 text-xs text-muted-foreground">
                                            <div className="flex items-center gap-1.5 truncate">
                                                <span className="h-1.5 w-1.5 rounded-full bg-blue-400 shrink-0" />
                                                <span className="font-medium text-foreground shrink-0">Instruktur:</span>
                                                <span className="truncate">{course.instructor?.name ?? '-'}</span>
                                            </div>
                                            <div className="flex items-center gap-1.5 truncate">
                                                <span className="h-1.5 w-1.5 rounded-full bg-teal-400 shrink-0" />
                                                <span className="font-medium text-foreground shrink-0">Kategori:</span>
                                                <span className="truncate">{course.category?.name ?? '-'}</span>
                                            </div>
                                        </div>

                                        <div className="flex items-center gap-1.5">
                                            <span className="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs text-slate-600 font-medium dark:bg-slate-800 dark:text-slate-400">
                                                {LEVEL_LABELS[course.level] ?? course.level}
                                            </span>
                                        </div>

                                        <div className="flex items-center gap-1.5 rounded-lg bg-muted/50 px-2.5 py-1.5 text-xs">
                                            <Users className="h-3.5 w-3.5 text-blue-500 shrink-0" />
                                            <span className="font-bold text-foreground">{course.enrollments_count}</span>
                                            <span className="text-muted-foreground">peserta terdaftar</span>
                                        </div>
                                    </div>

                                    {/* Footer */}
                                    <div
                                        className="flex items-center gap-1.5 border-t bg-white px-4 py-2.5 dark:bg-card"
                                        onClick={(e) => e.stopPropagation()}
                                    >
                                        <select
                                            value={course.status}
                                            onChange={(e) => changeStatus(course.id, e.target.value)}
                                            className="flex-1 rounded-lg border border-input bg-background px-2.5 py-1.5 text-xs focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-200"
                                        >
                                            <option value="draft">Draft</option>
                                            <option value="pending_review">Perlu Review</option>
                                            <option value="published">Aktif</option>
                                            <option value="rejected">Ditolak</option>
                                            <option value="archived">Arsip</option>
                                        </select>
                                        <button
                                            onClick={() => setEditingCourse(course)}
                                            className="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-100 text-amber-700 hover:bg-amber-200 transition-colors shadow-sm"
                                            title="Edit informasi kelas"
                                        >
                                            <Pencil className="h-3.5 w-3.5" />
                                        </button>
                                        <Link
                                            href={`/courses/${course.slug}`}
                                            className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-200 text-blue-700 hover:bg-blue-300 transition-colors shadow-sm"
                                            title="Lihat halaman publik"
                                        >
                                            <ExternalLink className="h-3.5 w-3.5" />
                                        </Link>
                                        <button
                                            onClick={() => openDeleteModal(course)}
                                            className="flex h-8 w-8 items-center justify-center rounded-lg bg-red-200 text-red-700 hover:bg-red-300 transition-colors shadow-sm"
                                            title="Hapus kelas"
                                        >
                                            <Trash2 className="h-3.5 w-3.5" />
                                        </button>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                )}

                {/* Pagination */}
                {courses.last_page > 1 && (
                    <div className="flex items-center justify-between">
                        <p className="text-xs text-muted-foreground">
                            Halaman {courses.current_page} dari {courses.last_page} &middot; {courses.total} kelas
                        </p>
                        <div className="flex items-center gap-1">
                            {courses.links.map((link, i) => {
                                const isPrev = i === 0;
                                const isNext = i === courses.links.length - 1;
                                if ((isPrev || isNext) && !link.url) {
                                    return (
                                        <span key={i} className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground/40">
                                            {isPrev ? <ChevronLeft className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                                        </span>
                                    );
                                }
                                if (isPrev || isNext) {
                                    return (
                                        <Link key={i} href={link.url!} className="flex h-8 w-8 items-center justify-center rounded-lg border hover:bg-blue-50 hover:text-blue-700 transition-colors dark:hover:bg-blue-900/20">
                                            {isPrev ? <ChevronLeft className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                                        </Link>
                                    );
                                }
                                return link.url ? (
                                    <Link
                                        key={i}
                                        href={link.url}
                                        className={`flex h-8 min-w-8 items-center justify-center rounded-lg px-2 text-xs font-medium transition-colors ${
                                            link.active
                                                ? 'bg-blue-200 text-blue-800 shadow-sm'
                                                : 'border hover:bg-blue-50 hover:text-blue-700 dark:hover:bg-blue-900/20'
                                        }`}
                                        dangerouslySetInnerHTML={{ __html: link.label }}
                                    />
                                ) : (
                                    <span key={i} className="flex h-8 min-w-8 items-center justify-center px-1 text-xs text-muted-foreground" dangerouslySetInnerHTML={{ __html: link.label }} />
                                );
                            })}
                        </div>
                    </div>
                )}
            </div>
            <DeleteConfirmModal
                open={deleteModal.open}
                onClose={() => setDeleteModal({ open: false, course: null })}
                onConfirm={confirmDelete}
                title={deleteModal.course ? `Hapus kelas "${deleteModal.course.title}"?` : ''}
                description="Tindakan ini tidak dapat dibatalkan."
                blockedReason={deleteBlockedReason}
            />
            {editingCourse && (
                <EditCourseModal
                    course={editingCourse}
                    categories={categories}
                    instructors={instructors}
                    open={editingCourse !== null}
                    onClose={() => setEditingCourse(null)}
                />
            )}
        </>
    );
}

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