import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, Link, useForm, usePage } from "@inertiajs/react";
import {
    ArrowLeftIcon,
    UserIcon,
    CalendarIcon,
    DocumentTextIcon,
    CheckIcon,
    XCircleIcon,
    UsersIcon,
    ChevronDownIcon,
    XMarkIcon,
    ExclamationTriangleIcon,
    AcademicCapIcon,
    BuildingOfficeIcon,
    PencilIcon,
    InformationCircleIcon,
    MagnifyingGlassIcon,
} from "@heroicons/react/24/solid";
import { useState, useEffect, useRef } from "react";
import toast, { Toaster } from "react-hot-toast";

export default function Edit() {
    const { dosenWali, mahasiswas, tahunAkademikOptions, auth, flash, errors } = usePage().props;

    const { data, setData, put, processing } = useForm({
        mahasiswa_ids: dosenWali.mahasiswa_ids || [],
        tahun_akademik_id: dosenWali.tahun_akademik_id || "",
        nomor_sk: dosenWali.nomor_sk || "",
        tanggal_sk: dosenWali.tanggal_sk || "",
        is_aktif: dosenWali.is_aktif ?? true,
    });

    const [isMahasiswaDropdownOpen, setIsMahasiswaDropdownOpen] = useState(false);
    const [searchMahasiswa, setSearchMahasiswa] = useState("");
    const [conflictedMahasiswa, setConflictedMahasiswa] = useState([]);
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [selectedDosenProdi, setSelectedDosenProdi] = useState(dosenWali.dosen?.prodi_details || []);
    const [selectedDosenProdiNames, setSelectedDosenProdiNames] = useState(dosenWali.dosen?.prodi_names || "");
    const [filteredMahasiswas, setFilteredMahasiswas] = useState([]);
    const [originalMahasiswaIds, setOriginalMahasiswaIds] = useState(dosenWali.mahasiswa_ids?.map(id => id.toString()) || []);
    const dropdownRef = useRef(null);
    const toastIdRef = useRef(null);
    const hasShownFlashToast = useRef(false);

    // Filter tahun akademik berdasarkan kampus user
    const filteredTahunAkademikOptions = tahunAkademikOptions.filter(tahun => {
        if (auth.user.role?.is_global) return true;
        return tahun.kampus_id === auth.user.kampus_id;
    });

    // Filter mahasiswa berdasarkan prodi dosen
    useEffect(() => {
        const prodiIds = dosenWali.dosen?.prodi_ids || [];
        
        if (prodiIds.length > 0) {
            const filtered = mahasiswas.filter(mahasiswa => 
                prodiIds.includes(mahasiswa.prodi_id)
            );
            setFilteredMahasiswas(filtered);
        } else {
            setFilteredMahasiswas(mahasiswas);
        }
        
        setSelectedDosenProdi(dosenWali.dosen?.prodi_details || []);
        setSelectedDosenProdiNames(dosenWali.dosen?.prodi_names || "");
    }, [dosenWali, mahasiswas]);

    // Filter mahasiswa berdasarkan pencarian
    const searchFilteredMahasiswas = filteredMahasiswas.filter(mahasiswa => {
        if (!searchMahasiswa) return true;
        const search = searchMahasiswa.toLowerCase();
        return (
            mahasiswa.nim.toLowerCase().includes(search) ||
            mahasiswa.nama.toLowerCase().includes(search) ||
            (mahasiswa.prodi?.nama_prodi || '').toLowerCase().includes(search) ||
            (mahasiswa.prodi?.nama || '').toLowerCase().includes(search)
        );
    });

    // Click outside untuk menutup dropdown
    useEffect(() => {
        function handleClickOutside(event) {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
                setIsMahasiswaDropdownOpen(false);
            }
        }
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);

    // Toast untuk flash message
    useEffect(() => {
        if (flash?.success && !hasShownFlashToast.current) {
            toast.success(flash.success, {
                duration: 4000,
                position: "top-right",
                id: 'flash-success-toast'
            });
            hasShownFlashToast.current = true;
            
            setTimeout(() => {
                hasShownFlashToast.current = false;
            }, 100);
        }
        
        if (flash?.error && !hasShownFlashToast.current) {
            toast.error(flash.error, {
                duration: 5000,
                position: "top-right",
                id: 'flash-error-toast'
            });
            hasShownFlashToast.current = true;
            
            setTimeout(() => {
                hasShownFlashToast.current = false;
            }, 100);
        }
        
        if (flash?.warning && !hasShownFlashToast.current) {
            toast.error(flash.warning, {
                duration: 4000,
                position: "top-right",
                id: 'flash-warning-toast'
            });
            hasShownFlashToast.current = true;
            
            setTimeout(() => {
                hasShownFlashToast.current = false;
            }, 100);
        }
    }, [flash]);

    // Cleanup effect
    useEffect(() => {
        return () => {
            hasShownFlashToast.current = false;
            toast.dismiss();
        };
    }, []);

    // Cek konflik mahasiswa
    useEffect(() => {
        if (data.mahasiswa_ids.length > 0 && data.tahun_akademik_id) {
            checkMahasiswaConflicts();
        } else {
            setConflictedMahasiswa([]);
        }
    }, [data.mahasiswa_ids, data.tahun_akademik_id]);

    const checkMahasiswaConflicts = () => {
        const conflicts = [];
        // Konflik akan ditangani oleh backend
        setConflictedMahasiswa(conflicts);
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        
        if (!data.tahun_akademik_id) {
            toast.error("Pilih tahun akademik terlebih dahulu", {
                duration: 3000,
                position: "top-right",
            });
            return;
        }
        
        if (data.mahasiswa_ids.length === 0) {
            toast.error("Pilih minimal 1 mahasiswa", {
                duration: 3000,
                position: "top-right",
            });
            return;
        }

        if (selectedDosenProdi.length === 0) {
            toast.error("Dosen ini tidak memiliki penugasan mengajar di prodi manapun", {
                duration: 4000,
                position: "top-right",
            });
            return;
        }

        if (conflictedMahasiswa.length > 0) {
            const conflictNames = conflictedMahasiswa.map(m => `${m.nim} - ${m.nama}`).join(', ');
            toast.error(`Mahasiswa berikut memiliki konflik: ${conflictNames}`, {
                duration: 5000,
                position: "top-right",
            });
            return;
        }
        
        toastIdRef.current = toast.loading("Menyimpan perubahan...", {
            position: "top-right",
            duration: Infinity,
        });
        
        setIsSubmitting(true);
        
        const formData = {
            ...data,
            mahasiswa_ids: data.mahasiswa_ids.map(id => id.toString())
        };
        
        put(route("dosen-wali.update", dosenWali.id), formData, {
            preserveScroll: true,
            preserveState: false,
            onSuccess: () => {
                if (toastIdRef.current) {
                    toast.dismiss(toastIdRef.current);
                }
                setIsSubmitting(false);
            },
            onError: (errors) => {
                if (toastIdRef.current) {
                    toast.dismiss(toastIdRef.current);
                }
                
                if (errors.mahasiswa_ids) {
                    toast.error(errors.mahasiswa_ids, {
                        duration: 5000,
                        position: "top-right",
                    });
                } else if (errors.tahun_akademik_id) {
                    toast.error(errors.tahun_akademik_id, {
                        duration: 5000,
                        position: "top-right",
                    });
                } else if (errors.message) {
                    toast.error(errors.message, {
                        duration: 5000,
                        position: "top-right",
                    });
                } else {
                    Object.values(errors).forEach(error => {
                        if (typeof error === 'string') {
                            toast.error(error, {
                                duration: 5000,
                                position: "top-right",
                            });
                        }
                    });
                }
                
                setIsSubmitting(false);
            },
        });
    };

    const handleReset = () => {
        setData({
            mahasiswa_ids: dosenWali.mahasiswa_ids || [],
            tahun_akademik_id: dosenWali.tahun_akademik_id || "",
            nomor_sk: dosenWali.nomor_sk || "",
            tanggal_sk: dosenWali.tanggal_sk || "",
            is_aktif: dosenWali.is_aktif ?? true,
        });
        
        setSearchMahasiswa("");
        setConflictedMahasiswa([]);
        setIsMahasiswaDropdownOpen(false);
        
        toast.success("Form telah direset ke nilai awal", {
            duration: 2000,
            position: "top-right",
        });
    };

    const toggleMahasiswaSelection = (mahasiswaId) => {
        const newIds = [...data.mahasiswa_ids];
        const index = newIds.indexOf(mahasiswaId);
        
        if (index === -1) {
            newIds.push(mahasiswaId);
            toast.success(`Mahasiswa ditambahkan`, {
                duration: 1000,
                position: "top-right",
            });
        } else {
            newIds.splice(index, 1);
            toast.info(`Mahasiswa dihapus`, {
                duration: 1000,
                position: "top-right",
            });
        }
        
        setData('mahasiswa_ids', newIds);
    };

    const removeMahasiswa = (mahasiswaId) => {
        const newIds = data.mahasiswa_ids.filter(id => id !== mahasiswaId);
        setData('mahasiswa_ids', newIds);
        
        toast.info(`Mahasiswa dihapus dari daftar`, {
            duration: 1000,
            position: "top-right",
        });
    };

    const selectAllMahasiswa = () => {
        const availableIds = getAvailableMahasiswas().map(m => m.id);
        setData('mahasiswa_ids', availableIds);
        
        toast.success(`Semua mahasiswa tersedia dipilih (${availableIds.length})`, {
            duration: 2000,
            position: "top-right",
        });
    };

    const deselectAllMahasiswa = () => {
        setData('mahasiswa_ids', []);
        
        toast.info("Semua mahasiswa dihapus dari pilihan", {
            duration: 2000,
            position: "top-right",
        });
    };

    const getSelectedMahasiswaDetails = () => {
        return data.mahasiswa_ids.map(id => {
            const mhs = filteredMahasiswas.find(m => m.id === id);
            const isConflicted = conflictedMahasiswa.some(conflict => conflict.id === id);
            const wasOriginallySelected = originalMahasiswaIds.includes(id.toString());
            
            return mhs ? {
                id: mhs.id,
                nim: mhs.nim,
                nama: mhs.nama,
                prodi: mhs.prodi,
                isConflicted,
                wasOriginallySelected,
            } : null;
        }).filter(m => m !== null);
    };

    const getAvailableMahasiswas = () => {
        if (!data.tahun_akademik_id) {
            return searchFilteredMahasiswas;
        }
        
        return searchFilteredMahasiswas;
    };

    const getAvailableMahasiswaCount = () => {
        return getAvailableMahasiswas().length;
    };

    const formatProdi = (prodiData) => {
        if (!prodiData) return '-';
        if (typeof prodiData === 'string') return prodiData;
        
        const namaProdi = prodiData.nama_prodi || prodiData.nama || '-';
        const jenjang = prodiData.jenjang ? ` (${prodiData.jenjang})` : '';
        const kode = prodiData.kode ? `${prodiData.kode} - ` : '';
        
        return `${kode}${namaProdi}${jenjang}`;
    };

    const getStatusBadge = (isAktif) => {
        if (isAktif) {
            return (
                <span className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400">
                    <CheckIcon className="w-3 h-3" /> Aktif
                </span>
            );
        }
        return (
            <span className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-bold bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400">
                <XCircleIcon className="w-3 h-3" /> Nonaktif
            </span>
        );
    };

    const formatDate = (dateString) => {
        if (!dateString) return '-';
        const date = new Date(dateString);
        return date.toLocaleDateString('id-ID', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric'
        });
    };

    const getKampusLabel = (kampusData) => {
        if (!kampusData) return '-';
        if (typeof kampusData === 'string') return kampusData;
        return kampusData.nama_kampus || '-';
    };

    // Cek apakah semua mahasiswa yang ditampilkan sudah dipilih
    const areAllDisplayedMahasiswaSelected = () => {
        const availableIds = getAvailableMahasiswas().map(m => m.id);
        return availableIds.length > 0 && availableIds.every(id => data.mahasiswa_ids.includes(id));
    };

    // Toggle pilih semua mahasiswa yang ditampilkan
    const toggleSelectAllDisplayed = () => {
        const availableIds = getAvailableMahasiswas().map(m => m.id);
        
        if (areAllDisplayedMahasiswaSelected()) {
            const newIds = data.mahasiswa_ids.filter(id => !availableIds.includes(id));
            setData('mahasiswa_ids', newIds);
            toast.info(`Semua mahasiswa di halaman ini dihapus`, {
                duration: 1500,
                position: "top-right",
            });
        } else {
            const newIds = [...new Set([...data.mahasiswa_ids, ...availableIds])];
            setData('mahasiswa_ids', newIds);
            toast.success(`Semua mahasiswa di halaman ini dipilih`, {
                duration: 1500,
                position: "top-right",
            });
        }
    };

    return (
        <AuthenticatedLayout
            header={
                <div className="flex flex-col gap-1">
                    <div className="flex items-center gap-2">
                        <Link
                            href={route("dosen-wali.index")}
                            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                        >
                            <ArrowLeftIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
                        </Link>
                        <h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                            Edit Penugasan Dosen Wali
                        </h2>
                    </div>
                    <div className="flex items-center gap-2 text-sm ml-10">
                        <BuildingOfficeIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
                        <span className="text-gray-600 dark:text-gray-300">
                            {auth.user.role?.is_global ? 'Semua Kampus' : getKampusLabel(dosenWali.dosen?.kampus) || 'Kampus Anda'}
                        </span>
                        <span className="flex items-center gap-1 px-2 py-0.5 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded-full text-xs">
                            ID: {dosenWali.id}
                        </span>
                    </div>
                </div>
            }
        >
            <Head title="Edit Data Dosen Wali" />
            <Toaster 
                position="top-right"
                toastOptions={{
                    className: 'dark:bg-gray-800 dark:text-white',
                    style: {
                        borderRadius: '10px',
                        background: '#fff',
                        color: '#333',
                    },
                }}
            />

            <div className="py-6">
                <div className="max-w-6xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white dark:bg-dark-300 overflow-hidden shadow-sm sm:rounded-lg border border-gray-200 dark:border-purple-500/20">
                        {/* Header dengan informasi dosen */}
                        <div className="px-6 py-4 border-b border-gray-200 dark:border-purple-500/20 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/10 dark:to-purple-900/10">
                            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                                <div className="flex items-center gap-3">
                                    <div className="p-2 bg-gradient-to-br from-blue-500 to-purple-500 rounded-lg">
                                        <PencilIcon className="w-6 h-6 text-white" />
                                    </div>
                                    <div>
                                        <h1 className="text-xl font-bold text-gray-900 dark:text-white">
                                            Edit Penugasan Dosen Wali
                                        </h1>
                                        <div className="mt-1 flex flex-wrap items-center gap-2">
                                            <div className="text-sm text-gray-600 dark:text-purple-300/80">
                                                <span className="font-medium text-blue-600 dark:text-blue-400">
                                                    {dosenWali.dosen?.nidn}
                                                </span>
                                                {' '}- {dosenWali.dosen?.nama_dosen}
                                            </div>
                                            <div className="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-800 rounded">
                                                {dosenWali.mahasiswa_ids?.length || 0} Mahasiswa
                                            </div>
                                            {getStatusBadge(dosenWali.is_aktif)}
                                        </div>
                                    </div>
                                </div>
                                <div className="flex gap-2">
                                    <div className="px-3 py-1.5 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                        <div className="text-xs text-gray-500 dark:text-gray-400">Mahasiswa Sekarang</div>
                                        <div className="font-bold text-blue-600 dark:text-blue-400">{dosenWali.mahasiswa_ids?.length || 0}</div>
                                    </div>
                                    <div className="px-3 py-1.5 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                        <div className="text-xs text-gray-500 dark:text-gray-400">Mahasiswa Tersedia</div>
                                        <div className="font-bold text-green-600 dark:text-green-400">{getAvailableMahasiswaCount()}</div>
                                    </div>
                                    <div className="px-3 py-1.5 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                        <div className="text-xs text-gray-500 dark:text-gray-400">Mahasiswa Dipilih</div>
                                        <div className="font-bold text-pink-600 dark:text-pink-400">{data.mahasiswa_ids.length}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Form utama */}
                        <div className="p-6">
                            <form onSubmit={handleSubmit} className="space-y-8">
                                {/* Bagian 1: Informasi Dosen (Read Only) */}
                                <div className="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900/10 dark:to-gray-800/10 rounded-xl p-5 border border-gray-200 dark:border-gray-500/20">
                                    <div className="flex items-center gap-3 mb-4">
                                        <div className="p-2 bg-gradient-to-br from-gray-500 to-gray-600 rounded-lg">
                                            <UserIcon className="w-5 h-5 text-white" />
                                        </div>
                                        <div>
                                            <h3 className="font-bold text-lg text-gray-900 dark:text-white">Informasi Dosen Wali</h3>
                                            <p className="text-sm text-gray-600 dark:text-gray-400">Data dosen (tidak dapat diubah)</p>
                                        </div>
                                    </div>

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div className="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                            <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">NIDN</div>
                                            <div className="font-bold text-gray-900 dark:text-white text-lg">
                                                {dosenWali.dosen?.nidn || '-'}
                                            </div>
                                        </div>
                                        <div className="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                            <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">Nama Dosen</div>
                                            <div className="font-bold text-gray-900 dark:text-white text-lg">
                                                {dosenWali.dosen?.nama_dosen || '-'}
                                            </div>
                                        </div>
                                    </div>
                                    
                                    {/* Informasi Prodi yang Diajar */}
                                    {selectedDosenProdi.length > 0 && (
                                        <div className="mt-4 p-3 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/10 dark:to-indigo-900/10 rounded-lg border border-blue-200 dark:border-blue-500/20">
                                            <div className="flex items-start gap-2">
                                                <InformationCircleIcon className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
                                                <div className="flex-1">
                                                    <p className="font-medium text-blue-700 dark:text-blue-300 mb-1">
                                                        Prodi yang diajar dosen ini:
                                                    </p>
                                                    <div className="flex flex-wrap gap-1 mt-2">
                                                        {selectedDosenProdi.map((prodi, index) => (
                                                            <span 
                                                                key={prodi.id}
                                                                className="inline-flex items-center gap-1 px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 rounded border border-blue-200 dark:border-blue-700"
                                                            >
                                                                <AcademicCapIcon className="w-3 h-3" />
                                                                {prodi.nama} ({prodi.jenjang})
                                                            </span>
                                                        ))}
                                                    </div>
                                                    <p className="text-xs text-gray-600 dark:text-gray-400 mt-2">
                                                        Hanya mahasiswa dari prodi di atas yang dapat dipilih sebagai wali
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    )}

                                    {selectedDosenProdi.length === 0 && (
                                        <div className="mt-4 p-3 bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-900/10 dark:to-orange-900/10 rounded-lg border border-amber-200 dark:border-amber-500/20">
                                            <div className="flex items-start gap-2">
                                                <ExclamationTriangleIcon className="w-5 h-5 text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0" />
                                                <div>
                                                    <p className="font-medium text-amber-700 dark:text-amber-300">
                                                        ⚠️ Dosen tidak memiliki penugasan mengajar
                                                    </p>
                                                    <p className="text-sm text-amber-600 dark:text-amber-400 mt-1">
                                                        Dosen ini belum ditugaskan mengajar di prodi manapun. 
                                                        Silakan tambahkan penugasan mengajar terlebih dahulu.
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    )}

                                    <div className="mt-4 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/10 dark:to-indigo-900/10 rounded-lg border border-blue-200 dark:border-blue-500/20">
                                        <div className="flex items-start gap-2">
                                            <InformationCircleIcon className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
                                            <div>
                                                <p className="font-medium text-blue-700 dark:text-blue-300">
                                                    ⓘ Dosen wali tidak dapat diubah
                                                </p>
                                                <p className="text-sm text-blue-600 dark:text-blue-400 mt-1">
                                                    Untuk mengubah dosen wali, hapus penugasan ini dan buat penugasan baru dengan dosen yang berbeda.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {/* Bagian 2: Edit Mahasiswa */}
                                <div className="bg-gradient-to-br from-pink-50 to-pink-100 dark:from-pink-900/20 dark:to-pink-800/20 rounded-xl p-5 border border-pink-200 dark:border-pink-500/20">
                                    <div className="flex items-center gap-3 mb-4">
                                        <div className="p-2 bg-gradient-to-br from-pink-500 to-pink-600 rounded-lg">
                                            <UsersIcon className="w-5 h-5 text-white" />
                                        </div>
                                        <div>
                                            <h3 className="font-bold text-lg text-gray-900 dark:text-white">Edit Daftar Mahasiswa</h3>
                                            <p className="text-sm text-gray-600 dark:text-gray-400">
                                                {selectedDosenProdi.length > 0 
                                                    ? `Mahasiswa dari prodi: ${selectedDosenProdiNames}`
                                                    : "Dosen tidak mengajar prodi apapun"}
                                                {data.tahun_akademik_id && ` (Tahun Akademik Terpilih)`}
                                            </p>
                                        </div>
                                    </div>

                                    <div className="space-y-4">
                                        <div ref={dropdownRef}>
                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                Mahasiswa <span className="text-red-500">*</span>
                                            </label>
                                            
                                            <div className="relative">
                                                <button
                                                    type="button"
                                                    onClick={() => setIsMahasiswaDropdownOpen(!isMahasiswaDropdownOpen)}
                                                    className={`w-full px-4 py-3 border rounded-lg bg-white dark:bg-gray-800 text-left flex justify-between items-center transition-all ${
                                                        errors.mahasiswa_ids 
                                                        ? 'border-red-300 focus:border-red-500' 
                                                        : 'border-gray-300 dark:border-gray-600 focus:border-purple-500'
                                                    } ${!data.tahun_akademik_id || selectedDosenProdi.length === 0 ? 'opacity-70 cursor-not-allowed' : 'hover:border-purple-400'} ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`}
                                                    disabled={!data.tahun_akademik_id || selectedDosenProdi.length === 0 || isSubmitting}
                                                >
                                                    <span className={`${!data.tahun_akademik_id || selectedDosenProdi.length === 0 || isSubmitting ? 'text-gray-400' : 'text-gray-700 dark:text-gray-300'}`}>
                                                        {selectedDosenProdi.length === 0
                                                            ? "Dosen tidak mengajar prodi apapun" 
                                                            : !data.tahun_akademik_id 
                                                            ? "Pilih tahun akademik terlebih dahulu" 
                                                            : isSubmitting
                                                            ? "Sedang menyimpan..."
                                                            : data.mahasiswa_ids.length === 0 
                                                                ? "Klik untuk memilih mahasiswa" 
                                                                : `${data.mahasiswa_ids.length} mahasiswa dipilih`
                                                        }
                                                    </span>
                                                    <ChevronDownIcon className={`w-5 h-5 text-gray-400 transition-transform ${isMahasiswaDropdownOpen ? 'rotate-180' : ''}`} />
                                                </button>
                                                
                                                {isMahasiswaDropdownOpen && data.tahun_akademik_id && selectedDosenProdi.length > 0 && !isSubmitting && (
                                                    <div className="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-96 overflow-hidden">
                                                        <div className="p-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
                                                            <div className="flex items-center gap-2 mb-2">
                                                                <div className="text-sm font-medium text-gray-700 dark:text-gray-300">
                                                                    Pilih Mahasiswa ({getAvailableMahasiswaCount()} tersedia)
                                                                </div>
                                                                <span className="text-xs px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded">
                                                                    {data.mahasiswa_ids.length} dipilih
                                                                </span>
                                                            </div>
                                                            <div className="relative">
                                                                <input
                                                                    type="text"
                                                                    placeholder="Cari NIM, nama, atau prodi..."
                                                                    value={searchMahasiswa}
                                                                    onChange={(e) => setSearchMahasiswa(e.target.value)}
                                                                    className="w-full px-3 py-2 pl-10 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
                                                                    autoFocus
                                                                />
                                                                <MagnifyingGlassIcon className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
                                                            </div>
                                                        </div>
                                                        
                                                        <div className="flex border-b border-gray-200 dark:border-gray-700">
                                                            <button
                                                                type="button"
                                                                onClick={toggleSelectAllDisplayed}
                                                                disabled={getAvailableMahasiswas().length === 0}
                                                                className="flex-1 px-3 py-2 text-sm text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                                                            >
                                                                {areAllDisplayedMahasiswaSelected() ? 'Uncheck Semua' : 'Check Semua'}
                                                            </button>
                                                            <button
                                                                type="button"
                                                                onClick={deselectAllMahasiswa}
                                                                disabled={data.mahasiswa_ids.length === 0}
                                                                className="flex-1 px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                                                            >
                                                                Hapus Semua
                                                            </button>
                                                        </div>
                                                        
                                                        <div className="max-h-64 overflow-y-auto">
                                                            {getAvailableMahasiswas().length === 0 ? (
                                                                <div className="p-6 text-center">
                                                                    <div className="text-gray-400 dark:text-gray-500 mb-2">
                                                                        {searchMahasiswa 
                                                                            ? "Tidak ada mahasiswa yang cocok dengan pencarian" 
                                                                            : !data.tahun_akademik_id
                                                                            ? "Pilih tahun akademik terlebih dahulu"
                                                                            : selectedDosenProdi.length === 0
                                                                            ? "Dosen tidak mengajar prodi apapun"
                                                                            : "Tidak ada mahasiswa tersedia untuk tahun akademik ini"
                                                                        }
                                                                    </div>
                                                                </div>
                                                            ) : (
                                                                <div className="divide-y divide-gray-200 dark:divide-gray-700">
                                                                    {getAvailableMahasiswas().map((mahasiswa) => {
                                                                        const isSelected = data.mahasiswa_ids.includes(mahasiswa.id);
                                                                        const isConflicted = conflictedMahasiswa.some(c => c.id === mahasiswa.id);
                                                                        const wasOriginallySelected = originalMahasiswaIds.includes(mahasiswa.id.toString());
                                                                        
                                                                        return (
                                                                            <div 
                                                                                key={mahasiswa.id}
                                                                                className={`flex items-start gap-3 px-3 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors ${
                                                                                    isConflicted ? 'bg-red-50 dark:bg-red-900/10' : ''
                                                                                } ${wasOriginallySelected && !isSelected ? 'bg-yellow-50 dark:bg-yellow-900/10' : ''}`}
                                                                                onClick={(e) => {
                                                                                    e.stopPropagation();
                                                                                    if (!isConflicted) {
                                                                                        toggleMahasiswaSelection(mahasiswa.id);
                                                                                    }
                                                                                }}
                                                                            >
                                                                                <div className="mt-1" onClick={(e) => e.stopPropagation()}>
                                                                                    <input
                                                                                        type="checkbox"
                                                                                        checked={isSelected}
                                                                                        onChange={() => {}}
                                                                                        onClick={(e) => {
                                                                                            e.stopPropagation();
                                                                                            if (!isConflicted) {
                                                                                                toggleMahasiswaSelection(mahasiswa.id);
                                                                                            }
                                                                                        }}
                                                                                        disabled={isConflicted}
                                                                                        className={`h-4 w-4 rounded focus:ring-2 focus:ring-offset-1 ${
                                                                                            isConflicted 
                                                                                            ? 'text-red-400 cursor-not-allowed focus:ring-red-400' 
                                                                                            : 'text-purple-600 focus:ring-purple-500 cursor-pointer'
                                                                                        }`}
                                                                                    />
                                                                                </div>
                                                                                <div className="flex-1 min-w-0">
                                                                                    <div className="flex items-start justify-between">
                                                                                        <div>
                                                                                            <div className="flex items-center gap-2 mb-1">
                                                                                                <div className="font-bold text-gray-900 dark:text-white">
                                                                                                    {mahasiswa.nim}
                                                                                                </div>
                                                                                                {isConflicted && (
                                                                                                    <span className="flex-shrink-0 text-xs text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-2 py-0.5 rounded">
                                                                                                        Konflik
                                                                                                    </span>
                                                                                                )}
                                                                                                {wasOriginallySelected && !isSelected && (
                                                                                                    <span className="flex-shrink-0 text-xs text-yellow-600 dark:text-yellow-400 bg-yellow-100 dark:bg-yellow-900/30 px-2 py-0.5 rounded">
                                                                                                        Akan dihapus
                                                                                                    </span>
                                                                                                )}
                                                                                                {wasOriginallySelected && isSelected && (
                                                                                                    <span className="flex-shrink-0 text-xs text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-900/30 px-2 py-0.5 rounded">
                                                                                                        Tetap dipilih
                                                                                                    </span>
                                                                                                )}
                                                                                            </div>
                                                                                            <div className="font-medium text-gray-800 dark:text-gray-200 mb-1">
                                                                                                {mahasiswa.nama}
                                                                                            </div>
                                                                                            <div className="text-xs text-gray-600 dark:text-gray-400 flex items-center gap-1">
                                                                                                <AcademicCapIcon className="w-3 h-3" />
                                                                                                {formatProdi(mahasiswa.prodi)}
                                                                                            </div>
                                                                                        </div>
                                                                                        {isSelected && !isConflicted && (
                                                                                            <CheckIcon className="w-5 h-5 text-green-500 mt-1 flex-shrink-0" />
                                                                                        )}
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        );
                                                                    })}
                                                                </div>
                                                            )}
                                                        </div>
                                                    </div>
                                                )}
                                            </div>
                                            
                                            {selectedDosenProdi.length === 0 && (
                                                <p className="mt-2 text-sm text-amber-600 dark:text-amber-400 flex items-center gap-1">
                                                    <ExclamationTriangleIcon className="w-4 h-4" />
                                                    Dosen ini tidak memiliki penugasan mengajar di prodi manapun
                                                </p>
                                            )}
                                            
                                            {!data.tahun_akademik_id && selectedDosenProdi.length > 0 && (
                                                <p className="mt-2 text-sm text-amber-600 dark:text-amber-400 flex items-center gap-1">
                                                    <ExclamationTriangleIcon className="w-4 h-4" />
                                                    Pilih tahun akademik terlebih dahulu untuk melihat daftar mahasiswa
                                                </p>
                                            )}
                                            
                                            {errors.mahasiswa_ids && (
                                                <p className="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center gap-1">
                                                    <ExclamationTriangleIcon className="w-4 h-4" />
                                                    {errors.mahasiswa_ids}
                                                </p>
                                            )}
                                            
                                            {/* Daftar mahasiswa yang dipilih */}
                                            {data.mahasiswa_ids.length > 0 && (
                                                <div className="mt-4">
                                                    <div className="flex items-center justify-between mb-3">
                                                        <h4 className="font-medium text-gray-700 dark:text-gray-300">
                                                            Mahasiswa Dipilih ({data.mahasiswa_ids.length})
                                                        </h4>
                                                        <button
                                                            type="button"
                                                            onClick={deselectAllMahasiswa}
                                                            disabled={isSubmitting}
                                                            className={`text-xs ${isSubmitting ? 'text-gray-400 cursor-not-allowed' : 'text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300'}`}
                                                        >
                                                            Hapus Semua
                                                        </button>
                                                    </div>
                                                    
                                                    <div className="max-h-60 overflow-y-auto space-y-2">
                                                        {getSelectedMahasiswaDetails().map((mhs) => {
                                                            const wasOriginallySelected = originalMahasiswaIds.includes(mhs.id.toString());
                                                            return (
                                                                <div 
                                                                    key={mhs.id}
                                                                    className={`flex items-center justify-between p-3 rounded-lg border transition-all ${
                                                                        mhs.isConflicted
                                                                        ? 'bg-gradient-to-r from-red-50 to-pink-50 dark:from-red-900/20 dark:to-pink-900/20 border-red-200 dark:border-red-500/30'
                                                                        : wasOriginallySelected 
                                                                        ? 'bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 border-green-200 dark:border-green-500/30'
                                                                        : 'bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 border-blue-200 dark:border-blue-500/30'
                                                                    }`}
                                                                >
                                                                    <div className="flex-1 min-w-0">
                                                                        <div className="flex items-center gap-2 mb-1">
                                                                            <div className={`font-bold ${
                                                                                mhs.isConflicted
                                                                                ? 'text-red-700 dark:text-red-300'
                                                                                : wasOriginallySelected
                                                                                ? 'text-green-700 dark:text-green-300'
                                                                                : 'text-blue-700 dark:text-blue-300'
                                                                            }`}>
                                                                                {mhs.nim}
                                                                            </div>
                                                                            {wasOriginallySelected && !mhs.isConflicted && (
                                                                                <span className="text-xs text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-900/30 px-2 py-0.5 rounded">
                                                                                    Original
                                                                                </span>
                                                                            )}
                                                                            {mhs.isConflicted && (
                                                                                <ExclamationTriangleIcon className="w-3 h-3 text-red-500 dark:text-red-400" />
                                                                            )}
                                                                        </div>
                                                                        <div className="font-medium text-gray-900 dark:text-white mb-1">
                                                                            {mhs.nama}
                                                                        </div>
                                                                        <div className="text-xs text-gray-600 dark:text-gray-400">
                                                                            {formatProdi(mhs.prodi)}
                                                                        </div>
                                                                    </div>
                                                                    <button
                                                                        type="button"
                                                                        onClick={() => removeMahasiswa(mhs.id)}
                                                                        disabled={isSubmitting}
                                                                        className={`ml-2 p-1.5 rounded-lg hover:bg-opacity-20 ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''} ${
                                                                            mhs.isConflicted
                                                                            ? 'text-red-500 hover:text-red-700 hover:bg-red-100 dark:hover:bg-red-900/30'
                                                                            : wasOriginallySelected
                                                                            ? 'text-green-500 hover:text-green-700 hover:bg-green-100 dark:hover:bg-green-900/30'
                                                                            : 'text-blue-500 hover:text-blue-700 hover:bg-blue-100 dark:hover:bg-blue-900/30'
                                                                        }`}
                                                                    >
                                                                        <XMarkIcon className="w-4 h-4" />
                                                                    </button>
                                                                </div>
                                                            );
                                                        })}
                                                    </div>
                                                    
                                                    {/* Warning untuk mahasiswa dengan konflik */}
                                                    {conflictedMahasiswa.length > 0 && (
                                                        <div className="mt-4 p-3 bg-gradient-to-r from-red-50 to-pink-50 dark:from-red-900/10 dark:to-pink-900/10 rounded-lg border border-red-200 dark:border-red-500/20">
                                                            <div className="flex items-start gap-2">
                                                                <ExclamationTriangleIcon className="w-5 h-5 text-red-600 dark:text-red-400 mt-0.5 flex-shrink-0" />
                                                                <div>
                                                                    <p className="font-medium text-red-700 dark:text-red-300">
                                                                        ⚠️ {conflictedMahasiswa.length} mahasiswa memiliki konflik
                                                                    </p>
                                                                    <p className="text-sm text-red-600 dark:text-red-400 mt-1">
                                                                        Mahasiswa tersebut sudah memiliki dosen wali aktif untuk tahun akademik ini. 
                                                                        Anda tidak dapat memilih mereka.
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    )}

                                                    {/* Info perubahan */}
                                                    <div className="mt-4 grid grid-cols-1 md:grid-cols-3 gap-3">
                                                        <div className="p-3 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/10 dark:to-emerald-900/10 rounded-lg border border-green-200 dark:border-green-500/20">
                                                            <div className="text-xs text-green-600 dark:text-green-400 font-medium mb-1">
                                                                Tetap Dipilih
                                                            </div>
                                                            <div className="text-lg font-bold text-green-700 dark:text-green-300">
                                                                {getSelectedMahasiswaDetails().filter(m => 
                                                                    originalMahasiswaIds.includes(m.id.toString())
                                                                ).length}
                                                            </div>
                                                            <div className="text-xs text-green-600 dark:text-green-400">
                                                                Mahasiswa dari data lama
                                                            </div>
                                                        </div>
                                                        <div className="p-3 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/10 dark:to-indigo-900/10 rounded-lg border border-blue-200 dark:border-blue-500/20">
                                                            <div className="text-xs text-blue-600 dark:text-blue-400 font-medium mb-1">
                                                                Baru Ditambahkan
                                                            </div>
                                                            <div className="text-lg font-bold text-blue-700 dark:text-blue-300">
                                                                {getSelectedMahasiswaDetails().filter(m => 
                                                                    !originalMahasiswaIds.includes(m.id.toString())
                                                                ).length}
                                                            </div>
                                                            <div className="text-xs text-blue-600 dark:text-blue-400">
                                                                Mahasiswa baru
                                                            </div>
                                                        </div>
                                                        <div className="p-3 bg-gradient-to-r from-yellow-50 to-amber-50 dark:from-yellow-900/10 dark:to-amber-900/10 rounded-lg border border-yellow-200 dark:border-yellow-500/20">
                                                            <div className="text-xs text-yellow-600 dark:text-yellow-400 font-medium mb-1">
                                                                Akan Dihapus
                                                            </div>
                                                            <div className="text-lg font-bold text-yellow-700 dark:text-yellow-300">
                                                                {originalMahasiswaIds.filter(id => 
                                                                    !data.mahasiswa_ids.includes(parseInt(id))
                                                                ).length}
                                                            </div>
                                                            <div className="text-xs text-yellow-600 dark:text-yellow-400">
                                                                Dihapus dari penugasan
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                </div>

                                {/* Bagian 3: Edit Informasi Periode & SK */}
                                <div className="bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-900/10 dark:to-purple-900/10 rounded-xl p-5 border border-indigo-200 dark:border-indigo-500/20">
                                    <div className="flex items-center gap-3 mb-6">
                                        <div className="p-2 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg">
                                            <CalendarIcon className="w-5 h-5 text-white" />
                                        </div>
                                        <div>
                                            <h3 className="font-bold text-lg text-gray-900 dark:text-white">Edit Informasi Periode & SK</h3>
                                            <p className="text-sm text-gray-600 dark:text-gray-400">Update periode dan informasi SK penugasan</p>
                                        </div>
                                    </div>

                                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                                        {/* Tahun Akademik */}
                                        <div>
                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                Tahun Akademik <span className="text-red-500">*</span>
                                            </label>
                                            <select
                                                value={data.tahun_akademik_id}
                                                onChange={(e) => {
                                                    setData('tahun_akademik_id', e.target.value);
                                                    if (e.target.value) {
                                                        const tahun = filteredTahunAkademikOptions.find(t => t.id == e.target.value);
                                                        if (tahun) {
                                                            toast.success(`Tahun akademik: ${tahun.nama}`, {
                                                                duration: 2000,
                                                            });
                                                        }
                                                    }
                                                }}
                                                className={`w-full px-4 py-3 border rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 transition-all ${
                                                    errors.tahun_akademik_id 
                                                    ? 'border-red-300 focus:border-red-500' 
                                                    : 'border-gray-300 dark:border-gray-600 focus:border-purple-500'
                                                }`}
                                                required
                                                disabled={isSubmitting}
                                            >
                                                <option value="">-- Pilih Tahun Akademik --</option>
                                                {filteredTahunAkademikOptions.map((tahun) => (
                                                    <option key={tahun.id} value={tahun.id}>
                                                        {tahun.nama} - Semester {tahun.semester === 1 ? 'Ganjil' : 'Genap'}
                                                        {tahun.is_periode_aktif && ' (Aktif)'}
                                                        {tahun.id == dosenWali.tahun_akademik_id && ' (Saat ini)'}
                                                    </option>
                                                ))}
                                            </select>
                                            {errors.tahun_akademik_id && (
                                                <p className="mt-2 text-sm text-red-600 dark:text-red-400">{errors.tahun_akademik_id}</p>
                                            )}
                                        </div>

                                        {/* Status */}
                                        <div>
                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                Status Penugasan <span className="text-red-500">*</span>
                                            </label>
                                            <div className="flex flex-col sm:flex-row gap-4">
                                                <label className="inline-flex items-center cursor-pointer">
                                                    <input
                                                        type="radio"
                                                        name="is_aktif"
                                                        value="true"
                                                        checked={data.is_aktif === true}
                                                        onChange={(e) => {
                                                            setData('is_aktif', e.target.value === 'true');
                                                            toast.success("Status: Aktif", {
                                                                duration: 1500,
                                                            });
                                                        }}
                                                        disabled={isSubmitting}
                                                        className="h-5 w-5 text-green-600 focus:ring-green-500 border-gray-300"
                                                    />
                                                    <span className="ml-3">
                                                        <span className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-bold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400">
                                                            <CheckIcon className="w-3 h-3" /> Aktif
                                                        </span>
                                                    </span>
                                                </label>
                                                <label className="inline-flex items-center cursor-pointer">
                                                    <input
                                                        type="radio"
                                                        name="is_aktif"
                                                        value="false"
                                                        checked={data.is_aktif === false}
                                                        onChange={(e) => {
                                                            setData('is_aktif', e.target.value === 'true');
                                                            toast.warning("Status: Nonaktif", {
                                                                duration: 1500,
                                                            });
                                                        }}
                                                        disabled={isSubmitting}
                                                        className="h-5 w-5 text-red-600 focus:ring-red-500 border-gray-300"
                                                    />
                                                    <span className="ml-3">
                                                        <span className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-bold bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400">
                                                            <XCircleIcon className="w-3 h-3" /> Nonaktif
                                                        </span>
                                                    </span>
                                                </label>
                                            </div>
                                            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
                                                Status sebelumnya: {dosenWali.is_aktif ? 'Aktif' : 'Nonaktif'}
                                            </p>
                                        </div>

                                        {/* Tanggal SK */}
                                        <div>
                                            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                                Tanggal SK
                                            </label>
                                            <input
                                                type="date"
                                                value={data.tanggal_sk}
                                                onChange={(e) => setData('tanggal_sk', e.target.value)}
                                                className={`w-full px-4 py-3 border rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 transition-all ${
                                                    errors.tanggal_sk 
                                                    ? 'border-red-300 focus:border-red-500' 
                                                    : 'border-gray-300 dark:border-gray-600 focus:border-purple-500'
                                                }`}
                                                disabled={isSubmitting}
                                            />
                                            {errors.tanggal_sk && (
                                                <p className="mt-2 text-sm text-red-600 dark:text-red-400">{errors.tanggal_sk}</p>
                                            )}
                                            {dosenWali.tanggal_sk && (
                                                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                                    Sebelumnya: {formatDate(dosenWali.tanggal_sk)}
                                                </p>
                                            )}
                                        </div>
                                    </div>

                                    {/* Nomor SK */}
                                    <div className="mt-6">
                                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                            Nomor SK
                                        </label>
                                        <input
                                            type="text"
                                            value={data.nomor_sk}
                                            onChange={(e) => setData('nomor_sk', e.target.value)}
                                            placeholder="Contoh: 123/SK/REKTOR/2024"
                                            className={`w-full px-4 py-3 border rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 transition-all ${
                                                errors.nomor_sk 
                                                ? 'border-red-300 focus:border-red-500' 
                                                : 'border-gray-300 dark:border-gray-600 focus:border-purple-500'
                                            }`}
                                            disabled={isSubmitting}
                                        />
                                        {errors.nomor_sk && (
                                            <p className="mt-2 text-sm text-red-600 dark:text-red-400">{errors.nomor_sk}</p>
                                        )}
                                        {dosenWali.nomor_sk && (
                                            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                                Sebelumnya: {dosenWali.nomor_sk}
                                            </p>
                                        )}
                                    </div>
                                </div>

                                {/* Ringkasan Perubahan */}
                                {(data.mahasiswa_ids.length > 0 || data.tahun_akademik_id !== dosenWali.tahun_akademik_id || data.is_aktif !== dosenWali.is_aktif) && (
                                    <div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/10 dark:to-pink-900/10 rounded-xl p-5 border border-purple-200 dark:border-purple-500/20">
                                        <div className="flex items-center gap-3 mb-4">
                                            <div className="p-2 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg">
                                                <DocumentTextIcon className="w-5 h-5 text-white" />
                                            </div>
                                            <h3 className="font-bold text-lg text-gray-900 dark:text-white">Ringkasan Perubahan</h3>
                                        </div>
                                        
                                        <div className="space-y-4">
                                            {/* Perubahan Mahasiswa */}
                                            {data.mahasiswa_ids.length !== dosenWali.mahasiswa_ids?.length && (
                                                <div className="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                                    <div className="flex items-center justify-between">
                                                        <div>
                                                            <div className="text-sm text-gray-500 dark:text-gray-400">Jumlah Mahasiswa</div>
                                                            <div className="font-bold text-gray-900 dark:text-white text-lg">
                                                                {dosenWali.mahasiswa_ids?.length || 0} → {data.mahasiswa_ids.length}
                                                            </div>
                                                        </div>
                                                        <div className={`px-3 py-1 rounded-full text-sm font-medium ${
                                                            data.mahasiswa_ids.length > dosenWali.mahasiswa_ids?.length
                                                            ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400'
                                                            : 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400'
                                                        }`}>
                                                            {data.mahasiswa_ids.length > dosenWali.mahasiswa_ids?.length ? '+' : ''}
                                                            {data.mahasiswa_ids.length - (dosenWali.mahasiswa_ids?.length || 0)}
                                                        </div>
                                                    </div>
                                                </div>
                                            )}
                                            
                                            {/* Perubahan Tahun Akademik */}
                                            {data.tahun_akademik_id != dosenWali.tahun_akademik_id && (
                                                <div className="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                                    <div className="text-sm text-gray-500 dark:text-gray-400">Tahun Akademik</div>
                                                    <div className="font-bold text-gray-900 dark:text-white text-lg">
                                                        {(() => {
                                                            const tahunLama = filteredTahunAkademikOptions.find(t => t.id == dosenWali.tahun_akademik_id);
                                                            const tahunBaru = filteredTahunAkademikOptions.find(t => t.id == data.tahun_akademik_id);
                                                            return (
                                                                <>
                                                                    {tahunLama?.nama || '-'} → {tahunBaru?.nama || '-'}
                                                                </>
                                                            );
                                                        })()}
                                                    </div>
                                                </div>
                                            )}
                                            
                                            {/* Perubahan Status */}
                                            {data.is_aktif !== dosenWali.is_aktif && (
                                                <div className="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                                                    <div className="text-sm text-gray-500 dark:text-gray-400">Status Penugasan</div>
                                                    <div className="font-bold text-gray-900 dark:text-white text-lg">
                                                        {dosenWali.is_aktif ? 'Aktif' : 'Nonaktif'} → {data.is_aktif ? 'Aktif' : 'Nonaktif'}
                                                    </div>
                                                </div>
                                            )}
                                            
                                            <div className="mt-4 p-3 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/10 dark:to-emerald-900/10 rounded-lg border border-green-200 dark:border-green-500/20">
                                                <div className="flex items-center gap-2">
                                                    <CheckIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
                                                    <div className="font-medium text-green-700 dark:text-green-300">
                                                        Perubahan siap disimpan. Pastikan semua informasi sudah benar.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )}

                                {/* Tombol Aksi */}
                                <div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-6 border-t border-gray-200 dark:border-gray-700">
                                    <div className="flex gap-3 w-full sm:w-auto">
                                        <Link
                                            href={route("dosen-wali.index")}
                                            className={`flex items-center justify-center gap-2 px-5 py-3 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors font-medium w-full sm:w-auto ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`}
                                            disabled={isSubmitting}
                                        >
                                            <ArrowLeftIcon className="w-4 h-4" />
                                            Kembali ke Daftar
                                        </Link>
                                    </div>
                                    
                                    <div className="flex items-center gap-3 w-full sm:w-auto">
                                        <button
                                            type="button"
                                            onClick={handleReset}
                                            disabled={isSubmitting}
                                            className={`flex items-center justify-center gap-2 px-5 py-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors font-medium w-full sm:w-auto ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`}
                                        >
                                            Reset Perubahan
                                        </button>
                                        <button
                                            type="submit"
                                            disabled={isSubmitting || data.mahasiswa_ids.length === 0 || conflictedMahasiswa.length > 0 || selectedDosenProdi.length === 0}
                                            className={`flex items-center justify-center gap-2 px-5 py-3 text-white rounded-lg transition-all font-medium shadow-lg w-full sm:w-auto ${
                                                isSubmitting || data.mahasiswa_ids.length === 0 || conflictedMahasiswa.length > 0 || selectedDosenProdi.length === 0
                                                ? 'opacity-50 cursor-not-allowed bg-gradient-to-r from-gray-400 to-gray-500'
                                                : 'bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 hover:shadow-xl hover:shadow-purple-500/40'
                                            }`}
                                        >
                                            {isSubmitting ? (
                                                <>
                                                    <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
                                                    Menyimpan...
                                                </>
                                            ) : (
                                                <>
                                                    <CheckIcon className="w-5 h-5" />
                                                    Simpan Perubahan
                                                </>
                                            )}
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}