import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, Link } from "@inertiajs/react";

export default function Show({ convalidacion, detalles = [] }) {
    const estudiante = convalidacion?.estudiante ?? null;
    const periodo = convalidacion?.periodo ?? null;

    const estadoClase = (estado) => {
        if (estado === "Aprobado") {
            return "bg-emerald-100 text-emerald-800";
        }

        if (estado === "Rechazado") {
            return "bg-rose-100 text-rose-800";
        }

        return "bg-amber-100 text-amber-800";
    };

    return (
        <AuthenticatedLayout
            header={
                <div className="flex flex-wrap items-center justify-between gap-4">
                    <div>
                        <h1 className="text-2xl font-bold text-slate-900">
                            Detalle de Convalidación
                        </h1>

                        <p className="mt-1 text-sm text-slate-500">
                            Información general del expediente y unidades didácticas registradas.
                        </p>
                    </div>

                    <Link
                        href={route("convalidaciones.index")}
                        className="rounded-lg border border-slate-300 px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-100"
                    >
                        &larr; Volver
                    </Link>
                </div>
            }
        >
            <Head
                title={`Detalle Convalidación #${convalidacion?.id ?? ""}`}
            />

            <div className="space-y-6">
                {/* DATOS GENERALES */}
                <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                    <div className="mb-5 flex flex-wrap items-start justify-between gap-4 border-b border-slate-100 pb-4">
                        <div>
                            <h2 className="text-lg font-bold text-slate-900">
                                Datos del Expediente
                            </h2>

                            <p className="mt-1 text-xs text-slate-500">
                                Información principal asociada a la convalidación.
                            </p>
                        </div>

                        <span
                            className={`inline-flex rounded-full px-3 py-1 text-xs font-bold ${estadoClase(
                                convalidacion?.estado,
                            )}`}
                        >
                            {convalidacion?.estado ?? "Sin estado"}
                        </span>
                    </div>

                    <div className="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
                        <div>
                            <div className="text-[11px] font-bold uppercase tracking-wide text-slate-400">
                                Estudiante
                            </div>

                            <div className="mt-1 text-sm font-semibold text-slate-800">
                                {estudiante
                                    ? `${estudiante.apellidos}, ${estudiante.nombres}`
                                    : "---"}
                            </div>
                        </div>

                        <div>
                            <div className="text-[11px] font-bold uppercase tracking-wide text-slate-400">
                                DNI
                            </div>

                            <div className="mt-1 text-sm font-semibold text-slate-800">
                                {estudiante?.dni || "---"}
                            </div>
                        </div>

                        <div>
                            <div className="text-[11px] font-bold uppercase tracking-wide text-slate-400">
                                Periodo Académico
                            </div>

                            <div className="mt-1 text-sm font-semibold text-slate-800">
                                {periodo?.nombre || "---"}
                            </div>
                        </div>

                        <div>
                            <div className="text-[11px] font-bold uppercase tracking-wide text-slate-400">
                                Institución de Origen
                            </div>

                            <div className="mt-1 text-sm font-semibold text-slate-800">
                                {convalidacion?.institucion_origen || "---"}
                            </div>
                        </div>

                        <div>
                            <div className="text-[11px] font-bold uppercase tracking-wide text-slate-400">
                                Fecha de Convalidación
                            </div>

                            <div className="mt-1 text-sm font-semibold text-slate-800">
                                {convalidacion?.fecha_convalidacion || "---"}
                            </div>
                        </div>

                        <div>
                            <div className="text-[11px] font-bold uppercase tracking-wide text-slate-400">
                                Código / ID
                            </div>

                            <div className="mt-1 text-sm font-semibold text-slate-800">
                                {convalidacion?.codigo_expediente
                                    ? convalidacion.codigo_expediente
                                    : `#${convalidacion?.id ?? "---"}`}
                            </div>
                        </div>
                    </div>

                    <div className="mt-5">
                        <div className="text-[11px] font-bold uppercase tracking-wide text-slate-400">
                            Observaciones / Sustento Técnico
                        </div>

                        <div className="mt-2 rounded-lg border border-slate-200 bg-slate-50 p-3 text-sm text-slate-700">
                            {convalidacion?.observaciones?.trim()
                                ? convalidacion.observaciones
                                : "Sin observaciones registradas."}
                        </div>
                    </div>
                </div>

                {/* DETALLES */}
                <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
                    <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-5 py-4">
                        <div>
                            <h2 className="text-base font-bold text-slate-900">
                                Unidades Didácticas Convalidadas
                            </h2>

                            <p className="mt-1 text-xs text-slate-500">
                                Cada unidad se administra y edita de forma individual.
                            </p>
                        </div>

                        <span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-700">
                            {detalles.length} unidad
                            {detalles.length === 1 ? "" : "es"}
                        </span>
                    </div>

                    <div className="overflow-x-auto">
                        <table className="min-w-full divide-y divide-slate-200">
                            <thead className="bg-slate-50">
                                <tr>
                                    <th className="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">
                                        Unidad Didáctica Destino
                                    </th>

                                    <th className="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-slate-500">
                                        Unidad / Curso de Origen
                                    </th>

                                    <th className="px-4 py-3 text-center text-xs font-bold uppercase tracking-wide text-slate-500">
                                        Nota
                                    </th>

                                    <th className="px-4 py-3 text-center text-xs font-bold uppercase tracking-wide text-slate-500">
                                        Estado
                                    </th>

                                    <th className="px-4 py-3 text-right text-xs font-bold uppercase tracking-wide text-slate-500">
                                        Acciones
                                    </th>
                                </tr>
                            </thead>

                            <tbody className="divide-y divide-slate-100">
                                {detalles.length > 0 ? (
                                    detalles.map((detalle) => (
                                        <tr
                                            key={detalle.id}
                                            className="transition hover:bg-slate-50"
                                        >
                                            <td className="px-4 py-3">
                                                <div className="text-sm font-semibold text-slate-800">
                                                    {detalle.curso_destino?.nombre || "---"}
                                                </div>
                                            </td>

                                            <td className="px-4 py-3">
                                                <div className="text-sm font-medium text-slate-800">
                                                    {detalle.curso_origen || "---"}
                                                </div>

                                                <div className="mt-0.5 text-xs text-slate-400">
                                                    {detalle.institucion_origen || "---"}
                                                </div>
                                            </td>

                                            <td className="px-4 py-3 text-center text-sm font-bold text-slate-800">
                                                {detalle.nota_origen !== null &&
                                                detalle.nota_origen !== undefined &&
                                                detalle.nota_origen !== ""
                                                    ? Number(
                                                          detalle.nota_origen,
                                                      ).toFixed(1)
                                                    : "---"}
                                            </td>

                                            <td className="px-4 py-3 text-center">
                                                <span
                                                    className={`inline-flex rounded-full px-2.5 py-0.5 text-xs font-semibold ${estadoClase(
                                                        detalle.estado,
                                                    )}`}
                                                >
                                                    {detalle.estado}
                                                </span>
                                            </td>

                                            <td className="px-4 py-3">
                                                <div className="flex items-center justify-end gap-2">
                                                    <Link
                                                        href={route(
                                                            "convalidaciones.edit",
                                                            detalle.id,
                                                        )}
                                                        className="inline-flex items-center gap-1 rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs font-semibold text-slate-700 transition hover:bg-slate-100"
                                                    >
                                                        <svg
                                                            className="h-3.5 w-3.5"
                                                            fill="none"
                                                            viewBox="0 0 24 24"
                                                            stroke="currentColor"
                                                            strokeWidth="2"
                                                        >
                                                            <path
                                                                strokeLinecap="round"
                                                                strokeLinejoin="round"
                                                                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                                                            />
                                                        </svg>

                                                        Editar
                                                    </Link>

                                                    <a
                                                        href={route(
                                                            "convalidaciones.pdf",
                                                            detalle.id,
                                                        )}
                                                        target="_blank"
                                                        rel="noopener noreferrer"
                                                        className="inline-flex items-center gap-1 rounded-md border border-teal-200 bg-teal-50 px-3 py-1.5 text-xs font-semibold text-teal-700 transition hover:bg-teal-100"
                                                    >
                                                        <svg
                                                            className="h-3.5 w-3.5"
                                                            fill="none"
                                                            viewBox="0 0 24 24"
                                                            stroke="currentColor"
                                                            strokeWidth="2"
                                                        >
                                                            <path
                                                                strokeLinecap="round"
                                                                strokeLinejoin="round"
                                                                d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"
                                                            />
                                                            <path
                                                                strokeLinecap="round"
                                                                strokeLinejoin="round"
                                                                d="M14 2v6h6M16 13H8m8 4H8m2-8H8"
                                                            />
                                                        </svg>

                                                        PDF
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    ))
                                ) : (
                                    <tr>
                                        <td
                                            colSpan={5}
                                            className="px-4 py-12 text-center"
                                        >
                                            <p className="text-sm font-semibold text-slate-600">
                                                No hay unidades didácticas asociadas a esta convalidación.
                                            </p>
                                        </td>
                                    </tr>
                                )}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
