import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, router, useForm } from "@inertiajs/react";
import {
    AcademicCapIcon,
    CheckCircleIcon,
    XCircleIcon,
    FunnelIcon,
    MagnifyingGlassIcon,
    CalendarDaysIcon,
    DocumentTextIcon,
    UserCircleIcon,
    CalendarIcon,
    MapPinIcon,
    ClockIcon,
    ExclamationCircleIcon,
    EyeIcon,
    ArrowDownTrayIcon,
    XMarkIcon,
    PencilSquareIcon
} from "@heroicons/react/24/solid";
import { useState, useRef } from "react";
import toast, { Toaster } from "react-hot-toast";
import Swal from "sweetalert2";

/* ================= UTIL ================= */
const statusConfig = {
    'pendaftaran': {
        label: 'Menunggu Persetujuan',
        icon: ClockIcon,
        className: 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300',
        iconClassName: 'text-yellow-600 dark:text-yellow-400'
    },
    'dijadwalkan': {
        label: 'Dijadwalkan',
        icon: CalendarDaysIcon,
        className: 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300',
        iconClassName: 'text-blue-600 dark:text-blue-400'
    },
    'berlangsung': {
        label: 'Berlangsung',
        icon: ClockIcon,
        className: 'bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300',
        iconClassName: 'text-orange-600 dark:text-orange-400'
    },
    'lulus': {
        label: 'Lulus',
        icon: CheckCircleIcon,
        className: 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300',
        iconClassName: 'text-green-600 dark:text-green-400'
    },
    'tidak_lulus': {
        label: 'Tidak Lulus',
        icon: XCircleIcon,
        className: 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300',
        iconClassName: 'text-red-600 dark:text-red-400'
    },
    'ditunda': {
        label: 'Ditunda',
        icon: ExclamationCircleIcon,
        className: 'bg-gray-100 dark:bg-gray-900/30 text-gray-800 dark:text-gray-300',
        iconClassName: 'text-gray-600 dark:text-gray-400'
    }
};

