// src/components/settings/settings-shell.tsx — shared Settings layout:
// a left settings sub-nav (Compte · Équipe · Intégrations) + a readable content
// column (max-w-[680px]). The breadcrumb lives in the page's DashboardHeader, so
// it is NOT duplicated here. Active state is derived from usePathname() and also
// falls back to the explicit `active` prop the page passes in.
"use client";

import {
  CreditCardIcon,
  KeyIcon,
  PlugIcon,
  UserIcon,
  UsersIcon,
} from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useTranslations } from "next-intl";
import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

type SettingsKey = "account" | "team" | "billing" | "integrations" | "api-keys";

const NAV: {
  key: SettingsKey;
  /** Billing is i18n'd (Billing.title); the rest are still hardcoded FR. */
  label: string | null;
  href: string;
  icon: typeof UserIcon;
}[] = [
  {
    key: "account",
    label: "Compte",
    href: "/settings/account",
    icon: UserIcon,
  },
  { key: "team", label: "Équipe", href: "/settings/team", icon: UsersIcon },
  {
    key: "billing",
    label: null,
    href: "/settings/billing",
    icon: CreditCardIcon,
  },
  {
    key: "integrations",
    label: "Intégrations",
    href: "/settings/integrations",
    icon: PlugIcon,
  },
  {
    key: "api-keys",
    label: "Clés API",
    href: "/settings/api-keys",
    icon: KeyIcon,
  },
];

export function SettingsShell({
  active,
  children,
}: {
  active: SettingsKey;
  children: ReactNode;
}) {
  const pathname = usePathname();
  const tBilling = useTranslations("Billing");

  return (
    <div className="mx-auto grid w-full max-w-[1080px] grid-cols-1 gap-8 px-4 py-6 md:grid-cols-[200px_1fr] md:gap-12 md:px-6 md:py-8">
      <nav
        aria-label="Paramètres"
        className="flex flex-col gap-0.5 self-start md:sticky md:top-20"
      >
        <span className="px-3 pb-2 font-semibold text-[11px] text-muted-foreground uppercase tracking-wider">
          Paramètres
        </span>
        {NAV.map((item) => {
          const isActive =
            pathname?.startsWith(item.href) ?? active === item.key;
          const Icon = item.icon;
          return (
            <Link
              key={item.key}
              href={item.href}
              aria-current={isActive ? "page" : undefined}
              className={cn(
                "flex h-9 items-center gap-3 rounded-lg border border-transparent px-3 font-medium text-sm transition-colors",
                isActive
                  ? "border-border/60 bg-muted text-foreground"
                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
              )}
            >
              <Icon
                className={cn(
                  "size-[17px] shrink-0",
                  isActive ? "text-primary" : "text-muted-foreground",
                )}
              />
              {item.label ?? tBilling("title")}
            </Link>
          );
        })}
      </nav>

      <div className="flex w-full min-w-0 max-w-[680px] flex-col gap-6">
        {children}
      </div>
    </div>
  );
}