"use client"

import * as React from "react"

import { composeRefs } from "../../lib/compose-refs"
import { cn } from "../../lib/utils"
import { Button } from "./button"
import { ScrollRegion } from "./scroll-region"
import { Tip } from "./tip"

/** Default horizontal scroll distance per chevron click (px). */
export const HORIZONTAL_SCROLL_STEP_PX = 240

export interface HorizontalScrollAffordances {
  canScrollLeft: boolean
  canScrollRight: boolean
  overflowing: boolean
  scrollPrev: () => void
  scrollNext: () => void
}

/**
 * Tracks overflow + scroll position for a horizontally scrollable element.
 * Pair with {@link HorizontalScrollControls} or compose your own chrome.
 */
export function useHorizontalScrollAffordances(
  scrollRef: React.RefObject<HTMLElement | null>,
  stepPx = HORIZONTAL_SCROLL_STEP_PX,
): HorizontalScrollAffordances {
  const [canScrollLeft, setCanScrollLeft] = React.useState(false)
  const [canScrollRight, setCanScrollRight] = React.useState(false)
  const [overflowing, setOverflowing] = React.useState(false)

  const sync = React.useCallback(() => {
    const el = scrollRef.current
    if (!el) return
    const { scrollLeft, scrollWidth, clientWidth } = el
    const overflow = scrollWidth > clientWidth + 1
    setOverflowing(overflow)
    setCanScrollLeft(overflow && scrollLeft > 1)
    setCanScrollRight(overflow && scrollLeft + clientWidth < scrollWidth - 1)
  }, [scrollRef])

  const syncRef = React.useRef(sync)
  // Layout, not passive: the effect below reads this ref during the same
  // commit, and it only sees the current callback if the write lands first.
  React.useLayoutEffect(() => {
    syncRef.current = sync
  })

  React.useLayoutEffect(() => {
    const runSync = () => syncRef.current()
    runSync()
    const el = scrollRef.current
    if (!el) return
    el.addEventListener("scroll", runSync, { passive: true })
    const ro = new ResizeObserver(runSync)
    ro.observe(el)
    for (const child of el.children) {
      ro.observe(child)
    }
    return () => {
      el.removeEventListener("scroll", runSync)
      ro.disconnect()
    }
  }, [scrollRef])

  const scrollBy = React.useCallback(
    (delta: number) => {
      scrollRef.current?.scrollBy({ left: delta, behavior: "smooth" })
    },
    [scrollRef],
  )

  return {
    canScrollLeft,
    canScrollRight,
    overflowing,
    scrollPrev: () => scrollBy(-stepPx),
    scrollNext: () => scrollBy(stepPx),
  }
}

/** Pin scroll position to the trailing edge when content grows (breadcrumb trails). */
export function useHorizontalScrollAlignEnd(
  scrollRef: React.RefObject<HTMLElement | null>,
  enabled: boolean,
  deps: React.DependencyList = [],
) {
  React.useLayoutEffect(() => {
    if (!enabled) return
    const el = scrollRef.current
    if (!el) return
    const scrollToEnd = () => {
      el.scrollLeft = Math.max(0, el.scrollWidth - el.clientWidth)
    }
    scrollToEnd()
    const ro = new ResizeObserver(scrollToEnd)
    ro.observe(el)
    for (const child of el.children) {
      ro.observe(child)
    }
    return () => ro.disconnect()
    // eslint-disable-next-line react-hooks/exhaustive-deps -- caller supplies content deps
  }, [enabled, scrollRef, ...deps])
}

/**
 * Keeps an active child visible inside a horizontal scroll viewport (wizards, tab strips).
 */
