/**
 * EdgePreviewLine Component
 *
 * Renders an animated SVG preview line during edge creation.
 * Reads from `edgeCreationAtom` and draws a bezier-smart path
 * from the source port/position to the cursor (or snapped port).
 */

import React from 'react';
import { useAtomValue } from 'jotai';
import { edgeCreationAtom } from '../core/graph-store';
import { bezierSmart, type EdgePathInput } from '../utils/edge-path-calculators';

// Dash pattern for the preview line
const DASH_ARRAY = '8 4';
const DASH_OFFSET_ANIMATION = 'canvas-edge-preview-dash';

// Colors
const IDLE_COLOR = 'rgba(150, 150, 150, 0.6)';
const VALID_TARGET_COLOR = 'var(--canvas-edge-preview-valid, #4ade80)';
const SNAP_COLOR = 'var(--canvas-edge-preview-snap, #60a5fa)';

/**
 * SVG preview line rendered above edges and below nodes during edge creation.
 * Shows an animated dashed line from the source port to the cursor position.
 */
export function EdgePreviewLine() {
	const edgeCreation = useAtomValue(edgeCreationAtom);

	if (!edgeCreation.isCreating || !edgeCreation.sourceNodePosition) {
		return null;
	}

	const source = edgeCreation.sourceNodePosition;
	const target = edgeCreation.snappedTargetPosition ?? edgeCreation.targetPosition;

	if (!target) return null;

	// Pick color based on hover state
	const hasValidTarget = edgeCreation.hoveredTargetNodeId !== null;
	const isSnapped = edgeCreation.snappedTargetPosition !== null;

	let strokeColor = IDLE_COLOR;
	if (isSnapped) {
		strokeColor = SNAP_COLOR;
	} else if (hasValidTarget) {
		strokeColor = VALID_TARGET_COLOR;
	}

	// Build the path using bezier-smart calculator
	const pathInput: EdgePathInput = {
		x1: source.x,
		y1: source.y,
		x2: target.x,
		y2: target.y,
		// Use small dimensions since source/target are already port positions, not node centers
		sourceWidth: 0,
		sourceHeight: 0,
		targetWidth: 0,
		targetHeight: 0,
	};
	const { path } = bezierSmart(pathInput);

	// Endpoint dot radius
	const dotRadius = isSnapped ? 6 : 4;

	return (
		<svg
			style={{
				position: 'absolute',
				top: 0,
				left: 0,
				width: '100%',
				height: '100%',
				pointerEvents: 'none',
				overflow: 'visible',
				zIndex: 5, // above edges (0), below nodes (10)
			}}
		>
			{/* Animated dashed line */}
			<path
				d={path}
				fill="none"
				stroke={strokeColor}
				strokeWidth={isSnapped ? 2.5 : 2}
				strokeDasharray={DASH_ARRAY}
				strokeLinecap="round"
				style={{
					transition: 'stroke 150ms, stroke-width 150ms',
				}}
			>
				<animate
					attributeName="stroke-dashoffset"
					from="24"
					to="0"
					dur="0.8s"
					repeatCount="indefinite"
				/>
			</path>

			{/* Source dot */}
			<circle
				cx={source.x}
				cy={source.y}
				r={4}
				fill={strokeColor}
				style={{ transition: 'fill 150ms' }}
			/>

			{/* Target dot (pulses when snapped) */}
			<circle
				cx={target.x}
				cy={target.y}
				r={dotRadius}
				fill={isSnapped ? SNAP_COLOR : 'transparent'}
				stroke={strokeColor}
				strokeWidth={1.5}
				style={{
					transition: 'r 150ms, fill 150ms',
				}}
			/>
		</svg>
	);
}
