import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, usePage, router } from '@inertiajs/react';
import { Toaster, toast } from 'react-hot-toast';
import {
    PlusCircleIcon,
    InformationCircleIcon,
    CheckCircleIcon,
    ClockIcon,
    EyeIcon,
    BuildingLibraryIcon,
    UserCircleIcon,
    FunnelIcon,
    MagnifyingGlassIcon,
    DocumentTextIcon,
    XMarkIcon,
    ExclamationTriangleIcon,
    CheckBadgeIcon,
    XCircleIcon,
    PencilSquareIcon,
    ArrowRightIcon,
    MapPinIcon
} from '@heroicons/react/24/solid';
import { useState, useMemo } from 'react';

export default function Index() {
    const {
        mahasiswas,
        kampusList,
        daftarPeriode = [],
        statusMahasiswaList = [],
        filters,
        isGlobal,
        auth,
        rencanaRoutes,
    } = usePage().props;

    const r = {
        index: rencanaRoutes?.index ?? 'keuangan.rencana.index',
        create: rencanaRoutes?.create ?? 'keuangan.rencana.create',
        show: rencanaRoutes?.show ?? 'keuangan.rencana.show',
    };

    const [status, setStatus] = useState(filters.status || '');
    const [kampusId, setKampusId] = useState(filters.kampus_id || '');
    const [periodeId, setPeriodeId] = useState(filters.periode_id || '');
    const [statusMahasiswa, setStatusMahasiswa] = useState(filters.status_mahasiswa || 'Baru');
    const [searchInput, setSearchInput] = useState(filters.search || '');
    const [showValidationModal, setShowValidationModal] = useState(false);
    const [selectedValidation, setSelectedValidation] = useState(null);
    const [loadingMahasiswaId, setLoadingMahasiswaId] = useState(null);
    const [showMissingFieldsModal, setShowMissingFieldsModal] = useState(false);
    const [selectedMissingFields, setSelectedMissingFields] = useState(null);

    const statusMahasiswaOptions = useMemo(() => {
        const merged = ['Baru', ...statusMahasiswaList];
        return [...new Set(merged.filter(Boolean))];
    }, [statusMahasiswaList]);

    // Urutkan mahasiswa: yang belum memenuhi syarat (neofeeder tidak valid) di atas
    const sortedMahasiswas = useMemo(() => {
        if (!mahasiswas?.data) return [];
        
        return [...mahasiswas.data].sort((a, b) => {
            // Prioritas 1: Neofeeder tidak valid (belum memenuhi syarat) di atas
            const aValid = a.neofeeder_validation?.stats?.is_valid || false;
            const bValid = b.neofeeder_validation?.stats?.is_valid || false;
            
            if (!aValid && bValid) return -1; // a (tidak valid) di atas b (valid)
            if (aValid && !bValid) return 1;  // b (tidak valid) di atas a (valid)
            
            // Jika sama-sama valid atau sama-sama tidak valid, urutkan berdasarkan status rancangan
            const statusOrder = {
                'belum_ada': 1,
                'belum_valid': 2,
                'valid': 3
            };
            
            const aStatus = statusOrder[a.status_rancangan || 'belum_ada'] || 1;
            const bStatus = statusOrder[b.status_rancangan || 'belum_ada'] || 1;
            
            if (aStatus !== bStatus) return aStatus - bStatus;
            
            // Jika masih sama, urutkan berdasarkan NIM
            return (a.nim || '').localeCompare(b.nim || '');
        });
    }, [mahasiswas?.data]);

    // Toast untuk loading
    const showLoading = (message = 'Memuat data...') => {
        return toast.loading(message);
    };

    // Toast untuk success
    const showSuccess = (message = 'Berhasil!') => {
        toast.success(message);
    };

    // Toast untuk error
    const showError = (message = 'Terjadi kesalahan') => {
        toast.error(message);
    };

    // Toast untuk info
    const showInfo = (message = 'Informasi') => {
        toast(message, {
            icon: 'ℹ️',
        });
    };

    const applyFilter = (newFilters = {}) => {
        const payload = {
            status,
            kampus_id: kampusId,
            periode_id: periodeId,
            status_mahasiswa: statusMahasiswa,
            search: searchInput.trim(),
            ...newFilters,
        };

        const normalizedPayload = {
            status: payload.status || undefined,
            kampus_id: payload.kampus_id || undefined,
            periode_id: payload.periode_id || undefined,
            status_mahasiswa: payload.status_mahasiswa || undefined,
            search: payload.search || undefined,
        };

        // Tampilkan loading toast
        const loadingToast = showLoading('Menerapkan filter...');
        
        router.get(
            route(r.index),
            normalizedPayload,
            {
                preserveState: true,
                replace: true,
                onFinish: () => {
                    toast.dismiss(loadingToast);
                    showSuccess('Filter diterapkan');
                },
                onError: () => {
                    toast.dismiss(loadingToast);
                    showError('Gagal menerapkan filter');
                }
            }
        );
    };

    const handleStatusChange = (e) => {
        const value = e.target.value;
        setStatus(value);
        
        // Tampilkan toast info saat memilih filter
        if (value) {
            const statusText = {
                'belum_ada': 'Belum Ada Rancangan',
                'belum_valid': 'Belum Valid',
                'valid': 'Sudah Valid'
            }[value] || 'Semua Status';
            
            showInfo(`Filter status: ${statusText}`);
        }
        
        applyFilter({ status: value });
    };

    const handleKampusChange = (e) => {
        const value = e.target.value;
        setKampusId(value);
        
        // Tampilkan toast info saat memilih kampus
        if (value) {
            const selectedKampus = kampusList.find(k => k.id == value);
            if (selectedKampus) {
                showInfo(`Filter kampus: ${selectedKampus.nama_kampus}`);
            }
        }
        
        applyFilter({ kampus_id: value });
    };

    const handlePeriodeMasukChange = (e) => {
        const value = e.target.value;
        setPeriodeId(value);
        applyFilter({ periode_id: value });
    };

    const handleStatusMahasiswaChange = (e) => {
        const value = e.target.value;
        setStatusMahasiswa(value);
        applyFilter({ status_mahasiswa: value });
    };

    const handleSearchSubmit = (e) => {
        e.preventDefault();
        applyFilter({ search: searchInput.trim() });
    };

    const clearFilters = () => {
        setStatus('');
        setKampusId('');
        setPeriodeId('');
        setStatusMahasiswa('Baru');
        setSearchInput('');
        
        // Tampilkan loading toast
        const loadingToast = showLoading('Meriset filter...');
        
        router.get(route(r.index), { status_mahasiswa: 'Baru' }, {
            preserveState: true,
            replace: true,
            onFinish: () => {
                toast.dismiss(loadingToast);
                showSuccess('Filter direset');
            },
            onError: () => {
                toast.dismiss(loadingToast);
                showError('Gagal meriset filter');
            }
        });
    };

    const hasActiveFilters =
        status ||
        kampusId ||
        periodeId ||
        (statusMahasiswa && statusMahasiswa !== 'Baru') ||
        searchInput.trim();

    const statusBadge = (status) => {
        if (status === 'valid') {
            return (
                <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium 
                    bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300`}>
                    <CheckCircleIcon className="w-3 h-3" />
                    Sudah Valid
                </span>
            );
        }

        if (status === 'belum_valid') {
            return (
                <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium 
                    bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300`}>
                    <ClockIcon className="w-3 h-3" />
                    Belum Valid
                </span>
            );
        }

        return (
            <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium 
                bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300`}>
                <InformationCircleIcon className="w-3 h-3" />
                Belum Ada Rancangan
            </span>
        );
    };

    const statusMahasiswaBadge = (value) => {
        const currentStatus = value || '-';
        const isBaru = currentStatus === 'Baru';

        return (
            <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${
                isBaru
                    ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300'
                    : 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300'
            }`}>
                {currentStatus}
            </span>
        );
    };

    const handleCreateRencana = (mhs) => {
        setLoadingMahasiswaId(mhs.id);
        
        // Cek apakah data Neofeeder sudah lengkap
        const validation = mhs.neofeeder_validation;
        
        if (!validation.stats.is_valid) {
            // Tampilkan modal dengan opsi pergi ke edit
            setSelectedMissingFields({
                mahasiswa: mhs,
                validation: validation
            });
            setShowMissingFieldsModal(true);
            setLoadingMahasiswaId(null);
            return;
        }
        
        // Jika valid, lanjutkan ke create
        const loadingToast = showLoading('Membuka form pembuatan rancangan...');
        router.visit(route(r.create, mhs.id), {
            onFinish: () => {
                toast.dismiss(loadingToast);
            },
            onError: () => {
                toast.dismiss(loadingToast);
                showError('Gagal membuka form');
            }
        });
    };

    const openValidationModal = (mhs) => {
        setSelectedValidation({
            mahasiswa: mhs,
            validation: mhs.neofeeder_validation
        });
        setShowValidationModal(true);
    };

    const closeValidationModal = () => {
        setShowValidationModal(false);
        setSelectedValidation(null);
    };

    const closeMissingFieldsModal = () => {
        setShowMissingFieldsModal(false);
        setSelectedMissingFields(null);
        setLoadingMahasiswaId(null);
    };

    // Fungsi untuk navigasi ke halaman edit mahasiswa dengan field tertentu
    const navigateToEditWithField = (mahasiswa, fieldName, section, fieldLabel) => {
        // Tutup modal dulu
        closeMissingFieldsModal();
        
        // Buat URL dengan parameter hash untuk navigasi langsung ke field
        let editUrl = route('mahasiswa.edit', mahasiswa.id);
        
        // Tambahkan parameter untuk field dan section
        const params = new URLSearchParams();
        params.append('focus', fieldName);
        params.append('section', section);
        params.append('field_label', fieldLabel);
        
        // Tampilkan toast informasi
        showInfo(`Mengarahkan ke field: ${fieldLabel}`);
        
        // Buka halaman edit
        router.visit(`${editUrl}?${params.toString()}`);
    };

    // Fungsi untuk membuka halaman edit dengan fokus pada field pertama yang kosong
    const navigateToEditMahasiswa = (mahasiswa) => {
        closeMissingFieldsModal();
        
        // Ambil field pertama yang belum terisi
        const firstMissingField = mahasiswa.neofeeder_validation?.missing_required_fields?.[0];
        
        if (firstMissingField) {
            navigateToEditWithField(
                mahasiswa,
                firstMissingField.field_name,
                firstMissingField.section,
                firstMissingField.field_label
            );
        } else {
            // Jika tidak ada field yang missing, buka halaman edit biasa
            showInfo('Membuka halaman edit mahasiswa...');
            router.visit(route('akademik.mahasiswa.edit', mahasiswa.id));
        }
    };

    const renderValidationIcon = (isValid) => {
        if (isValid) {
            return <CheckBadgeIcon className="w-4 h-4 text-green-500" />;
        } else {
            return <XCircleIcon className="w-4 h-4 text-red-500" />;
        }
    };

    return (
        <AuthenticatedLayout
            user={auth.user}
            header={
                <div className="flex items-center gap-3">
                    <div className="p-2 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 shadow-lg shadow-purple-500/25">
                        <DocumentTextIcon className="w-6 h-6 text-white" />
                    </div>
                    <div>
                        <h2 className="font-semibold text-xl text-gray-800 dark:text-white">
                            Rencana Angsuran Mahasiswa
                        </h2>
                        <p className="text-sm text-gray-600 dark:text-purple-300/80">
                            Manajemen rencana pembayaran angsuran mahasiswa
                        </p>
                    </div>
                </div>
            }
        >
            <Head title="Rencana Angsuran" />

            {/* Toaster Component untuk menampilkan toast */}
            <Toaster 
                position="top-right"
                gutter={8}
                toastOptions={{
                    duration: 3000,
                    style: {
                        background: '#363636',
                        color: '#fff',
                        borderRadius: '8px',
                        fontSize: '14px',
                    },
                    success: {
                        duration: 3000,
                        iconTheme: {
                            primary: '#10B981',
                            secondary: '#fff',
                        },
                    },
                    error: {
                        duration: 4000,
                        iconTheme: {
                            primary: '#EF4444',
                            secondary: '#fff',
                        },
                    },
                    loading: {
                        duration: Infinity,
                    },
                }}
            />

            {/* Modal untuk Data Belum Lengkap - dengan opsi navigasi langsung */}
            {showMissingFieldsModal && selectedMissingFields && (
                <div className="fixed inset-0 overflow-y-auto z-50">
                    <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                        {/* Background overlay */}
                        <div 
                            className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-900 dark:bg-opacity-80" 
                            onClick={closeMissingFieldsModal}
                        ></div>

                        {/* Modal panel */}
                        <div className="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full border dark:border-purple-500/30">
                            <div className="p-6">
                                <div className="flex items-center justify-between mb-6">
                                    <div className="flex items-center gap-3">
                                        <div className="p-2 rounded-lg bg-gradient-to-br from-red-500 to-orange-500 shadow-lg shadow-red-500/25">
                                            <ExclamationTriangleIcon className="w-6 h-6 text-white" />
                                        </div>
                                        <div>
                                            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                                                Data Wajib Belum Lengkap
                                            </h3>
                                            <p className="text-sm text-gray-600 dark:text-purple-300">
                                                {selectedMissingFields.mahasiswa.nim} - {selectedMissingFields.mahasiswa.nama}
                                            </p>
                                        </div>
                                    </div>
                                    <button
                                        onClick={closeMissingFieldsModal}
                                        className="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-300"
                                    >
                                        <XMarkIcon className="w-6 h-6" />
                                    </button>
                                </div>

                                <div className="mb-6">
                                    <div className="bg-gradient-to-r from-red-50 to-orange-50 dark:from-red-900/10 dark:to-orange-900/10 rounded-lg p-4 border border-red-200 dark:border-red-500/20">
                                        <div className="flex items-center justify-between">
                                            <div className="flex items-center gap-2">
                                                <ExclamationTriangleIcon className="w-5 h-5 text-red-600 dark:text-red-400" />
                                                <h4 className="font-medium text-red-900 dark:text-red-100">
                                                    Rencana Angsuran Tidak Dapat Dibuat
                                                </h4>
                                            </div>
                                            <div className="text-sm font-medium px-3 py-1 rounded-full bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">
                                                {selectedMissingFields.validation.missing_fields_count} data wajib belum terisi
                                            </div>
                                        </div>
                                        <p className="text-sm text-red-700 dark:text-red-300 mt-2">
                                            Silakan lengkapi data berikut terlebih dahulu untuk membuat rencana angsuran:
                                        </p>
                                    </div>
                                </div>

                                {/* Daftar Field yang Belum Terisi */}
                                <div className="mb-6">
                                    <h4 className="font-medium text-gray-900 dark:text-white mb-3">
                                        Data yang Perlu Dilengkapi:
                                    </h4>
                                    <div className="space-y-3 max-h-60 overflow-y-auto pr-2">
                                        {selectedMissingFields.validation.missing_required_fields.map((field, index) => (
                                            <div 
                                                key={index} 
                                                className="flex items-center justify-between p-3 bg-gray-50 dark:bg-purple-900/20 rounded-lg border border-gray-200 dark:border-purple-500/30 hover:bg-gray-100 dark:hover:bg-purple-900/30 transition-colors cursor-pointer group"
                                                onClick={() => navigateToEditWithField(
                                                    selectedMissingFields.mahasiswa,
                                                    field.field_name,
                                                    field.section,
                                                    field.field_label
                                                )}
                                            >
                                                <div className="flex items-center gap-3">
                                                    <div className="flex items-center justify-center w-8 h-8 rounded-full bg-gradient-to-br from-red-100 to-orange-100 dark:from-red-900/20 dark:to-orange-900/20 group-hover:from-red-200 group-hover:to-orange-200 dark:group-hover:from-red-800/30 dark:group-hover:to-orange-800/30 transition-all">
                                                        <span className="text-sm font-bold text-red-600 dark:text-red-400">
                                                            {index + 1}
                                                        </span>
                                                    </div>
                                                    <div>
                                                        <div className="font-medium text-gray-900 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">
                                                            {field.field_label}
                                                        </div>
                                                        <div className="text-xs text-gray-500 dark:text-purple-300 flex items-center gap-1">
                                                            <MapPinIcon className="w-3 h-3" />
                                                            Bagian: <span className="font-medium capitalize">{field.section.replace('-', ' ')}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="flex items-center gap-2">
                                                    <span className="text-xs text-gray-500 dark:text-purple-300">
                                                        Klik untuk isi
                                                    </span>
                                                    <ArrowRightIcon className="w-4 h-4 text-purple-500 opacity-0 group-hover:opacity-100 transition-opacity" />
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>

                                <div className="flex flex-col sm:flex-row gap-3 justify-end">
                                    <button
                                        type="button"
                                        onClick={closeMissingFieldsModal}
                                        className="px-4 py-2 bg-gradient-to-r from-gray-500 to-gray-600 hover:from-gray-600 hover:to-gray-700 text-white rounded-md font-medium shadow-md hover:shadow-lg transition-all duration-200"
                                    >
                                        Tutup
                                    </button>
                                    <button
                                        type="button"
                                        onClick={() => navigateToEditMahasiswa(selectedMissingFields.mahasiswa)}
                                        className="px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white rounded-md font-medium shadow-md hover:shadow-lg transition-all duration-200 flex items-center justify-center gap-2"
                                    >
                                        <PencilSquareIcon className="w-4 h-4" />
                                        Edit Semua Data
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* Modal Validasi Neofeeder (detail lengkap) */}
            {showValidationModal && selectedValidation && (
                <div className="fixed inset-0 overflow-y-auto z-50">
                    <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                        {/* Background overlay */}
                        <div 
                            className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-900 dark:bg-opacity-80" 
                            onClick={closeValidationModal}
                        ></div>

                        {/* Modal panel */}
                        <div className="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full border dark:border-purple-500/30">
                            <div className="p-6">
                                <div className="flex items-center justify-between mb-6">
                                    <div className="flex items-center gap-3">
                                        <div className="p-2 rounded-lg bg-gradient-to-br from-blue-500 to-purple-500 shadow-lg shadow-blue-500/25">
                                            <InformationCircleIcon className="w-6 h-6 text-white" />
                                        </div>
                                        <div>
                                            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                                                Detail Validasi Neofeeder
                                            </h3>
                                            <p className="text-sm text-gray-600 dark:text-purple-300">
                                                {selectedValidation.mahasiswa.nim} - {selectedValidation.mahasiswa.nama}
                                            </p>
                                        </div>
                                    </div>
                                    <button
                                        onClick={closeValidationModal}
                                        className="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-300"
                                    >
                                        <XMarkIcon className="w-6 h-6" />
                                    </button>
                                </div>

                                <div className="mb-6">
                                    <div className={`rounded-lg p-4 border ${
                                        selectedValidation.validation.stats.is_valid
                                            ? 'bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/10 dark:to-emerald-900/10 border-green-200 dark:border-green-500/20'
                                            : 'bg-gradient-to-r from-red-50 to-orange-50 dark:from-red-900/10 dark:to-orange-900/10 border-red-200 dark:border-red-500/20'
                                    }`}>
                                        <div className="flex items-center justify-between">
                                            <div className="flex items-center gap-2">
                                                {selectedValidation.validation.stats.is_valid ? (
                                                    <CheckCircleIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
                                                ) : (
                                                    <ExclamationTriangleIcon className="w-5 h-5 text-red-600 dark:text-red-400" />
                                                )}
                                                <h4 className={`font-medium ${
                                                    selectedValidation.validation.stats.is_valid
                                                        ? 'text-green-900 dark:text-green-100'
                                                        : 'text-red-900 dark:text-red-100'
                                                }`}>
                                                    {selectedValidation.validation.stats.is_valid 
                                                        ? 'Data sudah sesuai format Neofeeder' 
                                                        : 'Data belum sesuai format Neofeeder'}
                                                </h4>
                                            </div>
                                            <div className={`text-sm font-medium px-3 py-1 rounded-full ${
                                                selectedValidation.validation.stats.is_valid
                                                    ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
                                                    : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
                                            }`}>
                                                {selectedValidation.validation.stats.passed_required} dari {selectedValidation.validation.stats.required} data wajib terisi
                                            </div>
                                        </div>
                                        <p className={`text-sm mt-2 ${
                                            selectedValidation.validation.stats.is_valid
                                                ? 'text-green-700 dark:text-green-300'
                                                : 'text-red-700 dark:text-red-300'
                                        }`}>
                                            {selectedValidation.validation.stats.is_valid
                                                ? 'Mahasiswa sudah dapat dibuatkan rencana angsuran.'
                                                : 'Rencana angsuran tidak dapat dibuat karena data biodata mahasiswa belum lengkap.'
                                            }
                                        </p>
                                    </div>
                                </div>

                                {/* Progress Bar */}
                                <div className="mb-6">
                                    <div className="flex items-center justify-between mb-2">
                                        <span className="text-sm font-medium text-gray-700 dark:text-purple-300">
                                            Kelengkapan Data
                                        </span>
                                        <span className="text-sm font-bold text-gray-900 dark:text-white">
                                            {selectedValidation.validation.stats.progress}%
                                        </span>
                                    </div>
                                    <div className="w-full bg-gray-200 dark:bg-purple-900/30 rounded-full h-2.5">
                                        <div 
                                            className={`h-2.5 rounded-full ${
                                                selectedValidation.validation.stats.progress >= 80 
                                                    ? 'bg-green-500' 
                                                    : selectedValidation.validation.stats.progress >= 50 
                                                        ? 'bg-yellow-500' 
                                                        : 'bg-red-500'
                                            }`}
                                            style={{ width: `${selectedValidation.validation.stats.progress}%` }}
                                        ></div>
                                    </div>
                                    <div className="flex justify-between mt-1">
                                        <span className="text-xs text-gray-500 dark:text-purple-300">
                                            {selectedValidation.validation.stats.passed} dari {selectedValidation.validation.stats.total} data terisi
                                        </span>
                                        <span className={`text-xs font-medium ${
                                            selectedValidation.validation.stats.is_valid 
                                                ? 'text-green-600 dark:text-green-400' 
                                                : 'text-red-600 dark:text-red-400'
                                        }`}>
                                            {selectedValidation.validation.stats.is_valid ? 'Siap dibuat' : 'Belum siap'}
                                        </span>
                                    </div>
                                </div>

                                {/* Detail Validasi */}
                                <div className="space-y-4 max-h-96 overflow-y-auto pr-2">
                                    {selectedValidation.validation.categories.map((category, catIndex) => (
                                        <div key={catIndex} className="border border-gray-200 dark:border-purple-500/30 rounded-lg">
                                            <div className="bg-gray-50 dark:bg-purple-900/20 px-4 py-3 rounded-t-lg">
                                                <h5 className="font-medium text-gray-900 dark:text-purple-100">{category.category}</h5>
                                            </div>
                                            <div className="p-4">
                                                <div className="space-y-2">
                                                    {category.items.map((item, itemIndex) => (
                                                        <div 
                                                            key={itemIndex} 
                                                            className={`flex items-center justify-between p-2 rounded ${
                                                                item.required && !item.value 
                                                                    ? 'bg-red-50 dark:bg-red-900/10' 
                                                                    : 'bg-gray-50 dark:bg-purple-900/10'
                                                            }`}
                                                        >
                                                            <div className="flex items-center gap-2">
                                                                {renderValidationIcon(item.value)}
                                                                <span className={`text-sm ${
                                                                    item.required && !item.value 
                                                                        ? 'text-red-700 dark:text-red-300 font-medium' 
                                                                        : item.value 
                                                                            ? 'text-gray-700 dark:text-purple-200' 
                                                                            : 'text-gray-500 dark:text-purple-300'
                                                                }`}>
                                                                    {item.label}
                                                                </span>
                                                            </div>
                                                            <div className="text-xs text-gray-500 dark:text-purple-300">
                                                                {item.message}
                                                            </div>
                                                        </div>
                                                    ))}
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>

                                <div className="mt-6 flex justify-end">
                                    <button
                                        type="button"
                                        onClick={closeValidationModal}
                                        className="px-4 py-2 bg-gradient-to-r from-gray-500 to-gray-600 hover:from-gray-600 hover:to-gray-700 text-white rounded-md font-medium shadow-md hover:shadow-lg transition-all duration-200"
                                    >
                                        Tutup
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            <div className="py-6">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg border border-gray-200 dark:border-purple-500/20">
                        <div className="p-6">
                            {/* 🔍 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 justify-between mb-3">
                                    <div className="flex items-center gap-2">
                                        <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</h3>
                                        {hasActiveFilters && (
                                            <span className="text-xs bg-gradient-to-r from-purple-600 to-pink-600 text-white px-2 py-1 rounded-full shadow">
                                                Filter Aktif
                                            </span>
                                        )}
                                    </div>
                                    {hasActiveFilters && (
                                        <button
                                            onClick={clearFilters}
                                            className="text-sm text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 font-medium flex items-center gap-1 hover:scale-105 transition-transform"
                                        >
                                            <span>Reset Filter</span>
                                        </button>
                                    )}
                                </div>

                                <form onSubmit={handleSearchSubmit} className="mb-4">
                                    <label className="block text-sm font-medium text-purple-700 dark:text-purple-300 mb-1">
                                        Cari Mahasiswa (Nama / NIM)
                                    </label>
                                    <div className="flex gap-2">
                                        <div className="relative flex-1">
                                            <input
                                                type="text"
                                                value={searchInput}
                                                onChange={(e) => setSearchInput(e.target.value)}
                                                placeholder="Contoh: Andi / 230101"
                                                className="w-full pl-10 pr-4 py-2 border border-purple-300 dark:border-purple-500/50 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"
                                            />
                                            <MagnifyingGlassIcon className="w-4 h-4 text-purple-500 absolute left-3 top-1/2 transform -translate-y-1/2" />
                                        </div>
                                        <button
                                            type="submit"
                                            className="px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg font-medium hover:from-purple-700 hover:to-pink-700 transition-all duration-200"
                                        >
                                            Cari
                                        </button>
                                    </div>
                                </form>

                                <div className={`grid grid-cols-1 ${isGlobal ? 'sm:grid-cols-2 lg:grid-cols-3' : 'sm:grid-cols-2'} gap-4`}>
                                    <div>
                                        <label className="block text-sm font-medium text-purple-700 dark:text-purple-300 mb-1">
                                            Status Rencana
                                        </label>
                                        <div className="relative">
                                            <select
                                                value={status}
                                                onChange={handleStatusChange}
                                                className="w-full pl-10 pr-4 py-2 border border-purple-300 dark:border-purple-500/50 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 hover:shadow-md [&>option]:bg-white [&>option]:text-gray-900 dark:[&>option]:bg-purple-950 dark:[&>option]:text-purple-100"
                                            >
                                                <option value="">Semua Status</option>
                                                <option value="belum_ada">Belum Ada Rancangan</option>
                                                <option value="belum_valid">Belum Valid</option>
                                                <option value="valid">Sudah Valid</option>
                                            </select>
                                            <InformationCircleIcon className="w-4 h-4 text-purple-500 absolute left-3 top-1/2 transform -translate-y-1/2" />
                                        </div>
                                    </div>

                                    <div>
                                        <label className="block text-sm font-medium text-purple-700 dark:text-purple-300 mb-1">
                                            Periode Masuk
                                        </label>
                                        <div className="relative">
                                            <select
                                                value={periodeId}
                                                onChange={handlePeriodeMasukChange}
                                                className="w-full pl-10 pr-4 py-2 border border-purple-300 dark:border-purple-500/50 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 hover:shadow-md [&>option]:bg-white [&>option]:text-gray-900 dark:[&>option]:bg-purple-950 dark:[&>option]:text-purple-100"
                                            >
                                                <option value="">Semua Periode</option>
                                                {daftarPeriode.map((periode) => (
                                                    <option key={periode.id} value={periode.id}>
                                                        {periode.nama}
                                                    </option>
                                                ))}
                                            </select>
                                            <DocumentTextIcon className="w-4 h-4 text-purple-500 absolute left-3 top-1/2 transform -translate-y-1/2" />
                                        </div>
                                    </div>

                                    <div>
                                        <label className="block text-sm font-medium text-purple-700 dark:text-purple-300 mb-1">
                                            Status Mahasiswa
                                        </label>
                                        <div className="relative">
                                            <select
                                                value={statusMahasiswa}
                                                onChange={handleStatusMahasiswaChange}
                                                className="w-full pl-10 pr-4 py-2 border border-purple-300 dark:border-purple-500/50 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 hover:shadow-md [&>option]:bg-white [&>option]:text-gray-900 dark:[&>option]:bg-purple-950 dark:[&>option]:text-purple-100"
                                            >
                                                <option value="all">Semua Status Mahasiswa</option>
                                                {statusMahasiswaOptions.map((statusItem) => (
                                                    <option key={statusItem} value={statusItem}>
                                                        {statusItem}
                                                    </option>
                                                ))}
                                            </select>
                                            <UserCircleIcon className="w-4 h-4 text-purple-500 absolute left-3 top-1/2 transform -translate-y-1/2" />
                                        </div>
                                    </div>

                                    {isGlobal && (
                                        <div>
                                            <label className="block text-sm font-medium text-purple-700 dark:text-purple-300 mb-1">
                                                Filter Kampus
                                            </label>
                                            <div className="relative">
                                                <select
                                                    value={kampusId}
                                                    onChange={handleKampusChange}
                                                    className="w-full pl-10 pr-4 py-2 border border-purple-300 dark:border-purple-500/50 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 hover:shadow-md [&>option]:bg-white [&>option]:text-gray-900 dark:[&>option]:bg-purple-950 dark:[&>option]:text-purple-100"
                                                >
                                                    <option value="">Semua Kampus</option>
                                                    {kampusList.map((k) => (
                                                        <option key={k.id} value={k.id}>
                                                            {k.nama_kampus}
                                                        </option>
                                                    ))}
                                                </select>
                                                <BuildingLibraryIcon className="w-4 h-4 text-purple-500 absolute left-3 top-1/2 transform -translate-y-1/2" />
                                            </div>
                                        </div>
                                    )}
                                </div>
                            </div>

                            {/* Header dan Info */}
                            <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center mb-6 gap-4">
                                <div>
                                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                                        Daftar Rencana Angsuran Mahasiswa
                                    </h3>
                                    <p className="text-sm text-gray-600 dark:text-purple-300/80">
                                        Total: {mahasiswas.total} mahasiswa
                                        {sortedMahasiswas.length > 0 && (
                                            <span className="ml-2 text-xs px-2 py-0.5 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded-full">
                                                Prioritas data yang belum memenuhi syarat
                                            </span>
                                        )}
                                    </p>
                                </div>
                            </div>

                            {/* 📋 Data Table */}
                            {sortedMahasiswas.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">NIM</th>
                                                <th className="p-4 text-left font-semibold text-purple-900 dark:text-purple-100">Nama</th>
                                                <th className="p-4 text-left font-semibold text-purple-900 dark:text-purple-100">Kampus</th>
                                                <th className="p-4 text-center font-semibold text-purple-900 dark:text-purple-100">Status Mhs</th>
                                                <th className="p-4 text-center font-semibold text-purple-900 dark:text-purple-100">Status</th>
                                                <th className="p-4 text-center font-semibold text-purple-900 dark:text-purple-100">Validasi Neofeeder</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">
                                            {sortedMahasiswas.map((mhs) => (
                                                <tr key={mhs.id} className="hover:bg-purple-50 dark:hover:bg-purple-900/10 transition-colors">
                                                    <td className="p-4">
                                                        <div className="font-mono text-purple-900 dark:text-purple-100">{mhs.nim}</div>
                                                    </td>
                                                    <td className="p-4">
                                                        <div className="flex items-center gap-3">
                                                            <div>
                                                                <div className="font-medium text-gray-900 dark:text-white">{mhs.nama}</div>
                                                                <div className="text-xs text-gray-600 dark:text-purple-200">
                                                                    {mhs.prodi?.nama || '-'}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td className="p-4">
                                                        <div className="flex items-center gap-2 text-gray-600 dark:text-purple-200">
                                                            {mhs.kampus ? (
                                                                <>
                                                                    <BuildingLibraryIcon className="w-4 h-4 text-purple-500" />
                                                                    {mhs.kampus.nama_kampus}
                                                                </>
                                                            ) : (
                                                                <span className="text-gray-400 italic">-</span>
                                                            )}
                                                        </div>
                                                    </td>
                                                    <td className="p-4 text-center">
                                                        {statusMahasiswaBadge(mhs.status)}
                                                    </td>
                                                    <td className="p-4 text-center">
                                                        {statusBadge(mhs.status_rancangan)}
                                                    </td>
                                                    <td className="p-4 text-center">
                                                        {mhs.neofeeder_validation ? (
                                                            <div className="flex flex-col items-center gap-1">
                                                                <div className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${
                                                                    mhs.neofeeder_validation.stats.is_valid
                                                                        ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
                                                                        : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
                                                                }`}>
                                                                    {mhs.neofeeder_validation.stats.is_valid ? (
                                                                        <CheckCircleIcon className="w-3 h-3" />
                                                                    ) : (
                                                                        <ExclamationTriangleIcon className="w-3 h-3" />
                                                                    )}
                                                                    {mhs.neofeeder_validation.stats.is_valid ? 'Valid' : 'Belum Valid'}
                                                                </div>
                                                                <button
                                                                    onClick={() => openValidationModal(mhs)}
                                                                    className="text-xs text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 hover:underline"
                                                                >
                                                                    Lihat syarat
                                                                </button>
                                                            </div>
                                                        ) : (
                                                            <span className="text-gray-400 text-xs">-</span>
                                                        )}
                                                    </td>
                                                    <td className="p-4 text-center">
                                                        {mhs.status_rancangan === 'belum_ada' ? (
                                                            <div className="flex flex-col items-center gap-2">
                                                                <button
                                                                    onClick={() => handleCreateRencana(mhs)}
                                                                    disabled={loadingMahasiswaId === mhs.id}
                                                                    className={`inline-flex items-center gap-1 px-3 py-1 bg-gradient-to-r rounded text-sm transition-all duration-200 font-medium shadow-lg ${
                                                                        mhs.neofeeder_validation?.stats.is_valid
                                                                            ? 'from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 shadow-green-500/25 hover:shadow-xl text-white'
                                                                            : 'from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 shadow-orange-500/25 hover:shadow-xl text-white'
                                                                    }`}
                                                                >
                                                                    {loadingMahasiswaId === mhs.id ? (
                                                                        <span className="flex items-center gap-1">
                                                                            <span className="animate-spin rounded-full h-3 w-3 border-b-2 border-white"></span>
                                                                            Loading...
                                                                        </span>
                                                                    ) : (
                                                                        <>
                                                                            <PlusCircleIcon className="w-4 h-4" />
                                                                            {mhs.neofeeder_validation?.stats.is_valid 
                                                                                ? 'Buat Rancangan' 
                                                                                : 'Belum Memenuhi Syarat'}
                                                                        </>
                                                                    )}
                                                                </button>
                                                            </div>
                                                        ) : (
                                                            <Link
                                                                href={route(r.show, mhs.id)}
                                                                onClick={() => showInfo('Membuka detail rancangan...')}
                                                                className="inline-flex items-center gap-1 px-3 py-1 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded text-sm hover:from-purple-700 hover:to-pink-700 transition-all duration-200 font-medium shadow-lg shadow-purple-500/25 hover:shadow-xl"
                                                            >
                                                                <EyeIcon className="w-4 h-4" />
                                                                Detail
                                                            </Link>
                                                        )}
                                                    </td>
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                </div>
                            ) : (
                                <div className="text-center py-12">
                                    <div className="flex flex-col items-center justify-center text-gray-500 dark:text-purple-400/70">
                                        <div className="p-4 rounded-full bg-gradient-to-r from-purple-100 to-pink-100 dark:from-purple-900/20 dark:to-pink-900/20 mb-4">
                                            <InformationCircleIcon className="w-16 h-16 text-gray-300 dark:text-purple-500/30" />
                                        </div>
                                        <p className="text-lg mb-2">Tidak ada data mahasiswa</p>
                                        <p className="text-sm">
                                            {hasActiveFilters
                                                ? "Tidak ada mahasiswa yang sesuai dengan filter Anda."
                                                : "Belum ada data mahasiswa yang perlu dikelola."
                                            }
                                        </p>
                                        {hasActiveFilters && (
                                            <button
                                                onClick={clearFilters}
                                                className="mt-3 text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 font-medium hover:scale-105 transition-transform"
                                            >
                                                Reset filter
                                            </button>
                                        )}
                                    </div>
                                </div>
                            )}

                            {/* Pagination */}
                            {mahasiswas.data.length > 0 && (
                                <div className="mt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
                                    <div className="text-sm text-gray-700 dark:text-purple-200">
                                        Menampilkan {mahasiswas.from} - {mahasiswas.to} dari {mahasiswas.total} data
                                    </div>
                                    <div className="flex flex-wrap gap-1">
                                        {mahasiswas.links.map((link, index) => (
                                            <button
                                                key={index}
                                                onClick={() => {
                                                    if (link.url) {
                                                        const loadingToast = showLoading('Memuat halaman...');
                                                        router.visit(link.url, {
                                                            onFinish: () => {
                                                                toast.dismiss(loadingToast);
                                                                showSuccess('Halaman dimuat');
                                                            },
                                                            onError: () => {
                                                                toast.dismiss(loadingToast);
                                                                showError('Gagal memuat halaman');
                                                            }
                                                        });
                                                    }
                                                }}
                                                disabled={!link.url || link.active}
                                                className={`px-3 py-1 rounded text-sm font-medium transition-all duration-200 ${
                                                    link.active
                                                        ? "bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg shadow-purple-500/25 cursor-default"
                                                        : "bg-gray-200 dark:bg-purple-500/20 text-gray-700 dark:text-purple-200 hover:bg-gray-300 dark:hover:bg-purple-500/30 hover:shadow-md"
                                                } ${!link.url ? "opacity-50 cursor-not-allowed" : ""}`}
                                                dangerouslySetInnerHTML={{ __html: link.label }}
                                            />
                                        ))}
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}