import { NavLink, Outlet, useLocation, useNavigate } from "react-router";
import {
  Eye,
  Key,
  Lock,
  Paintbrush,
  PersonStanding,
  Shield,
  Terminal,
  Bell,
  XIcon,
} from "lucide-react";
import { cn } from "@/lib/utils";
import NavShell from "./rail";

const NAV_SECTIONS = [
  {
    label: "Account",
    items: [
      { to: "/settings/profile", end: false, icon: PersonStanding, label: "Profile" },
      { to: "/settings/security", end: false, icon: Lock, label: "Security" },
    ],
  },
  {
    label: "Preferences",
    items: [
      { to: "/settings/appearance", end: false, icon: Paintbrush, label: "Appearance" },
      { to: "/settings/notifications", end: false, icon: Bell, label: "Notifications" },
      { to: "/settings/privacy", end: false, icon: Shield, label: "Privacy" },
      { to: "/settings/accessibility", end: false, icon: Eye, label: "Accessibility" },
    ],
  },
  {
    label: "Developer",
    items: [
      { to: "/settings/tokens", end: false, icon: Key, label: "Access Tokens" },
      { to: "/settings/ssh-keys", end: false, icon: Terminal, label: "SSH Keys" },
    ],
  },
];

const SETTINGS_RETURN_PATH_KEY = "settings_return_path";

export function SettingsShell() {
  const location = useLocation();
  const navigate = useNavigate();

  const currentSection = NAV_SECTIONS
    .flatMap((s) => s.items)
    .find((item) => location.pathname === item.to || location.pathname.startsWith(item.to + "/"));

  const handleClose = () => {
    const returnPath = localStorage.getItem(SETTINGS_RETURN_PATH_KEY);
    localStorage.removeItem(SETTINGS_RETURN_PATH_KEY);
    navigate(returnPath || "/me");
  };

  return (
    <NavShell>
      <div className="flex h-full overflow-hidden bg-background">
        {/* Sidebar */}
        <nav className="flex w-[218px] shrink-0 flex-col overflow-y-auto border-r border-border bg-sidebar/90">
          <div className="flex items-center justify-between px-4 pt-6 pb-4">
            <h2 className="text-[13px] font-semibold uppercase tracking-wider text-muted-foreground">
              Settings
            </h2>
          </div>

          {NAV_SECTIONS.map((section, si) => (
            <div key={si} className="mb-1">
              <div className="px-4 pt-4 pb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
                {section.label}
              </div>
              {section.items.map((item) => (
                <NavLink
                  key={item.to}
                  to={item.to}
                  end={item.end}
                  className={({ isActive }) =>
                    cn(
                      "flex items-center gap-2.5 mx-2 px-3 py-1.5 rounded-lg text-[14px] transition-colors",
                      isActive
                        ? "bg-accent text-foreground font-medium"
                        : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
                    )
                  }
                >
                  <item.icon className="size-4 shrink-0" />
                  <span className="truncate">{item.label}</span>
                </NavLink>
              ))}
            </div>
          ))}
        </nav>

        {/* Content */}
        <div className="flex min-w-0 flex-1 flex-col bg-background">
          {/* Top bar */}
          <div className="flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3">
            <div className="min-w-0">
              <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
                Settings
              </p>
              <p className="truncate text-[14px] font-medium text-foreground">
                {currentSection?.label || "Settings"}
              </p>
            </div>
            <button
              onClick={handleClose}
              className="inline-flex size-8 items-center justify-center rounded-lg border border-border text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
              title="Close"
            >
              <XIcon className="size-4" />
            </button>
          </div>

          {/* Scrollable content */}
          <div className="flex-1 overflow-y-auto overscroll-contain">
            <div className="mx-auto max-w-[660px] px-6 py-8 lg:px-10">
              <Outlet />
            </div>
          </div>
        </div>
      </div>
    </NavShell>
  );
}
