import { getAulaContext } from "@/lib/data/aula-context";
import AulaSelector from "@/components/dashboard/AulaSelector";
import Link from "next/link";
import SystemAlert from "@/components/ui/SystemAlert";
import { Suspense } from "react";
import { notFound } from "next/navigation";
import Loading from "@/components/ui/Loading";
import DashboardBreadcrumbs from "@/components/dashboard/DashboardBreadcrumbs";
import DashboardAlumnoRecorrido from "@/components/dashboard/DashboardAlumnoRecorrido";
import { getLearningState } from "@/lib/alumno/learning";
import { getContenidoAlumno } from "@/lib/data/contenido-alumno";

type Props = {
  params: Promise<{ aulaId: string }>;
  searchParams: Promise<{ actividad?: string; entrada?: string }>;
};
export default function AulaPage({ params, searchParams }: Props) {
  return (
    <Suspense fallback={<Loading />}>
      <AulaContent params={params} searchParams={searchParams} />
    </Suspense>
  );
}
async function AulaContent({ params, searchParams }: Props) {
  const { aulaId } = await params;
  const { actividad, entrada } = await searchParams;
  if (!/^[1-9]\d*$/.test(aulaId) || !Number.isSafeInteger(Number(aulaId))) notFound();
  const { aulas: contextAulas } = await getAulaContext();
  const content = await getContenidoAlumno(Number(aulaId));
  if (!content) notFound();
  const progreso = content.estado === "disponible" ? await getLearningState(Number(aulaId)) : null;
  const showNextEntry =
    entrada === "siguiente" && content.estado === "disponible" && !!content.siguienteModulo;
  const moduleTitle =
    content.estado === "disponible"
      ? ((showNextEntry ? content.siguienteModulo?.titulo : content.modulos[0]?.titulo) ?? "Curso")
      : "Curso";
  return (
    <section className="mx-auto w-full space-y-5 p-4 sm:p-6">
      <DashboardBreadcrumbs
        items={[
          { label: "Inicio", href: "/" },
          { label: "Mis cursos", href: "/cursos" },
          { label: moduleTitle },
        ]}
      />
      <div className="flex items-center justify-between gap-4">
        <h1 className="text-2xl font-semibold">{moduleTitle}</h1>
        {content.estado === "disponible" && content.foroActivo && (
          <Link
            href={`/aula/${aulaId}/foro?modulo=${encodeURIComponent(content.modulos[0]?.id ?? "")}`}
            className="action-link text-sm font-medium text-[#9d2449]"
          >
            Foro del módulo
          </Link>
        )}
      </div>
      {contextAulas.some((a) => a.aul_id === Number(aulaId)) && (
        <AulaSelector
          syncOnly
          syncOnMount
          selected={Number(aulaId)}
          aulas={contextAulas.map((a) => ({
            id: a.aul_id,
            nombre: a.aul_curso_nombre || "Curso",
            clave: a.aul_clave_registro || "",
          }))}
        />
      )}
      {content.estado === "disponible" && progreso ? (
        <DashboardAlumnoRecorrido
          key={`${entrada}:${actividad}:${progreso.modulos.actualId}:${progreso.modulos.completado}:${progreso.modulos.pendientes.join(",")}`}
          aulaId={Number(aulaId)}
          enrollmentId={progreso.enrollmentId}
          initialProgress={progreso}
          initialId={actividad}
          initialNextEntry={showNextEntry}
          content={content}
        />
      ) : (
        <SystemAlert
          status={content.estado === "sin_publicar" ? "default" : "danger"}
          title={
            content.estado === "sin_publicar"
              ? "Contenido pendiente de publicación"
              : "No se pudo cargar el aula"
          }
        >
          {content.estado === "sin_publicar"
            ? "El instructor todavía no ha publicado el contenido del curso."
            : "Inténtalo de nuevo más tarde."}
        </SystemAlert>
      )}
    </section>
  );
}