import ManageAulaLink from "./ManageAulaLink";
import { formatDisplayName } from "@/lib/format-display";
import Link from "next/link";
import { Card, Label, ProgressBar } from "@heroui/react";
import { Building2, CalendarDays, Clock3, Users } from "lucide-react";
import type { MiCurso } from "@/lib/data/cursos";

type DashboardCursoCardProps = { curso: MiCurso; role?: "alumno" | "instructor" };

function formatDate(value: Date | null) {
  if (!value || !Number.isFinite(value.getTime())) return "Sin fecha";
  // MySQL DATE represents a calendar day; UTC avoids shifting it to yesterday.
  return new Intl.DateTimeFormat("es-MX", {
    day: "numeric",
    month: "short",
    year: "numeric",
    timeZone: "UTC",
  }).format(value);
}

export default function DashboardCursoCard({
  curso,
  role = "instructor",
}: DashboardCursoCardProps) {
  const raw = Number(curso.alumnos[0]?.aa_progreso_porcentaje ?? 0);
  const progreso = Number.isFinite(raw) ? Math.max(0, Math.min(100, raw)) : 0;
  return (
    <Card className="dashboard-card h-full gap-4 border border-zinc-200/80 p-5 shadow-none">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <span className="rounded-full bg-[#9d2449]/10 px-2.5 py-1 text-xs font-medium text-[#9d2449]">
          {curso.aul_modalidad || "Modalidad sin registrar"}
        </span>
        <span className="text-xs text-zinc-500">
          {curso.aul_clave_registro || "Sin clave de registro"}
        </span>
      </div>
      <div className="space-y-1">
        <h2 className="text-lg font-semibold leading-snug text-zinc-900">
          {formatDisplayName(curso.aul_curso_nombre || "Curso sin nombre")}
        </h2>
        <p className="text-sm text-zinc-500">
          {formatDisplayName(curso.aul_instructor_nombre || "Instructor sin registrar")}
        </p>
      </div>
      <dl className="grid grid-cols-2 gap-x-4 gap-y-3 border-y border-zinc-100 py-4 text-sm">
        <div className="col-span-2">
          <dt className="flex items-center gap-1.5 text-xs text-zinc-500">
            <Building2 className="size-3.5" aria-hidden="true" />
            Unidad
          </dt>
          <dd className="mt-1 font-medium text-zinc-700">
            {formatDisplayName(curso.unidad?.uni_nombre || "Unidad sin nombre")}
          </dd>
        </div>
        <div>
          <dt className="flex items-center gap-1.5 text-xs text-zinc-500">
            <CalendarDays className="size-3.5" aria-hidden="true" />
            Inicio
          </dt>
          <dd className="mt-1 text-zinc-700">{formatDate(curso.aul_fecha_inicia)}</dd>
        </div>
        <div>
          <dt className="text-xs text-zinc-500">Término</dt>
          <dd className="mt-1 text-zinc-700">{formatDate(curso.aul_fecha_termina)}</dd>
        </div>
        <div>
          <dt className="flex items-center gap-1.5 text-xs text-zinc-500">
            <Clock3 className="size-3.5" aria-hidden="true" />
            Duración
          </dt>
          <dd className="mt-1 text-zinc-700">
            {curso.aul_horas_totales === null
              ? "Sin registrar"
              : `${curso.aul_horas_totales} horas`}
          </dd>
        </div>
        <div>
          <dt className="flex items-center gap-1.5 text-xs text-zinc-500">
            <Users className="size-3.5" aria-hidden="true" />
            Alumnos inscritos
          </dt>
          <dd className="mt-1 text-zinc-700">{curso._count.alumnos}</dd>
        </div>
        <div>
          <dt className="text-xs text-zinc-500">Ciclo escolar</dt>
          <dd className="mt-1 text-zinc-700">{curso.aul_ciclo_escolar || "Sin registrar"}</dd>
        </div>
        <div>
          <dt className="text-xs text-zinc-500">Ubicación</dt>
          <dd className="mt-1 text-zinc-700">{curso.aul_ubicacion || "Sin registrar"}</dd>
        </div>
      </dl>
      {curso.aul_modalidad === "CURSO ONLINE" &&
        (role === "alumno" ? (
          <div className="mt-auto space-y-4">
            <ProgressBar aria-label="Mi progreso en el curso" value={progreso}>
              <Label>Mi progreso</Label>
              <ProgressBar.Output />
              <ProgressBar.Track>
                <ProgressBar.Fill className="bg-[#9d2449]" />
              </ProgressBar.Track>
            </ProgressBar>
            <Link
              href={`/aula/${curso.aul_id}`}
              className="action-link inline-block text-sm font-medium text-[#9d2449]"
            >
              Entrar al aula
            </Link>
          </div>
        ) : (
          <div className="mt-auto flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <ManageAulaLink aulaId={curso.aul_id} />
            <Link
              href={`/cursos/${curso.aul_id}/alumnos`}
              className="inline-flex min-h-10 items-center justify-center gap-2 rounded-xl px-3 text-sm font-medium text-zinc-600 transition-colors hover:bg-zinc-100 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-[#9d2449]"
            >
              Ver avance
            </Link>
          </div>
        ))}
    </Card>
  );
}