export function useHorizontalScrollItemIntoView(
  containerRef: React.RefObject<HTMLElement | null>,
  itemRef: React.RefObject<HTMLElement | null>,
  deps: React.DependencyList = [],
) {
  React.useLayoutEffect(() => {
    const container = containerRef.current
    const item = itemRef.current
    if (!container || !item) return

    const padding = 8
    const containerRect = container.getBoundingClientRect()
    const itemRect = item.getBoundingClientRect()

    if (itemRect.left < containerRect.left + padding) {
      container.scrollTo({
        left: container.scrollLeft + (itemRect.left - containerRect.left) - padding,
        behavior: "smooth",
      })
    } else if (itemRect.right > containerRect.right - padding) {
      container.scrollTo({
        left: container.scrollLeft + (itemRect.right - containerRect.right) + padding,
        behavior: "smooth",
      })
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps -- caller supplies deps
  }, deps)
}

export type HorizontalScrollControlsLayout = "group" | "split-prev" | "split-next"

export interface HorizontalScrollControlsProps {
  /** Prefix for prev/next `aria-label`s (e.g. "Views", "Breadcrumb"). */
  ariaLabel: string
  layout?: HorizontalScrollControlsLayout
  canScrollLeft: boolean
  canScrollRight: boolean
  onScrollPrev: () => void
  onScrollNext: () => void
  className?: string
}

/**
 * Shared prev/next chevron control for horizontally overflowed rows.
 *
 * - **`group`** — segmented `[← | →]` button (default for view tabs, breadcrumbs).
 * - **`split-prev` / `split-next`** — single chevron for flanking layouts.
 */
export function HorizontalScrollControls({
  ariaLabel,
  layout = "group",
  canScrollLeft,
  canScrollRight,
  onScrollPrev,
  onScrollNext,
  className,
}: HorizontalScrollControlsProps) {
  const prevButton = (
    <Tip label="Previous" side="bottom" triggerClassName="inline-flex size-8 shrink-0 items-center justify-center">
      <Button
        type="button"
        variant="ghost"
        size="icon-sm"
        className={cn(
          "size-8 shrink-0 grow-0 p-0",
          layout === "group" && "rounded-none border-e border-border/60",
        )}
        disabled={!canScrollLeft}
        onClick={onScrollPrev}
        aria-label={`${ariaLabel} — previous`}
      >
        <i className="fa-light fa-chevron-left text-xs" aria-hidden="true" />
      </Button>
    </Tip>
  )

  const nextButton = (
    <Tip label="Next" side="bottom" triggerClassName="inline-flex size-8 shrink-0 items-center justify-center">
      <Button
        type="button"
        variant="ghost"
        size="icon-sm"
        className={cn(
          "size-8 shrink-0 grow-0 p-0",
          layout === "group" && "rounded-none",
        )}
        disabled={!canScrollRight}
        onClick={onScrollNext}
        aria-label={`${ariaLabel} — next`}
      >
        <i className="fa-light fa-chevron-right text-xs" aria-hidden="true" />
      </Button>
    </Tip>
  )

  if (layout === "group") {
    return (
      <div
        data-slot="horizontal-scroll-controls"
        role="group"
        aria-label={`${ariaLabel} scroll`}
        className={cn(
          "inline-grid h-8 w-16 shrink-0 grid-cols-2 overflow-hidden rounded-lg border border-border/60 bg-background shadow-xs",
          className,
        )}
      >
        {prevButton}
        {nextButton}
      </div>
    )
  }

  return (
    <div data-slot="horizontal-scroll-controls" className={className}>
      {layout === "split-prev" ? prevButton : nextButton}
    </div>
  )
}

/** Tailwind classes for a clipped horizontal scroll viewport (scrollbar hidden). */
/**
 * `p-1.5 -m-1.5` is room for a focus ring, not spacing.
 *
 * `overflow-x: auto` forces the block axis to `auto` as well — CSS has no way to
 * scroll one axis and let the other paint outside — so this box clips its
 * children's focus indicators, and the DS indicator is outset (a 3px ring plus a
 * 1px outline at 2px offset). A 36px tab in a 35px viewport therefore showed its
 * ring sliced flat top and bottom, and the first and last items lost the near
 * edge too. Padding gives the indicator somewhere to paint inside the clip. 6px
 * rather than the indicator's 3px reach, because a line-variant tab hangs a pixel
 * past its own row to sit on the track.
 *
 * The negative margin is what makes it free. Flex positions the margin box, so
 * pulling the padding back on every side leaves the content box exactly where it
 * was and the same size: rows keep their height, gaps to the scroll chevrons are
 * unchanged, and {@link useRowFitLadder} still compares like with like, since
 * `clientWidth` and `scrollWidth` grow by the same amount.
 */
export const horizontalScrollViewportClassName =
  "flex min-w-0 flex-1 items-center overflow-x-auto p-1.5 -m-1.5 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"

export type HorizontalScrollViewportProps = React.ComponentProps<typeof ScrollRegion>

/**
 * Horizontal scroll viewport with keyboard access — use with
 * {@link useHorizontalScrollAffordances} + {@link HorizontalScrollControls}
 * when not using {@link HorizontalScrollRegion}.
 *
 * **Edges fade rather than cut.** A clipped row ends mid-card, mid-label, or
 * mid-chart, which reads as a rendering fault rather than as "there is more this
 * way". `data-fade` names which edge has content behind it and one rule in
 * `globals.css` masks that side to transparent — a mask, not a coloured overlay,
 * because these rows sit on white cards, tinted washes, and the page canvas, and
 * a gradient painted in one of those colours is wrong on the other two.
 *
 * The fade is state, so the viewport tracks its own scroll position through the
 * same hook a caller uses for the chevrons. That is a second observer on the same
 * node in the common case, and worth it: every caller gets the treatment without
 * remembering to wire it, including the ones with no chevrons at all.
 */
export const HorizontalScrollViewport = React.forwardRef<
  HTMLDivElement,
  HorizontalScrollViewportProps
>(function HorizontalScrollViewport({ className, ...props }, ref) {
  const localRef = React.useRef<HTMLDivElement | null>(null)
  const { canScrollLeft, canScrollRight } = useHorizontalScrollAffordances(localRef)

  const fade = canScrollLeft
    ? canScrollRight
      ? "both"
      : "start"
    : canScrollRight
      ? "end"
      : "none"

  return (
    <ScrollRegion
      ref={composeRefs(localRef, ref)}
      data-slot="horizontal-scroll-viewport"
      data-fade={fade}
      className={cn(horizontalScrollViewportClassName, className)}
      {...props}
    />
  )
})

HorizontalScrollViewport.displayName = "HorizontalScrollViewport"