import { Form, Head, Link, router } from '@inertiajs/react';
import { BookOpen, 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 } 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 Course = {
    id: number;
    title: string;
    slug: string;
    description: string | null;
    status: string;
    price_type: string;
    price: number;
    level: string;
    thumbnail: string | null;
    enrollments_count: number;
    chapters_count?: number;
    category: { id: number; name: string } | null;
};

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

type Props = {
    courses: Course[];
    categories: Category[];
};

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Instruktur', href: '/instructor/dashboard' },
    { title: 'Kelas Saya', href: '/instructor/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 dark:bg-slate-800/60 dark:text-zinc-300 dark:border-slate-700/50',   dot: 'bg-slate-400' },
    pending_review: { label: 'Perlu Review', statusBadge: 'bg-amber-100/90 text-amber-700 border-amber-300/50 dark:bg-amber-950/30 dark:text-amber-400 dark:border-amber-900/30',   dot: 'bg-amber-500' },
    published:      { label: 'Aktif',        statusBadge: 'bg-emerald-100/90 text-emerald-700 border-emerald-300/50 dark:bg-emerald-950/30 dark:text-emerald-400 dark:border-emerald-900/30', dot: 'bg-emerald-500' },
    rejected:       { label: 'Ditolak',      statusBadge: 'bg-red-100/90 text-red-600 border-red-300/50 dark:bg-rose-950/30 dark:text-rose-400 dark:border-rose-900/30',         dot: 'bg-red-500' },
    archived:       { label: 'Arsip',        statusBadge: 'bg-slate-100/90 text-slate-500 border-slate-300/50 dark:bg-slate-800/40 dark:text-slate-400 dark:border-slate-700/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,
    open,
    onClose,
}: {
    categories: Category[];
    open: boolean;
    onClose: () => void;
}) {
    const [thumbPreview, setThumbPreview] = useState<string | null>(null);
    const [priceType, setPriceType] = useState<string>('free');
    const thumbInputRef = useRef<HTMLInputElement>(null);

    useEffect(() => {
        if (open) {
            setPriceType('free');
            setThumbPreview(null);
            if (thumbInputRef.current) {
                thumbInputRef.current.value = '';
            }
        }
    }, [open]);

    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(null);
            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>Buat Kelas Baru</DialogTitle>
                <Form
                    action="/instructor/courses"
                    method="post"
                    onSuccess={() => {
                        onClose();
                    }}
                    className="mt-3 flex flex-col gap-3"
                >
                    {({ errors, processing }) => (
                        <>
                            <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_create">Judul *</Label>
                                <Input id="title_create" name="title" required placeholder="Mis: Manajemen Keuangan UMKM" />
                                {errors.title && <p className="text-xs text-destructive">{errors.title}</p>}
                            </div>
                            <div className="grid gap-1.5">
                                <Label htmlFor="description_create">Deskripsi</Label>
                                <textarea id="description_create" name="description" rows={3} className={textareaCls} placeholder="Jelaskan apa yang akan dipelajari siswa..." />
                            </div>
                            <div className="grid gap-1.5">
                                <Label htmlFor="category_id_create">Kategori</Label>
                                <select id="category_id_create" name="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_create">Level *</Label>
                                    <select id="level_create" name="level" defaultValue="beginner" 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_create">Harga *</Label>
                                    <select 
                                        id="price_type_create" 
                                        name="price_type" 
                                        defaultValue="free" 
                                        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_create" className="text-xs font-semibold">Harga (Rp) *</Label>
                                        <Input id="price_input_create" name="price" type="number" min="0" defaultValue={0} 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 text-white">
                                    {processing ? <Spinner /> : <Plus className="h-3.5 w-3.5" />} Buat Kelas
                                </Button>
                            </div>
                        </>
                    )}
                </Form>
            </DialogContent>
        </Dialog>
    );
}

function EditCourseModal({
    course,
    categories,
    open,
    onClose,
}: {
    course: Course;
    categories: Category[];
    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));
    }

    // Clear thumbnail input
    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={`/instructor/courses/${course.slug}`}
                    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="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 text-white">
                                    {processing ? <Spinner /> : <Save className="h-3.5 w-3.5" />} Simpan
                                </Button>
                            </div>
                        </>
                    )}
                </Form>
            </DialogContent>
        </Dialog>
    );
}

export default function InstructorCoursesIndex({ courses, categories }: Props) {
    const [search, setSearch] = useState('');
    const [statusFilter, setStatusFilter] = useState('');
    const [deleteModal, setDeleteModal] = useState<{ open: boolean; course: Course | null }>({ open: false, course: null });
    const [editingCourse, setEditingCourse] = useState<Course | null>(null);
    const [createOpen, setCreateOpen] = useState(false);

    const filteredCourses = courses.filter((course) => {
        const matchesSearch = course.title.toLowerCase().includes(search.toLowerCase());
        const matchesStatus = statusFilter ? course.status === statusFilter : true;
        return matchesSearch && matchesStatus;
    });

    function changeStatus(courseSlug: string, status: string) {
        router.patch(`/instructor/courses/${courseSlug}/status`, { status });
    }

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

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

    const deleteBlockedReason = deleteModal.course
        ? (deleteModal.course.chapters_count && deleteModal.course.chapters_count > 0)
            ? `Kelas tidak dapat dihapus karena masih memiliki 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;

    return (
        <>
            <Head title="Kelas Saya — Instruktur" />

            <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">Kelas Saya</h1>
                                <p className="text-sm text-blue-600 dark:text-blue-400">
                                    Kelola <span className="font-semibold">{courses.length}</span> kelas yang Anda ajarkan
                                </p>
                            </div>
                        </div>
                        <Button onClick={() => setCreateOpen(true)} className="gap-2 bg-blue-600 hover:bg-blue-700 shadow-sm text-white cursor-pointer">
                            <Plus className="h-4 w-4" />
                            Buat Kelas
                        </Button>
                    </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>

                {/* Filter & Search Bar */}
                <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">
                    <div 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-4 h-9 rounded-xl border-blue-100/80 focus-visible:ring-blue-200"
                            value={search}
                            onChange={(e) => setSearch(e.target.value)}
                        />
                    </div>

                    <div className="flex flex-wrap gap-1.5">
                        {STATUS_FILTERS.map((f) => {
                            const isActive = statusFilter === f.value;
                            return (
                                <button
                                    key={f.value}
                                    onClick={() => setStatusFilter(f.value)}
                                    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>

                {/* Card Grid */}
                {filteredCourses.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">
                        {filteredCourses.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(`/instructor/courses/${course.slug}`)}
                                    >
                                        {/* 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>

                                    {/* Card 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(`/instructor/courses/${course.slug}`)}
                                    >
                                        <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-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.slug, 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 cursor-pointer"
                                        >
                                            <option value="draft">Draft</option>
                                            <option value="pending_review">Perlu Review</option>
                                            <option value="archived">Arsip</option>
                                            {course.status === 'published' && <option value="published">Aktif</option>}
                                            {course.status === 'rejected' && <option value="rejected">Ditolak</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 cursor-pointer"
                                            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 cursor-pointer"
                                            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 cursor-pointer"
                                            title="Hapus kelas"
                                        >
                                            <Trash2 className="h-3.5 w-3.5" />
                                        </button>
                                    </div>
                                </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}
                    open={editingCourse !== null}
                    onClose={() => setEditingCourse(null)}
                />
            )}

            <CreateCourseModal
                categories={categories}
                open={createOpen}
                onClose={() => setCreateOpen(false)}
            />
        </>
    );
}

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