'use client';

import type { CSSProperties } from 'react';
import { useMemo, useState } from 'react';

type ResizableGutterProps = {
  ariaLabel: string;
  disabled?: boolean;
  width?: number; // px, default 10
  onDragStart?: () => void;
  onDragDelta: (deltaPx: number) => void;
  onDragEnd?: () => void;
};

export default function ResizableGutter({
  ariaLabel,
  disabled = false,
  width = 10,
  onDragStart,
  onDragDelta,
  onDragEnd,
}: ResizableGutterProps) {
  const [isHover, setIsHover] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
  const [lastX, setLastX] = useState<number | null>(null);

  const showHighlight = !disabled && (isHover || isDragging);

  const style = useMemo<CSSProperties>(() => {
    return {
      width: `${width}px`,
      flexShrink: 0,
      height: '100%',
      cursor: disabled ? 'default' : 'col-resize',
      display: 'flex',
      alignItems: 'stretch',
      justifyContent: 'center',
      userSelect: 'none',
      touchAction: 'none',
      position: 'relative' as const,
    };
  }, [width, disabled]);

  return (
    <div
      role="separator"
      aria-label={ariaLabel}
      aria-orientation="vertical"
      onMouseEnter={() => setIsHover(true)}
      onMouseLeave={() => setIsHover(false)}
      onPointerDown={(e) => {
        if (disabled) return;
        e.preventDefault();
        (e.currentTarget as HTMLDivElement).setPointerCapture(e.pointerId);
        setIsDragging(true);
        setLastX(e.clientX);
        onDragStart?.();
      }}
      onPointerMove={(e) => {
        if (disabled) return;
        if (!isDragging) return;
        if (lastX === null) return;
        const delta = e.clientX - lastX;
        if (delta !== 0) {
          onDragDelta(delta);
          setLastX(e.clientX);
        }
      }}
      onPointerUp={() => {
        if (disabled) return;
        if (!isDragging) return;
        setIsDragging(false);
        setLastX(null);
        onDragEnd?.();
      }}
      onPointerCancel={() => {
        if (disabled) return;
        if (!isDragging) return;
        setIsDragging(false);
        setLastX(null);
        onDragEnd?.();
      }}
      style={style}
    >
      <div
        style={{
          width: '2px',
          borderRadius: '999px',
          margin: '0 auto',
          background: showHighlight ? 'rgba(92,95,188,0.25)' : 'transparent',
          transition: 'background 0.12s ease',
        }}
      />
    </div>
  );
}