/**
 * PortHandle Component
 *
 * Individual port handle with drag initiation, hover feedback,
 * and compatibility highlighting.
 *
 * Extracted from NodePorts.tsx in v1.4.0.
 *
 * @since 1.4.0
 */

'use client';

import React from 'react';
import type { PortDefinition, PortSide } from '../core/port-types';
import { useCanvasStyle } from '../providers/CanvasStyleProvider';

// --- Constants ---

export const PORT_ROW_HEIGHT = 24;
const TRANSITION_DURATION = '150ms';

// --- Types ---

export interface PortHandleProps {
	port: PortDefinition;
	side: PortSide;
	/** Whether this port is hovered */
	isHovered: boolean;
	/** Whether the port bar is expanded */
	showExpanded: boolean;
	/** Whether this port is compatible with the current drag source */
	isCompatible: boolean;
	/** Whether the parent node is a drag target */
	isDragTarget: boolean;
	/** Called on click */
	onClick: (portId: string, port: PortDefinition) => void;
	/** Called on pointer down (for edge creation) */
	onPointerDown: (portId: string, port: PortDefinition, e: React.PointerEvent) => void;
	/** Called on mouse enter */
	onMouseEnter: (portId: string, port: PortDefinition) => void;
	/** Called on mouse leave */
	onMouseLeave: () => void;
}

// --- Component ---

export function PortHandle({
	port,
	side,
	isHovered,
	showExpanded,
	isCompatible,
	isDragTarget,
	onClick,
	onPointerDown,
	onMouseEnter,
	onMouseLeave,
}: PortHandleProps) {
	const canvasStyles = useCanvasStyle();

	return (
		<div
			data-port-id={port.id}
			data-port-type={port.type}
			data-drag-port-id={isDragTarget && isCompatible ? port.id : undefined}
			onClick={() => onClick(port.id, port)}
			onPointerDown={(e) => onPointerDown(port.id, port, e)}
			onMouseEnter={() => onMouseEnter(port.id, port)}
			onMouseLeave={onMouseLeave}
			style={{
				flex: 1,
				minHeight: `${PORT_ROW_HEIGHT}px`,
				minWidth: side === 'top' || side === 'bottom' ? `${PORT_ROW_HEIGHT}px` : undefined,
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'center',
				cursor: isCompatible ? 'pointer' : 'not-allowed',
				backgroundColor: isHovered && isCompatible
					? canvasStyles.nodes.selectedBorderColor
					: isDragTarget && !isCompatible
						? 'rgba(255, 0, 0, 0.1)'
						: 'transparent',
				transition: `background-color ${TRANSITION_DURATION}`,
				opacity: isDragTarget && !isCompatible ? 0.5 : 1,
			}}
		>
			{/* Port indicator dot */}
			<div
				style={{
					width: '6px',
					height: '6px',
					borderRadius: '50%',
					backgroundColor: port.color || canvasStyles.nodes.selectedBorderColor,
					transition: `transform ${TRANSITION_DURATION}, box-shadow ${TRANSITION_DURATION}`,
					transform: isHovered
						? 'scale(1.5)'
						: isDragTarget && isCompatible
							? 'scale(1.3)'
							: 'scale(1)',
					boxShadow: isHovered && isDragTarget && isCompatible
						? `0 0 8px ${port.color || canvasStyles.nodes.selectedBorderColor}`
						: 'none',
				}}
			/>

			{/* Port label (only when expanded) */}
			{showExpanded && (
				<span
					style={{
						marginLeft: side === 'left' || side === 'right' ? '4px' : 0,
						marginTop: side === 'top' || side === 'bottom' ? '4px' : 0,
						fontSize: '10px',
						color: isHovered
							? '#fff'
							: isCompatible
								? canvasStyles.nodes.defaultBorderColor
								: 'rgba(128, 128, 128, 0.5)',
						whiteSpace: 'nowrap',
						overflow: 'hidden',
						textOverflow: 'ellipsis',
						textDecoration: isDragTarget && !isCompatible ? 'line-through' : 'none',
						transition: `opacity ${TRANSITION_DURATION}`,
						opacity: showExpanded ? 1 : 0,
					}}
				>
					{port.label || port.id}
				</span>
			)}
		</div>
	);
}
