"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useTranslations } from "next-intl";
import { User, Shield, Bot, Bell, Apple, Key, Webhook, SlidersHorizontal } from "lucide-react";
import { cn } from "@/lib/utils";

const NAV_ITEMS = [
  { href: "/settings", key: "profile", icon: User, exact: true },
  { href: "/settings/security", key: "security", icon: Shield, exact: false },
  { href: "/settings/ai", key: "aiModels", icon: Bot, exact: false },
  { href: "/settings/notifications", key: "notifications", icon: Bell, exact: false },
  { href: "/settings/features", key: "features", icon: SlidersHorizontal, exact: false },
  { href: "/settings/nutrition", key: "nutrition", icon: Apple, exact: false },
  { href: "/settings/api-keys", key: "apiKeys", icon: Key, exact: false },
  { href: "/settings/webhooks", key: "webhooks", icon: Webhook, exact: false },
] as const;

const DEVELOPER_ONLY_KEYS = new Set(["apiKeys", "webhooks"]);

export function SettingsSidebar({ isDeveloper }: { isDeveloper: boolean }) {
  const pathname = usePathname();
  const t = useTranslations("settings");

  const visibleItems = NAV_ITEMS.filter((item) => isDeveloper || !DEVELOPER_ONLY_KEYS.has(item.key));

  return (
    <nav className="w-full md:w-48 md:shrink-0 md:sticky md:top-6">
      <ul className="flex overflow-x-auto gap-1 pb-2 -mx-4 px-4 md:mx-0 md:px-0 md:flex-col md:overflow-visible md:gap-0.5 md:pb-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
        {visibleItems.map(({ href, key, icon: Icon, exact }) => {
          const active = exact ? pathname === href : pathname.startsWith(href);
          return (
            <li key={href} className="shrink-0 md:shrink">
              <Link
                href={href}
                className={cn(
                  "flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm whitespace-nowrap transition-colors",
                  active
                    ? "bg-accent text-accent-foreground font-medium"
                    : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
                )}
              >
                <Icon className="h-4 w-4 shrink-0" />
                {t(key)}
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}