"use client"

/**
 * ScrollArea — Radix-backed scroll container with always-visible-on-hover
 * scrollbars that respect platform conventions.
 *
 * Use when you need an **explicitly bounded** scrolling region (lists in
 * popovers, sidebar nav trees, long config panels) and the default
 * browser scrollbar is too coarse or visually noisy.
 *
 * Bound it with a height (`h-64`) or a max height (`max-h-80`) on the root. A
 * max height reaches the scrolling box through `max-h-[inherit]` below, because
 * that box is sized `size-full` and `h-full` against an `auto` height resolves to
 * `auto`: without the inherit, a `max-h-*` root would clip nothing and the list
 * would paint straight out of whatever panel it sits in.
 *
 * Accessibility:
 *  - The scrolling box carries `role="region"` + `viewportLabel`, and enters the
 *    Tab order only while it actually scrolls (`useScrollOverflow`), which is
 *    axe's `scrollable-region-focusable` without a focus stop on every short list.
 */

import * as React from "react"
import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"

import { useScrollOverflow } from "../../hooks/use-scroll-overflow"
import { cn } from "../../lib/utils"

function ScrollArea({
  className,
  children,
  viewportLabel = "Scrollable content",
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
  /** Accessible name for the scroll viewport (WCAG 1.4.10 / keyboard scroll). */
  viewportLabel?: string
}) {
  const { ref, overflowing } = useScrollOverflow<HTMLDivElement>()

  return (
    <ScrollAreaPrimitive.Root
      data-slot="scroll-area"
      className={cn("relative", className)}
      {...props}
    >
      {/* Not `asChild` with a `ScrollRegion` inside, which is what this was.
          Radix renders the viewport's overflow on one div and a `display: table`
          content div inside it; `asChild` collapsed the two, and overflow does not
          apply to a table box, so nothing clipped and nothing scrolled. The
          region's own behaviour is kept by wearing its attributes here. */}
      <ScrollAreaPrimitive.Viewport
        ref={ref}
        data-slot="scroll-area-viewport"
        role="region"
        aria-label={viewportLabel}
        tabIndex={overflowing ? 0 : undefined}
        className={cn(
          "size-full max-h-[inherit] rounded-[inherit] outline-none",
          // Inset, unlike `ScrollRegion`'s offset ring: this box is clipped to the
          // panel that bounds it, so an outset ring would be cropped by the panel
          // edge it sits against.
          overflowing && "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
        )}
      >
        {children}
      </ScrollAreaPrimitive.Viewport>
      <ScrollBar />
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  )
}

function ScrollBar({
  className,
  orientation = "vertical",
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
  return (
    <ScrollAreaPrimitive.ScrollAreaScrollbar
      data-slot="scroll-area-scrollbar"
      orientation={orientation}
      className={cn(
        "flex touch-none select-none p-px transition-colors",
        orientation === "vertical" &&
          "h-full w-2.5 border-s border-s-transparent",
        orientation === "horizontal" &&
          "h-2.5 w-full flex-col border-t border-t-transparent",
        className,
      )}
      {...props}
    >
      <ScrollAreaPrimitive.ScrollAreaThumb
        data-slot="scroll-area-thumb"
        className="relative flex-1 rounded-full bg-border hover:bg-border/80"
      />
    </ScrollAreaPrimitive.ScrollAreaScrollbar>
  )
}

export { ScrollArea, ScrollBar }