import TaskDialog from "./TaskDialog";
import ResourceLink from "@/components/ui/ResourceLink";
import SystemAlert from "@/components/ui/SystemAlert";
import { cache } from "react";
import Link from "next/link";
import { Card } from "@heroui/react";
import { ArrowUpRight, CalendarDays, ClipboardList, FolderOpen } from "lucide-react";
import { getContenidoAlumno } from "@/lib/data/contenido-alumno";
import { leerEntregasAlumno } from "@/lib/data/entregas-alumno";
import { requireUser } from "@/lib/auth/session";

const getContenido = cache(getContenidoAlumno);

export default async function DashboardAlumnoContenido({ aulaId }: { aulaId: number }) {
  const content = await getContenido(aulaId);
  if (!content || content.estado !== "disponible") return null;
  return (
    <Card className="dashboard-card h-full min-w-0 gap-4 border border-zinc-200/70 p-5 shadow-none sm:p-6">
      <Card.Header className="flex-row items-center gap-2">
        <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-[#9d2449]/8">
          <FolderOpen className="size-4 text-[#9d2449]" aria-hidden="true" />
        </span>
        <Card.Title className="text-base font-semibold text-zinc-800">
          Material didáctico
        </Card.Title>
      </Card.Header>
      <Card.Content>
        {content.materiales.length ? (
          <ul className="divide-y divide-zinc-100">
            {content.materiales.slice(0, 3).map((material) => (
              <li key={material.id} className="py-2 first:pt-0">
                <p className="truncate text-sm">
                  {material.url ? (
                    <ResourceLink
                      url={material.url}
                      title={material.titulo}
                      className="text-[#9d2449] underline underline-offset-4"
                    />
                  ) : (
                    material.titulo
                  )}
                </p>
                <p className="mt-1 text-xs text-zinc-400">{material.categoria}</p>
              </li>
            ))}
          </ul>
        ) : (
          <p className="text-sm text-zinc-500">Aún no hay materiales publicados.</p>
        )}
      </Card.Content>
      <Card.Footer className="mt-auto border-t border-zinc-100 pt-4">
        <Link
          href={`/aula/${aulaId}#materiales`}
          className="action-link inline-flex items-center gap-1 text-xs font-medium text-[#9d2449]"
        >
          Ver materiales en el aula
          {content.materiales.length > 3 ? ` (${content.materiales.length})` : ""}
          <ArrowUpRight className="size-3.5" aria-hidden="true" />
        </Link>
        {content.foroActivo && (
          <Link
            href={`/aula/${aulaId}/foro`}
            className="action-link ml-auto text-xs font-medium text-[#9d2449]"
          >
            Foro del aula
          </Link>
        )}
      </Card.Footer>
    </Card>
  );
}

export async function DashboardAlumnoTareasCard({ aulaId }: { aulaId: number }) {
  const content = await getContenido(aulaId);
  if (!content || content.estado !== "disponible") return null;
  const user = await requireUser();
  const entregas = await leerEntregasAlumno(aulaId, user.identifier);
  const tasks = content.tareas.map((task) => ({
    ...task,
    entrega: entregas?.find((e) => e.tareaId === task.id)?.estado,
  }));
  const pendientes = tasks.filter(
    (t) => t.entrega === "requiere_correccion" || (t.disponible && !t.entrega),
  );
  const alDia =
    entregas !== null &&
    tasks.length > 0 &&
    pendientes.length === 0 &&
    tasks.some((t) => t.entrega);
  const taskOrder = [...pendientes, ...tasks.filter((t) => !pendientes.includes(t))];
  return (
    <Card className="dashboard-card h-full min-w-0 gap-4 border border-zinc-200/70 p-5 shadow-none sm:p-6">
      <Card.Header className="flex-row items-center gap-2">
        <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-[#9d2449]/8">
          <ClipboardList className="size-4 text-[#9d2449]" aria-hidden="true" />
        </span>
        <div className="min-w-0 flex-1">
          <Card.Title className="text-base font-semibold text-zinc-800">Mis tareas</Card.Title>
          <p className="mt-1 text-xs text-zinc-500">Actividades y entregas de este curso</p>
        </div>
      </Card.Header>
      <Card.Content className="space-y-4">
        {alDia && (
          <p className="rounded-xl bg-[#9d2449]/8 px-3 py-2.5 text-xs leading-relaxed text-[#9d2449]">
            <span className="font-semibold">Estás al día.</span> No tienes tareas pendientes de
            entrega.
          </p>
        )}
        {tasks.length > 0 && entregas === null && (
          <SystemAlert status="warning" title="Entregas sin consultar">
            No se pudo consultar el estado de tus entregas.
          </SystemAlert>
        )}
        {tasks.length ? (
          <ul className="divide-y divide-zinc-100">
            {taskOrder.slice(0, 3).map((task) => {
              const entregada = task.entrega === "pendiente" || task.entrega === "calificada";
              const estado = entregada
                ? task.entrega === "calificada"
                  ? "Calificada"
                  : "Entregada · En revisión"
                : task.entrega === "requiere_correccion"
                  ? "Requiere corrección"
                  : entregas === null
                    ? "Estado sin consultar"
                    : !task.disponible
                      ? "Próximamente"
                      : task.vencida
                        ? "Pendiente · Fecha vencida"
                        : "Pendiente de entrega";
              return (
                <li key={task.id} className="flex items-start gap-3 py-3 first:pt-0 last:pb-0">
                  <span
                    className="mt-1.5 size-2 shrink-0 rounded-full bg-[#9d2449]/30"
                    aria-hidden="true"
                  />
                  <div className="min-w-0 flex-1">
                    <TaskDialog
                      aulaId={aulaId}
                      taskId={task.id}
                      label={task.titulo}
                      className="h-auto min-h-0 w-full min-w-0 justify-start whitespace-normal rounded-md bg-transparent p-0 text-left text-sm font-semibold leading-snug text-zinc-800 shadow-none hover:bg-transparent hover:text-[#9d2449]"
                    />
                    <p className="mt-1 text-xs text-zinc-500">{estado}</p>
                    {task.fechaEntrega && (
                      <p className="mt-2 flex items-center gap-1.5 text-xs text-zinc-500">
                        <CalendarDays className="size-3.5 shrink-0" aria-hidden="true" />
                        <span>
                          Entrega:{" "}
                          <time dateTime={task.fechaEntrega}>
                            {new Date(task.fechaEntrega).toLocaleDateString("es-MX", {
                              timeZone: "America/Mexico_City",
                              day: "numeric",
                              month: "short",
                            })}
                          </time>
                        </span>
                      </p>
                    )}
                  </div>
                </li>
              );
            })}
          </ul>
        ) : (
          <div className="rounded-xl border border-dashed border-zinc-200 bg-zinc-50 px-4 py-6 text-center">
            <ClipboardList className="mx-auto mb-3 size-6 text-[#9d2449]" aria-hidden="true" />
            <p className="text-sm font-medium text-zinc-800">Aún no hay tareas asignadas</p>
            <p className="mt-2 text-xs leading-relaxed text-zinc-500">
              Aquí encontrarás las actividades y fechas de entrega que publique tu instructor.
            </p>
          </div>
        )}
      </Card.Content>
      <Card.Footer className="mt-auto border-t border-zinc-100 pt-4">
        <Link
          href="/mis-tareas"
          className="action-link inline-flex w-full items-center justify-between gap-2 text-sm font-medium text-[#9d2449]"
        >
          Ver todas mis tareas
          <ArrowUpRight className="size-4" aria-hidden="true" />
        </Link>
      </Card.Footer>
    </Card>
  );
}