import SystemAlert from "@/components/ui/SystemAlert";
import Link from "next/link";
import { Card } from "@heroui/react";
import { ArrowUpRight, ClipboardCheck } from "lucide-react";
import type { DashboardTareas } from "@/lib/data/tareas";
import { formatDisplayName } from "@/lib/format-display";

export default function DashboardTareasCard({ tareas }: { tareas: DashboardTareas }) {
  return (
    <Card className="dashboard-card h-full gap-4 border border-[#9d2449]/15 p-5 shadow-none sm:p-6">
      <div className="flex items-center gap-2">
        <span className="flex size-8 items-center justify-center rounded-lg bg-[#9d2449]/8">
          <ClipboardCheck className="size-4 text-[#9d2449]" aria-hidden="true" />
        </span>
        <h2 className="text-base font-semibold text-zinc-800">Tareas por revisar</h2>
      </div>
      {tareas.estado !== "disponible" ? (
        <SystemAlert status="warning" title="Entregas sin consultar">
          {tareas.estado === "sin_configurar"
            ? "Las entregas aún no están disponibles."
            : "No fue posible consultar las entregas."}
        </SystemAlert>
      ) : tareas.pendientes.length === 0 ? (
        <SystemAlert status="success" title="Todo al día">
          No tienes entregas pendientes de revisión.
        </SystemAlert>
      ) : (
        <>
          <div className="flex items-baseline gap-2">
            <span className="text-3xl font-semibold tracking-tight text-[#9d2449]">
              {tareas.pendientes.length}
            </span>
            <span className="text-sm text-zinc-500">
              {tareas.pendientes.length === 1 ? "entrega pendiente" : "entregas pendientes"}
            </span>
          </div>
          <ul className="divide-y divide-zinc-100">
            {tareas.pendientes.slice(0, 2).map((tarea) => (
              <li key={tarea.id} className="py-3 first:pt-0">
                <p className="text-sm font-medium text-zinc-800">
                  {formatDisplayName(tarea.titulo)}
                </p>
                <p className="mt-1 truncate text-xs text-zinc-500" title={tarea.alumno}>
                  {formatDisplayName(tarea.alumno)}
                </p>
              </li>
            ))}
          </ul>
          {tareas.pendientes.length > 2 && (
            <p className="text-xs text-zinc-400">
              Y {tareas.pendientes.length - 2} entregas más por revisar.
            </p>
          )}
        </>
      )}
      <Link
        href="/tareas"
        className="action-link mt-auto inline-flex items-center gap-1 border-t border-zinc-100 pt-4 text-xs font-medium text-[#9d2449]"
      >
        Ver tareas pendientes
        <ArrowUpRight className="size-3.5" aria-hidden="true" />
      </Link>
    </Card>
  );
}