"use client"

import * as React from "react"

import { cn } from "../../lib/utils"
import {
  HorizontalScrollControls,
  HorizontalScrollViewport,
  useHorizontalScrollAffordances,
  useHorizontalScrollAlignEnd,
} from "./horizontal-scroll-controls"

export type {
  HorizontalScrollAffordances,
  HorizontalScrollControlsLayout,
  HorizontalScrollControlsProps,
} from "./horizontal-scroll-controls"
export {
  HORIZONTAL_SCROLL_STEP_PX,
  HorizontalScrollControls,
  HorizontalScrollViewport,
  horizontalScrollViewportClassName,
  useHorizontalScrollAffordances,
  useHorizontalScrollAlignEnd,
  useHorizontalScrollItemIntoView,
} from "./horizontal-scroll-controls"

export interface HorizontalScrollRegionProps {
  children: React.ReactNode
  /** Prefix for prev/next `aria-label`s (e.g. "Views"). */
  ariaLabel?: string
  className?: string
  scrollClassName?: string
  /** Scroll to the trailing edge when content overflows (breadcrumb trails). */
  alignEnd?: boolean
  /**
   * `toolbar` — fixed 32px row (tabs, breadcrumbs).
   * `content` — grows with tall children (KPI scroll strip).
   */
  fit?: "toolbar" | "content"
  /**
   * `split` — prev before content, next after.
   * `group-end` / `group-start` — shared {@link HorizontalScrollControls} after / before content.
   */
  controlsLayout?: "split" | "group-end" | "group-start"
  /**
   * Observe the scroll viewport from outside. Lets a caller measure the row and
   * shed content *before* falling back to scrolling, e.g. tabs collapsing their
   * inactive labels to icons.
   */
  viewportRef?: React.Ref<HTMLDivElement>
  /**
   * Set `false` when the caller offers its own way to reach clipped content, so
   * the arrows stop competing for the width that reduced the row in the first
   * place. Tabs do this once they have an overflow menu.
   */
  controls?: boolean
}

/**
 * Horizontal scroll container with {@link HorizontalScrollControls} when content overflows.
 * Use for view-tab toolbars, breadcrumb trails, tab lists, and other clipped rows.
 */
export function HorizontalScrollRegion({
  children,
  ariaLabel = "Scroll",
  className,
  scrollClassName,
  alignEnd = false,
  fit = "toolbar",
  controlsLayout = "group-end",
  viewportRef,
  controls = true,
}: HorizontalScrollRegionProps) {
  const scrollRef = React.useRef<HTMLDivElement>(null)
  const {
    canScrollLeft,
    canScrollRight,
    overflowing: clipped,
    scrollPrev,
    scrollNext,
  } = useHorizontalScrollAffordances(scrollRef)
  const overflowing = controls && clipped

  const attachViewport = React.useCallback(
    (node: HTMLDivElement | null) => {
      scrollRef.current = node
      if (typeof viewportRef === "function") viewportRef(node)
      else if (viewportRef) {
        ;(viewportRef as React.MutableRefObject<HTMLDivElement | null>).current = node
      }
    },
    [viewportRef],
  )

  useHorizontalScrollAlignEnd(scrollRef, alignEnd, [children])

  const isGrouped =
    controlsLayout === "group-end" || controlsLayout === "group-start"
  const groupLeading = controlsLayout === "group-start"

  const controlProps = {
    ariaLabel,
    canScrollLeft,
    canScrollRight,
    onScrollPrev: scrollPrev,
    onScrollNext: scrollNext,
  }

  return (
      <div
        data-slot="horizontal-scroll-region"
        className={cn(
          "flex min-w-0 w-full items-center gap-1.5",
          // A minimum, not a fixed height: every tab row now builds one of these,
          // and some of them are taller than a toolbar (a chart card's metric
          // tabs stack a label over a large value). `h-8` clamped the region to
          // 32px while its content stayed ~44px, so the row overlapped whatever
          // sat below it.
          fit === "toolbar" ? "min-h-8" : "min-h-0 items-stretch py-0.5",
          fit === "content" && "gap-2.5",
          className,
        )}
      >
      {isGrouped && groupLeading && overflowing ? (
        <HorizontalScrollControls {...controlProps} layout="group" className="self-center" />
      ) : null}
      {!isGrouped && overflowing ? (
        <HorizontalScrollControls {...controlProps} layout="split-prev" />
      ) : null}
      <HorizontalScrollViewport
        ref={attachViewport}
        label={ariaLabel}
        className={scrollClassName}
      >
        {children}
      </HorizontalScrollViewport>
      {isGrouped && !groupLeading && overflowing ? (
        <HorizontalScrollControls {...controlProps} layout="group" className="self-center" />
      ) : null}
      {!isGrouped && overflowing ? (
        <HorizontalScrollControls {...controlProps} layout="split-next" />
      ) : null}
    </div>
  )
}