import { neoValidasiRoute } from "@/lib/neoValidasiRoute";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, Link } from "@inertiajs/react";
import {
    CheckCircleIcon,
    XCircleIcon,
    InformationCircleIcon,
    BookOpenIcon,
    AcademicCapIcon,
    DocumentTextIcon,
    ArrowLeftIcon,
    ExclamationTriangleIcon,
} from "@heroicons/react/24/solid";

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

            <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">
                            <BookOpenIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
                        </div>
                        <div className="min-w-0 flex-1">
                            <h1 className="text-2xl font-bold text-gray-900 dark:text-white truncate">
                                Detail Validasi Mata Kuliah
                            </h1>
                            <p className="text-sm text-gray-600 dark:text-purple-300/80 mt-1 truncate">
                                Format Neofeeder: {mataKuliah.kode_mk} - {mataKuliah.nama_mk}
                            </p>
                        </div>
                    </div>
                    <div className="flex gap-2">
                        <Link
                            href={neoValidasiRoute("validasi-matakuliah.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 whitespace-nowrap"
                        >
                            <ArrowLeftIcon className="w-4 h-4 flex-shrink-0" />
                            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-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">
                                <DocumentTextIcon className="w-4 h-4 text-purple-600 dark:text-purple-400 flex-shrink-0" />
                                <span className="truncate">Informasi Dasar</span>
                            </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">
                                        Kode
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block break-all min-w-0">
                                        {mataKuliah.kode_mk}
                                    </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 min-w-0">
                                        {mataKuliah.nama_mk}
                                    </span>
                                </div>
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        SKS
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block">
                                        {mataKuliah.sks_total}
                                    </span>
                                </div>
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        Semester
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block">
                                        {mataKuliah.semester || "-"}
                                    </span>
                                </div>
                            </div>
                        </div>

                        {/* Prodi 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 flex-shrink-0" />
                                <span className="truncate">Program Studi</span>
                            </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">
                                        Nama Prodi
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block break-words min-w-0">
                                        {mataKuliah.prodi?.nama || "-"}
                                    </span>
                                </div>
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        Kode Prodi
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block">
                                        {mataKuliah.prodi?.kode || "-"}
                                    </span>
                                </div>
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        Kode Neofeeder
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block break-all min-w-0">
                                        {mataKuliah.prodi?.kode_prodi_neofeeder || "Belum diatur"}
                                    </span>
                                </div>
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        Jenjang
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block">
                                        {mataKuliah.prodi?.jenjang || "-"}
                                    </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 flex-shrink-0" />
                                <span className="truncate">Status Validasi</span>
                            </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 min-w-0 ${
                                            mataKuliah.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"
                                        }`}
                                    >
                                        {mataKuliah.is_validated ? (
                                            <>
                                                <CheckCircleIcon className="w-4 h-4 flex-shrink-0" />
                                                <span className="truncate">Valid Internal</span>
                                            </>
                                        ) : (
                                            <>
                                                <ExclamationTriangleIcon className="w-4 h-4 flex-shrink-0" />
                                                <span className="truncate">Pending Internal</span>
                                            </>
                                        )}
                                    </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 min-w-0 ${
                                            mataKuliah.neofeeder_status === "synced"
                                                ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"
                                                : mataKuliah.neofeeder_status === "validated"
                                                ? "bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300"
                                                : mataKuliah.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"
                                        }`}
                                    >
                                        {mataKuliah.neofeeder_status === "synced" && (
                                            <>
                                                <CheckCircleIcon className="w-4 h-4 flex-shrink-0" />
                                                <span className="truncate">Sudah Sync</span>
                                            </>
                                        )}
                                        {mataKuliah.neofeeder_status === "validated" && (
                                            <>
                                                <CheckCircleIcon className="w-4 h-4 flex-shrink-0" />
                                                <span className="truncate">Siap Sync</span>
                                            </>
                                        )}
                                        {mataKuliah.neofeeder_status === "error" && (
                                            <>
                                                <XCircleIcon className="w-4 h-4 flex-shrink-0" />
                                                <span className="truncate">Error</span>
                                            </>
                                        )}
                                        {(!mataKuliah.neofeeder_status || mataKuliah.neofeeder_status === "pending") && (
                                            <>
                                                <ExclamationTriangleIcon className="w-4 h-4 flex-shrink-0" />
                                                <span className="truncate">Pending</span>
                                            </>
                                        )}
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Additional 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 flex-shrink-0" />
                                <span className="truncate">Informasi Tambahan</span>
                            </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">
                                        Jenis MK
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block">
                                        {mataKuliah.jenis_mk || "-"}
                                    </span>
                                </div>
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        Kelompok MK
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block">
                                        {mataKuliah.kelompok_mk || "-"}
                                    </span>
                                </div>
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        Metode Pembelajaran
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block break-words min-w-0">
                                        {mataKuliah.metode_pembelajaran || "-"}
                                    </span>
                                </div>
                                <div className="space-y-1">
                                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 block">
                                        ID Neofeeder
                                    </span>
                                    <span className="text-sm font-medium text-gray-900 dark:text-white block break-all min-w-0">
                                        {mataKuliah.neofeeder_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 flex-col sm:flex-row sm:justify-between gap-1 sm:gap-0">
                            <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 truncate">
                                    {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 min-w-0 ${
                                                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 gap-2">
                                                <div className="flex items-center gap-2 min-w-0">
                                                    {item.value ? (
                                                        <CheckCircleIcon className="w-4 h-4 text-emerald-600 dark:text-emerald-400 flex-shrink-0" />
                                                    ) : (
                                                        <XCircleIcon className="w-4 h-4 text-rose-600 dark:text-rose-400 flex-shrink-0" />
                                                    )}
                                                    <span
                                                        className={`text-sm font-medium truncate ${
                                                            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 flex-shrink-0 whitespace-nowrap">
                                                        Wajib
                                                    </span>
                                                )}
                                            </div>
                                            <p className="text-xs mt-2 text-gray-600 dark:text-gray-400 break-words">
                                                {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 className="min-w-0 flex-1">
                                <h4 className="font-semibold text-gray-900 dark:text-white truncate">
                                    Status Validasi Neofeeder:
                                </h4>
                                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1 break-words">
                                    {neofeederValidation?.stats?.is_valid
                                        ? "✅ Semua data wajib sudah terpenuhi. Mata kuliah 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 flex-shrink-0">
                                    <p className="font-medium whitespace-nowrap">
                                        Data belum lengkap untuk validasi Neofeeder
                                    </p>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
