EvoBGP/apps/web/src/components/reui/data-grid/data-grid-scroll-area.tsx

"use client"

import { useCallback, useEffect, useRef, useState } from "react"
import type { PointerEvent, ReactNode } from "react"
import { useDataGrid } from "@/components/reui/data-grid/data-grid"
import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"

import { cn } from "@evobgp/ui/lib/utils"

const MIN_THUMB_SIZE = 24
const FALLBACK_SCROLLBAR_SIZE = 12

const INITIAL_METRICS = {
  hasVerticalOverflow: false,
  headerHeight: 0,
  horizontalScrollbarSize: 0,
  thumbHeight: 0,
  thumbTop: 0,
  trackHeight: 0,
} as const

// Track footprint, measured: horizontal is 8px tall and vertical 6px wide, and
// each loses 1px to its transparent border plus 2px to p-px, so the thumbs land
// at 5px and 3px. Shrink these further and the thumb stops being a grab target.
const SCROLLBAR_CLASSNAME =
  "flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:border-s data-[orientation=vertical]:border-s-transparent"

const SCROLLBAR_THUMB_CLASSNAME = "bg-border rounded-full relative flex-1"

type DataGridScrollAreaOrientation = "horizontal" | "vertical" | "both"

type ScrollbarMetrics = {
  hasVerticalOverflow: boolean
  headerHeight: number
  horizontalScrollbarSize: number
  thumbHeight: number
  thumbTop: number
  trackHeight: number
}

type ObservedElements = {
  header: HTMLElement | null
  horizontalScrollbar: HTMLElement | null
  table: HTMLElement | null
  tableViewport: HTMLElement | null
}

type DataGridScrollAreaProps = Omit<
  ScrollAreaPrimitive.Root.Props,
  "children"
> & {
  children: ReactNode
  orientation?: DataGridScrollAreaOrientation
}

function clamp(value: number, min: number, max: number) {
  return Math.min(max, Math.max(min, value))
}

function areMetricsEqual(next: ScrollbarMetrics, prev: ScrollbarMetrics) {
  return (
    next.hasVerticalOverflow === prev.hasVerticalOverflow &&
    next.headerHeight === prev.headerHeight &&
    next.horizontalScrollbarSize === prev.horizontalScrollbarSize &&
    next.thumbHeight === prev.thumbHeight &&
    next.thumbTop === prev.thumbTop &&
    next.trackHeight === prev.trackHeight
  )
}

function applyMetrics(element: HTMLElement, metrics: ScrollbarMetrics) {
  element.style.setProperty(
    "--data-grid-scrollbar-header-height",
    `${metrics.headerHeight}px`
  )
  element.style.setProperty(
    "--data-grid-scrollbar-thumb-height",
    `${metrics.thumbHeight}px`
  )
  element.style.setProperty(
    "--data-grid-scrollbar-thumb-top",
    `${metrics.thumbTop}px`
  )
  element.style.setProperty(
    "--data-grid-scrollbar-track-height",
    `${metrics.trackHeight}px`
  )
}

