import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { Layout } from "@/components/Layout";
import { NavLink } from "@/components/NavLink";
import { UserCircle, Sliders, Database, Link2, Wand2, Tag, Store, Repeat, List, KeyRound } from "lucide-react";

const tabs = [
  { label: "Account", to: "/settings/account", icon: UserCircle },
  { label: "Preferences", to: "/settings/preferences", icon: Sliders },
  { label: "Data Sources", to: "/settings/sources", icon: Database },
  { label: "Brokerages", to: "/settings/brokerages", icon: Link2 },
  { label: "Rules", to: "/settings/rules", icon: Wand2 },
  { label: "Tags", to: "/settings/tags", icon: Tag },
  { label: "Merchants", to: "/settings/merchants", icon: Store },
  { label: "Recurring", to: "/settings/recurring", icon: Repeat },
  { label: "Categories", to: "/settings/categories", icon: List },
  { label: "API Access", to: "/settings/api-access", icon: KeyRound },
];

/**
 * Shared shell for the /settings/* pages: a single "Settings" header plus a tab
 * row, so the previously disconnected settings routes read as one coherent area.
 */
export function SettingsLayout({ children }: { children: React.ReactNode }) {
  const navigate = useNavigate();
  const { pathname } = useLocation();
  // "/settings" itself shows Account; unknown subpaths fall back to it too.
  const current = tabs.find((t) => pathname === t.to || pathname.startsWith(`${t.to}/`))?.to ?? tabs[0].to;
  return (
    <Layout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold text-foreground tracking-tight">Settings</h1>
          <p className="text-sm text-muted-foreground mt-1">
            Manage your account, data connections, and preferences
          </p>
        </div>

        {/* Below lg the ten tabs can't fit and a hidden-scrollbar strip hid the
            last ones; a native select is always reachable and works with a
            thumb. From lg up the tabs wrap onto a second row instead of scrolling. */}
        <label className="block lg:hidden">
          <span className="sr-only">Settings section</span>
          <select
            value={current}
            onChange={(e) => navigate(e.target.value)}
            className="h-11 w-full rounded-lg border border-input bg-background px-3 text-sm font-medium text-foreground"
          >
            {tabs.map((t) => (
              <option key={t.to} value={t.to}>{t.label}</option>
            ))}
          </select>
        </label>

        <nav aria-label="Settings sections" className="hidden flex-wrap items-center gap-1 border-b border-border pb-2 lg:flex">
          {tabs.map((t) => (
            <NavLink
              key={t.to}
              to={t.to}
              className="flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground whitespace-nowrap"
              activeClassName="bg-muted text-foreground"
            >
              <t.icon className="h-4 w-4" />
              {t.label}
            </NavLink>
          ))}
        </nav>

        <div>{children}</div>
      </div>
    </Layout>
  );
}