import DashboardBreadcrumbs from "@/components/dashboard/DashboardBreadcrumbs";
import { Suspense } from "react";
import { Card, ProgressBar } from "@heroui/react";
import Loading from "@/components/ui/Loading";
import { getAlumnosDeMiAula } from "@/lib/data/cursos";

type AlumnosPageProps = { params: Promise<{ aulaId: string }> };

export default function AlumnosPage({ params }: AlumnosPageProps) {
  return (
    <Suspense fallback={<Loading />}>
      <AlumnosContent params={params} />
    </Suspense>
  );
}

async function AlumnosContent({ params }: AlumnosPageProps) {
  const { aulaId } = await params;
  const aula = await getAlumnosDeMiAula(aulaId);
  return (
    <section className="space-y-4 p-4">
      <DashboardBreadcrumbs
        items={[
          { label: "Inicio", href: "/" },
          { label: "Mis cursos", href: "/cursos" },
          { label: "Alumnos del aula" },
        ]}
      />
      <div>
        <h1 className="text-2xl font-semibold">Alumnos del aula</h1>
        <p className="mt-1 text-sm text-zinc-500">
          {aula.aul_curso_nombre || "Curso sin nombre"} · {aula.aul_clave_registro}
        </p>
      </div>
      <Card>
        {aula.alumnos.length > 0 ? (
          <ul className="divide-y divide-zinc-200">
            {aula.alumnos.map((alumno) => {
              const raw = Number(alumno.aa_progreso_porcentaje ?? 0);
              const avance = Number.isFinite(raw) ? Math.max(0, Math.min(100, raw)) : 0;
              return (
                <li
                  key={alumno.aa_id}
                  className="flex flex-col gap-3 py-4 md:flex-row md:items-center md:justify-between"
                >
                  <div>
                    <h2 className="font-medium">
                      {[alumno.aa_nombre, alumno.aa_ape_pat, alumno.aa_ape_mat]
                        .filter(Boolean)
                        .join(" ") || "Alumno sin nombre"}
                    </h2>
                    <p className="text-sm text-zinc-500">
                      {alumno.aa_num_control || "Sin número de control"}
                    </p>
                  </div>
                  <div className="w-full space-y-1 md:w-48">
                    <p className="text-xs text-zinc-500">Avance: {avance}%</p>
                    <ProgressBar aria-label={`Avance del alumno: ${avance}%`} value={avance}>
                      <ProgressBar.Track>
                        <ProgressBar.Fill className="bg-[#9d2449]" />
                      </ProgressBar.Track>
                    </ProgressBar>
                  </div>
                </li>
              );
            })}
          </ul>
        ) : (
          <p className="text-sm text-zinc-500">Esta aula todavía no tiene alumnos registrados.</p>
        )}
      </Card>
    </section>
  );
}