function DataGridScrollArea({
  children,
  className,
  orientation = "both",
  ...props
}: DataGridScrollAreaProps) {
  const { props: dataGridProps, table } = useDataGrid()
  const containerRef = useRef<HTMLDivElement>(null)
  const overlayRef = useRef<HTMLDivElement | null>(null)
  const viewportRef = useRef<HTMLDivElement | null>(null)
  const dragRef = useRef<{
    pointerId: number
    startScrollTop: number
    startY: number
  } | null>(null)
  const metricsRef = useRef<ScrollbarMetrics>(INITIAL_METRICS)
  const observedElementsRef = useRef<ObservedElements>({
    header: null,
    horizontalScrollbar: null,
    table: null,
    tableViewport: null,
  })

  const showHorizontal = orientation !== "vertical"
  const showVertical = orientation !== "horizontal"
  const usesCustomVerticalScrollbar =
    showVertical && !!dataGridProps.tableLayout?.headerSticky
  // Pinned columns are sticky and never scroll, so the horizontal scrollbar
  // track is inset to span only the scrollable center region between them.
  const isColumnsPinnable = !!dataGridProps.tableLayout?.columnsPinnable
  const scrollbarInsetStart = isColumnsPinnable ? table.getStartTotalSize() : 0
  const scrollbarInsetEnd = isColumnsPinnable ? table.getEndTotalSize() : 0
  const [hasCustomVerticalOverflow, setHasCustomVerticalOverflow] =
    useState(false)

  const clearDragState = useCallback(() => {
    dragRef.current = null
    document.body.style.userSelect = ""
    document.body.style.webkitUserSelect = ""
  }, [])

  // The overlay is mounted one commit after the sync that detected overflow,
  // so it misses that sync's write. Seeding it from the ref callback lands the
  // geometry during commit, before the browser paints the track.
  const setOverlayRef = useCallback((node: HTMLDivElement | null) => {
    overlayRef.current = node

    if (node) applyMetrics(node, metricsRef.current)
  }, [])

  const resetMetrics = useCallback(() => {
    if (!areMetricsEqual(INITIAL_METRICS, metricsRef.current)) {
      metricsRef.current = INITIAL_METRICS
      if (overlayRef.current) applyMetrics(overlayRef.current, INITIAL_METRICS)
    }

    setHasCustomVerticalOverflow((prev) => (prev ? false : prev))
  }, [])

  const syncCustomVerticalScrollbar = useCallback(() => {
    const container = containerRef.current
    const viewport = viewportRef.current

    if (!container || !viewport || !usesCustomVerticalScrollbar) {
      resetMetrics()
      return
    }

    const { header, horizontalScrollbar } = observedElementsRef.current
    const headerHeight = header?.getBoundingClientRect().height ?? 0
    const viewportHeight = viewport.clientHeight
    const viewportWidth = viewport.clientWidth
    const scrollHeight = viewport.scrollHeight
    const scrollWidth = viewport.scrollWidth
    const hasHorizontalOverflow =
      showHorizontal && scrollWidth > viewportWidth + 0.5
    const horizontalScrollbarSize = hasHorizontalOverflow
      ? horizontalScrollbar?.offsetHeight || FALLBACK_SCROLLBAR_SIZE
      : 0
    const trackHeight = Math.max(
      0,
      viewportHeight - headerHeight - horizontalScrollbarSize
    )
    const maxScroll = Math.max(0, scrollHeight - viewportHeight)

    let nextMetrics: ScrollbarMetrics

    if (trackHeight === 0 || maxScroll === 0) {
      nextMetrics = {
        hasVerticalOverflow: false,
        headerHeight,
        horizontalScrollbarSize,
        thumbHeight: trackHeight,
        thumbTop: 0,
        trackHeight,
      }
    } else {
      const bodyContentHeight = Math.max(
        trackHeight,
        scrollHeight - headerHeight
      )
      const thumbHeight = clamp(
        trackHeight * (trackHeight / bodyContentHeight),
        MIN_THUMB_SIZE,
        trackHeight
      )
      const maxThumbTop = Math.max(0, trackHeight - thumbHeight)
      const thumbTop =
        maxThumbTop > 0 ? (viewport.scrollTop / maxScroll) * maxThumbTop : 0

      nextMetrics = {
        hasVerticalOverflow: true,
        headerHeight,
        horizontalScrollbarSize,
        thumbHeight,
        thumbTop,
        trackHeight,
      }
    }

    if (!areMetricsEqual(nextMetrics, metricsRef.current)) {
      metricsRef.current = nextMetrics
      // Scoped to the overlay, never to the container. These four properties
      // inherit, and thumbTop changes on essentially every scroll frame, so
      // writing them on the element that wraps the whole grid invalidates
      // computed style for every row and cell each frame. The overlay subtree
      // is their only reader.
      if (overlayRef.current) applyMetrics(overlayRef.current, nextMetrics)
    }

    setHasCustomVerticalOverflow((prev) =>
      prev === nextMetrics.hasVerticalOverflow
        ? prev
        : nextMetrics.hasVerticalOverflow
    )
  }, [resetMetrics, showHorizontal, usesCustomVerticalScrollbar])

  useEffect(() => {
    const container = containerRef.current
    const viewport = viewportRef.current

    if (!container || !viewport) return

    if (!usesCustomVerticalScrollbar) {
      resetMetrics()
      return
    }

    let frame = 0

    const scheduleSync = () => {
      cancelAnimationFrame(frame)
      frame = window.requestAnimationFrame(syncCustomVerticalScrollbar)
    }

    const observer =
      typeof ResizeObserver === "undefined"
        ? null
        : new ResizeObserver(scheduleSync)
    const observed = new Set<HTMLElement>()

    const observeElement = (element: HTMLElement | null) => {
      if (element && observer && !observed.has(element)) {
        observer.observe(element)
        observed.add(element)
      }
    }

    const resolveObservedElements = () => {
      observedElementsRef.current = {
        header: container.querySelector(
          '[data-slot="data-grid-table"] thead'
        ) as HTMLElement | null,
        horizontalScrollbar: container.querySelector(
          '[data-slot="data-grid-scrollbar"][data-orientation="horizontal"]'
        ) as HTMLElement | null,
        table: container.querySelector(
          '[data-slot="data-grid-table"]'
        ) as HTMLElement | null,
        tableViewport: container.querySelector(
          '[data-slot="data-grid-table-viewport"]'
        ) as HTMLElement | null,
      }

      observeElement(observedElementsRef.current.header)
      observeElement(observedElementsRef.current.table)
      observeElement(observedElementsRef.current.tableViewport)

      return !!(
        observedElementsRef.current.header && observedElementsRef.current.table
      )
    }

    observeElement(viewport)
    const resolvedOnMount = resolveObservedElements()

    scheduleSync()
    viewport.addEventListener("scroll", scheduleSync, { passive: true })

    // A table that mounts after this effect (empty state swapped for data)
    // would otherwise never be observed and the custom scrollbar would
    // overlap the sticky header. One-shot: disconnects once resolved.
    let mutationObserver: MutationObserver | null = null
    if (!resolvedOnMount && typeof MutationObserver !== "undefined") {
      mutationObserver = new MutationObserver(() => {
        if (resolveObservedElements()) {
          mutationObserver?.disconnect()
          mutationObserver = null
          scheduleSync()
        }
      })
      mutationObserver.observe(container, { childList: true, subtree: true })
    }

    return () => {
      cancelAnimationFrame(frame)
      observer?.disconnect()
      mutationObserver?.disconnect()
      viewport.removeEventListener("scroll", scheduleSync)
      clearDragState()
    }
  }, [
    clearDragState,
    resetMetrics,
    syncCustomVerticalScrollbar,
    usesCustomVerticalScrollbar,
  ])

  const scrollToThumbOffset = (nextThumbTop: number) => {
    const viewport = viewportRef.current
    const { thumbHeight, trackHeight } = metricsRef.current

    if (!viewport) return

    const maxScroll = Math.max(0, viewport.scrollHeight - viewport.clientHeight)
    const maxThumbTop = Math.max(0, trackHeight - thumbHeight)

    if (maxScroll === 0 || maxThumbTop === 0) {
      viewport.scrollTop = 0
      return
    }

    const ratio = clamp(nextThumbTop, 0, maxThumbTop) / maxThumbTop
    viewport.scrollTop = ratio * maxScroll
  }

  const handleThumbPointerDown = (event: PointerEvent<HTMLDivElement>) => {
    const viewport = viewportRef.current

    if (!viewport) return

    event.preventDefault()
    event.stopPropagation()
    event.currentTarget.setPointerCapture(event.pointerId)

    dragRef.current = {
      pointerId: event.pointerId,
      startScrollTop: viewport.scrollTop,
      startY: event.clientY,
    }

    document.body.style.userSelect = "none"
    document.body.style.webkitUserSelect = "none"
  }

  const handleThumbPointerMove = (event: PointerEvent<HTMLDivElement>) => {
    const viewport = viewportRef.current
    const dragState = dragRef.current
    const { thumbHeight, trackHeight } = metricsRef.current

    if (!viewport || !dragState || dragState.pointerId !== event.pointerId) {
      return
    }

    const maxThumbTop = Math.max(0, trackHeight - thumbHeight)
    const maxScroll = Math.max(0, viewport.scrollHeight - viewport.clientHeight)

    if (maxThumbTop === 0 || maxScroll === 0) return

    const deltaY = event.clientY - dragState.startY
    const nextScrollTop =
      dragState.startScrollTop + (deltaY / maxThumbTop) * maxScroll

    viewport.scrollTop = clamp(nextScrollTop, 0, maxScroll)
  }

  const handleThumbPointerUp = (event: PointerEvent<HTMLDivElement>) => {
    if (dragRef.current?.pointerId !== event.pointerId) return
    clearDragState()
  }

  const handleTrackPointerDown = (event: PointerEvent<HTMLDivElement>) => {
    const { thumbHeight } = metricsRef.current

    if (event.target !== event.currentTarget) return

    event.preventDefault()
    event.stopPropagation()

    const rect = event.currentTarget.getBoundingClientRect()
    const offsetY = event.clientY - rect.top - thumbHeight / 2

    scrollToThumbOffset(offsetY)
  }

  return (
    <div ref={containerRef} className="relative">
      <ScrollAreaPrimitive.Root
        data-slot="data-grid-scroll-area"
        // Styling hook: present while the sticky-header scroll mode detects
        // vertical overflow, so consumers can style scrollable vs short
        // grids with a plain ancestor attribute selector.
        data-overflow-vertical={hasCustomVerticalOverflow ? "true" : undefined}
        className={cn("relative", className)}
        {...props}
      >
        <ScrollAreaPrimitive.Viewport
          ref={viewportRef}
          data-slot="scroll-area-viewport"
          className="size-full"
        >
          <ScrollAreaPrimitive.Content data-slot="scroll-area-content">
            {children}
          </ScrollAreaPrimitive.Content>
        </ScrollAreaPrimitive.Viewport>

        {showHorizontal && (
          <ScrollAreaPrimitive.Scrollbar
            data-slot="data-grid-scrollbar"
            data-orientation="horizontal"
            orientation="horizontal"
            className={SCROLLBAR_CLASSNAME}
            style={
              scrollbarInsetStart > 0 || scrollbarInsetEnd > 0
                ? {
                    marginInlineStart: scrollbarInsetStart || undefined,
                    marginInlineEnd: scrollbarInsetEnd || undefined,
                  }
                : undefined
            }
          >
            <ScrollAreaPrimitive.Thumb
              data-slot="data-grid-thumb"
              className={SCROLLBAR_THUMB_CLASSNAME}
            />
          </ScrollAreaPrimitive.Scrollbar>
        )}

        {showVertical && !usesCustomVerticalScrollbar && (
          <ScrollAreaPrimitive.Scrollbar
            data-slot="data-grid-scrollbar"
            data-orientation="vertical"
            orientation="vertical"
            className={SCROLLBAR_CLASSNAME}
          >
            <ScrollAreaPrimitive.Thumb
              data-slot="data-grid-thumb"
              className={SCROLLBAR_THUMB_CLASSNAME}
            />
          </ScrollAreaPrimitive.Scrollbar>
        )}
      </ScrollAreaPrimitive.Root>

      {usesCustomVerticalScrollbar && hasCustomVerticalOverflow && (
        <div
          ref={setOverlayRef}
          aria-hidden="true"
          className="pointer-events-none absolute inset-e-0 top-(--data-grid-scrollbar-header-height) z-20 h-(--data-grid-scrollbar-track-height)"
        >
          <div
            className="pointer-events-auto relative h-full w-1.5 touch-none p-px"
            onPointerDown={handleTrackPointerDown}
          >
            <div
              className={cn(
                "bg-border absolute end-px w-1.5",
                "top-(--data-grid-scrollbar-thumb-top) h-(--data-grid-scrollbar-thumb-height)",
                "rounded-full"
              )}
              onLostPointerCapture={clearDragState}
              onPointerCancel={handleThumbPointerUp}
              onPointerDown={handleThumbPointerDown}
              onPointerMove={handleThumbPointerMove}
              onPointerUp={handleThumbPointerUp}
            />
          </div>
        </div>
      )}
    </div>
  )
}

export { DataGridScrollArea }
export type { DataGridScrollAreaOrientation, DataGridScrollAreaProps }