import { useLingui } from "@lingui/react/macro";
import { cn } from "@rakazo/ui-web";
import type { HTMLAttributes, RefObject } from "react";
import { useRef } from "react";
import { useDualSurfaceResize } from "../hooks/useDualSurfaceResize";
import type { DualSurfaceOrientation } from "../lib/dual-surface-pref";
import { DEFAULT_SPLIT_RATIO, MAX_SPLIT_RATIO, MIN_SPLIT_RATIO } from "../lib/dual-surface-pref";

export interface DualSurfaceDividerProps
  extends Omit<HTMLAttributes<HTMLDivElement>, "onResize" | "onReset"> {
  splitRatio?: number;
  onResize: (newRatio: number) => void;
  onReset: () => void;
  orientation?: DualSurfaceOrientation;
  disabled?: boolean;
  minRatio?: number;
  maxRatio?: number;
  step?: number;
  containerRef?: RefObject<HTMLElement | null>;
  className?: string;
  "aria-label"?: string;
}

export function DualSurfaceDivider({
  splitRatio = DEFAULT_SPLIT_RATIO,
  onResize,
  onReset,
  orientation = "stream-first",
  disabled = false,
  minRatio = MIN_SPLIT_RATIO,
  maxRatio = MAX_SPLIT_RATIO,
  step = 0.05,
  containerRef,
  className,
  "aria-label": ariaLabelProp,
  ...rest
}: DualSurfaceDividerProps) {
  const { t } = useLingui();
  const dividerRef = useRef<HTMLDivElement>(null);

  const { isDragging, handlePointerDown, handleKeyDown, handleDoubleClick } = useDualSurfaceResize({
    splitRatio,
    onResize,
    onReset,
    orientation,
    disabled,
    minRatio,
    maxRatio,
    step,
    containerRef,
    dividerRef,
  });

  const percentValue = Math.round(splitRatio * 100);
  const minPercent = Math.round(minRatio * 100);
  const maxPercent = Math.round(maxRatio * 100);
  const accessibleLabel = ariaLabelProp ?? t`Dual surface split divider`;

  return (
    // biome-ignore lint/a11y/useSemanticElements: a focusable, draggable window splitter has no native element (WAI-ARIA separator pattern)
    <div
      ref={dividerRef}
      role="separator"
      tabIndex={disabled ? -1 : 0}
      aria-orientation="vertical"
      aria-valuenow={percentValue}
      aria-valuemin={minPercent}
      aria-valuemax={maxPercent}
      aria-label={accessibleLabel}
      aria-disabled={disabled ? "true" : undefined}
      data-testid="dual-surface-divider"
      data-dragging={isDragging ? "true" : "false"}
      onPointerDown={handlePointerDown}
      onDoubleClick={handleDoubleClick}
      onKeyDown={handleKeyDown}
      className={cn(
        "group relative flex w-3 md:w-4 shrink-0 cursor-col-resize select-none touch-none items-center justify-center transition-colors bg-border/0 hover:bg-accent/40 active:bg-primary/20 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
        disabled && "pointer-events-none cursor-default opacity-50",
        className,
      )}
      {...rest}
    >
      <div
        className={cn(
          "h-full w-1 rounded-full bg-border transition-colors group-hover:bg-accent group-active:bg-primary",
          isDragging && "bg-primary",
        )}
      />
    </div>
  );
}