import { getAulaContext } from "@/lib/data/aula-context";
import AulaSelector from "@/components/dashboard/AulaSelector";
import SystemAlert from "@/components/ui/SystemAlert";
import { Suspense } from "react";
import Link from "next/link";
import Loading from "@/components/ui/Loading";
import DashboardBreadcrumbs from "@/components/dashboard/DashboardBreadcrumbs";
import DashboardAulaForm from "@/components/dashboard/DashboardAulaForm";
import { getGestionAula } from "@/lib/data/aula";
import { loadCourse, onlineRevision } from "@/lib/aula/persistence";
import { formatDisplayName } from "@/lib/format-display";

type Props = { params: Promise<{ aulaId: string }>; searchParams: Promise<{ seccion?: string }> };
export default function GestionAulaPage({ params, searchParams }: Props) {
  return (
    <Suspense fallback={<Loading />}>
      <GestionAulaContent params={params} searchParams={searchParams} />
    </Suspense>
  );
}
async function GestionAulaContent({ params, searchParams }: Props) {
  const { aulaId } = await params;
  const { seccion } = await searchParams;
  const { aulas: contextAulas } = await getAulaContext();
  const { aula, online, instructorId } = await getGestionAula(aulaId);
  let document;
  try {
    document = loadCourse(online).document;
  } catch {
    return (
      <section className="p-6">
        <SystemAlert status="danger" title="No se pudo abrir la configuración">
          El contenido almacenado tiene un formato incompatible. No se ha modificado. Revisa los
          datos del curso antes de editarlo.
        </SystemAlert>
      </section>
    );
  }
  return (
    <section className="mx-auto w-full max-w-8xl space-y-6 p-4 sm:p-6">
      <DashboardBreadcrumbs
        items={[
          { label: "Inicio", href: "/" },
          { label: "Mis cursos", href: "/cursos" },
          { label: "Gestionar aula" },
        ]}
      />
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div>
          <h1 className="text-2xl font-semibold">Gestionar aula</h1>
          <p className="mt-1 text-sm text-zinc-500">
            {formatDisplayName(aula.aul_curso_nombre || "Curso sin nombre")} ·{" "}
            {aula.aul_clave_registro}
          </p>
        </div>
        <Link
          href={`/cursos/${aula.aul_id}/alumnos`}
          className="action-link text-sm text-[#9d2449]"
        >
          Ver avance
        </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 || "",
          }))}
        />
      )}
      <DashboardAulaForm
        key={seccion ?? "videos"}
        initialTab={seccion}
        aulaId={aula.aul_id}
        instructorId={instructorId}
        titulo={formatDisplayName(aula.aul_curso_nombre || "Curso sin nombre")}
        horas={Number(aula.aul_horas_totales ?? 0)}
        initial={document}
        version={onlineRevision(online)}
      />
    </section>
  );
}