/**
 * Resize Handle Component
 *
 * Touch-friendly handles for resizing nodes in 8 directions.
 * Uses a 44px invisible hit area with a smaller visual indicator.
 * The hit area meets Apple HIG minimum touch target (44pt).
 */

import React from 'react';
import type { ResizeDirection } from '../hooks/useNodeResize';

export interface ResizeHandleProps {
	direction: ResizeDirection;
	createResizeStart: (dir: ResizeDirection) => (e: React.PointerEvent) => void;
	handleResizeMove: (e: React.PointerEvent) => void;
	handleResizeEnd: (e: React.PointerEvent) => void;
	isResizing: boolean;
	/** Always show the handle (instead of on hover only) */
	alwaysVisible?: boolean;
}

/** Invisible touch hit area — meets Apple HIG 44pt minimum */
const HIT_AREA_SIZE = 44;
/** Visual indicator size (the visible part the user sees) */
const VISUAL_SIZE = 12;
const VISUAL_OFFSET = -1;
const VISUAL_RADIUS = '8px';

function getHitAreaStyles(direction: ResizeDirection): React.CSSProperties {
	const base: React.CSSProperties = {
		position: 'absolute',
		width: `${HIT_AREA_SIZE}px`,
		height: `${HIT_AREA_SIZE}px`,
		zIndex: 10,
		touchAction: 'none',
		// Prevent iOS callout/magnifier on long-press
		WebkitTouchCallout: 'none',
		WebkitUserSelect: 'none',
		userSelect: 'none',
	};

	// Position the hit area centered on the corner/edge
	const halfHit = HIT_AREA_SIZE / 2;
	switch (direction) {
		case 'nw':
			return { ...base, top: -halfHit, left: -halfHit, cursor: 'nwse-resize' };
		case 'ne':
			return { ...base, top: -halfHit, right: -halfHit, cursor: 'nesw-resize' };
		case 'sw':
			return { ...base, bottom: -halfHit, left: -halfHit, cursor: 'nesw-resize' };
		case 'se':
			return { ...base, bottom: -halfHit, right: -halfHit, cursor: 'nwse-resize' };
		case 'n':
			return { ...base, top: -halfHit, left: '50%', transform: 'translateX(-50%)', cursor: 'ns-resize' };
		case 's':
			return { ...base, bottom: -halfHit, left: '50%', transform: 'translateX(-50%)', cursor: 'ns-resize' };
		case 'e':
			return { ...base, right: -halfHit, top: '50%', transform: 'translateY(-50%)', cursor: 'ew-resize' };
		case 'w':
			return { ...base, left: -halfHit, top: '50%', transform: 'translateY(-50%)', cursor: 'ew-resize' };
	}
}

function getVisualStyles(direction: ResizeDirection, isResizing: boolean): React.CSSProperties {
	const activeColor = 'var(--node-resize-handle-active, rgba(59, 130, 246, 0.8))';
	const inactiveColor = 'var(--node-resize-handle, rgba(0, 0, 0, 0.2))';
	const borderWidth = isResizing ? '4px' : '3px';
	const borderColor = isResizing ? activeColor : inactiveColor;
	const borderStyle = `${borderWidth} solid ${borderColor}`;

	const base: React.CSSProperties = {
		position: 'absolute',
		pointerEvents: 'none',
		// Center the visual indicator within the hit area
		top: '50%',
		left: '50%',
		transform: 'translate(-50%, -50%)',
		width: `${VISUAL_SIZE}px`,
		height: `${VISUAL_SIZE}px`,
	};

	// For corner handles, show corner borders on the visual indicator
	switch (direction) {
		case 'nw':
			return { ...base, borderTop: borderStyle, borderLeft: borderStyle, borderTopLeftRadius: VISUAL_RADIUS };
		case 'ne':
			return { ...base, borderTop: borderStyle, borderRight: borderStyle, borderTopRightRadius: VISUAL_RADIUS };
		case 'sw':
			return { ...base, borderBottom: borderStyle, borderLeft: borderStyle, borderBottomLeftRadius: VISUAL_RADIUS };
		case 'se':
			return { ...base, borderBottom: borderStyle, borderRight: borderStyle, borderBottomRightRadius: VISUAL_RADIUS };
		case 'n':
			return { ...base, borderTop: borderStyle, width: `${VISUAL_SIZE * 2}px` };
		case 's':
			return { ...base, borderBottom: borderStyle, width: `${VISUAL_SIZE * 2}px` };
		case 'e':
			return { ...base, borderRight: borderStyle, height: `${VISUAL_SIZE * 2}px` };
		case 'w':
			return { ...base, borderLeft: borderStyle, height: `${VISUAL_SIZE * 2}px` };
	}
}

/**
 * Touch-friendly resize handle.
 *
 * The invisible hit area is 44x44px (Apple HIG minimum).
 * The visual indicator is 12px and centered within the hit area.
 * Uses PointerEvent handlers (works with touch, stylus, and mouse).
 */
export function ResizeHandle({
	direction,
	createResizeStart,
	handleResizeMove,
	handleResizeEnd,
	isResizing,
	alwaysVisible = false,
}: ResizeHandleProps) {
	return (
		<div
			data-no-drag="true"
			onPointerDown={createResizeStart(direction)}
			onPointerMove={handleResizeMove}
			onPointerUp={handleResizeEnd}
			onPointerCancel={handleResizeEnd}
			style={{
				...getHitAreaStyles(direction),
				opacity: alwaysVisible || isResizing ? 1 : 0,
				transition: 'opacity 200ms',
			}}
			onPointerEnter={(e) => {
				if (!alwaysVisible) (e.currentTarget as HTMLElement).style.opacity = '1';
			}}
			onPointerLeave={(e) => {
				if (!alwaysVisible && !isResizing) (e.currentTarget as HTMLElement).style.opacity = '0';
			}}
		>
			<div style={getVisualStyles(direction, isResizing)} />
		</div>
	);
}
