"use client";

import AulaSelector from "./AulaSelector";
import Image from "next/image";
import Link from "next/link";
import { dashboardNavigation } from "@/lib/dashboard-navigation";
import { usePathname } from "next/navigation";

type DashboardAsideProps = {
  role: "alumno" | "instructor";
  onNavigate?: () => void;
  aula?: { id: number; nombre: string; clave: string };
  aulas?: { id: number; nombre: string; clave: string }[];
};

export default function DashboardAside({
  role,
  onNavigate,
  aula,
  aulas = [],
}: DashboardAsideProps) {
  const pathname = usePathname();
  const links = dashboardNavigation(role);
  return (
    <aside className="flex h-full w-full flex-col overflow-y-auto border-r border-zinc-200/80 bg-white px-4 py-6">
      <Link
        href="/"
        onClick={onNavigate}
        aria-label="ICATEP · Ir al inicio"
        className="mb-9 ml-2 w-fit"
      >
        <Image
          src="/assets/images/icatep.png"
          alt="ICATEP"
          width={140}
          height={56}
          className="h-auto w-32"
          priority
        />
      </Link>
      <nav aria-label="Navegación principal" className="mb-6 flex flex-col gap-1.5">
        {links.map(({ href, label, icon: Icon, group }, index) => {
          const active =
            href === "/"
              ? pathname === "/"
              : pathname === href ||
                pathname.startsWith(href + "/") ||
                (href === "/foros" && /^\/aula\/[^/]+\/foro$/.test(pathname)) ||
                (href === "/videoclases" && /^\/aula\/[^/]+$/.test(pathname));
          return (
            <div key={href}>
              {(index === 0 || links[index - 1].group !== group) && (
                <p
                  className={`mb-2 px-3 text-[10px] font-semibold uppercase tracking-[0.16em] text-zinc-400 ${index ? "mt-5" : ""}`}
                >
                  {group}
                </p>
              )}
              <Link
                href={href}
                onClick={onNavigate}
                aria-current={active ? "page" : undefined}
                className={`flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#9d2449] motion-reduce:transition-none ${active ? "bg-[#9d2449] text-white shadow-sm shadow-[#9d2449]/10" : "text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900"}`}
              >
                <Icon className="size-[18px] shrink-0" aria-hidden="true" />
                {label}
              </Link>
            </div>
          );
        })}
      </nav>
      <div className="mt-auto space-y-4 border-t border-zinc-100 pt-5">
        {aula && (
          <div className="rounded-xl bg-default/50 p-3">
            <p className="mb-2 text-[10px] font-semibold uppercase tracking-widest text-muted">
              Aula activa
            </p>
            <p className="break-words text-xs font-medium text-foreground">{aula.nombre}</p>
            {aula.clave && <p className="mt-1 break-words text-[10px] text-muted">{aula.clave}</p>}
            {aulas.length > 1 && (
              <div className="mt-3">
                <AulaSelector compact selected={aula.id} aulas={aulas} />
              </div>
            )}
          </div>
        )}
        <p className="text-xs font-medium text-zinc-600">
          {role === "instructor" ? "Portal docente" : "Portal del alumno"}
        </p>
        <p className="mt-1 text-[11px] leading-relaxed text-zinc-400">
          Instituto de Capacitación para el Trabajo del Estado de Puebla
        </p>
      </div>
    </aside>
  );
}