import Link from "next/link";
import { LogOut } from "lucide-react";
import { BrandLogo } from "@/components/brand/brand-logo";
import { visibleNavItems } from "@/components/layout/admin-nav";
import { logoutAction } from "@/server/actions/auth";

type AdminSidebarProps = {
  userName: string;
  roleName: string;
  permissions: ReadonlySet<string>;
};

/**
 * Sidebar del panel (Fase 1: versión funcional mínima).
 * El menú se filtra por permisos solo como ayuda visual: cada página vuelve a autorizar en el servidor.
 * El diseño definitivo (drawer móvil, estados activos, colapsado) llega con el Design System (Fase 2).
 */
export function AdminSidebar({ userName, roleName, permissions }: AdminSidebarProps) {
  const items = visibleNavItems(permissions);
  return (
    <aside className="flex w-full flex-col bg-chesco-black text-chesco-white md:min-h-dvh md:w-64">
      <div className="px-6 py-6">
        <BrandLogo variant="logoWhite" height={56} priority />
      </div>
      <nav aria-label="Navegación del panel" className="flex-1 px-3">
        <ul className="space-y-1">
          {items.map((item) => {
            const Icon = item.icon;
            const content = (
              <>
                <Icon aria-hidden className="size-4 shrink-0" />
                <span className="flex-1">{item.label}</span>
                {item.phase !== null && (
                  <span className="rounded-chesco-sm bg-chesco-graphite px-1.5 py-0.5 text-[10px] text-chesco-metallic">
                    Fase {item.phase}
                  </span>
                )}
              </>
            );
            return (
              <li key={item.href}>
                {item.phase === null ? (
                  <Link
                    href={item.href}
                    className="flex items-center gap-3 rounded-chesco-sm px-3 py-2 font-display text-sm font-medium text-chesco-white transition-colors duration-200 hover:bg-chesco-graphite"
                  >
                    {content}
                  </Link>
                ) : (
                  <span
                    aria-disabled="true"
                    className="flex cursor-not-allowed items-center gap-3 rounded-chesco-sm px-3 py-2 font-display text-sm font-medium text-chesco-metallic/70"
                  >
                    {content}
                  </span>
                )}
              </li>
            );
          })}
        </ul>
      </nav>
      <div className="border-t border-chesco-graphite px-6 py-5">
        <p className="truncate text-sm font-medium">{userName}</p>
        <p className="text-xs text-chesco-metallic">{roleName}</p>
        <form action={logoutAction} className="mt-3">
          <button
            type="submit"
            className="flex items-center gap-2 text-sm text-chesco-metallic transition-colors duration-200 hover:text-chesco-white"
          >
            <LogOut aria-hidden className="size-4" />
            Cerrar sesión
          </button>
        </form>
      </div>
    </aside>
  );
}