import ManageAulaLink from "./ManageAulaLink";
import NextLink from "next/link";
import DashboardAlumnoAulaCard from "./DashboardAlumnoAulaCard";
import { Avatar, Button, Card, Label, Modal, ProgressBar } from "@heroui/react";
import { BookOpen, Building2, Users } from "lucide-react";
import type { DashboardAula } from "@/lib/data/dashboard";
import { formatDisplayName } from "@/lib/format-display";

export default function DashboardAulaCard({
  aula,
  role = "instructor",
}: {
  aula: DashboardAula | null;
  role?: "alumno" | "instructor";
}) {
  if (!aula)
    return (
      <Card className="dashboard-card flex h-full min-h-60 justify-center gap-3 border border-zinc-200/70 p-6 shadow-none">
        <BookOpen className="size-6 text-[#9d2449]" aria-hidden="true" />
        <h2 className="text-xl font-semibold">Tu próxima aula aparecerá aquí</h2>
        <p className="text-sm text-zinc-500">Aún no tienes un aula online asignada.</p>
        <NextLink href="/cursos" className="action-link text-sm text-[#9d2449]">
          Ver mis cursos
        </NextLink>
      </Card>
    );
  if (role === "alumno") return <DashboardAlumnoAulaCard aula={aula} />;
  return (
    <Card className="dashboard-card flex h-full min-w-0 flex-col justify-between gap-6 border border-zinc-200/70 p-5 shadow-none sm:p-7">
      <div>
        <div className="mb-5 flex flex-wrap items-center gap-2">
          <span className="inline-flex items-center gap-1.5 rounded-full bg-[#9d2449]/8 px-2.5 py-1 text-[11px] font-medium text-[#9d2449]">
            <BookOpen className="size-3" aria-hidden="true" />
            Aula principal
          </span>
          <span className="text-xs text-zinc-400">{aula.aul_clave_registro}</span>
        </div>
        <h2 className="max-w-2xl break-words text-2xl font-semibold leading-tight tracking-tight text-zinc-900 sm:text-3xl">
          {formatDisplayName(aula.aul_curso_nombre || "Curso sin nombre")}
        </h2>
        <p className="mt-3 text-sm leading-relaxed text-zinc-500">
          Acompaña a tu grupo, consulta su avance y da seguimiento a sus entregas.
        </p>
        <div className="mt-5 flex flex-wrap gap-x-5 gap-y-2 text-xs text-zinc-600">
          <span className="inline-flex items-center gap-1.5">
            <Building2 className="size-3.5 text-zinc-400" aria-hidden="true" />
            {formatDisplayName(aula.unidad?.uni_nombre || "Unidad sin nombre")}
          </span>
          <span className="inline-flex items-center gap-1.5">
            <Users className="size-3.5 text-zinc-400" aria-hidden="true" />
            {aula.alumnos.length} alumnos inscritos
          </span>
        </div>
      </div>
      <div className="flex flex-col gap-2 border-t border-zinc-100 pt-5 sm:flex-row sm:flex-wrap sm:gap-3">
        <ManageAulaLink aulaId={aula.aul_id} />
        <Modal>
          <Button variant="secondary" className="min-h-11 rounded-full px-5 text-sm font-medium">
            <Users className="size-4" aria-hidden="true" />
            Vista rápida del grupo
          </Button>
          <Modal.Backdrop variant="blur">
            <Modal.Container>
              <Modal.Dialog className="max-h-[85dvh] w-full max-w-2xl">
                <Modal.CloseTrigger />
                <Modal.Header>
                  <Modal.Heading>Alumnos del aula</Modal.Heading>
                </Modal.Header>
                <Modal.Body className="overflow-y-auto">
                  {aula.alumnos.length === 0 ? (
                    <p className="text-sm text-zinc-500">
                      Esta aula todavía no tiene alumnos registrados.
                    </p>
                  ) : (
                    <ul className="divide-y divide-zinc-100">
                      {aula.alumnos.map((alumno) => {
                        const nombre = formatDisplayName(
                          [alumno.aa_nombre, alumno.aa_ape_pat, alumno.aa_ape_mat]
                            .filter(Boolean)
                            .join(" ") || "Alumno sin nombre",
                        );
                        const initials = nombre
                          .split(/\s+/)
                          .slice(0, 2)
                          .map((part) => part[0])
                          .join("")
                          .toUpperCase();
                        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 min-w-0 flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between"
                          >
                            <div className="flex min-w-0 items-center gap-3">
                              <Avatar size="sm" className="shrink-0">
                                <Avatar.Fallback>{initials}</Avatar.Fallback>
                              </Avatar>
                              <div className="min-w-0">
                                <p className="break-words text-sm font-medium">{nombre}</p>
                                <p className="mt-1 text-xs text-zinc-500">
                                  {alumno.aa_num_control || "Sin número de control"}
                                </p>
                              </div>
                            </div>
                            <ProgressBar
                              aria-label={`Avance de ${nombre}`}
                              value={avance}
                              className="w-full sm:w-36 sm:shrink-0"
                            >
                              <Label>Avance</Label>
                              <ProgressBar.Output />
                              <ProgressBar.Track>
                                <ProgressBar.Fill className="bg-[#9d2449]" />
                              </ProgressBar.Track>
                            </ProgressBar>
                          </li>
                        );
                      })}
                    </ul>
                  )}
                </Modal.Body>
                <Modal.Footer>
                  <Button slot="close" className="w-full sm:w-auto rounded-full">
                    Cerrar
                  </Button>
                </Modal.Footer>
              </Modal.Dialog>
            </Modal.Container>
          </Modal.Backdrop>
        </Modal>
      </div>
    </Card>
  );
}