import { getContenidoAlumno } from "@/lib/data/contenido-alumno";
import { getLearningState } from "@/lib/alumno/learning";
import { leerEntregasAlumno } from "@/lib/data/entregas-alumno";
import { requireUser } from "@/lib/auth/session";
import { studentNextSteps } from "@/lib/alumno/next-steps";
import TaskDialog from "./TaskDialog";
import Link from "next/link";
import { Card, Label, ProgressBar } from "@heroui/react";
import { Play, BookOpen, Building2, UserRound } from "lucide-react";
import type { DashboardAula } from "@/lib/data/dashboard";
import { formatDisplayName } from "@/lib/format-display";

export default async function DashboardAlumnoAulaCard({ aula }: { aula: DashboardAula }) {
  const user = await requireUser();
  const content = await getContenidoAlumno(aula.aul_id);
  const next =
    content?.estado === "disponible"
      ? studentNextSteps(
          content,
          await getLearningState(aula.aul_id),
          await leerEntregasAlumno(aula.aul_id, user.identifier),
        )
      : null;
  const raw = Number(aula.alumnos[0]?.aa_progreso_porcentaje ?? 0);
  const progreso = Number.isFinite(raw) ? Math.max(0, Math.min(100, raw)) : 0;
  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" />
            Mi aula online
          </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">
          Continúa tus clases, consulta los materiales y da seguimiento a tus tareas.
        </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 shrink-0 text-zinc-400" aria-hidden="true" />
            {formatDisplayName(aula.unidad?.uni_nombre || "Unidad sin nombre")}
          </span>
          <span className="inline-flex items-center gap-1.5">
            <UserRound className="size-3.5 shrink-0 text-zinc-400" aria-hidden="true" />
            Instructor: {formatDisplayName(aula.aul_instructor_nombre || "Sin registrar")}
          </span>
        </div>
        <ProgressBar
          className="mt-5 max-w-md"
          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>
        {next && (
          <div className="mt-5 space-y-3 border-t border-zinc-100 pt-4">
            {next.video && (
              <p className="text-sm text-zinc-600">
                <span className="font-medium text-zinc-800">Continúa donde te quedaste</span>
                <span className="mt-1 block text-xs">{next.video.titulo}</span>
              </p>
            )}
            {next.evaluation && (
              <Link
                className="action-link"
                href={`/aula/${aula.aul_id}?actividad=${encodeURIComponent(next.evaluation.id)}`}
              >
                Evaluación pendiente · {next.evaluation.titulo}
              </Link>
            )}
            {next.task && (
              <div className="flex flex-wrap items-center gap-2">
                <span className="text-xs text-zinc-500">
                  {next.taskLate
                    ? "Tarea vencida"
                    : next.taskSoon
                      ? "Tarea por vencer"
                      : "Tarea pendiente"}
                </span>
                <TaskDialog aulaId={aula.aul_id} taskId={next.task.id} label={next.task.titulo} />
                {next.task.fechaEntrega && (
                  <time className="text-xs text-zinc-400" dateTime={next.task.fechaEntrega}>
                    {new Date(next.task.fechaEntrega).toLocaleString("es-MX", {
                      timeZone: "America/Mexico_City",
                      dateStyle: "medium",
                      timeStyle: "short",
                    })}
                  </time>
                )}
              </div>
            )}
          </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">
        <Link
          href={
            next?.video
              ? `/aula/${aula.aul_id}?actividad=${encodeURIComponent(next.video.id)}`
              : `/aula/${aula.aul_id}`
          }
          className="inline-flex min-h-10 items-center justify-center gap-2 rounded-full bg-[#9d2449] px-4 py-2.5 text-sm font-medium !text-white no-underline transition-colors hover:bg-[#801c3a] motion-reduce:transition-none"
        >
          <Play className="size-4" aria-hidden="true" />
          {next?.video ? "Continuar clase" : "Entrar al aula"}
        </Link>
        <Link
          href="/cursos"
          className="inline-flex min-h-10 items-center justify-center gap-2 rounded-full bg-zinc-100 px-4 py-2.5 text-sm font-medium text-zinc-800 no-underline transition-colors hover:bg-zinc-200 motion-reduce:transition-none"
        >
          <BookOpen className="size-4" aria-hidden="true" />
          Mis cursos
        </Link>
      </div>
    </Card>
  );
}