import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, useForm, usePage } from '@inertiajs/react';
import {
    ArrowLeftIcon,
    CalendarDaysIcon,
    BuildingOfficeIcon,
    BuildingLibraryIcon,
    CheckBadgeIcon,
} from "@heroicons/react/24/solid";
import toast, { Toaster } from "react-hot-toast";
import { useState, useEffect } from "react";

export default function Edit() {
    const { tahunAkademik, kampus, is_global_superadmin, kampus_list } = usePage().props;

    const { data, setData, put, processing, errors } = useForm({
        kode: tahunAkademik.kode || "",
        semester: tahunAkademik.semester || "",
        nama: tahunAkademik.nama || "",
        tgl_mulai: tahunAkademik.tgl_mulai || "",
        tgl_selesai: tahunAkademik.tgl_selesai || "",
        is_periode_aktif: tahunAkademik.is_periode_aktif || 0,
        is_input_aktif: tahunAkademik.is_input_aktif || 1,
        kampus_id: tahunAkademik.kampus_id || "",
    });

    const [selectedKampus, setSelectedKampus] = useState(
        is_global_superadmin
            ? kampus_list?.find(k => k.id == tahunAkademik.kampus_id)
            : kampus
    );

    // Fungsi untuk auto-generate nama berdasarkan kode dan semester
    const generateNamaFromKodeSemester = (kode, semester) => {
        const semesterText =
            semester === "1" ? "Ganjil" :
            semester === "2" ? "Genap" :
            semester === "3" ? "Pendek" : "";

        const yearMatch = kode?.match(/^\d{4}/)?.[0];

        if (yearMatch && semesterText) {
            const currentYear = parseInt(yearMatch);
            const nextYear = currentYear + 1;
            return `${semesterText} ${currentYear}/${nextYear}`;
        }

        if (semesterText && !yearMatch) {
            return semesterText;
        }

        if (yearMatch && !semesterText) {
            return `Tahun ${yearMatch}`;
        }

        return "";
    };

    // Update nama ketika kode atau semester berubah
    const handleKodeChange = (e) => {
        const newKode = e.target.value;
        setData('kode', newKode);

        // Auto-generate nama
        const generatedNama = generateNamaFromKodeSemester(newKode, data.semester);
        if (generatedNama) {
            setData('nama', generatedNama);
        }
    };

    const handleSemesterChange = (e) => {
        const newSemester = e.target.value;
        setData('semester', newSemester);

        // Auto-generate nama
        const generatedNama = generateNamaFromKodeSemester(data.kode, newSemester);
        if (generatedNama) {
            setData('nama', generatedNama);
        }
    };

    const handleKampusChange = (e) => {
        const kampusId = e.target.value;
        setData('kampus_id', kampusId);

        // Update selected kampus info
        const selected = kampus_list?.find((k) => k.id == kampusId);
        setSelectedKampus(selected);
    };

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

        // Validasi tambahan untuk superadmin global
        if (is_global_superadmin && !data.kampus_id) {
            toast.error("Silakan pilih kampus terlebih dahulu");
            return;
        }

        put(route('tahun-akademik.update', tahunAkademik.id), {
            preserveScroll: true,
            onSuccess: () => {
                toast.success("Tahun akademik berhasil diperbarui!");
                // Redirect ke index setelah sukses
                setTimeout(() => {
                    window.location.href = route('tahun-akademik.index');
                }, 1500);
            },
            onError: (errors) => {
                Object.values(errors).forEach((error) => {
                    toast.error(error);
                });
            },
        });
    };

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

            <div className="py-6">
                <div className="max-w-3xl 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 */}
                            <div className="mb-6">
                                <div className="flex items-center gap-3 mb-4">
                                    <div className="p-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg">
                                        <CalendarDaysIcon className="w-6 h-6 text-white" />
                                    </div>
                                    <div>
                                        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
                                            Edit Tahun Akademik
                                        </h1>

                                        {/* Tampilkan info kampus berdasarkan role */}
                                        {is_global_superadmin ? (
                                            <div className="flex items-center gap-2 text-sm text-purple-600 dark:text-purple-400">
                                                <BuildingLibraryIcon className="w-4 h-4" />
                                                <span>Superadmin Global - Pilih kampus tujuan</span>
                                            </div>
                                        ) : (
                                            <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-purple-300/80">
                                                <BuildingOfficeIcon className="w-4 h-4" />
                                                {kampus?.nama_kampus || "Kampus"}
                                            </div>
                                        )}
                                    </div>
                                </div>

                                {/* Info tahun akademik yang sedang diedit */}
                                <div className="bg-purple-50 dark:bg-purple-900/20 p-4 rounded-lg border border-purple-200 dark:border-purple-500/30">
                                    <div className="flex items-center gap-2 text-purple-700 dark:text-purple-300">
                                        <CheckBadgeIcon className="w-5 h-5" />
                                        <span className="font-medium">Mengedit: {tahunAkademik.nama}</span>
                                    </div>
                                </div>
                            </div>

                            {/* Form */}
                            <form onSubmit={submit} className="space-y-6">
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    {/* Pilihan Kampus untuk Superadmin Global */}
                                    {is_global_superadmin && (
                                        <div className="md:col-span-2">
                                            <label className="block text-sm font-medium text-purple-700 dark:text-purple-300 mb-2">
                                                Pilih Kampus *
                                            </label>
                                            <select
                                                name="kampus_id"
                                                value={data.kampus_id}
                                                onChange={handleKampusChange}
                                                className="w-full px-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-950 text-purple-900 dark:text-purple-100 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                                required
                                            >
                                                <option value="">-- Pilih Kampus --</option>
                                                {kampus_list?.map((kampus) => (
                                                    <option key={kampus.id} value={kampus.id}>
                                                        {kampus.nama_kampus} ({kampus.kode_kampus})
                                                    </option>
                                                ))}
                                            </select>

                                            {selectedKampus && (
                                                <p className="mt-2 text-sm text-green-600 dark:text-green-400">
                                                    Mengedit tahun akademik untuk: {selectedKampus.nama_kampus}
                                                </p>
                                            )}
                                        </div>
                                    )}

                                    {/* Kode */}
                                    <div>
                                        <label className="block text-sm font-medium text-purple-700 dark:text-purple-300 mb-2">
                                            Kode Tahun Akademik *
                                        </label>
                                        <input
                                            type="text"
                                            name="kode"
                                            value={data.kode}
                                            onChange={handleKodeChange}
                                            placeholder="Contoh: 20231 (2023 Ganjil)"
                                            className="w-full px-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-purple-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                            required
                                            maxLength="5"
                                            pattern="^\d{4}[1-3]$"
                                            title="Format: 4 digit tahun + 1 digit semester (1:Ganjil, 2:Genap, 3:Pendek)"
                                        />
                                        <p className="mt-1 text-xs text-gray-500 dark:text-purple-400/70">
                                            Format: 4 digit tahun + 1 digit semester (1:Ganjil, 2:Genap, 3:Pendek)
                                        </p>
                                    </div>

                                    {/* Semester */}
                                    <div>
                                        <label className="block text-sm font-medium text-purple-700 dark:text-purple-300 mb-2">
                                            Semester *
                                        </label>
                                        <select
                                            name="semester"
                                            value={data.semester}
                                            onChange={handleSemesterChange}
                                            className="w-full px-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-950 text-purple-900 dark:text-purple-100 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                            required
                                        >
                                            <option value="">
                                                Pilih Semester
                                            </option>
                                            <option value="1">Ganjil</option>
                                            <option value="2">Genap</option>
                                            <option value="3">Pendek</option>
                                        </select>
                                    </div>

                                    {/* Tahun Akademik */}
                                    <div className="md:col-span-2">
                                        <label className="block text-sm font-medium text-purple-700 dark:text-purple-300 mb-2">
                                            Tahun Akademik *
                                        </label>
                                        <input
                                            type="text"
                                            name="nama"
                                            value={data.nama}
                                            onChange={e => setData('nama', e.target.value)}
                                            placeholder="Contoh: Ganjil 2023/2024"
                                            className="w-full px-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-purple-900 dark:text-purple-100 placeholder-purple-500 dark:placeholder-purple-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                            required
                                        />
                                        <p className="mt-1 text-xs text-gray-500 dark:text-purple-400/70">
                                            Otomatis tergenerate dari Kode dan Semester
                                        </p>
                                    </div>

                                    {/* Tanggal Mulai */}
                                    <div>
                                        <label className="block text-sm font-medium text-purple-700 dark:text-purple-300 mb-2">
                                            Tanggal Mulai *
                                        </label>
                                        <input
                                            type="date"
                                            name="tgl_mulai"
                                            value={data.tgl_mulai}
                                            onChange={e => setData('tgl_mulai', e.target.value)}
                                            className="w-full px-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-purple-900 dark:text-purple-100 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                            required
                                        />
                                    </div>

                                    {/* Tanggal Selesai */}
                                    <div>
                                        <label className="block text-sm font-medium text-purple-700 dark:text-purple-300 mb-2">
                                            Tanggal Selesai *
                                        </label>
                                        <input
                                            type="date"
                                            name="tgl_selesai"
                                            value={data.tgl_selesai}
                                            onChange={e => setData('tgl_selesai', e.target.value)}
                                            className="w-full px-4 py-3 border border-purple-300 dark:border-purple-500/40 rounded-lg bg-white dark:bg-purple-900/30 text-purple-900 dark:text-purple-100 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200"
                                            required
                                        />
                                    </div>

                                    {/* Options */}
                                    <div className="md:col-span-2 space-y-4">
                                        <div className="flex items-center gap-3 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-lg border border-blue-200 dark:border-blue-500/30">
                                            <input
                                                type="checkbox"
                                                id="is_input_aktif"
                                                name="is_input_aktif"
                                                checked={data.is_input_aktif === 1}
                                                onChange={e => setData('is_input_aktif', e.target.checked ? 1 : 0)}
                                                className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
                                            />
                                            <label
                                                htmlFor="is_input_aktif"
                                                className="text-sm font-medium text-blue-700 dark:text-blue-300"
                                            >
                                                Aktifkan input data untuk tahun akademik ini
                                            </label>
                                        </div>

                                        <div className="flex items-center gap-3 p-4 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-lg border border-green-200 dark:border-green-500/30">
                                            <input
                                                type="checkbox"
                                                id="is_periode_aktif"
                                                name="is_periode_aktif"
                                                checked={data.is_periode_aktif === 1}
                                                onChange={e => setData('is_periode_aktif', e.target.checked ? 1 : 0)}
                                                className="w-4 h-4 text-green-600 rounded focus:ring-green-500"
                                            />
                                            <label
                                                htmlFor="is_periode_aktif"
                                                className="text-sm font-medium text-green-700 dark:text-green-300"
                                            >
                                                Jadikan sebagai periode aktif (akan menonaktifkan periode lain)
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                {/* Action Buttons */}
                                <div className="flex items-center gap-4 pt-6 border-t border-gray-200 dark:border-purple-500/20">
                                    <button
                                        type="button"
                                        onClick={() => window.history.back()}
                                        className="px-4 py-2 border border-purple-300 dark:border-purple-500/40 text-purple-600 dark:text-purple-400 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900/30 transition-all duration-200 flex items-center gap-2"
                                    >
                                        <ArrowLeftIcon className="w-4 h-4" />
                                        Kembali
                                    </button>
                                    <button
                                        type="submit"
                                        disabled={processing}
                                        className="flex-1 px-6 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-lg hover:from-purple-700 hover:to-indigo-700 transition-all duration-200 font-medium shadow-lg shadow-purple-500/25 disabled:opacity-50 disabled:cursor-not-allowed"
                                    >
                                        {processing ? "Memperbarui..." : "Perbarui Tahun Akademik"}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}