const fileLabels = {
    'lembar_persetujuan': { label: 'Lembar Persetujuan', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300' },
    'ta_final': { label: 'TA Final', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' },
    'sertifikat': { label: 'Sertifikat', color: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' },
    'surat_pengajuan': { label: 'Surat Pengajuan', color: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300' },
    'transaksi': { label: 'Bukti Transaksi', color: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300' }
};

/* ================= PAGE ================= */
export default function Index({ auth, sidang, filters, statusOptions, pengujiOptions }) {
    const isWakilDirektur = auth?.user?.role?.name === "wakil_direktur";
    const rs = (action, ...args) => {
        const ns = isWakilDirektur ? "wakil-direktur.sidang" : "akademik.sidang";
        const name = `${ns}.${action}`;
        return args.length ? route(name, ...args) : route(name);
    };

    const [search, setSearch] = useState(filters?.search || "");
    const [statusFilter, setStatusFilter] = useState(filters?.status || "all");
    const [perPage, setPerPage] = useState(filters?.perPage || 10);
    const [selectedSidang, setSelectedSidang] = useState(null);
    const [showScheduleModal, setShowScheduleModal] = useState(false);
    const [showRejectModal, setShowRejectModal] = useState(false);
    const [showStatusModal, setShowStatusModal] = useState(false);
    const [showAssignPengujiModal, setShowAssignPengujiModal] = useState(false);
    const [showDetailModal, setShowDetailModal] = useState(false);
    const searchTimeoutRef = useRef(null);

    const approveForm = useForm({
        tanggal_sidang: "",
        ruangan: "",
        penguji_1: "",
        penguji_2: "",
        catatan: "",
    });

    const rejectForm = useForm({
        catatan: "",
    });

    const statusForm = useForm({
        status: "",
        catatan: "",
    });

    const assignPengujiForm = useForm({
        penguji_1: "",
        penguji_2: "",
        catatan: "",
    });

    /* ================= HANDLERS ================= */
    const handleSearch = (value) => {
        setSearch(value);
        if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);

        searchTimeoutRef.current = setTimeout(() => {
            router.get(rs("index"), {
                search: value,
                status: statusFilter !== "all" ? statusFilter : "",
                perPage: perPage
            }, {
                preserveState: true,
                preserveScroll: true
            });
        }, 500);
    };

    const handleStatusFilter = (value) => {
        setStatusFilter(value);
        router.get(rs("index"), {
            search: search,
            status: value !== "all" ? value : "",
            perPage: perPage
        }, {
            preserveState: true,
            preserveScroll: true
        });
    };

    const handlePerPage = (value) => {
        setPerPage(value);
        router.get(rs("index"), {
            search: search,
            status: statusFilter !== "all" ? statusFilter : "",
            perPage: value
        }, {
            preserveState: true,
            preserveScroll: true
        });
    };

    const resetFilters = () => {
        setSearch("");
        setStatusFilter("all");
        setPerPage(10);
        router.get(rs("index"), {}, {
            preserveState: true,
            preserveScroll: true
        });
    };

    const submitApprove = () => {
        if (!approveForm.data.tanggal_sidang) {
            toast.error("Tanggal sidang harus diisi");
            return;
        }
        if (!approveForm.data.ruangan.trim()) {
            toast.error("Ruangan harus diisi");
            return;
        }
        if (!approveForm.data.penguji_1) {
            toast.error("Harap pilih Penguji 1");
            return;
        }
        if (!approveForm.data.penguji_2) {
            toast.error("Harap pilih Penguji 2");
            return;
        }
        if (approveForm.data.penguji_1 === approveForm.data.penguji_2) {
            toast.error("Penguji 1 dan Penguji 2 harus berbeda");
            return;
        }

        Swal.fire({
            title: "Setujui dan Jadwalkan Sidang?",
            html: `
                <div class="text-left space-y-2">
                    <div>
                        <p class="text-sm font-medium text-gray-600 dark:text-gray-300">Mahasiswa:</p>
                        <p class="text-gray-900 dark:text-white">${selectedSidang?.mahasiswa?.nama}</p>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-600 dark:text-gray-300">NIM:</p>
                        <p class="text-gray-900 dark:text-white">${selectedSidang?.mahasiswa?.nim}</p>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-600 dark:text-gray-300">Tanggal Sidang:</p>
                        <p class="text-gray-900 dark:text-white">${new Date(approveForm.data.tanggal_sidang).toLocaleString('id-ID')}</p>
                    </div>
                    <div class="p-2 bg-blue-50 dark:bg-blue-900/20 rounded">
                        <p class="text-xs text-blue-700 dark:text-blue-300">Penguji akan ditetapkan dan sidang dijadwalkan.</p>
                    </div>
                </div>
            `,
            icon: "question",
            showCancelButton: true,
            confirmButtonText: "Ya, Setujui & Jadwalkan",
            cancelButtonText: "Batal",
            confirmButtonColor: "#10b981",
            cancelButtonColor: "#6b7280",
            background: document.documentElement.classList.contains('dark') ? '#1f2937' : '#fff',
            color: document.documentElement.classList.contains('dark') ? '#f9fafb' : '#111827',
            showLoaderOnConfirm: true,
            preConfirm: () => {
                return approveForm.post(rs("approve", selectedSidang.id), {
                    preserveScroll: true,
                    onSuccess: () => {
                        toast.success("Sidang berhasil disetujui, penguji ditetapkan, dan dijadwalkan");
                        setShowScheduleModal(false);
                        approveForm.reset();
                    },
                    onError: (errors) => {
                        Swal.showValidationMessage(
                            errors?.message || "Terjadi kesalahan saat menyimpan"
                        );
                    }
                });
            }
        });
    };

    const submitAssignPenguji = () => {
        if (!assignPengujiForm.data.penguji_1) {
            toast.error("Harap pilih Penguji 1");
            return;
        }
        if (!assignPengujiForm.data.penguji_2) {
            toast.error("Harap pilih Penguji 2");
            return;
        }
        if (assignPengujiForm.data.penguji_1 === assignPengujiForm.data.penguji_2) {
            toast.error("Penguji 1 dan Penguji 2 harus berbeda");
            return;
        }

        Swal.fire({
            title: "Tetapkan Penguji Sidang?",
            html: `
                <div class="text-left space-y-2">
                    <div>
                        <p class="text-sm font-medium text-gray-600 dark:text-gray-300">Mahasiswa:</p>
                        <p class="text-gray-900 dark:text-white">${selectedSidang?.mahasiswa?.nama}</p>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-600 dark:text-gray-300">NIM:</p>
                        <p class="text-gray-900 dark:text-white">${selectedSidang?.mahasiswa?.nim}</p>
                    </div>
                    <div class="p-2 bg-blue-50 dark:bg-blue-900/20 rounded">
                        <p class="text-xs text-blue-700 dark:text-blue-300">Penguji akan diperbarui untuk sidang ini.</p>
                    </div>
                </div>
            `,
            icon: "question",
            showCancelButton: true,
            confirmButtonText: "Ya, Tetapkan Penguji",
            cancelButtonText: "Batal",
            confirmButtonColor: "#8b5cf6",
            cancelButtonColor: "#6b7280",
            background: document.documentElement.classList.contains('dark') ? '#1f2937' : '#fff',
            color: document.documentElement.classList.contains('dark') ? '#f9fafb' : '#111827',
            showLoaderOnConfirm: true,
            preConfirm: () => {
                return assignPengujiForm.post(rs("assign-penguji", selectedSidang.id), {
                    preserveScroll: true,
                    onSuccess: () => {
                        toast.success("Penguji berhasil ditetapkan");
                        setShowAssignPengujiModal(false);
                        assignPengujiForm.reset();
                    },
                    onError: (errors) => {
                        Swal.showValidationMessage(
                            errors?.message || "Terjadi kesalahan saat menyimpan"
                        );
                    }
                });
            }
        });
    };

    const submitReject = () => {
        if (!rejectForm.data.catatan.trim()) {
            toast.error("Alasan penolakan harus diisi");
            return;
        }

        Swal.fire({
            title: "Tolak Pengajuan Sidang?",
            text: `Sidang ${selectedSidang?.mahasiswa?.nama} akan ditolak.`,
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Ya, Tolak",
            cancelButtonText: "Batal",
            confirmButtonColor: "#ef4444",
            cancelButtonColor: "#6b7280",
            background: document.documentElement.classList.contains('dark') ? '#1f2937' : '#fff',
            color: document.documentElement.classList.contains('dark') ? '#f9fafb' : '#111827',
            showLoaderOnConfirm: true,
            preConfirm: () => {
                return rejectForm.post(rs("reject", selectedSidang.id), {
                    preserveScroll: true,
                    onSuccess: () => {
                        toast.success("Sidang berhasil ditolak");
                        setShowRejectModal(false);
                        rejectForm.reset();
                    },
                    onError: (errors) => {
                        Swal.showValidationMessage(
                            errors?.message || "Terjadi kesalahan saat menyimpan"
                        );
                    }
                });
            }
        });
    };

    const submitUpdateStatus = () => {
        Swal.fire({
            title: "Update Status Sidang?",
            text: `Status sidang ${selectedSidang?.mahasiswa?.nama} akan diperbarui.`,
            icon: "question",
            showCancelButton: true,
            confirmButtonText: "Ya, Update",
            cancelButtonText: "Batal",
            confirmButtonColor: "#8b5cf6",
            cancelButtonColor: "#6b7280",
            background: document.documentElement.classList.contains('dark') ? '#1f2937' : '#fff',
            color: document.documentElement.classList.contains('dark') ? '#f9fafb' : '#111827',
            showLoaderOnConfirm: true,
            preConfirm: () => {
                return statusForm.post(rs("update-status", selectedSidang.id), {
                    preserveScroll: true,
                    onSuccess: () => {
                        toast.success("Status sidang berhasil diperbarui");
                        setShowStatusModal(false);
                        statusForm.reset();
                    },
                    onError: (errors) => {
                        Swal.showValidationMessage(
                            errors?.message || "Terjadi kesalahan saat menyimpan"
                        );
                    }
                });
            }
        });
    };

    const downloadFile = (file) => {
        const url = rs('download-file', file.id);
        window.open(url, '_blank');
        toast.success('Download dimulai', { duration: 2000 });
    };

    const formatDate = (dateString, includeTime = false) => {
        if (!dateString) return '-';
        try {
            const date = new Date(dateString);
            if (includeTime) {
                return date.toLocaleString('id-ID', {
                    weekday: 'long',
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                });
            }
            return date.toLocaleDateString('id-ID', {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });
        } catch {
            return '-';
        }
    };

    const formatDateTimeLocal = (dateString) => {
        if (!dateString) return '';
        try {
            const date = new Date(dateString);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            return `${year}-${month}-${day}T${hours}:${minutes}`;
        } catch {
            return '';
        }
    };

    const getStatusBadge = (status) => {
        const config = statusConfig[status] || {
            label: statusOptions?.[status] || status,
            icon: ExclamationCircleIcon,
            className: 'bg-gray-100 dark:bg-gray-900/30 text-gray-800 dark:text-gray-300',
            iconClassName: 'text-gray-600 dark:text-gray-400'
        };
        const Icon = config.icon;
        return (
            <span className={`inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium ${config.className}`}>
                <Icon className={`w-4 h-4 ${config.iconClassName}`} />
                {config.label}
            </span>
        );
    };

    const getFileBadge = (jenis) => {
        return fileLabels[jenis] || {
            label: jenis,
            color: 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300'
        };
    };

    const openScheduleModal = (item) => {
        setSelectedSidang(item);
        const defaultDate = new Date();
        defaultDate.setDate(defaultDate.getDate() + 1);
        defaultDate.setHours(9, 0, 0, 0);

        approveForm.setData({
            tanggal_sidang: formatDateTimeLocal(item.tanggal_sidang) || formatDateTimeLocal(defaultDate),
            ruangan: item.ruangan || '',
            penguji_1: item.penguji_1 || '',
            penguji_2: item.penguji_2 || '',
            catatan: item.catatan_admin || ''
        });
        setShowScheduleModal(true);
    };

    const openAssignPengujiModal = (item) => {
        setSelectedSidang(item);
        assignPengujiForm.setData({
            penguji_1: item.penguji_1 || '',
            penguji_2: item.penguji_2 || '',
            catatan: item.catatan_admin || ''
        });
        setShowAssignPengujiModal(true);
    };

    const openStatusModal = (item) => {
        setSelectedSidang(item);
        statusForm.setData({
            status: item.status,
            catatan: item.catatan_admin || ''
        });
        setShowStatusModal(true);
    };

    const hasActiveFilters = search || statusFilter !== "all";

    // Fungsi untuk mendapatkan nama penguji dari id
    const getPengujiName = (pengujiId) => {
        if (!pengujiOptions || !pengujiId) return '-';
        const penguji = pengujiOptions.find(p => p.value === pengujiId);
        return penguji ? penguji.label.split(' (')[0] : '-';
    };

    return (
        <AuthenticatedLayout
            user={auth.user}
            header={
                <h2 className="flex items-center gap-2 font-semibold text-xl text-gray-800 dark:text-gray-200">
                    <DocumentTextIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
                    Validasi Penguji TA Mahasiswa
                </h2>
            }
        >
            <Head title="Validasi Penguji TA Mahasiswa" />
            <Toaster position="top-right" />

            <div className="py-6">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white dark:bg-purple-900/10 overflow-hidden shadow-sm sm:rounded-lg border border-gray-200 dark:border-purple-500/20">
                        <div className="p-6">
                            {/* Header */}
                            <div className="mb-6">
                                <div className="flex items-center gap-3 mb-4">
                                    <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
                                        <DocumentTextIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
                                    </div>
                                    <div>
                                        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
                                            Validasi Penguji TA Mahasiswa
                                        </h1>
                                        <p className="text-sm text-gray-600 dark:text-purple-300/80">
                                            Kelola dan validasi pengajuan sidang mahasiswa
                                        </p>
                                    </div>
                                </div>
                            </div>

                            {/* Filter Section */}
                            <div className="mb-6 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg p-4 border border-purple-200 dark:border-purple-500/30">
                                <div className="flex items-center gap-2 mb-3">
                                    <FunnelIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
                                    <h3 className="font-medium text-purple-900 dark:text-purple-100">
                                        Filter Data
                                        {hasActiveFilters && (
                                            <span className="ml-2 text-xs bg-purple-600 text-white px-2 py-1 rounded-full">
                                                Filter Aktif
                                            </span>
                                        )}
                                    </h3>
                                </div>

                                <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
                                    {/* Search */}
                                    <div className="lg:col-span-2">
                                        <label className="block text-sm font-medium text-purple-700 dark:text-purple-300 mb-1">
                                            Pencarian
                                        </label>
                                        <div className="relative">
                                            <input
                                                type="text"
                                                placeholder="Cari NIM atau nama mahasiswa..."
                                                value={search}
                                                onChange={(e) => handleSearch(e.target.value)}
                                                className="w-full pl-10 pr-4 py-2 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-purple-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                            />
                                            <MagnifyingGlassIcon className="w-5 h-5 text-purple-500 absolute left-3 top-1/2 transform -translate-y-1/2" />
                                        </div>
                                    </div>

                                    {/* Status Filter */}
                                    <div>
                                        <label className="block text-sm font-medium text-purple-700 dark:text-purple-300 mb-1">
                                            Status
                                        </label>
                                        <select
                                            value={statusFilter}
                                            onChange={(e) => handleStatusFilter(e.target.value)}
                                            className="w-full px-3 py-2 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-950 text-purple-900 dark:text-purple-100 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                        >
                                            {statusOptions && Object.entries(statusOptions).map(([value, label]) => (
                                                <option key={value} value={value}>{label}</option>
                                            ))}
                                        </select>
                                    </div>

                                    {/* Per Page */}
                                    <div>
                                        <label className="block text-sm font-medium text-purple-700 dark:text-purple-300 mb-1">
                                            Per Halaman
                                        </label>
                                        <select
                                            value={perPage}
                                            onChange={(e) => handlePerPage(e.target.value)}
                                            className="w-full px-3 py-2 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-950 text-purple-900 dark:text-purple-100 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                        >
                                            <option value="10">10</option>
                                            <option value="25">25</option>
                                            <option value="50">50</option>
                                            <option value="100">100</option>
                                        </select>
                                    </div>
                                </div>

                                {/* Reset Filter Button */}
                                {hasActiveFilters && (
                                    <div className="flex justify-end mt-4">
                                        <button
                                            onClick={resetFilters}
                                            className="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors font-medium text-sm"
                                        >
                                            Reset Filter
                                        </button>
                                    </div>
                                )}
                            </div>

                            {/* Daftar Sidang */}
                            <div>
                                <div className="flex justify-between items-center mb-4">
                                    <h3 className="text-lg font-medium text-purple-900 dark:text-purple-100">
                                        Daftar Pengajuan Sidang
                                    </h3>
                                    <div className="text-sm text-gray-600 dark:text-purple-300/80">
                                        Total {sidang.total} pengajuan
                                    </div>
                                </div>

                                {sidang.data.length > 0 ? (
                                    <div className="overflow-x-auto rounded-lg border border-gray-200 dark:border-purple-500/20">
                                        <table className="w-full text-sm">
                                            <thead className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20">
                                                <tr>
                                                    <th className="p-4 text-left font-semibold text-purple-900 dark:text-purple-100">
                                                        Mahasiswa
                                                    </th>
                                                    <th className="p-4 text-left font-semibold text-purple-900 dark:text-purple-100">
                                                        Status
                                                    </th>
                                                    <th className="p-4 text-left font-semibold text-purple-900 dark:text-purple-100">
                                                        Penguji
                                                    </th>
                                                    <th className="p-4 text-left font-semibold text-purple-900 dark:text-purple-100">
                                                        File
                                                    </th>
                                                    <th className="p-4 text-left font-semibold text-purple-900 dark:text-purple-100">
                                                        Tanggal
                                                    </th>
                                                    <th className="p-4 text-center font-semibold text-purple-900 dark:text-purple-100">
                                                        Aksi
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody className="divide-y divide-gray-200 dark:divide-purple-500/20">
                                                {sidang.data.map((item, idx) => {
                                                    return (
                                                        <tr key={item.id} className={`hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-colors ${
                                                            idx % 2 === 0 ? "bg-white dark:bg-purple-900/10" : "bg-gray-50 dark:bg-purple-900/10"
                                                        }`}>
                                                            <td className="p-4">
                                                                <div className="font-medium text-gray-900 dark:text-white">
                                                                    {item.mahasiswa?.nama || '-'}
                                                                </div>
                                                                <div className="text-xs text-gray-500 dark:text-purple-300/80">
                                                                    NIM: {item.mahasiswa?.nim || '-'}
                                                                </div>
                                                                {item.bimbingan?.judul && (
                                                                    <div className="text-xs text-gray-500 dark:text-purple-300/80 mt-1 truncate max-w-xs" title={item.bimbingan.judul}>
                                                                        <AcademicCapIcon className="w-3 h-3 inline mr-1" />
                                                                        {item.bimbingan.judul}
                                                                    </div>
                                                                )}
                                                            </td>
                                                            <td className="p-4">
                                                                {getStatusBadge(item.status)}
                                                                {item.catatan_admin && (
                                                                    <div className="mt-1 text-xs text-gray-500 dark:text-gray-400" title={item.catatan_admin}>
                                                                        {item.catatan_admin.substring(0, 50)}...
                                                                    </div>
                                                                )}
                                                            </td>
                                                            <td className="p-4">
                                                                <div className="space-y-1">
                                                                    <div className="text-xs text-gray-500 dark:text-gray-400">
                                                                        <span className="font-medium">Penguji 1:</span> {getPengujiName(item.penguji_1) || (item.penguji_satu?.name || '-')}
                                                                    </div>
                                                                    <div className="text-xs text-gray-500 dark:text-gray-400">
                                                                        <span className="font-medium">Penguji 2:</span> {getPengujiName(item.penguji_2) || (item.penguji_dua?.name || '-')}
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td className="p-4">
                                                                <div className="flex flex-wrap gap-1">
                                                                    {item.files?.length > 0 ? (
                                                                        <>
                                                                            {item.files.map((file, idx) => {
                                                                                const badgeInfo = getFileBadge(file.jenis);
                                                                                return (
                                                                                    <button
                                                                                        key={file.id || idx}
                                                                                        onClick={() => downloadFile(file)}
                                                                                        className={`px-2 py-1 text-xs rounded ${badgeInfo.color} hover:opacity-80 transition-opacity`}
                                                                                        title={`${badgeInfo.label} - Download`}
                                                                                    >
                                                                                        <ArrowDownTrayIcon className="w-3 h-3 inline mr-1" />
                                                                                        {badgeInfo.label}
                                                                                    </button>
                                                                                );
                                                                            })}
                                                                        </>
                                                                    ) : (
                                                                        <span className="text-gray-400 dark:text-gray-500 text-xs">Tidak ada file</span>
                                                                    )}
                                                                </div>
                                                            </td>
                                                            <td className="p-4">
                                                                <div className="text-sm text-gray-600 dark:text-purple-200">
                                                                    Daftar: {formatDate(item.tanggal_daftar)}
                                                                </div>
                                                                {item.tanggal_sidang && (
                                                                    <div className="text-xs text-purple-600 dark:text-purple-400 mt-1">
                                                                        <CalendarIcon className="w-3 h-3 inline mr-1" />
                                                                        Sidang: {formatDate(item.tanggal_sidang, true)}
                                                                    </div>
                                                                )}
                                                                {item.ruangan && (
                                                                    <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                                        <MapPinIcon className="w-3 h-3 inline mr-1" />
                                                                        {item.ruangan}
                                                                    </div>
                                                                )}
                                                            </td>
                                                            <td className="p-4">
                                                                <div className="flex flex-col gap-2 min-w-[200px]">
                                                                    {item.status === 'pendaftaran' && (
                                                                        <>
                                                                            <button
                                                                                onClick={() => openScheduleModal(item)}
                                                                                className="w-full px-3 py-1.5 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-lg text-xs hover:from-green-700 hover:to-emerald-700 transition-all duration-200 flex items-center justify-center gap-1 font-medium shadow-lg shadow-green-500/25"
                                                                            >
                                                                                <CalendarIcon className="w-4 h-4" />
                                                                                Setujui & Jadwalkan
                                                                            </button>
                                                                            <button
                                                                                onClick={() => {
                                                                                    setSelectedSidang(item);
                                                                                    setShowRejectModal(true);
                                                                                }}
                                                                                className="w-full px-3 py-1.5 bg-gradient-to-r from-red-600 to-pink-600 text-white rounded-lg text-xs hover:from-red-700 hover:to-pink-700 transition-all duration-200 flex items-center justify-center gap-1 font-medium shadow-lg shadow-red-500/25"
                                                                            >
                                                                                <XCircleIcon className="w-4 h-4" />
                                                                                Tolak
                                                                            </button>
                                                                        </>
                                                                    )}
                                                                    {item.status !== 'pendaftaran' && (
                                                                        <>
                                                                            <button
                                                                                onClick={() => openStatusModal(item)}
                                                                                className="w-full px-3 py-1.5 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg text-xs hover:from-purple-700 hover:to-pink-700 transition-all duration-200 flex items-center justify-center gap-1 font-medium shadow-lg shadow-purple-500/25"
                                                                            >
                                                                                <PencilSquareIcon className="w-4 h-4" />
                                                                                Update Status
                                                                            </button>
                                                                            <button
                                                                                onClick={() => openAssignPengujiModal(item)}
                                                                                className="w-full px-3 py-1.5 bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-lg text-xs hover:from-blue-700 hover:to-cyan-700 transition-all duration-200 flex items-center justify-center gap-1 font-medium shadow-lg shadow-blue-500/25"
                                                                            >
                                                                                <AcademicCapIcon className="w-4 h-4" />
                                                                                Ubah Penguji
                                                                            </button>
                                                                        </>
                                                                    )}
                                                                    <button
                                                                        onClick={() => {
                                                                            setSelectedSidang(item);
                                                                            setShowDetailModal(true);
                                                                        }}
                                                                        className="w-full px-3 py-1.5 bg-gradient-to-r from-indigo-500 to-indigo-600 text-white rounded-lg text-xs hover:from-indigo-600 hover:to-indigo-700 transition-all duration-200 flex items-center justify-center gap-1 font-medium shadow-lg shadow-indigo-500/25"
                                                                    >
                                                                        <EyeIcon className="w-4 h-4" />
                                                                        Lihat Detail
                                                                    </button>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    );
                                                })}
                                            </tbody>
                                        </table>

                                        {/* Pagination */}
                                        {sidang.links.length > 3 && (
                                            <div className="px-4 py-3 border-t border-gray-200 dark:border-purple-500/20">
                                                <div className="flex items-center justify-between">
                                                    <div className="text-sm text-gray-700 dark:text-gray-300">
                                                        Menampilkan {sidang.from} sampai {sidang.to} dari {sidang.total} data
                                                    </div>
                                                    <div className="flex gap-1">
                                                        {sidang.links.map((link, idx) => (
                                                            <button
                                                                key={idx}
                                                                onClick={() => {
                                                                    if (link.url) {
                                                                        router.get(link.url, {}, {
                                                                            preserveState: true,
                                                                            preserveScroll: true
                                                                        });
                                                                    }
                                                                }}
                                                                disabled={!link.url || link.active}
                                                                className={`px-3 py-1 rounded-lg text-sm font-medium transition-colors ${
                                                                    link.active
                                                                        ? 'bg-purple-600 text-white'
                                                                        : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
                                                                } ${!link.url ? 'opacity-50 cursor-not-allowed' : ''}`}
                                                                dangerouslySetInnerHTML={{ __html: link.label }}
                                                            />
                                                        ))}
                                                    </div>
                                                </div>
                                            </div>
                                        )}
                                    </div>
                                ) : (
                                    <div className="text-center py-8">
                                        <DocumentTextIcon className="w-16 h-16 text-gray-300 dark:text-purple-500/30 mx-auto mb-4" />
                                        <p className="text-gray-500 dark:text-purple-400/70 text-lg mb-2">
                                            {hasActiveFilters
                                                ? "Tidak ada sidang yang sesuai dengan filter"
                                                : "Belum ada pengajuan sidang"
                                            }
                                        </p>
                                        {hasActiveFilters && (
                                            <button
                                                onClick={resetFilters}
                                                className="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 font-medium"
                                            >
                                                Reset filter untuk melihat semua data
                                            </button>
                                        )}
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Modal Setujui & Jadwalkan */}
            {showScheduleModal && selectedSidang && (
                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
                    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-lg border border-purple-200 dark:border-purple-500/30 overflow-y-auto max-h-[90vh]">
                        <div className="flex justify-between items-center mb-4">
                            <h2 className="text-xl font-bold text-gray-800 dark:text-white">
                                Setujui & Jadwalkan Sidang
                            </h2>
                            <button
                                onClick={() => setShowScheduleModal(false)}
                                className="text-gray-400 hover:text-gray-500 text-2xl transition-colors"
                            >
                                <XMarkIcon className="w-5 h-5" />
                            </button>
                        </div>

                        <div className="mb-4 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
                            <p className="text-sm text-purple-800 dark:text-purple-300">
                                <span className="font-medium">Mahasiswa:</span> {selectedSidang.mahasiswa?.nama}
                            </p>
                            <p className="text-sm text-purple-800 dark:text-purple-300">
                                <span className="font-medium">NIM:</span> {selectedSidang.mahasiswa?.nim}
                            </p>
                            <p className="text-sm text-purple-800 dark:text-purple-300 mt-2">
                                <span className="font-medium">Status Saat Ini:</span> {getStatusBadge(selectedSidang.status)}
                            </p>
                        </div>

                        <div className="space-y-4">
                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Tanggal & Waktu Sidang *
                                </label>
                                <input
                                    type="datetime-local"
                                    value={approveForm.data.tanggal_sidang}
                                    onChange={(e) => approveForm.setData("tanggal_sidang", e.target.value)}
                                    required
                                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                />
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Ruangan/Lokasi *
                                </label>
                                <input
                                    type="text"
                                    value={approveForm.data.ruangan}
                                    onChange={(e) => approveForm.setData("ruangan", e.target.value)}
                                    required
                                    placeholder="Contoh: Ruang 301, Gedung A"
                                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                />
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Penguji 1 *
                                </label>
                                <select
                                    value={approveForm.data.penguji_1 || ''}
                                    onChange={(e) => approveForm.setData("penguji_1", e.target.value)}
                                    required
                                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                >
                                    <option value="">Pilih Penguji 1</option>
                                    {pengujiOptions && pengujiOptions.map((penguji) => (
                                        <option key={penguji.value} value={penguji.value}>
                                            {penguji.label}
                                        </option>
                                    ))}
                                </select>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Penguji 2 *
                                </label>
                                <select
                                    value={approveForm.data.penguji_2 || ''}
                                    onChange={(e) => approveForm.setData("penguji_2", e.target.value)}
                                    required
                                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                >
                                    <option value="">Pilih Penguji 2</option>
                                    {pengujiOptions && pengujiOptions.map((penguji) => (
                                        <option
                                            key={penguji.value}
                                            value={penguji.value}
                                            disabled={penguji.value === approveForm.data.penguji_1}
                                        >
                                            {penguji.label}
                                            {penguji.value === approveForm.data.penguji_1 && ' (sudah dipilih sebagai Penguji 1)'}
                                        </option>
                                    ))}
                                </select>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Catatan (Opsional)
                                </label>
                                <textarea
                                    value={approveForm.data.catatan}
                                    onChange={(e) => approveForm.setData("catatan", e.target.value)}
                                    rows="3"
                                    placeholder="Tambahkan catatan untuk mahasiswa..."
                                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                />
                            </div>

                            <div className="flex justify-end gap-3">
                                <button
                                    onClick={() => setShowScheduleModal(false)}
                                    className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors font-medium"
                                >
                                    Batal
                                </button>
                                <button
                                    onClick={submitApprove}
                                    disabled={approveForm.processing || !approveForm.data.tanggal_sidang || !approveForm.data.ruangan.trim() || !approveForm.data.penguji_1 || !approveForm.data.penguji_2}
                                    className="px-4 py-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-lg hover:from-green-600 hover:to-emerald-700 transition-all duration-200 font-medium shadow-lg shadow-green-500/25 disabled:opacity-50 flex items-center gap-2"
                                >
                                    {approveForm.processing ? (
                                        <>
                                            <svg className="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                            </svg>
                                            Memproses...
                                        </>
                                    ) : (
                                        <>
                                            <CheckCircleIcon className="w-4 h-4" />
                                            Setujui & Tetapkan Penguji
                                        </>
                                    )}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* Modal Tetapkan Penguji */}
            {showAssignPengujiModal && selectedSidang && (
                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
                    <div className="bg-white dark:bg-black rounded-lg shadow-xl p-6 w-full max-w-lg border border-purple-200 dark:border-purple-500/30">
                        <div className="flex justify-between items-center mb-4">
                            <h2 className="text-xl font-bold text-gray-800 dark:text-white">
                                Tetapkan Penguji Sidang
                            </h2>
                            <button
                                onClick={() => setShowAssignPengujiModal(false)}
                                className="text-gray-400 hover:text-gray-500 text-2xl transition-colors"
                            >
                                <XMarkIcon className="w-5 h-5" />
                            </button>
                        </div>

                        <div className="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
                            <p className="text-sm text-blue-800 dark:text-blue-300">
                                <span className="font-medium">Mahasiswa:</span> {selectedSidang.mahasiswa?.nama}
                            </p>
                            <p className="text-sm text-blue-800 dark:text-blue-300">
                                <span className="font-medium">NIM:</span> {selectedSidang.mahasiswa?.nim}
                            </p>
                            <p className="text-sm text-blue-800 dark:text-blue-300 mt-2">
                                <span className="font-medium">Status:</span> {getStatusBadge(selectedSidang.status)}
                            </p>
                        </div>

                        <div className="space-y-4">
                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Penguji 1 *
                                </label>
                                <select
                                    value={assignPengujiForm.data.penguji_1 || ''}
                                    onChange={(e) => assignPengujiForm.setData("penguji_1", e.target.value)}
                                    required
                                    className="w-full px-3 py-2 border border-gray-300 dark:border-purple-600 rounded-lg bg-white dark:bg-purple-950 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                >
                                    <option value="">Pilih Penguji 1</option>
                                    {pengujiOptions && pengujiOptions.map((penguji) => (
                                        <option key={penguji.value} value={penguji.value}>
                                            {penguji.label}
                                        </option>
                                    ))}
                                </select>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Penguji 2 *
                                </label>
                                <select
                                    value={assignPengujiForm.data.penguji_2 || ''}
                                    onChange={(e) => assignPengujiForm.setData("penguji_2", e.target.value)}
                                    required
                                    className="w-full px-3 py-2 border border-gray-300 dark:border-purple-600 rounded-lg bg-white dark:bg-purple-950 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                >
                                    <option value="">Pilih Penguji 2</option>
                                    {pengujiOptions && pengujiOptions.map((penguji) => (
                                        <option
                                            key={penguji.value}
                                            value={penguji.value}
                                            disabled={penguji.value === assignPengujiForm.data.penguji_1}
                                        >
                                            {penguji.label}
                                            {penguji.value === assignPengujiForm.data.penguji_1 && ' (sudah dipilih sebagai Penguji 1)'}
                                        </option>
                                    ))}
                                </select>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Catatan (Opsional)
                                </label>
                                <textarea
                                    value={assignPengujiForm.data.catatan}
                                    onChange={(e) => assignPengujiForm.setData("catatan", e.target.value)}
                                    rows="3"
                                    placeholder="Tambahkan catatan jika perlu..."
                                    className="w-full px-3 py-2 border border-gray-300 dark:border-purple-600 rounded-lg bg-white dark:bg-purple-950 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                />
                            </div>

                            <div className="flex justify-end gap-3">
                                <button
                                    onClick={() => setShowAssignPengujiModal(false)}
                                    className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors font-medium"
                                >
                                    Batal
                                </button>
                                <button
                                    onClick={submitAssignPenguji}
                                    disabled={assignPengujiForm.processing || !assignPengujiForm.data.penguji_1 || !assignPengujiForm.data.penguji_2}
                                    className="px-4 py-2 bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-lg hover:from-blue-700 hover:to-cyan-700 transition-all duration-200 font-medium shadow-lg shadow-blue-500/25 disabled:opacity-50 flex items-center gap-2"
                                >
                                    {assignPengujiForm.processing ? (
                                        <>
                                            <svg className="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                            </svg>
                                            Memproses...
                                        </>
                                    ) : (
                                        <>
                                            <AcademicCapIcon className="w-4 h-4" />
                                            Tetapkan Penguji
                                        </>
                                    )}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* Modal Tolak Sidang */}
            {showRejectModal && selectedSidang && (
                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
                    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-md border border-purple-200 dark:border-purple-500/30">
                        <div className="flex justify-between items-center mb-4">
                            <h2 className="text-xl font-bold text-gray-800 dark:text-white">
                                Tolak Pengajuan Sidang
                            </h2>
                            <button
                                onClick={() => setShowRejectModal(false)}
                                className="text-gray-400 hover:text-gray-500 text-2xl"
                            >
                                ×
                            </button>
                        </div>

                        <div className="mb-4 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
                            <p className="text-sm text-red-800 dark:text-red-300">
                                <span className="font-medium">Mahasiswa:</span> {selectedSidang.mahasiswa?.nama}
                            </p>
                            <p className="text-sm text-red-800 dark:text-red-300">
                                <span className="font-medium">NIM:</span> {selectedSidang.mahasiswa?.nim}
                            </p>
                            <p className="text-xs text-red-700 dark:text-red-400/80 mt-2">
                                ⚠️ Pengajuan sidang akan ditolak dan status diubah menjadi "Ditunda"
                            </p>
                        </div>

                        <div className="space-y-4">
                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Alasan Penolakan *
                                </label>
                                <textarea
                                    value={rejectForm.data.catatan}
                                    onChange={(e) => rejectForm.setData("catatan", e.target.value)}
                                    rows="4"
                                    required
                                    placeholder="Berikan alasan mengapa pengajuan sidang ditolak..."
                                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                />
                                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    Alasan ini akan ditampilkan kepada mahasiswa
                                </p>
                            </div>

                            <div className="flex justify-end gap-3">
                                <button
                                    onClick={() => setShowRejectModal(false)}
                                    className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors font-medium"
                                >
                                    Batal
                                </button>
                                <button
                                    onClick={submitReject}
                                    disabled={rejectForm.processing || !rejectForm.data.catatan.trim()}
                                    className="px-4 py-2 bg-gradient-to-r from-red-600 to-pink-600 text-white rounded-lg hover:from-red-700 hover:to-pink-700 transition-all duration-200 font-medium shadow-lg shadow-red-500/25 disabled:opacity-50 flex items-center gap-2"
                                >
                                    {rejectForm.processing ? (
                                        <>
                                            <svg className="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                            </svg>
                                            Memproses...
                                        </>
                                    ) : (
                                        <>
                                            <XCircleIcon className="w-4 h-4" />
                                            Tolak Pengajuan
                                        </>
                                    )}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* Modal Update Status */}
            {showStatusModal && selectedSidang && (
                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
                    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 w-full max-w-md border border-purple-200 dark:border-purple-500/30">
                        <div className="flex justify-between items-center mb-4">
                            <h2 className="text-xl font-bold text-gray-800 dark:text-white">
                                Update Status Sidang
                            </h2>
                            <button
                                onClick={() => setShowStatusModal(false)}
                                className="text-gray-400 hover:text-gray-500 text-2xl"
                            >
                                ×
                            </button>
                        </div>

                        <div className="mb-4 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
                            <p className="text-sm text-purple-800 dark:text-purple-300">
                                <span className="font-medium">Mahasiswa:</span> {selectedSidang.mahasiswa?.nama}
                            </p>
                            <p className="text-sm text-purple-800 dark:text-purple-300">
                                <span className="font-medium">Status Saat Ini:</span> {getStatusBadge(selectedSidang.status)}
                            </p>
                        </div>

                        <div className="space-y-4">
                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Status Baru *
                                </label>
                                <select
                                    value={statusForm.data.status}
                                    onChange={(e) => statusForm.setData("status", e.target.value)}
                                    required
                                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                >
                                    <option value="pendaftaran">Menunggu Persetujuan</option>
                                    <option value="dijadwalkan">Dijadwalkan</option>
                                    <option value="berlangsung">Berlangsung</option>
                                    <option value="lulus">Lulus</option>
                                    <option value="tidak_lulus">Tidak Lulus</option>
                                    <option value="ditunda">Ditunda</option>
                                </select>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Catatan (Opsional)
                                </label>
                                <textarea
                                    value={statusForm.data.catatan}
                                    onChange={(e) => statusForm.setData("catatan", e.target.value)}
                                    rows="3"
                                    placeholder="Tambahkan catatan jika perlu..."
                                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                />
                            </div>

                            <div className="flex justify-end gap-3">
                                <button
                                    onClick={() => setShowStatusModal(false)}
                                    className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors font-medium"
                                >
                                    Batal
                                </button>
                                <button
                                    onClick={submitUpdateStatus}
                                    disabled={statusForm.processing || !statusForm.data.status}
                                    className="px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg hover:from-purple-700 hover:to-pink-700 transition-all duration-200 font-medium shadow-lg shadow-purple-500/25 disabled:opacity-50 flex items-center gap-2"
                                >
                                    {statusForm.processing ? (
                                        <>
                                            <svg className="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                            </svg>
                                            Memproses...
                                        </>
                                    ) : (
                                        <>
                                            <PencilSquareIcon className="w-4 h-4" />
                                            Update Status
                                        </>
                                    )}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* Modal Detail Sidang */}
            {showDetailModal && selectedSidang && (
                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
                    <div className="bg-white dark:bg-black rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto border border-purple-200 dark:border-purple-500/30">
                        <div className="p-6">
                            <div className="flex justify-between items-center mb-6">
                                <div>
                                    <h2 className="text-2xl font-bold text-gray-800 dark:text-white">
                                        Detail Sidang
                                    </h2>
                                    <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                                        Informasi lengkap pengajuan sidang
                                    </p>
                                </div>
                                <button
                                    onClick={() => setShowDetailModal(false)}
                                    className="text-gray-400 hover:text-gray-500 text-2xl"
                                >
                                    ×
                                </button>
                            </div>

                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                {/* Informasi Mahasiswa */}
                                <div className="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-4">
                                    <h3 className="text-lg font-semibold text-purple-800 dark:text-purple-300 mb-3 flex items-center gap-2">
                                        <UserCircleIcon className="w-5 h-5" />
                                        Informasi Mahasiswa
                                    </h3>
                                    <div className="space-y-2">
                                        <div>
                                            <p className="text-sm text-gray-600 dark:text-gray-400">Nama</p>
                                            <p className="font-medium text-gray-900 dark:text-white">{selectedSidang.mahasiswa?.nama || '-'}</p>
                                        </div>
                                        <div>
                                            <p className="text-sm text-gray-600 dark:text-gray-400">NIM</p>
                                            <p className="font-medium text-gray-900 dark:text-white">{selectedSidang.mahasiswa?.nim || '-'}</p>
                                        </div>
                                        {selectedSidang.bimbingan?.judul && (
                                            <div>
                                                <p className="text-sm text-gray-600 dark:text-gray-400">Judul Tugas Akhir</p>
                                                <p className="font-medium text-gray-900 dark:text-white">{selectedSidang.bimbingan.judul}</p>
                                            </div>
                                        )}
                                    </div>
                                </div>

                                {/* Informasi Sidang */}
                                <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
                                    <h3 className="text-lg font-semibold text-blue-800 dark:text-blue-300 mb-3 flex items-center gap-2">
                                        <CalendarDaysIcon className="w-5 h-5" />
                                        Informasi Sidang
                                    </h3>
                                    <div className="space-y-2">
                                        <div>
                                            <p className="text-sm text-gray-600 dark:text-gray-400">Status</p>
                                            <div className="mt-1">{getStatusBadge(selectedSidang.status)}</div>
                                        </div>
                                        <div>
                                            <p className="text-sm text-gray-600 dark:text-gray-400">Tanggal Pendaftaran</p>
                                            <p className="font-medium text-gray-900 dark:text-white">
                                                {formatDate(selectedSidang.tanggal_daftar, true)}
                                            </p>
                                        </div>
                                        {selectedSidang.tanggal_sidang && (
                                            <div>
                                                <p className="text-sm text-gray-600 dark:text-gray-400">Jadwal Sidang</p>
                                                <p className="font-medium text-gray-900 dark:text-white">
                                                    {formatDate(selectedSidang.tanggal_sidang, true)}
                                                </p>
                                            </div>
                                        )}
                                        {selectedSidang.ruangan && (
                                            <div>
                                                <p className="text-sm text-gray-600 dark:text-gray-400">Lokasi</p>
                                                <p className="font-medium text-gray-900 dark:text-white flex items-center gap-1">
                                                    <MapPinIcon className="w-4 h-4" />
                                                    {selectedSidang.ruangan}
                                                </p>
                                            </div>
                                        )}
                                    </div>
                                </div>

                                {/* Penguji */}
                                <div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
                                    <h3 className="text-lg font-semibold text-green-800 dark:text-green-300 mb-3 flex items-center gap-2">
                                        <AcademicCapIcon className="w-5 h-5" />
                                        Tim Penguji
                                    </h3>
                                    <div className="space-y-3">
                                        <div>
                                            <p className="text-sm text-gray-600 dark:text-gray-400">Penguji 1</p>
                                            <p className="font-medium text-gray-900 dark:text-white">
                                                {selectedSidang.penguji_satu?.name || getPengujiName(selectedSidang.penguji_1) || '-'}
                                            </p>
                                            {selectedSidang.penguji_satu?.email && (
                                                <p className="text-xs text-gray-500 dark:text-gray-400">
                                                    {selectedSidang.penguji_satu.email}
                                                </p>
                                            )}
                                        </div>
                                        <div>
                                            <p className="text-sm text-gray-600 dark:text-gray-400">Penguji 2</p>
                                            <p className="font-medium text-gray-900 dark:text-white">
                                                {selectedSidang.penguji_dua?.name || getPengujiName(selectedSidang.penguji_2) || '-'}
                                            </p>
                                            {selectedSidang.penguji_dua?.email && (
                                                <p className="text-xs text-gray-500 dark:text-gray-400">
                                                    {selectedSidang.penguji_dua.email}
                                                </p>
                                            )}
                                        </div>
                                    </div>
                                </div>

                                {/* Catatan Admin */}
                                {selectedSidang.catatan_admin && (
                                    <div className="bg-yellow-50 dark:bg-yellow-900/20 rounded-lg p-4">
                                        <h3 className="text-lg font-semibold text-yellow-800 dark:text-yellow-300 mb-3 flex items-center gap-2">
                                            <ExclamationCircleIcon className="w-5 h-5" />
                                            Catatan Admin
                                        </h3>
                                        <p className="text-gray-700 dark:text-gray-300">
                                            {selectedSidang.catatan_admin}
                                        </p>
                                    </div>
                                )}
                            </div>

                            {/* File Sidang */}
                            <div className="mt-6">
                                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                                    File Sidang
                                </h3>
                                {selectedSidang.files?.length > 0 ? (
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        {selectedSidang.files.map((file) => {
                                            const badgeInfo = getFileBadge(file.jenis);
                                            return (
                                                <div key={file.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-purple-950 transition-colors">
                                                    <div className="flex items-start justify-between">
                                                        <div className="flex items-center gap-3">
                                                            <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
                                                                <DocumentTextIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
                                                            </div>
                                                            <div>
                                                                <h4 className="font-medium text-gray-900 dark:text-white">
                                                                    {badgeInfo.label}
                                                                </h4>
                                                                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                                    Diupload: {formatDate(file.uploaded_at, true)}
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <button
                                                            onClick={() => downloadFile(file)}
                                                            className="px-3 py-1.5 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg text-sm hover:from-purple-700 hover:to-pink-700 transition-all duration-200 flex items-center gap-1 font-medium shadow-lg shadow-purple-500/25"
                                                        >
                                                            <ArrowDownTrayIcon className="w-4 h-4" />
                                                            Download
                                                        </button>
                                                    </div>
                                                </div>
                                            );
                                        })}
                                    </div>
                                ) : (
                                    <div className="text-center py-8 bg-gray-50 dark:bg-gray-900/30 rounded-lg">
                                        <DocumentTextIcon className="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
                                        <p className="text-gray-500 dark:text-gray-400">
                                            Belum ada file yang diupload
                                        </p>
                                    </div>
                                )}
                            </div>

                            <div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
                                <button
                                    onClick={() => setShowDetailModal(false)}
                                    className="px-4 py-2 bg-gradient-to-r from-gray-500 to-gray-600 text-white rounded-lg hover:from-gray-600 hover:to-gray-700 transition-all duration-200 font-medium"
                                >
                                    Tutup
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </AuthenticatedLayout>
    );
}