import { getAulaContext } from "@/lib/data/aula-context";
import AulaSelector from "@/components/dashboard/AulaSelector";
import { Suspense } from "react";
import { notFound } from "next/navigation";
import { getAulaAccess } from "@/lib/aula/access";
import AulaForum from "@/components/dashboard/aula/AulaForum";
import DashboardBreadcrumbs from "@/components/dashboard/DashboardBreadcrumbs";
import Loading from "@/components/ui/Loading";
export default function Page({
  params,
  searchParams,
}: {
  searchParams: Promise<{ modulo?: string }>;
  params: Promise<{
    aulaId: string;
  }>;
}) {
  return (
    <Suspense fallback={<Loading />}>
      <Content params={params} searchParams={searchParams} />
    </Suspense>
  );
}
async function Content({
  params,
  searchParams,
}: {
  searchParams: Promise<{ modulo?: string }>;
  params: Promise<{
    aulaId: string;
  }>;
}) {
  const { aulaId } = await params;
  const { aula, course } = await getAulaAccess(Number(aulaId));
  const { aulas } = await getAulaContext();
  const { modulo } = await searchParams;
  const courseModule = modulo
    ? course.modulos.find((m) => m.id === modulo)
    : course.modulos.find((m) => m.componentes.foro);
  if (!courseModule?.componentes.foro) notFound();
  return (
    <section className="space-y-5 p-4 sm:p-6">
      <DashboardBreadcrumbs
        items={[
          { label: "Inicio", href: "/" },
          { label: "Mi aula", href: `/aula/${aulaId}` },
          { label: "Foro" },
        ]}
      />
      <div>
        <h1 className="text-2xl font-semibold">Foro · {courseModule.titulo}</h1>
        <p className="text-sm text-zinc-500">{aula.aul_curso_nombre}</p>
      </div>
      <AulaSelector
        syncOnly
        syncOnMount
        selected={aula.aul_id}
        aulas={aulas.map((a) => ({
          id: a.aul_id,
          nombre: a.aul_curso_nombre || "Curso",
          clave: a.aul_clave_registro || "",
        }))}
      />
      <nav aria-label="Foros por módulo" className="flex flex-wrap gap-3">
        {course.modulos
          .filter((m) => m.componentes.foro)
          .map((m) => (
            <a
              key={m.id}
              href={`/aula/${aulaId}/foro?modulo=${encodeURIComponent(m.id)}`}
              aria-current={m.id === courseModule.id ? "page" : undefined}
              className="rounded-xl border border-zinc-200 px-3 py-2 text-sm text-[#9d2449] aria-[current=page]:bg-[#9d2449]/10"
            >
              {m.titulo}
            </a>
          ))}
      </nav>
      <AulaForum
        key={courseModule.id}
        moduleId={courseModule.id}
        materials={
          course.componentes.material
            ? course.materiales
                .filter((m) => m.moduloId === courseModule.id)
                .map((m) => ({ id: m.id, titulo: m.titulo }))
            : []
        }
        aulaId={aula.aul_id}
        tasks={
          course.componentes.tareas
            ? course.sesiones
                .filter((s) => s.tipo === "tarea" && s.moduloId === courseModule.id)
                .map((s) => ({ id: s.id, titulo: s.titulo }))
            : []
        }
      />
    </section>
  );
}