"use client";

import {
  Building2Icon,
  CreditCardIcon,
  DownloadIcon,
  LayoutDashboardIcon,
  ScrollTextIcon,
  ShieldAlertIcon,
  ShieldCheckIcon,
  UsersIcon,
} from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useTranslations } from "next-intl";
import type { SysPermission } from "@/lib/auth/sys-permissions";

const NAV = [
  { key: "navOverview", href: "/admin", icon: LayoutDashboardIcon, perm: null },
  {
    key: "navUsers",
    href: "/admin/users",
    icon: UsersIcon,
    perm: "users:read",
  },
  {
    key: "navOrgs",
    href: "/admin/orgs",
    icon: Building2Icon,
    perm: "orgs:read",
  },
  {
    key: "navBilling",
    href: "/admin/billing",
    icon: CreditCardIcon,
    perm: "billing:read",
  },
  {
    key: "navAudit",
    href: "/admin/audit",
    icon: ScrollTextIcon,
    perm: "audit:read",
  },
  {
    key: "navExport",
    href: "/admin/export",
    icon: DownloadIcon,
    perm: "export:run",
  },
  {
    key: "navStaff",
    href: "/admin/staff",
    icon: ShieldCheckIcon,
    perm: "staff:manage",
  },
] as const satisfies readonly {
  key: string;
  href: string;
  icon: unknown;
  perm: SysPermission | null;
}[];

/**
 * God-Mode navigation rail. Deliberately NOT the client AppSidebar — this is a
 * visually distinct dark shell so it can never be mistaken for the customer app.
 */
export function AdminSidebar({
  permissions,
}: {
  permissions: SysPermission[];
}) {
  const t = useTranslations("SuperAdmin");
  const pathname = usePathname();
  const allowed = new Set(permissions);
  const items = NAV.filter(
    (item) => item.perm === null || allowed.has(item.perm),
  );

  return (
    <aside className="flex w-60 shrink-0 flex-col border-red-900/40 border-r bg-zinc-950 text-zinc-200">
      <div className="flex items-center gap-2 border-red-900/40 border-b px-4 py-4">
        <ShieldAlertIcon className="size-5 text-red-500" />
        <span className="font-semibold text-red-400 text-sm tracking-wide">
          {t("shellTitle")}
        </span>
      </div>
      <nav className="flex-1 space-y-1 p-2">
        {items.map((item) => {
          const active =
            item.href === "/admin"
              ? pathname === "/admin"
              : pathname.startsWith(item.href);
          const Icon = item.icon;
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors ${
                active
                  ? "bg-red-950/60 text-red-300"
                  : "text-zinc-400 hover:bg-zinc-900 hover:text-zinc-100"
              }`}
            >
              <Icon className="size-4" />
              {t(item.key)}
            </Link>
          );
        })}
      </nav>
    </aside>
  );
}