import { neoValidasiRoute } from "@/lib/neoValidasiRoute";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, Link } from "@inertiajs/react";
import {
    CheckCircleIcon,
    XCircleIcon,
    InformationCircleIcon,
    UserIcon,
    AcademicCapIcon,
    DocumentTextIcon,
    ArrowLeftIcon,
    ExclamationTriangleIcon,
    BuildingOfficeIcon,
    CalendarIcon,
    IdentificationIcon,
    EnvelopeIcon,
    PhoneIcon,
    CakeIcon,
    MapPinIcon,
    BanknotesIcon,
    CreditCardIcon,
    UserGroupIcon,
} from "@heroicons/react/24/solid";

export default function Show({ mahasiswa, neofeederValidation }) {
    return (
        <AuthenticatedLayout>
            <Head title={`Detail Validasi: ${mahasiswa.nim}`} />

            <div className="max-w-[1600px] mx-auto p-6 space-y-6">
                {/* HEADER */}
                <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                    <div className="flex items-center gap-3">
                        <div className="p-2 rounded-lg bg-purple-100 dark:bg-purple-800/40">
                            <UserIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
                        </div>
                        <div>
                            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
                                Detail Validasi Mahasiswa
                            </h1>
                            <p className="text-sm text-gray-600 dark:text-purple-300/80 mt-1">
                                Format Neofeeder: {mahasiswa.nim} -{" "}
                                {mahasiswa.nama}
                            </p>
                        </div>
                    </div>
                    <div className="flex gap-2">
                        <Link
                            href={neoValidasiRoute("validasi-mahasiswa.index")}
                            className="px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition flex items-center gap-2"
                        >
                            <ArrowLeftIcon className="w-4 h-4" />
                            Kembali ke Daftar
                        </Link>
                    </div>
                </div>

                {/* INFO CARD */}
                <div className="bg-white dark:bg-purple-900/10 rounded-xl p-6 shadow-sm border border-purple-200 dark:border-purple-700">
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                        {/* Basic Info */}
                        <div className="space-y-2">
                            <h3 className="font-semibold text-gray-700 dark:text-gray-300 flex items-center gap-2 mb-3">
                                <IdentificationIcon className="w-4 h-4 text-purple-600 dark:text-purple-400" />
                                Identitas Dasar
                            </h3>
                            <div className="space-y-3">
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        NIM
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block break-all">
                                        {mahasiswa.nim || "-"}
                                    </span>
                                </div>
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        Nama
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block break-words">
                                        {mahasiswa.nama || "-"}
                                    </span>
                                </div>
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        NIK
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block break-all">
                                        {mahasiswa.nik || "-"}
                                    </span>
                                </div>
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        NISN
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block break-all">
                                        {mahasiswa.nisn || "-"}
                                    </span>
                                </div>
                            </div>
                        </div>

                        {/* Prodi & Kampus Info */}
                        <div className="space-y-2">
                            <h3 className="font-semibold text-gray-700 dark:text-gray-300 flex items-center gap-2 mb-3">
                                <AcademicCapIcon className="w-4 h-4 text-purple-600 dark:text-purple-400" />
                                Akademik
                            </h3>
                            <div className="space-y-3">
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        Program Studi
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block break-words">
                                        {mahasiswa.prodi?.nama || "-"}
                                    </span>
                                </div>
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        Kampus
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block break-words">
                                        {mahasiswa.kampus?.nama_kampus || "-"}
                                    </span>
                                </div>
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        Tahun Akademik
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block break-words">
                                        {mahasiswa.tahunAkademik?.nama || "-"}
                                    </span>
                                </div>
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        Status
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white">
                                        {mahasiswa.status || "-"}
                                    </span>
                                </div>
                            </div>
                        </div>

                        {/* Status Validasi */}
                        <div className="space-y-2">
                            <h3 className="font-semibold text-gray-700 dark:text-gray-300 flex items-center gap-2 mb-3">
                                <CheckCircleIcon className="w-4 h-4 text-purple-600 dark:text-purple-400" />
                                Status Validasi
                            </h3>
                            <div className="space-y-3">
                                <div>
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block mb-2">
                                        Validasi Internal
                                    </span>
                                    <div
                                        className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium whitespace-nowrap ${
                                            mahasiswa.is_validated
                                                ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300"
                                                : "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300"
                                        }`}
                                    >
                                        {mahasiswa.is_validated ? (
                                            <>
                                                <CheckCircleIcon className="w-4 h-4" />
                                                Valid Internal
                                            </>
                                        ) : (
                                            <>
                                                <ExclamationTriangleIcon className="w-4 h-4" />
                                                Pending Internal
                                            </>
                                        )}
                                    </div>
                                </div>
                                <div>
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block mb-2">
                                        Status Neofeeder
                                    </span>
                                    <div
                                        className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium whitespace-nowrap ${
                                            mahasiswa.neofeeder_status ===
                                            "synced"
                                                ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"
                                                : mahasiswa.neofeeder_status ===
                                                    "validated"
                                                  ? "bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300"
                                                  : mahasiswa.neofeeder_status ===
                                                      "error"
                                                    ? "bg-rose-100 text-rose-800 dark:bg-rose-900/30 dark:text-rose-300"
                                                    : "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
                                        }`}
                                    >
                                        {mahasiswa.neofeeder_status ===
                                            "synced" && (
                                            <>
                                                <CheckCircleIcon className="w-4 h-4" />
                                                Sudah Sync
                                            </>
                                        )}
                                        {mahasiswa.neofeeder_status ===
                                            "validated" && (
                                            <>
                                                <CheckCircleIcon className="w-4 h-4" />
                                                Siap Sync
                                            </>
                                        )}
                                        {mahasiswa.neofeeder_status ===
                                            "error" && (
                                            <>
                                                <XCircleIcon className="w-4 h-4" />
                                                Error
                                            </>
                                        )}
                                        {(!mahasiswa.neofeeder_status ||
                                            mahasiswa.neofeeder_status ===
                                                "pending") && (
                                            <>
                                                <ExclamationTriangleIcon className="w-4 h-4" />
                                                Pending
                                            </>
                                        )}
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Contact Info */}
                        <div className="space-y-2">
                            <h3 className="font-semibold text-gray-700 dark:text-gray-300 flex items-center gap-2 mb-3">
                                <InformationCircleIcon className="w-4 h-4 text-purple-600 dark:text-purple-400" />
                                Kontak & Personal
                            </h3>
                            <div className="space-y-3">
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        Email
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block break-all">
                                        {mahasiswa.email_pribadi || "-"}
                                    </span>
                                </div>
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        No. HP
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block break-all">
                                        {mahasiswa.no_hp || "-"}
                                    </span>
                                </div>
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        Tempat Lahir
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block break-words">
                                        {mahasiswa.tempat_lahir || "-"}
                                    </span>
                                </div>
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        Tanggal Lahir
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block">
                                        {mahasiswa.tanggal_lahir
                                            ? new Date(
                                                  mahasiswa.tanggal_lahir,
                                              ).toLocaleDateString("id-ID")
                                            : "-"}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* VALIDATION DETAILS */}
                <div className="bg-white dark:bg-purple-900/10 rounded-xl shadow-sm border border-purple-200 dark:border-purple-700 overflow-hidden">
                    <div className="p-6 border-b border-purple-100 dark:border-purple-700/40">
                        <h2 className="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
                            <CheckCircleIcon className="w-5 h-5 text-purple-600 dark:text-purple-400" />
                            Validasi Format Neofeeder
                        </h2>
                        <p className="text-sm text-gray-600 dark:text-purple-300/80 mt-1">
                            Validasi kelengkapan data untuk sinkronisasi ke
                            Neofeeder
                        </p>
                    </div>

                    {/* Progress Bar */}
                    <div className="px-6 pt-4">
                        <div className="mb-2 flex justify-between">
                            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                                Progress Validasi:{" "}
                                {neofeederValidation?.stats?.progress || 0}%
                            </span>
                            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                                {neofeederValidation?.stats?.passed || 0} dari{" "}
                                {neofeederValidation?.stats?.total || 0}{" "}
                                terpenuhi
                            </span>
                        </div>
                        <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
                            <div
                                className={`h-2.5 rounded-full ${
                                    neofeederValidation?.stats?.is_valid
                                        ? "bg-emerald-600"
                                        : "bg-blue-600"
                                }`}
                                style={{
                                    width: `${neofeederValidation?.stats?.progress || 0}%`,
                                }}
                            ></div>
                        </div>
                        <div className="mt-2 text-sm text-gray-500 dark:text-gray-400">
                            {neofeederValidation?.stats?.passed_required || 0}{" "}
                            dari {neofeederValidation?.stats?.required || 0}{" "}
                            data wajib terpenuhi
                        </div>
                    </div>

                    {/* Validation Categories */}
                    <div className="p-6 space-y-6">
                        {neofeederValidation?.categories?.map(
                            (category, index) => (
                                <div key={index} className="space-y-3">
                                    <h3 className="font-semibold text-gray-800 dark:text-gray-300 text-lg border-b pb-2 border-purple-100 dark:border-purple-700/40">
                                        {category.category}
                                    </h3>
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                                        {category.items.map(
                                            (item, itemIndex) => (
                                                <div
                                                    key={itemIndex}
                                                    className={`p-3 rounded-lg border ${
                                                        item.value
                                                            ? "bg-emerald-50 dark:bg-emerald-900/10 border-emerald-200 dark:border-emerald-700/30"
                                                            : "bg-rose-50 dark:bg-rose-900/10 border-rose-200 dark:border-rose-700/30"
                                                    }`}
                                                >
                                                    <div className="flex items-center justify-between">
                                                        <div className="flex items-center gap-2">
                                                            {item.value ? (
                                                                <CheckCircleIcon className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
                                                            ) : (
                                                                <XCircleIcon className="w-4 h-4 text-rose-600 dark:text-rose-400" />
                                                            )}
                                                            <span
                                                                className={`text-sm font-medium ${
                                                                    item.value
                                                                        ? "text-emerald-800 dark:text-emerald-300"
                                                                        : "text-rose-800 dark:text-rose-300"
                                                                }`}
                                                            >
                                                                {item.label}
                                                            </span>
                                                        </div>
                                                        {item.required && (
                                                            <span className="text-xs px-2 py-1 rounded-full bg-purple-100 text-purple-800 dark:bg-purple-800/30 dark:text-purple-300">
                                                                Wajib
                                                            </span>
                                                        )}
                                                    </div>
                                                    <p className="text-xs mt-2 text-gray-600 dark:text-gray-400">
                                                        {item.message}
                                                    </p>
                                                </div>
                                            ),
                                        )}
                                    </div>
                                </div>
                            ),
                        )}
                    </div>

                    {/* Summary */}
                    <div className="px-6 py-4 bg-gray-50 dark:bg-gray-900/30 border-t border-gray-200 dark:border-gray-700">
                        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                            <div>
                                <h4 className="font-semibold text-gray-900 dark:text-white">
                                    Status Validasi Neofeeder:
                                </h4>
                                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                    {neofeederValidation?.stats?.is_valid
                                        ? "✅ Semua data wajib sudah terpenuhi. Mahasiswa siap divalidasi Neofeeder."
                                        : "❌ Beberapa data wajib belum terpenuhi. Harap lengkapi terlebih dahulu."}
                                </p>
                            </div>
                            {!neofeederValidation?.stats?.is_valid && (
                                <div className="text-sm text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 p-3 rounded-lg">
                                    <p className="font-medium">
                                        Data belum lengkap untuk validasi
                                        Neofeeder
                                    </p>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
