'use client';

import {Link} from '@astryxdesign/core/Link';
import {HStack} from '@astryxdesign/core/Layout';
import {useSideNavCollapse} from '@astryxdesign/core/SideNav';
import {BrandLogo, BrandMark} from '@/shared/components/brand/BrandLogo';

/**
 * SideNav's header slot: the lockup and the heart, cross-faded.
 *
 * ── Why both marks are always mounted ─────────────────────────────────────
 * Swapping `{isCollapsed ? <Mark/> : <Logo/>}` cannot animate — React tears
 * one element out and puts the other in, so the brand hard-cuts while the
 * rail beside it is still 200ms from arriving, which is the single most
 * noticeable jump in the whole collapse. Both marks render on every frame,
 * stacked in the same 48px box, and only opacity and scale change. Next/Image
 * also gets to keep both files warm, so neither swap costs a fetch.
 *
 * The box is a FIXED 48px tall and full-width in both states, which is what
 * stops the nav below it from shifting: the heart is centred by the layer's
 * own alignment rather than by the box changing shape. 48px also matches the
 * top bar's height, so the mark sits on the same baseline as the header
 * controls across the fold — the Linear/Vercel arrangement.
 *
 * ── One link, two images ──────────────────────────────────────────────────
 * The layers are decoration inside a single anchor, not two anchors: two
 * would mean two tab stops for one destination, one of them invisible.
 * `pointer-events-none` keeps the images from eating the anchor's clicks, and
 * only the lockup carries alt text — the heart passes `alt=""` so the
 * accessible name stays "Loyaly.ai" rather than doubling.
 *
 * The 'Merchant OS' subtitle that used to sit under the lockup is gone. It
 * could not survive the collapse without either changing the header's height
 * (the jump above) or reserving a dead line in an 84px rail, and the product
 * name is already carried by the document title and the lockup itself.
 */

/** Shared by both layers — they occupy the same box and differ only in fade. */
const LAYER = [
  'absolute inset-0 pointer-events-none',
  // `scale`, not `transform`: Tailwind v4's scale-* utilities set the
  // standalone `scale` property, so a transition listed against `transform`
  // animates nothing and the mark pops in at full size. Measured — computed
  // transform stayed `none` while computed scale was already 0.95.
  'transition-[opacity,scale] duration-200 ease-in-out',
  // The lockup is 170px wide inside an 84px rail for the length of the
  // collapse. Without this it squashes to 65px on the way out; with it, the
  // rail's own `overflow: hidden` clips it instead, which is the same thing
  // Linear does and the only one of the two that looks deliberate.
  // max-w-none as well as shrink-0: Tailwind's preflight caps every img at
  // `max-width: 100%`, which re-imposes the squash that shrink-0 just removed.
  '[&_img]:shrink-0 [&_img]:max-w-none',
].join(' ');

export function SideNavBrand() {
  const {isCollapsed} = useSideNavCollapse();

  return (
    // paddingInline 8px expanded so the lockup's left edge lands on the same
    // 16px optical margin as the nav glyphs below it (8px from SideNav's own
    // sticky header padding + 8px here); 0 collapsed, where the layer centres
    // the heart in the 84px rail instead.
    <HStack
      className="relative h-12 w-full"
      paddingInline={isCollapsed ? 0 : 2}
      vAlign="center"
    >
      {/* The image alt is the link's accessible name — no `label` here, or it
          would override it. */}
      <Link href="/dashboard" className="absolute inset-0 block">
        <HStack
          className={`${LAYER} ${
            isCollapsed ? 'opacity-0 scale-95' : 'opacity-100 scale-100'
          }`}
          vAlign="center"
          hAlign="start"
        >
          {/* 34px tall → 170px wide. The rail is 260px and gives up 32px to
              padding, so the lockup clears its box and still reads as the
              largest thing in the sidebar. */}
          <BrandLogo height={34} priority />
        </HStack>

        <HStack
          className={`${LAYER} ${
            isCollapsed ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
          }`}
          vAlign="center"
          hAlign="center"
        >
          <BrandMark size={32} alt="" priority />
        </HStack>
      </Link>
    </HStack>
  );
}
