'use client';

import {TopNav} from '@astryxdesign/core/TopNav';
import {HStack} from '@astryxdesign/core/Layout';
import {IconButton} from '@astryxdesign/core/IconButton';
import {Icon} from '@astryxdesign/core/Icon';
import {Link} from '@astryxdesign/core/Link';
import {ICONS} from '@/shared/utils/icons';
import {BrandMark} from '@/shared/components/brand/BrandLogo';
import {LoyalyAiToggle} from '@/features/loyaly-ai/components/LoyalyAiToggle';
import {NavMenuButton} from './NavMenuButton';
import {useSidebar} from './SidebarProvider';

/**
 * Menu, Loyaly AI, notifications — in that order, at every width.
 *
 * The account avatar used to end this row. It has moved to the bottom-left
 * corner of the rail (AccountMenu), where it is the anchor for a cascading
 * panel rather than a dropdown. Two entry points to the same menu would put
 * the second panel in a corner it has no room to open into.
 *
 * The menu button goes in `heading`, not `startContent`, and that placement is
 * load-bearing rather than cosmetic: below AppShell's breakpoint TopNav
 * re-renders in `mobile-bar` mode, which drops `startContent` entirely and
 * keeps only `heading` and `endContent`. A menu button in startContent would
 * therefore be present on desktop and silently absent on the one screen size
 * that cannot do without it.
 *
 * The lockup rides beside it on mobile only. Above the breakpoint the sidebar
 * starts at y=0 and already carries the brand in the window's top-left corner;
 * repeating it 260px to the right would be two logos on one line.
 *
 * The store switcher and range picker used to sit here. They are query scope
 * for one page's data, not application chrome, and now live in each page's own
 * header (see @/components/scope), so this bar renders identically everywhere.
 */
export function AppTopNav() {
  const {isDrawer} = useSidebar();

  return (
    <TopNav
      label="Workspace"
      heading={
        <HStack gap={2} vAlign="center">
          <NavMenuButton />
          {isDrawer ? (
            <Link href="/dashboard">
              {/*
                The heart alone, not the lockup. Measured at 320px — the
                narrowest size in the support matrix — the 110px wordmark plus
                the four end controls came to 322px and pushed the account
                menu over the edge. The full lockup still appears at full size
                in the drawer this button opens, and in the rail above the
                breakpoint.
              */}
              <BrandMark size={26} />
            </Link>
          ) : null}
        </HStack>
      }
      endContent={
        <HStack gap={1} vAlign="center">
          <LoyalyAiToggle />
          <IconButton
            icon={<Icon icon={ICONS.notifications} />}
            label="Notifications"
            variant="ghost"
          />
        </HStack>
      }
    />
  );
}
