shelves

"use client"

import * as React from "react"
import { cn } from "@/lib/utils"
import {
  MEASURE,
  MOTION,
  type PageMotion,
  pageAmbient,
  pageAtRest,
  pageLook,
  pagePressed,
  pageTops,
  SHELF_PAGE_END,
} from "@/registry/base-nova/lib/shelf-motion"
import { ownedHere } from "@/registry/base-nova/ui/key-router"
import {
  motionNow,
  type ShelfSlot,
  ShelfSlotContext,
  useMotionClock,
  useOwnedWheel,
} from "@/registry/base-nova/ui/shelf"

// A BROWSE PAGE: a header (the billboard) over shelves, exactly one part holding the
// focus, its top on the page's focus line under a host's bar. A step down scrolls the
// next part up to that line (slow to start, a long settle) while the part it reaches
// opens at once (its item grows into the card, it brightens, its caption shows) and the
// part it leaves fades away as it goes up; below the focus the shelves wait at 0.4
// brightness, posters only. Leaving the billboard the page nudges, holds, then scrolls,
// the billboard fading and its colour (`ambient`) leaving the page at once. Netflix's TV
// browse, measured frame by frame (`lib/shelf-motion`, the same numbers as swift-utils'
// `InkShelves`).
//
// The page never scrolls: it places every part by its span (shares of its width) and
// moves them all on one curve when the focus moves. ↓ and ↑ move the focus (a shelf
// takes it on the item it was on), a vertical wheel or a swipe by its travel, a click on
// a shelf takes it there. The page fills the box its host gives it.

const cqw = (share: number) => `${(share * 100).toFixed(4)}cqw`

export function Shelves({
  header,
  ambient,
  children,
  className,
}: {
  /** What leads the page (a `Billboard`), the first part. */
  header?: React.ReactNode
  /** The header's art's colour, washing the page from the top while the header holds
   *  the focus, any CSS colour. */
  ambient?: string
  /** The shelves, in order (`Shelf`, each its own child). */
  children: React.ReactNode
  className?: string
}) {
  const parts = React.Children.toArray(children)
  const offset = header ? 1 : 0
  const count = parts.length + offset
  const nudge = header ? MOTION.headerNudge / MEASURE.billboardSpan : 0
  const [motion, setMotion] = React.useState<PageMotion>(() => pageAtRest(0))
  const [spans, setSpans] = React.useState<
    readonly ({ rest: number; open: number } | undefined)[]
  >([])
  const now = useMotionClock(motion.start + SHELF_PAGE_END)
  const root = React.useRef<HTMLDivElement>(null)
  const headerBox = React.useRef<HTMLDivElement>(null)
  const swiped = React.useRef(0)
  const touch = React.useRef<number | null>(null)

  const press = React.useCallback(
    (index: number) => {
      const next = Math.min(Math.max(index, 0), count - 1)
      setMotion((m) =>
        next === m.focus ? m : pagePressed(m, next, motionNow(), count, nudge),
      )
    },
    [count, nudge],
  )
  const span = React.useCallback(
    (index: number, rest: number, open: number) =>
      setSpans((s) => {
        const was = s[index]
        if (was && was.rest === rest && Math.abs(was.open - open) < 1e-5)
          return s
        const next = [...s]
        next[index] = { rest, open }
        return next
      }),
    [],
  )

  // The header took the focus by the arrows or a click: its first action takes the
  // keyboard, if the page has it.
  const headerFocused = header !== undefined && motion.focus === 0
  React.useEffect(() => {
    const box = headerBox.current
    if (!headerFocused || !box) return
    if (!root.current?.contains(document.activeElement)) return
    if (box.contains(document.activeElement)) return
    box
      .querySelector<HTMLElement>("button,a[href]")
      ?.focus({ preventScroll: true })
  }, [headerFocused])

  // Each part's span closed and open: the header's is fixed, a shelf's what it said.
  const spanOf = (i: number) =>
    i < offset
      ? { rest: MEASURE.billboardSpan, open: MEASURE.billboardSpan }
      : (spans[i] ?? { rest: MEASURE.shelfPitch, open: MEASURE.shelfPitch })
  const rest = Array.from({ length: count }, (_, i) => spanOf(i).rest)
  const open = Array.from({ length: count }, (_, i) => spanOf(i).open)
  const tops = pageTops(motion, now, nudge, rest, open)
  const look = (i: number) => pageLook(motion, i, now)

  const step = (dir: number) => press(motion.focus + dir)

  // A vertical wheel steps the page while it has a part that way, by its travel; at
  // the first or the last part it is the page's again.
  useOwnedWheel(
    root,
    "y",
    (dir) => (dir > 0 ? motion.focus < count - 1 : motion.focus > 0),
    (along, el) => {
      swiped.current += along
      const threshold = el.clientWidth * MEASURE.shelfPitch * 0.5
      if (Math.abs(swiped.current) > threshold) {
        step(Math.sign(swiped.current))
        swiped.current = 0
      }
    },
  )

  return (
    // biome-ignore lint/a11y/noStaticElementInteractions: ↑ and ↓ move the focus between the parts it holds
    <div
      ref={root}
      data-slot="shelves"
      className={cn(
        "@container relative size-full overflow-hidden bg-black",
        className,
      )}
      onKeyDown={(e) => {
        if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return
        if (ownedHere(e.nativeEvent, e.currentTarget, ["button", "link"]))
          return
        e.preventDefault()
        step(e.key === "ArrowDown" ? 1 : -1)
      }}
      onPointerDown={(e) => {
        if (e.pointerType === "touch") touch.current = e.clientY
      }}
      onPointerUp={(e) => {
        if (touch.current === null) return
        const dy = touch.current - e.clientY
        touch.current = null
        const n = Math.round(
          dy / (e.currentTarget.clientWidth * MEASURE.shelfPitch * 0.5),
        )
        if (n !== 0) step(Math.sign(n))
      }}
    >
      {ambient && (
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 bg-linear-to-b from-(--ag-shelves-ambient) to-black to-92% opacity-(--ag-shelves-a)"
          style={
            {
              "--ag-shelves-ambient": ambient,
              "--ag-shelves-a": header ? pageAmbient(motion, now) : 0,
            } as React.CSSProperties
          }
        />
      )}
      {header && (
        // biome-ignore lint/a11y/noStaticElementInteractions: focus inside the header gives it the page's focus
        <div
          ref={headerBox}
          data-slot="shelves-header"
          className="absolute inset-x-0 top-0 translate-y-(--ag-shelves-y) px-(--ag-shelves-inset) opacity-(--ag-shelves-fade) brightness-(--ag-shelves-dim)"
          style={
            {
              "--ag-shelves-y": cqw(tops[0] ?? 0),
              "--ag-shelves-inset": cqw(MEASURE.inset),
              "--ag-shelves-dim": look(0).dim,
              "--ag-shelves-fade": look(0).fade,
            } as React.CSSProperties
          }
          onFocus={() => press(0)}
        >
          {header}
        </div>
      )}
      {parts.map((part, k) => {
        const index = k + offset
        const slot: ShelfSlot = {
          index,
          look: look(index),
          focused: motion.focus === index,
          press,
          span,
        }
        return (
          <div
            key={React.isValidElement(part) && part.key !== null ? part.key : k}
            className="absolute inset-x-0 top-0 translate-y-(--ag-shelves-y)"
            style={
              { "--ag-shelves-y": cqw(tops[index] ?? 0) } as React.CSSProperties
            }
          >
            <ShelfSlotContext value={slot}>{part}</ShelfSlotContext>
          </div>
        )
      })}
    </div>
  )
}