import Link from "next/link";
import { requireUser } from "@/lib/auth/session";
import DashboardBreadcrumbs from "@/components/dashboard/DashboardBreadcrumbs";
import { Suspense } from "react";
import { Card } from "@heroui/react";
import Loading from "@/components/ui/Loading";
import DashboardCursoCard from "@/components/dashboard/DashboardCursoCard";
import { AnimatedDashboard, DashboardReveal } from "@/components/dashboard/DashboardMotion";
import { getMisCursos } from "@/lib/data/cursos";

type CursosPageProps = { searchParams: Promise<{ q?: string | string[] }> };

export default function CursosPage({ searchParams }: CursosPageProps) {
  return (
    <Suspense fallback={<Loading />}>
      <CursosContent searchParams={searchParams} />
    </Suspense>
  );
}

async function CursosContent({ searchParams }: CursosPageProps) {
  const params = await searchParams;
  const query = (Array.isArray(params.q) ? params.q[0] : params.q)?.trim().slice(0, 120) || "";
  const user = await requireUser();
  const aulas = await getMisCursos(query);
  return (
    <AnimatedDashboard>
      <section className="dashboard-surface space-y-4 p-4">
        <DashboardReveal>
          <DashboardBreadcrumbs items={[{ label: "Inicio", href: "/" }, { label: "Mis cursos" }]} />
          <div className="mt-4 flex flex-wrap items-end justify-between gap-3">
            <div>
              <h1 className="text-2xl font-semibold">Mis cursos</h1>
              <p className="mt-1 text-sm text-zinc-500">
                {user.role === "instructor"
                  ? "Consulta tus cursos, fechas y alumnos inscritos."
                  : "Consulta tus cursos online, fechas y progreso."}
              </p>
            </div>
            <p className="text-sm font-medium text-zinc-600">
              {aulas.length} {aulas.length === 1 ? "curso asignado" : "cursos asignados"}
            </p>
          </div>
        </DashboardReveal>
        {query && (
          <p className="text-sm text-zinc-500">
            Resultados para “{query}” ·{" "}
            <Link href="/cursos" className="action-link text-[#9d2449]">
              Ver todos mis cursos
            </Link>
          </p>
        )}
        <div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
          {aulas.map((aula, index) => (
            <DashboardReveal
              key={aula.aul_id}
              className="min-w-0"
              delay={Math.min(index * 0.04, 0.3)}
              hover
            >
              <DashboardCursoCard curso={aula} role={user.role} />
            </DashboardReveal>
          ))}
        </div>
        {aulas.length === 0 && (
          <Card>
            <p className="text-sm text-zinc-500">
              {query ? "No se encontraron cursos con ese criterio." : "No tienes cursos asignados."}
            </p>
          </Card>
        )}
      </section>
    </AnimatedDashboard>
  );
}