import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, useForm, Link, usePage } from "@inertiajs/react";
import toast, { Toaster } from "react-hot-toast";
import { ArrowLeftIcon, CheckIcon, BuildingOfficeIcon, PlusIcon, UserGroupIcon, ComputerDesktopIcon, DocumentTextIcon, LinkIcon, EnvelopeIcon, CurrencyDollarIcon } from "@heroicons/react/24/solid";
import { useState, useEffect } from "react";

const formatDateForInput = (dateString) => {
    if (!dateString) return '';
    const date = new Date(dateString);
    if (isNaN(date.getTime())) return '';
    return date.toISOString().split('T')[0];
};

export default function Edit() {
    const { props } = usePage();
    const kampusData = props.kampus;

    // Parse biaya_formulir dari backend
    const biayaFormulirFromBackend = kampusData.biaya_formulir || {};
    const formattedBiayaFormulir = {
        D3: biayaFormulirFromBackend.D3 || "",
        D4: biayaFormulirFromBackend.D4 || "",
        S1: biayaFormulirFromBackend.S1 || "",
        S2: biayaFormulirFromBackend.S2 || "",
    };

    // Parse bagi_hasil dari backend
    const bagiHasilFromBackend = typeof kampusData.bagi_hasil === "string"
        ? JSON.parse(kampusData.bagi_hasil)
        : kampusData.bagi_hasil || {
            kampus: 70,
            k2: 30,
            subsidi: { agensi: 2, yatim_piatu: 2.5 },
            biaya: {
                jaket: {
                    penanggung: "kampus",
                    persen: { kampus: 100, k2: 0 },
                    rupiah: 0,
                },
            },
        };

    const { data, setData, post, processing, errors } = useForm({
        _method: 'put',
        nama_kampus: kampusData.nama_kampus || "",
        kode_kampus: kampusData.kode_kampus || "",
        alamat: kampusData.alamat || "",
        jenis_kampus: kampusData.jenis_kampus || "rekanan",
        bagi_hasil: bagiHasilFromBackend,
        mou: kampusData.mou || "",
        biaya_formulir: formattedBiayaFormulir,
        sk_pendirian: kampusData.sk_pendirian || "",
        tgl_sk_pendirian: formatDateForInput(kampusData.tgl_sk_pendirian),
        peringkat_akreditasi: kampusData.peringkat_akreditasi || "",
        lembaga_akreditasi: kampusData.lembaga_akreditasi || "BAN-PT",
        sk_akreditasi: kampusData.sk_akreditasi || "",
        tgl_sk_akreditasi: formatDateForInput(kampusData.tgl_sk_akreditasi),
        tgl_kadaluarsa_akreditasi: formatDateForInput(kampusData.tgl_kadaluarsa_akreditasi),
        file_sk_akreditasi: null,
        website: kampusData.website || "",
        email_official: kampusData.email_official || "",
    });

    const [newBiayaName, setNewBiayaName] = useState("");
    const [fileSkPreview, setFileSkPreview] = useState(null);
    const [currentFileSkName, setCurrentFileSkName] = useState(kampusData.file_sk_akreditasi || "");

    const totalBagiHasil = Number(data.bagi_hasil.kampus) + Number(data.bagi_hasil.k2);
    const totalBagiHasilValid = totalBagiHasil === 100;

    const totalSubsidi = parseFloat(data.bagi_hasil.subsidi.agensi || 0) + parseFloat(data.bagi_hasil.subsidi.yatim_piatu || 0);

    const handleSubmit = (e) => {
        e.preventDefault();

        // Validasi hanya untuk kampus rekanan
        if (data.jenis_kampus === 'rekanan') {
            if (!totalBagiHasilValid) {
                toast.error("Total bagi hasil utama harus tepat 100%");
                return;
            }

            const biayaKeys = Object.keys(data.bagi_hasil.biaya);
            for (const key of biayaKeys) {
                const biaya = data.bagi_hasil.biaya[key];
                if (biaya.penanggung === "sharing") {
                    const totalSharing = Number(biaya.persen.kampus) + Number(biaya.persen.k2);
                    if (totalSharing !== 100) {
                        toast.error(`Total ${key} (sharing) harus 100%`);
                        return;
                    }
                }
            }
        }

        // Format biaya_formulir sebelum dikirim
        const formattedData = {
            ...data,
            biaya_formulir: Object.entries(data.biaya_formulir).reduce((acc, [key, value]) => {
                if (value !== '' && value !== null) {
                    acc[key] = parseFloat(value) || 0;
                }
                return acc;
            }, {})
        };

        post(route("kampus.update", kampusData.id), {
            data: formattedData,
            onSuccess: () => toast.success("Kampus berhasil diperbarui!"),
            onError: (errors) => {
                console.error('Update errors:', errors);
                toast.error("Gagal memperbarui kampus");
            },
        });
    };

    const handleBiayaChange = (key, field, value) => {
        const updated = { ...data.bagi_hasil };

        if (field === "penanggung") {
            updated.biaya[key].penanggung = value;
            if (value !== "sharing") {
                updated.biaya[key].persen = {
                    kampus: value === "kampus" ? 100 : 0,
                    k2: value === "k2" ? 100 : 0,
                };
            }
        } else if (field === "rupiah") {
            updated.biaya[key].rupiah = value;
        } else {
            updated.biaya[key].persen = {
                ...updated.biaya[key].persen,
                ...value,
            };
        }

        setData("bagi_hasil", updated);
    };

    const handleBiayaFormulirChange = (jenjang, value) => {
        // Format nilai: hapus titik, ganti koma dengan titik
        let formattedValue = value;
        if (typeof value === 'string') {
            formattedValue = value.replace(/\./g, '').replace(',', '.');
        }

        setData("biaya_formulir", {
            ...data.biaya_formulir,
            [jenjang]: formattedValue === '' ? '' : formattedValue,
        });
    };

    const handleFileSkChange = (e) => {
        const file = e.target.files[0];
        if (file) {
            setData("file_sk_akreditasi", file);
            setFileSkPreview(file.name);
        }
    };

    const handleSubsidiChange = (key, value) => {
        if (typeof value === 'string') {
            value = value.replace(',', '.');
        }

        const numericValue = parseFloat(value) || 0;

        setData("bagi_hasil", {
            ...data.bagi_hasil,
            subsidi: {
                ...data.bagi_hasil.subsidi,
                [key]: numericValue,
            },
        });
    };

    const formatSubsidiDisplay = (value) => {
        if (value === 0 || value === null || value === undefined) return "";
        return value.toString().replace('.', ',');
    };

    const handleAddBiaya = () => {
        if (!newBiayaName.trim()) {
            toast.error("Nama komponen biaya harus diisi");
            return;
        }

        const key = newBiayaName.toLowerCase().replace(/\s+/g, "_");

        if (data.bagi_hasil.biaya[key]) {
            toast.error("Komponen biaya dengan nama tersebut sudah ada");
            return;
        }

        setData("bagi_hasil", {
            ...data.bagi_hasil,
            biaya: {
                ...data.bagi_hasil.biaya,
                [key]: {
                    penanggung: "kampus",
                    persen: { kampus: 100, k2: 0 },
                    rupiah: 0,
                },
            },
        });

        setNewBiayaName("");
    };

    const handleRemoveBiaya = (key) => {
        if (key === "jaket") {
            toast.error("Komponen jaket wajib dan tidak bisa dihapus!");
            return;
        }

        const updated = { ...data.bagi_hasil };
        delete updated.biaya[key];
        setData("bagi_hasil", updated);
    };

    const totalBiayaTetap = Object.values(data.bagi_hasil.biaya || {}).reduce(
        (sum, biaya) => sum + Number(biaya.rupiah || 0),
        0
    );

    const hitungNominalBagiHasil = (biaya) => {
        const nominal = biaya.rupiah || 0;
        const { penanggung, persen } = biaya;

        if (penanggung === "kampus") {
            return { kampus: nominal, k2: 0 };
        } else if (penanggung === "k2") {
            return { kampus: 0, k2: nominal };
        } else {
            return {
                kampus: (nominal * (persen.kampus || 0)) / 100,
                k2: (nominal * (persen.k2 || 0)) / 100
            };
        }
    };

    const getJenisKampusInfo = (jenis) => {
        switch(jenis) {
            case 'rekanan':
                return {
                    label: 'Kampus Rekanan',
                    description: 'Kampus yang menjalankan kerjasama bagi hasil',
                    color: 'border-blue-300 dark:border-blue-500/40',
                    bgColor: 'bg-blue-50 dark:bg-blue-900/20',
                    icon: UserGroupIcon
                };
            case 'beli_sistem':
                return {
                    label: 'Beli Sistem',
                    description: 'Hanya membeli sistem aplikasi tanpa kerjasama bagi hasil',
                    color: 'border-purple-300 dark:border-purple-500/40',
                    bgColor: 'bg-purple-50 dark:bg-purple-900/20',
                    icon: ComputerDesktopIcon
                };
            default:
                return {
                    label: 'Tidak Ditentukan',
                    description: 'Pilih jenis kampus terlebih dahulu',
                    color: 'border-gray-300 dark:border-gray-500/40',
                    bgColor: 'bg-gray-50 dark:bg-gray-900/20',
                    icon: BuildingOfficeIcon
                };
        }
    };

    const jenisKampusInfo = getJenisKampusInfo(data.jenis_kampus);
    const IconJenis = jenisKampusInfo.icon;

    return (
        <AuthenticatedLayout
            header={
                <h2 className="font-semibold text-xl flex items-center gap-2 text-gray-800 dark:text-gray-100">
                    <BuildingOfficeIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
                    Edit Data Kampus
                </h2>
            }
        >
            <Head title="Edit Kampus" />
            <Toaster position="top-right" />

            <div className="py-6">
                <div className="max-w-4xl 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">
                        <div className="p-6">
                            {/* Header dan Add Button */}
                            <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">
                                        Edit Data Kampus
                                    </h3>
                                    <p className="text-sm text-gray-600 dark:text-purple-300/80">
                                        Mengubah data untuk <strong className="text-purple-600 dark:text-purple-400">{kampusData.nama_kampus}</strong>
                                    </p>
                                </div>

                                <Link
                                    href={route("kampus.index")}
                                    className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-gray-500 to-gray-600 text-white rounded-lg hover:from-gray-600 hover:to-gray-700 transition-all duration-200 font-medium shadow-lg shadow-gray-500/25"
                                >
                                    <ArrowLeftIcon className="w-4 h-4" />
                                    Kembali
                                </Link>
                            </div>

                            <form onSubmit={handleSubmit} className="space-y-6">
                                {/* Data Utama */}
                                <div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg p-5 border border-purple-200 dark:border-purple-500/30">
                                    <h3 className="font-semibold text-lg mb-4 text-purple-900 dark:text-purple-100 flex items-center gap-2">
                                        <BuildingOfficeIcon className="w-5 h-5" />
                                        Data Utama Kampus
                                    </h3>

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        {/* Nama Kampus */}
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-300">
                                                Nama Kampus *
                                            </label>
                                            <input
                                                type="text"
                                                value={data.nama_kampus}
                                                onChange={(e) => setData("nama_kampus", e.target.value)}
                                                className="w-full pl-4 pr-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                                placeholder="Masukkan nama kampus"
                                            />
                                            {errors.nama_kampus && (
                                                <div className="text-red-500 text-sm mt-1 bg-red-50 dark:bg-red-900/20 px-2 py-1 rounded">
                                                    {errors.nama_kampus}
                                                </div>
                                            )}
                                        </div>

                                        {/* Kode Kampus */}
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-300">
                                                Kode Kampus *
                                            </label>
                                            <input
                                                type="text"
                                                value={data.kode_kampus}
                                                onChange={(e) => setData("kode_kampus", e.target.value)}
                                                className="w-full pl-4 pr-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 font-mono"
                                                placeholder="Kode unik kampus"
                                            />
                                            {errors.kode_kampus && (
                                                <div className="text-red-500 text-sm mt-1 bg-red-50 dark:bg-red-900/20 px-2 py-1 rounded">
                                                    {errors.kode_kampus}
                                                </div>
                                            )}
                                        </div>
                                    </div>

                                    {/* Jenis Kampus */}
                                    <div className="mt-4">
                                        <label className="block mb-2 font-medium text-purple-700 dark:text-purple-300">
                                            Jenis Kampus *
                                        </label>
                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                                            {/* Option: Kampus Rekanan */}
                                            <label className={`cursor-pointer ${jenisKampusInfo.bgColor} rounded-lg p-4 border-2 ${data.jenis_kampus === 'rekanan' ? 'border-blue-500 dark:border-blue-400 ring-2 ring-blue-300 dark:ring-blue-600' : jenisKampusInfo.color}`}>
                                                <div className="flex items-start gap-3">
                                                    <input
                                                        type="radio"
                                                        name="jenis_kampus"
                                                        value="rekanan"
                                                        checked={data.jenis_kampus === 'rekanan'}
                                                        onChange={(e) => setData("jenis_kampus", e.target.value)}
                                                        className="mt-1"
                                                    />
                                                    <div className="flex-1">
                                                        <div className="flex items-center gap-2 mb-1">
                                                            <UserGroupIcon className="w-5 h-5 text-blue-600 dark:text-blue-400" />
                                                            <span className="font-semibold text-blue-900 dark:text-blue-100">Kampus Rekanan</span>
                                                        </div>
                                                        <p className="text-xs text-blue-700 dark:text-blue-300">
                                                            Kampus yang menjalankan kerjasama bagi hasil dengan sistem komisi dan subsidi
                                                        </p>
                                                    </div>
                                                </div>
                                            </label>

                                            {/* Option: Beli Sistem */}
                                            <label className={`cursor-pointer ${jenisKampusInfo.bgColor} rounded-lg p-4 border-2 ${data.jenis_kampus === 'beli_sistem' ? 'border-purple-500 dark:border-purple-400 ring-2 ring-purple-300 dark:ring-purple-600' : 'border-gray-200 dark:border-gray-600'}`}>
                                                <div className="flex items-start gap-3">
                                                    <input
                                                        type="radio"
                                                        name="jenis_kampus"
                                                        value="beli_sistem"
                                                        checked={data.jenis_kampus === 'beli_sistem'}
                                                        onChange={(e) => setData("jenis_kampus", e.target.value)}
                                                        className="mt-1"
                                                    />
                                                    <div className="flex-1">
                                                        <div className="flex items-center gap-2 mb-1">
                                                            <ComputerDesktopIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
                                                            <span className="font-semibold text-purple-900 dark:text-purple-100">Beli Sistem</span>
                                                        </div>
                                                        <p className="text-xs text-purple-700 dark:text-purple-300">
                                                            Hanya membeli sistem aplikasi tanpa kerjasama bagi hasil (one-time purchase)
                                                        </p>
                                                    </div>
                                                </div>
                                            </label>
                                        </div>
                                        {errors.jenis_kampus && (
                                            <div className="text-red-500 text-sm mt-1 bg-red-50 dark:bg-red-900/20 px-2 py-1 rounded">
                                                {errors.jenis_kampus}
                                            </div>
                                        )}
                                    </div>

                                    {/* Alamat */}
                                    <div className="mt-4">
                                        <label className="block mb-2 font-medium text-purple-700 dark:text-purple-300">
                                            Alamat
                                        </label>
                                        <textarea
                                            value={data.alamat}
                                            onChange={(e) => setData("alamat", e.target.value)}
                                            className="w-full pl-4 pr-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                            rows="3"
                                            placeholder="Alamat lengkap kampus"
                                        />
                                        {errors.alamat && (
                                            <div className="text-red-500 text-sm mt-1 bg-red-50 dark:bg-red-900/20 px-2 py-1 rounded">
                                                {errors.alamat}
                                            </div>
                                        )}
                                    </div>
                                </div>

                                {/* Data Legal & Akreditasi */}
                                <div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg p-5 border border-purple-200 dark:border-purple-500/30">
                                    <h3 className="font-semibold text-lg mb-4 text-purple-900 dark:text-purple-100 flex items-center gap-2">
                                        <DocumentTextIcon className="w-5 h-5" />
                                        Data Legal & Akreditasi
                                    </h3>

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        {/* SK Pendirian */}
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-300">
                                                SK Pendirian
                                            </label>
                                            <input
                                                type="text"
                                                value={data.sk_pendirian}
                                                onChange={(e) => setData("sk_pendirian", e.target.value)}
                                                className="w-full pl-4 pr-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                                placeholder="Nomor SK Pendirian"
                                            />
                                        </div>

                                        {/* Tanggal SK Pendirian */}
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-300">
                                                Tanggal SK Pendirian
                                            </label>
                                            <input
                                                type="date"
                                                value={data.tgl_sk_pendirian}
                                                onChange={(e) => setData("tgl_sk_pendirian", e.target.value)}
                                                className="w-full pl-4 pr-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                            />
                                        </div>
                                    </div>

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                                        {/* Peringkat Akreditasi */}
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-300">
                                                Peringkat Akreditasi
                                            </label>
                                            <select
                                                value={data.peringkat_akreditasi}
                                                onChange={(e) => setData("peringkat_akreditasi", e.target.value)}
                                                className="w-full pl-4 pr-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-950 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                            >
                                                <option value="">Pilih Peringkat Akreditasi</option>
                                                <option value="Unggul">Unggul</option>
                                                <option value="A">A</option>
                                                <option value="Baik Sekali">Baik Sekali</option>
                                                <option value="B">B</option>
                                                <option value="Baik">Baik</option>
                                                <option value="C">C</option>
                                                <option value="Tidak Terakreditasi">Tidak Terakreditasi</option>
                                            </select>
                                        </div>

                                        {/* Lembaga Akreditasi */}
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-300">
                                                Lembaga Akreditasi
                                            </label>
                                            <input
                                                type="text"
                                                value={data.lembaga_akreditasi}
                                                onChange={(e) => setData("lembaga_akreditasi", e.target.value)}
                                                className="w-full pl-4 pr-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                                placeholder="Contoh: BAN-PT, LAM-PTKes, dll"
                                            />
                                        </div>
                                    </div>

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                                        {/* SK Akreditasi */}
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-300">
                                                SK Akreditasi
                                            </label>
                                            <input
                                                type="text"
                                                value={data.sk_akreditasi}
                                                onChange={(e) => setData("sk_akreditasi", e.target.value)}
                                                className="w-full pl-4 pr-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                                placeholder="Nomor SK Akreditasi"
                                            />
                                        </div>

                                        {/* Tanggal SK Akreditasi */}
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-300">
                                                Tanggal SK Akreditasi
                                            </label>
                                            <input
                                                type="date"
                                                value={data.tgl_sk_akreditasi}
                                                onChange={(e) => setData("tgl_sk_akreditasi", e.target.value)}
                                                className="w-full pl-4 pr-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                            />
                                        </div>
                                    </div>

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                                        {/* Tanggal Kadaluarsa Akreditasi */}
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-300">
                                                Tanggal Kadaluarsa Akreditasi
                                            </label>
                                            <input
                                                type="date"
                                                value={data.tgl_kadaluarsa_akreditasi}
                                                onChange={(e) => setData("tgl_kadaluarsa_akreditasi", e.target.value)}
                                                className="w-full pl-4 pr-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                            />
                                        </div>

                                        {/* File SK Akreditasi */}
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-300">
                                                File SK Akreditasi
                                            </label>
                                            <div className="flex items-center gap-4">
                                                <div className="flex-1">
                                                    <input
                                                        type="file"
                                                        accept=".pdf,.doc,.docx"
                                                        onChange={handleFileSkChange}
                                                        className="hidden"
                                                        id="file_sk_akreditasi"
                                                    />
                                                    <label htmlFor="file_sk_akreditasi" className="cursor-pointer">
                                                        <div className="px-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200">
                                                            {fileSkPreview || currentFileSkName ? (
                                                                <p className="text-sm text-purple-700 dark:text-purple-300">
                                                                    {fileSkPreview || currentFileSkName}
                                                                </p>
                                                            ) : (
                                                                <p className="text-sm text-purple-700 dark:text-purple-300">
                                                                    Upload File SK (PDF, DOC, DOCX)
                                                                </p>
                                                            )}
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                            {currentFileSkName && !fileSkPreview && (
                                                <p className="text-xs text-green-600 dark:text-green-400 mt-2">
                                                    File saat ini: {currentFileSkName}
                                                </p>
                                            )}
                                            <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
                                                Format: PDF, DOC, DOCX (max: 5MB)
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                {/* Website & Email Official */}
                                <div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg p-5 border border-purple-200 dark:border-purple-500/30">
                                    <h3 className="font-semibold text-lg mb-4 text-purple-900 dark:text-purple-100 flex items-center gap-2">
                                        <LinkIcon className="w-5 h-5" />
                                        Website & Kontak Resmi
                                    </h3>

                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        {/* Website */}
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-300">
                                                Website
                                            </label>
                                            <div className="flex items-center">
                                                <input
                                                    type="text"
                                                    value={data.website}
                                                    onChange={(e) => setData("website", e.target.value)}
                                                    className="flex-1 pl-3 pr-3 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                                    placeholder="example.ac.id"
                                                />
                                            </div>
                                        </div>

                                        {/* Email Official */}
                                        <div>
                                            <label className="block mb-2 font-medium text-purple-700 dark:text-purple-300">
                                                Email Official
                                            </label>
                                            <div className="flex items-center">
                                                <EnvelopeIcon className="w-5 h-5 text-purple-700 dark:text-purple-300 absolute ml-3" />
                                                <input
                                                    type="email"
                                                    value={data.email_official}
                                                    onChange={(e) => setData("email_official", e.target.value)}
                                                    className="w-full pl-10 pr-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                                    placeholder="info@example.ac.id"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {/* Tampilkan hanya jika Kampus Rekanan */}
                                {data.jenis_kampus === 'rekanan' && (
                                    <>
                                        {/* Bagi Hasil Utama */}
                                        <div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg p-5 border border-purple-200 dark:border-purple-500/30">
                                            <h3 className="font-semibold text-lg mb-4 text-purple-900 dark:text-purple-100">
                                                Bagi Hasil Utama (%)
                                            </h3>

                                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                {["kampus", "k2"].map((key) => (
                                                    <div key={key}>
                                                        <label className="block mb-2 font-medium text-purple-700 dark:text-purple-300 capitalize">
                                                            {key === "k2" ? "K2" : key}
                                                        </label>
                                                        <input
                                                            type="number"
                                                            min="0"
                                                            max="100"
                                                            value={data.bagi_hasil[key]}
                                                            onChange={(e) =>
                                                                setData("bagi_hasil", {
                                                                    ...data.bagi_hasil,
                                                                    [key]: Number(e.target.value),
                                                                })
                                                            }
                                                            className="w-full pl-4 pr-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                                        />
                                                    </div>
                                                ))}
                                            </div>

                                            <div className={`mt-3 p-3 rounded-lg ${totalBagiHasilValid ? 'bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-300' : 'bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-300'}`}>
                                                <p className="text-sm font-medium">
                                                    Total: <span className="font-bold">{totalBagiHasil}%</span> {totalBagiHasilValid ? '✓ Valid' : '✗ Harus tepat 100%'}
                                                </p>
                                            </div>
                                        </div>

                                        {/* Subsidi */}
                                        <div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg p-5 border border-purple-200 dark:border-purple-500/30">
                                            <h3 className="font-semibold text-lg mb-4 text-purple-900 dark:text-purple-100">
                                                Subsidi dari K2 (%)
                                            </h3>

                                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                {["agensi", "yatim_piatu"].map((key) => (
                                                    <div key={key}>
                                                        <label className="block mb-2 font-medium text-purple-700 dark:text-purple-300 capitalize">
                                                            {key.replace("_", " ")}
                                                        </label>
                                                        <input
                                                            type="text"
                                                            value={formatSubsidiDisplay(data.bagi_hasil.subsidi[key])}
                                                            onChange={(e) => handleSubsidiChange(key, e.target.value)}
                                                            className="w-full pl-4 pr-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                                            placeholder="Contoh: 2,5"
                                                        />
                                                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                            Gunakan koma untuk desimal (contoh: 2,5)
                                                        </p>
                                                    </div>
                                                ))}
                                            </div>

                                            <div className="mt-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-500/30 rounded-lg">
                                                <p className="text-sm font-medium text-blue-700 dark:text-blue-300">
                                                    Total Subsidi: <span className="font-bold">{totalSubsidi}%</span> dari pendapatan K2
                                                </p>
                                            </div>
                                        </div>

                                        {/* Biaya Tetap */}
                                        <div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg p-5 border border-purple-200 dark:border-purple-500/30">
                                            <div className="flex justify-between items-center mb-4">
                                                <h3 className="font-semibold text-lg text-purple-900 dark:text-purple-100">
                                                    Alokasi Biaya Tetap
                                                </h3>
                                                <div className="flex gap-2">
                                                    <input
                                                        type="text"
                                                        value={newBiayaName}
                                                        onChange={(e) => setNewBiayaName(e.target.value)}
                                                        placeholder="Nama biaya baru"
                                                        className="pl-3 pr-3 py-2 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                                    />
                                                    <button
                                                        type="button"
                                                        onClick={handleAddBiaya}
                                                        className="flex items-center gap-2 px-3 py-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg hover:from-purple-700 hover:to-pink-700 transition-all duration-200 text-sm font-medium shadow-lg shadow-purple-500/25"
                                                    >
                                                        <PlusIcon className="w-4 h-4" />
                                                        Tambah
                                                    </button>
                                                </div>
                                            </div>

                                            <div className="space-y-4">
                                                {Object.entries(data.bagi_hasil.biaya).map(
                                                    ([key, biaya]) => {
                                                        const nominalBagiHasil = hitungNominalBagiHasil(biaya);
                                                        const totalSharing = biaya.penanggung === "sharing"
                                                            ? (biaya.persen.kampus || 0) + (biaya.persen.k2 || 0)
                                                            : 100;
                                                        const sharingValid = biaya.penanggung !== "sharing" || totalSharing === 100;

                                                        return (
                                                            <div
                                                                key={key}
                                                                className="border border-purple-200 dark:border-purple-500/30 rounded-lg p-4 bg-white dark:bg-purple-900/20"
                                                            >
                                                                <div className="flex justify-between items-center mb-3">
                                                                    <label className="block text-sm font-medium text-purple-700 dark:text-purple-300 capitalize">
                                                                        {key.replace("_", " ")}
                                                                    </label>
                                                                    <button
                                                                        type="button"
                                                                        onClick={() => handleRemoveBiaya(key)}
                                                                        className="text-red-500 hover:text-red-700 text-sm font-medium transition-colors duration-200"
                                                                    >
                                                                        Hapus
                                                                    </button>
                                                                </div>

                                                                <div className="space-y-3">
                                                                    <select
                                                                        value={biaya.penanggung}
                                                                        onChange={(e) => handleBiayaChange(key, "penanggung", e.target.value)}
                                                                        className="w-full pl-3 pr-3 py-2 border border-purple-300 dark:border-purple-500 rounded-lg bg-white dark:bg-purple-950 text-gray-900 dark:text-purple-100 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                                                    >
                                                                        <option value="kampus">Kampus (100%)</option>
                                                                        <option value="k2">K2 (100%)</option>
                                                                        <option value="sharing">Sharing</option>
                                                                    </select>

                                                                    {biaya.penanggung === "sharing" && (
                                                                        <>
                                                                            <div className="grid grid-cols-2 gap-3">
                                                                                <div>
                                                                                    <label className="block text-xs font-medium text-purple-600 dark:text-purple-400 mb-1">
                                                                                        Kampus (%)
                                                                                    </label>
                                                                                    <input
                                                                                        type="number"
                                                                                        min="0"
                                                                                        max="100"
                                                                                        value={biaya.persen.kampus}
                                                                                        onChange={(e) => handleBiayaChange(key, "persen", { kampus: Number(e.target.value) })}
                                                                                        className="w-full pl-3 pr-3 py-2 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                                                                    />
                                                                                </div>
                                                                                <div>
                                                                                    <label className="block text-xs font-medium text-purple-600 dark:text-purple-400 mb-1">
                                                                                        K2 (%)
                                                                                    </label>
                                                                                    <input
                                                                                        type="number"
                                                                                        min="0"
                                                                                        max="100"
                                                                                        value={biaya.persen.k2}
                                                                                        onChange={(e) => handleBiayaChange(key, "persen", { k2: Number(e.target.value) })}
                                                                                        className="w-full pl-3 pr-3 py-2 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                                                                    />
                                                                                </div>
                                                                            </div>
                                                                            {!sharingValid && (
                                                                                <div className="p-2 bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-300 rounded text-xs">
                                                                                    Total harus 100% (Saat ini: {totalSharing}%)
                                                                                </div>
                                                                            )}
                                                                        </>
                                                                    )}

                                                                    <div>
                                                                        <label className="block text-xs font-medium text-purple-600 dark:text-purple-400 mb-1">
                                                                            Nominal (Rp)
                                                                        </label>
                                                                        <input
                                                                            type="number"
                                                                            min="0"
                                                                            value={biaya.rupiah}
                                                                            onChange={(e) => handleBiayaChange(key, "rupiah", Number(e.target.value))}
                                                                            className="w-full pl-3 pr-3 py-2 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                                                            placeholder="Masukkan nominal (contoh: 150000)"
                                                                        />
                                                                    </div>

                                                                    {/* Ringkasan Bagi Hasil Biaya */}
                                                                    <div className="bg-gray-50 dark:bg-gray-800/30 rounded p-3 border border-gray-200 dark:border-gray-600">
                                                                        <h4 className="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                                                            Ringkasan Bagi Hasil:
                                                                        </h4>
                                                                        <div className="grid grid-cols-2 gap-2 text-xs">
                                                                            <div className="text-center p-2 bg-blue-50 dark:bg-blue-900/20 rounded">
                                                                                <p className="font-medium text-blue-700 dark:text-blue-300">Kampus</p>
                                                                                <p className="font-bold text-blue-900 dark:text-blue-100">
                                                                                    {biaya.penanggung === "sharing"
                                                                                        ? `${biaya.persen.kampus || 0}%`
                                                                                        : biaya.penanggung === "kampus" ? "100%" : "0%"
                                                                                    }
                                                                                </p>
                                                                                <p className="text-green-600 dark:text-green-400">
                                                                                    Rp {nominalBagiHasil.kampus.toLocaleString('id-ID')}
                                                                                </p>
                                                                            </div>
                                                                            <div className="text-center p-2 bg-green-50 dark:bg-green-900/20 rounded">
                                                                                <p className="font-medium text-green-700 dark:text-green-300">K2</p>
                                                                                <p className="font-bold text-green-900 dark:text-green-100">
                                                                                    {biaya.penanggung === "sharing"
                                                                                        ? `${biaya.persen.k2 || 0}%`
                                                                                        : biaya.penanggung === "k2" ? "100%" : "0%"
                                                                                    }
                                                                                </p>
                                                                                <p className="text-green-600 dark:text-green-400">
                                                                                    Rp {nominalBagiHasil.k2.toLocaleString('id-ID')}
                                                                                </p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        );
                                                    }
                                                )}
                                            </div>

                                            {/* Total Biaya Tetap */}
                                            <div className="mt-4 p-3 bg-white dark:bg-purple-900/30 border border-purple-200 dark:border-purple-500/30 rounded-lg">
                                                <p className="text-sm font-semibold text-purple-900 dark:text-purple-100 text-right">
                                                    Total Biaya Tetap:{" "}
                                                    <span className="text-green-600 dark:text-green-400">
                                                        Rp {totalBiayaTetap.toLocaleString("id-ID", { minimumFractionDigits: 0 })}
                                                    </span>
                                                </p>
                                            </div>
                                        </div>
                                                                                {/* Biaya Formulir */}
                                        <div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg p-5 border border-purple-200 dark:border-purple-500/30">
                                            <h3 className="font-semibold text-lg mb-4 text-purple-900 dark:text-purple-100 flex items-center gap-2">
                                                <CurrencyDollarIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
                                                Biaya Formulir Pendaftaran
                                            </h3>

                                            <p className="text-sm text-gray-600 dark:text-purple-300 mb-4">
                                                Masukkan biaya formulir untuk setiap jenjang pendidikan (kosongkan jika tidak tersedia)
                                            </p>

                                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                                {[
                                                    { key: 'D3', label: 'Diploma 3 (D3)' },
                                                    { key: 'D4', label: 'Diploma 4 (D4)' },
                                                    { key: 'S1', label: 'Sarjana (S1)' },
                                                    { key: 'S2', label: 'Magister (S2)' },
                                                ].map((item) => (
                                                    <div key={item.key} className="space-y-2">
                                                        <label className="block text-sm font-medium text-purple-700 dark:text-purple-300">
                                                            {item.label}
                                                        </label>
                                                        <div className="relative">
                                                            <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400">
                                                                Rp
                                                            </span>
                                                            <input
                                                                type="text"
                                                                value={data.biaya_formulir[item.key]}
                                                                onChange={(e) => {
                                                                    // Hanya terima angka, koma, dan titik
                                                                    const rawValue = e.target.value.replace(/[^\d.,]/g, '');
                                                                    handleBiayaFormulirChange(item.key, rawValue);
                                                                }}
                                                                placeholder="0"
                                                                className="w-full pl-10 pr-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                                            />
                                                        </div>
                                                        {data.biaya_formulir[item.key] && (
                                                            <p className="text-xs text-gray-500 dark:text-gray-400">
                                                                Rp {data.biaya_formulir[item.key]}
                                                            </p>
                                                        )}
                                                    </div>
                                                ))}
                                            </div>

                                            <div className="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-500/30 rounded-lg">
                                                <div className="flex justify-between items-center">
                                                    <span className="text-sm font-medium text-blue-700 dark:text-blue-300">
                                                        Total Biaya Formulir:
                                                    </span>
                                                    <span className="text-lg font-bold text-blue-900 dark:text-blue-100">
                                                        Rp {
                                                            Object.values(data.biaya_formulir).reduce((total, value) => {
                                                                const num = parseFloat(value) || 0;
                                                                return total + num;
                                                            }, 0).toLocaleString('id-ID')
                                                        }
                                                    </span>
                                                </div>
                                            </div>

                                            {errors.biaya_formulir && (
                                                <div className="mt-2 text-red-500 text-sm bg-red-50 dark:bg-red-900/20 px-2 py-1 rounded">
                                                    {errors.biaya_formulir}
                                                </div>
                                            )}
                                        </div>
                                    </>
                                )}

                                {/* MOU */}
                                <div className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg p-5 border border-purple-200 dark:border-purple-500/30">
                                    <h3 className="font-semibold text-lg mb-4 text-purple-900 dark:text-purple-100">
                                        Keterangan MOU
                                    </h3>

                                    <textarea
                                        value={data.mou}
                                        onChange={(e) => setData("mou", e.target.value)}
                                        className="w-full pl-4 pr-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-gray-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                        rows="3"
                                        placeholder="Contoh: Bagi hasil MOU dapat berubah sesuai kesepakatan..."
                                    />
                                </div>

                                {/* Tombol Aksi */}
                                <div className="flex justify-between pt-6 border-t border-gray-200 dark:border-purple-500/20">
                                    <Link
                                        href={route("kampus.index")}
                                        className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-gray-500 to-gray-600 text-white rounded-lg hover:from-gray-600 hover:to-gray-700 transition-all duration-200 font-medium shadow-lg shadow-gray-500/25"
                                    >
                                        <ArrowLeftIcon className="w-5 h-5" />
                                        Kembali
                                    </Link>
                                    <button
                                        type="submit"
                                        disabled={processing || (data.jenis_kampus === 'rekanan' && !totalBagiHasilValid)}
                                        className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg hover:from-purple-700 hover:to-pink-700 transition-all duration-200 font-medium shadow-lg shadow-purple-500/25 disabled:opacity-50 disabled:cursor-not-allowed"
                                    >
                                        <CheckIcon className="w-5 h-5" />
                                        {processing ? "Menyimpan..." : "Simpan Perubahan"}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}