import { cn } from "./utils"

/**
 * Mouse-drag edge handle shared by {@link DataTable} column resize and the
 * nested secondary panel rail — same affordance, cursor, and hover/active tint.
 */
export const EDGE_RESIZE_HANDLE_CLASS = cn(
  "absolute end-0 top-1 bottom-1 z-30 w-1.5 cursor-col-resize rounded-full",
  "hover:bg-interactive-hover-foreground/50 active:bg-muted-foreground/70",
  "transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
)

/** Leading-edge handle — right-anchored rails (Ask Leo). */
export const EDGE_RESIZE_HANDLE_LEFT_CLASS = cn(
  "absolute start-0 top-1 bottom-1 z-30 w-1.5 cursor-col-resize rounded-full",
  "hover:bg-interactive-hover-foreground/50 active:bg-muted-foreground/70",
  "transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
)

/** Upper bound for column resize `aria-valuemax` when no product max is defined. */
export const EDGE_RESIZE_COLUMN_WIDTH_MAX = 2000

export type VerticalResizeSeparatorAriaProps = {
  role: "separator"
  /**
   * `-1` for pointer-only handles (table columns). `0` when the handle also
   * supports keyboard resize (Sheet edge), so it enters the tab order.
   */
  tabIndex: 0 | -1
  "aria-label": string
  "aria-orientation": "vertical"
  "aria-valuemin": number
  "aria-valuemax": number
  "aria-valuenow": number
}

/**
 * ARIA bundle for vertical resize handles (`role="separator"`).
 * axe requires `aria-valuemin` / `aria-valuemax` / `aria-valuenow` when
 * `aria-orientation="vertical"` is set (WCAG 4.1.2).
 */
export function verticalResizeSeparatorAria({
  label,
  valueNow,
  valueMin = 0,
  valueMax = EDGE_RESIZE_COLUMN_WIDTH_MAX,
  tabIndex = -1,
}: {
  label: string
  valueNow: number
  valueMin?: number
  valueMax?: number
  tabIndex?: 0 | -1
}): VerticalResizeSeparatorAriaProps {
  return {
    role: "separator",
    tabIndex,
    "aria-label": label,
    "aria-orientation": "vertical",
    "aria-valuemin": valueMin,
    "aria-valuemax": valueMax,
    "aria-valuenow": Math.round(valueNow),
  }
}

/** Wire document-level mousemove/mouseup drag — mirrors `useTableState#startResize`. */
export function startEdgeResizeDrag(
  event: React.MouseEvent,
  onMove: (clientX: number) => void,
  onEnd?: () => void,
) {
  event.preventDefault()
  event.stopPropagation()
  const handleMove = (ev: MouseEvent) => {
    onMove(ev.clientX)
  }
  const handleUp = () => {
    onEnd?.()
    document.removeEventListener("mousemove", handleMove)
    document.removeEventListener("mouseup", handleUp)
  }
  document.addEventListener("mousemove", handleMove)
  document.addEventListener("mouseup", handleUp)
}