"use client";

import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { MoreVertical, Zap } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ThemeToggle } from "@/components/shared/theme-toggle";
import type { AdminBadges } from "@/lib/admin/badges";
import { adminTexts } from "@/lib/i18n/admin";
import { cn } from "@/lib/utils";
import { AdminAccountMenu, type AdminAccount } from "./account-menu";
import { AdminAlertsBell, type AdminAlertDto } from "./alerts-bell";
import {
  activeAdminHref,
  adminOverflowNav,
  adminPrimaryNav,
  badgeLabel,
  isOverflowActive,
  type AdminNavItem,
} from "./nav-items";

/**
 * Navy horizontal top bar (SPEC FAZA 4). One row from lg up; below lg the nav
 * drops to a second, horizontally scrollable row.
 */

function NavBadge({ count }: { count: number }) {
  if (count <= 0) return null;
  return (
    <span className="ml-0.5 grid min-w-4 place-items-center rounded-full bg-rose-500 px-1 font-mono text-[10px] leading-4 font-semibold text-white tabular-nums">
      {badgeLabel(count)}
    </span>
  );
}

function NavLink({
  item,
  active,
  badges,
}: {
  item: AdminNavItem;
  active: boolean;
  badges: AdminBadges;
}) {
  return (
    <Link
      href={item.href}
      aria-current={active ? "page" : undefined}
      className={cn(
        "inline-flex shrink-0 items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm font-medium whitespace-nowrap transition-colors",
        active
          ? "bg-blue-600 text-white"
          : "text-white/70 hover:bg-white/10 hover:text-white",
      )}
    >
      {item.label}
      {item.badge ? <NavBadge count={badges[item.badge]} /> : null}
    </Link>
  );
}

export function AdminNav({
  user,
  badges,
  alerts,
}: {
  user: AdminAccount;
  badges: AdminBadges;
  alerts: AdminAlertDto[];
}) {
  const pathname = usePathname();
  const active = activeAdminHref(pathname);
  const overflowActive = isOverflowActive(pathname);

  return (
    <header className="sticky top-0 z-40 bg-[#0e1a3a] text-white shadow-sm">
      <div className="mx-auto flex h-12 w-full max-w-screen-2xl items-center gap-2 px-3">
        <Link
          href="/admin"
          className="flex shrink-0 items-center gap-2 rounded-lg px-1 py-1 transition-colors hover:bg-white/10"
        >
          <span className="grid size-6 shrink-0 place-items-center rounded-md bg-blue-600">
            <Zap className="size-3.5 text-white" fill="currentColor" strokeWidth={1.5} />
          </span>
          <span className="font-display text-sm font-semibold tracking-tight">
            {adminTexts.brand}
          </span>
          <span className="hidden rounded bg-white/10 px-1.5 py-px font-mono text-[10px] font-semibold tracking-wider text-white/70 uppercase sm:inline">
            {adminTexts.panelName}
          </span>
        </Link>

        <nav className="hidden min-w-0 flex-1 items-center gap-0.5 overflow-x-auto lg:flex">
          {adminPrimaryNav.map((item) => (
            <NavLink
              key={item.href}
              item={item}
              active={active === item.href}
              badges={badges}
            />
          ))}

          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                type="button"
                variant="ghost"
                size="icon-sm"
                aria-label={adminTexts.nav.more}
                className={cn(
                  "shrink-0",
                  overflowActive
                    ? "bg-blue-600 text-white hover:bg-blue-600"
                    : "text-white/70 hover:bg-white/10 hover:text-white",
                )}
              >
                <MoreVertical className="size-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="w-44">
              {adminOverflowNav.map((item) => (
                <DropdownMenuItem key={item.href} asChild>
                  <Link href={item.href} className="cursor-pointer">
                    <item.icon className="size-4" />
                    {item.label}
                  </Link>
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        </nav>

        <div className="ml-auto flex shrink-0 items-center gap-1">
          <AdminAlertsBell alerts={alerts} />
          <ThemeToggle className="size-8 text-white/75 hover:bg-white/10 hover:text-white" />
          <AdminAccountMenu user={user} />
        </div>
      </div>

      {/* Under lg the nav becomes its own horizontally scrollable row. */}
      <div className="border-t border-white/10 lg:hidden">
        <nav className="mx-auto flex w-full max-w-screen-2xl items-center gap-0.5 overflow-x-auto px-2 py-1.5">
          <NavLink
            item={{
              href: "/admin",
              label: adminTexts.nav.dashboard,
              icon: Zap,
            }}
            active={active === "/admin"}
            badges={badges}
          />
          {[...adminPrimaryNav, ...adminOverflowNav].map((item) => (
            <NavLink
              key={item.href}
              item={item}
              active={active === item.href}
              badges={badges}
            />
          ))}
        </nav>
      </div>
    </header>
  );
}

export default AdminNav;