import { createFileRoute, Outlet } from "@tanstack/react-router";
import { requireSignedIn } from "~/lib/route-guards";
import { PageContainer } from "~/ui/PageContainer";
import { SideNav, SideNavLayout, SideNavLink } from "~/ui/Nav";

const NAV = [
  { to: "/settings", label: "Account", exact: true },
  { to: "/settings/security", label: "Password and authentication", exact: false },
  { to: "/settings/notifications", label: "Notifications", exact: false },
  { to: "/settings/tokens", label: "Access tokens", exact: false },
  { to: "/settings/agents", label: "Agents", exact: false },
  { to: "/settings/signing-keys", label: "Signing keys", exact: false },
  { to: "/settings/actions", label: "Actions", exact: false },
  { to: "/settings/billing", label: "Billing and usage", exact: false },
  { to: "/settings/containers", label: "Containers", exact: false },
] as const;

export const Route = createFileRoute("/settings")({
  beforeLoad: ({ context, location }) => {
    requireSignedIn({ context, location });
  },
  component: SettingsLayout,
});

function SettingsLayout() {
  return (
    <PageContainer>
      <SideNavLayout>
        <SideNav title="Settings">
          {NAV.map((item) => (
            <SideNavLink key={item.to} to={item.to} activeOptions={{ exact: item.exact }}>
              {item.label}
            </SideNavLink>
          ))}
        </SideNav>
        <div className="min-w-0">
          <Outlet />
        </div>
      </SideNavLayout>
    </PageContainer>
  );
}