"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  Settings,
  Upload,
  Brain,
  Plug,
  Users,
  MapPin,
  Building2,
  FileText,
} from "lucide-react";
import { Header } from "@/components/layout/header";
import { cn } from "@/lib/utils";

const SECTIONS = [
  { href: "/settings/general", label: "General", icon: Settings },
  { href: "/settings/upload-sources", label: "Upload Sources", icon: Upload },
  { href: "/settings/ai", label: "AI Provider", icon: Brain },
  { href: "/settings/integrations", label: "Integrations", icon: Plug },
  { href: "/settings/users", label: "Team Members", icon: Users },
  { href: "/settings/locations", label: "Locations", icon: MapPin },
  { href: "/settings/organization", label: "Organization", icon: Building2 },
  { href: "/settings/forms", label: "Form Templates", icon: FileText },
];

export default function SettingsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();

  return (
    <div>
      <Header title="Settings" />
      <div className="mt-6 flex flex-col gap-6 lg:flex-row">
        <nav className="flex gap-1 overflow-x-auto lg:w-56 lg:shrink-0 lg:flex-col">
          {SECTIONS.map((section) => {
            const active =
              pathname === section.href ||
              (section.href !== "/settings/general" &&
                pathname.startsWith(section.href));
            const Icon = section.icon;
            return (
              <Link
                key={section.href}
                href={section.href}
                className={cn(
                  "flex items-center gap-2.5 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                  active
                    ? "bg-primary/10 text-primary"
                    : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
                )}
              >
                <Icon className="size-4 shrink-0" />
                {section.label}
              </Link>
            );
          })}
        </nav>
        <div className="min-w-0 flex-1">{children}</div>
      </div>
    </div>
  );
}
