'use client';

import {usePathname} from 'next/navigation';
import {
  Layout,
  LayoutContent,
  LayoutPanel,
  VStack,
} from '@astryxdesign/core/Layout';
import {SideNav, SideNavItem, SideNavSection} from '@astryxdesign/core/SideNav';
import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
import {Icon} from '@astryxdesign/core/Icon';
import {useRouter} from 'next/navigation';
import {useBreakpoint} from '@/shared/hooks/useBreakpoint';
import {SETTINGS_NAV, isSettingsActive} from '@/features/settings/config/settingsNav';

/**
 * Settings gets its own sub-navigation.
 *
 * A nested Layout with a `start` panel rather than more entries in the primary
 * sidebar: settings sections sit at a different level of the hierarchy, and
 * promoting them would push Dashboard/Store/Lyts/Staff down among
 * configuration screens they have nothing to do with.
 *
 * SideNav is reused (rather than a bespoke list) so a settings section looks
 * and behaves exactly like a primary nav item — same selected treatment, same
 * hover, same keyboard handling, no second definition to keep in sync.
 *
 * Below the laptop breakpoint a 240px panel would eat most of the width, so
 * the sub-nav collapses to a section picker above the content instead.
 */
export default function SettingsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const router = useRouter();
  const bp = useBreakpoint();
  const isNarrow = bp === 'mobile' || bp === 'tablet';

  if (isNarrow) {
    const active =
      SETTINGS_NAV.find((s) => isSettingsActive(pathname, s.href)) ??
      SETTINGS_NAV[0];

    // A dropdown, not a TabList.
    //
    // This was a TabList when Settings had three sections. At eleven it stops
    // working: `layout="fill"` cannot fit eleven labels in a tablet-width
    // column, so the strip wrapped into a full-height vertical list and
    // squeezed the page content out entirely. A picker is what every dense
    // settings UI uses at this width, and it stays one tap regardless of how
    // many sections the module grows to.
    return (
      <VStack width="100%">
        {/* Only the picker is padded here — SettingsPage still owns every
            page gutter, so the container contract stays in one place. */}
        <VStack paddingInline={8} width="100%" className="pt-8">
          <DropdownMenu
            button={{
              variant: 'secondary',
              label: active.label,
              icon: <Icon icon={active.icon} size="sm" />,
            }}
            menuWidth={260}
            items={SETTINGS_NAV.map((s) => ({
              label: s.label,
              icon: s.icon,
              onClick: () => router.push(s.href),
            }))}
          />
        </VStack>
        {children}
      </VStack>
    );
  }

  return (
    <Layout
      height="fill"
      start={
        // 240px rather than 220: "Roles & Permissions" and "API & Webhooks"
        // were wrapping once the panel gained its own inset padding.
        <LayoutPanel width={240} padding={0} role="navigation" label="Settings">
          {/*
            The panel's own inset. Without it the nav items sat flush against
            the workspace rail on one side and the content gutter on the other,
            and the first item started hard against the top of the viewport.
            paddingBlock 6 (24px) is what gives the list somewhere to begin.
          */}
          <VStack paddingInline={3} paddingBlock={6} width="100%">
            {/*
              w-full because SideNav's own width is a fixed 260px — inside a
              240px panel that already spends 24px on padding it overhung by
              32px and gave the sub-nav a horizontal scrollbar along its
              bottom edge (measured: scrollWidth 272 in a 240px panel).
            */}
            <SideNav className="w-full">
              <SideNavSection title="Settings">
                {SETTINGS_NAV.map((s) => (
                  <SideNavItem
                    key={s.href}
                    label={s.label}
                    icon={s.icon}
                    href={s.href}
                    isSelected={isSettingsActive(pathname, s.href)}
                  />
                ))}
              </SideNavSection>
            </SideNav>
          </VStack>
        </LayoutPanel>
      }
      // padding stays 0 here on purpose — SettingsPage owns the page gutters,
      // so every screen gets the identical container whether it renders in
      // this branch or the narrow picker one above.
      content={<LayoutContent padding={0}>{children}</LayoutContent>}
    />
  );
}
