"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { BarChart3, Database, Package, UploadCloud, UsersRound } from "lucide-react";
import { cn } from "@/lib/utils";
import { useLanguage } from "@/lib/i18n/context";

export function AdminNav({ onNavigate }: { onNavigate?: () => void }) {
  const { t } = useLanguage();
  const pathname = usePathname();
  const a = t.admin;

  const items = [
    { href: "/admin/users", label: a.nav.users, icon: UsersRound, tone: "purple" },
    { href: "/admin/products", label: a.nav.products, icon: Package, tone: "cyan" },
    { href: "/admin/imports", label: a.nav.imports, icon: UploadCloud, tone: "blue" },
    { href: "/admin/data-sources", label: a.nav.dataSources, icon: Database, tone: "green" },
    { href: "/admin/scoring", label: a.nav.scoring, icon: BarChart3, tone: "pink" },
  ];

  return (
    <nav className="nav-group admin-navigation" aria-label={a.title}>
      <div className="nav-label">{a.title}</div>
      <div>
        {items.map((item) => {
          const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
          const Icon = item.icon;
          return (
            <Link
              key={item.href}
              href={item.href}
              onClick={onNavigate}
              aria-current={active ? "page" : undefined}
              className={cn(
                "nav-item",
                `nav-tone-${item.tone}`,
                active && "active",
              )}
            >
              <span className="nav-icon-shell"><Icon /></span>
              {item.label}
            </Link>
          );
        })}
      </div>
    </nav>
  );
}