import Link from "next/link";
import { Card, ProgressBar } from "@heroui/react";
import { ChartNoAxesCombined } from "lucide-react";
import type { DashboardAula } from "@/lib/data/dashboard";

export default function DashboardPendientesCard({ aula }: { aula: DashboardAula | null }) {
  const avances = (aula?.alumnos ?? []).map((alumno) => {
    const avance = Number(alumno.aa_progreso_porcentaje ?? 0);
    return Number.isFinite(avance) ? Math.min(100, Math.max(0, avance)) : 0;
  });
  const total = avances.length;
  const promedio =
    total > 0 ? Math.round(avances.reduce((sum, avance) => sum + avance, 0) / total) : 0;
  const grupos = [
    {
      label: "Sin iniciar",
      total: avances.filter((avance) => avance === 0).length,
      color: "bg-zinc-300",
    },
    {
      label: "En curso",
      total: avances.filter((avance) => avance > 0 && avance < 100).length,
      color: "bg-[#9d2449]",
    },
    {
      label: "Al 100 %",
      total: avances.filter((avance) => avance === 100).length,
      color: "bg-emerald-500",
    },
  ];
  return (
    <Card className="dashboard-card h-full gap-5 border border-zinc-200/70 p-5 shadow-none sm:p-6">
      <div className="flex items-center justify-between gap-3">
        <div>
          <h2 className="text-base font-semibold text-zinc-800">Avance del grupo</h2>
          <p className="mt-1 text-xs text-zinc-500">Seguimiento del aula principal</p>
        </div>
        <ChartNoAxesCombined className="size-5 text-zinc-400" aria-hidden="true" />
      </div>
      {total > 0 ? (
        <>
          <div>
            <p className="text-3xl font-semibold tracking-tight text-zinc-900">
              {promedio}
              <span className="ml-0.5 text-lg text-zinc-400">%</span>
            </p>
            <p className="mt-1 text-xs text-zinc-500">de avance promedio</p>
            <ProgressBar className="mt-4" aria-label="Avance promedio del grupo" value={promedio}>
              <ProgressBar.Track className="h-2">
                <ProgressBar.Fill className="bg-[#9d2449]" />
              </ProgressBar.Track>
            </ProgressBar>
          </div>
          <div className="grid grid-cols-3 gap-2 border-t border-zinc-100 pt-4">
            {grupos.map((grupo) => (
              <div key={grupo.label}>
                <p className="text-xl font-semibold text-zinc-800">{grupo.total}</p>
                <p className="mt-1 flex items-center gap-1.5 text-[11px] text-zinc-500">
                  <span className={`size-1.5 shrink-0 rounded-full ${grupo.color}`} />
                  {grupo.label}
                </p>
              </div>
            ))}
          </div>
        </>
      ) : (
        <p className="py-3 text-sm text-zinc-500">
          {aula
            ? "El avance aparecerá cuando se registren alumnos en esta aula."
            : "Tu seguimiento aparecerá cuando tengas un aula asignada."}
        </p>
      )}
      <Link
        href={aula ? `/cursos/${aula.aul_id}/alumnos` : "/cursos"}
        className="action-link mt-auto text-xs font-medium text-[#9d2449]"
      >
        {aula ? "Ver avance de alumnos" : "Ver mis cursos"}
      </Link>
    </Card>
  );
}