'use client';

import { useAtomValue } from 'jotai';
import { inputModeAtom, commandFeedbackAtom, currentInputAtom } from '../commands/store';
import { zoomAtom, panAtom } from '../core/viewport-store';

/**
 * CommandFeedbackOverlay
 *
 * Renders visual feedback on the canvas during command input collection:
 * - Crosshair at cursor position when picking points
 * - Highlight ring around hovered nodes when picking nodes
 * - Preview edge when connecting nodes
 * - Ghost node when moving
 * - Cursor-attached prompt text
 */
export function CommandFeedbackOverlay() {
	const inputMode = useAtomValue(inputModeAtom);
	const feedback = useAtomValue(commandFeedbackAtom);
	const currentInput = useAtomValue(currentInputAtom);
	const zoom = useAtomValue(zoomAtom);
	const pan = useAtomValue(panAtom);

	// Only render when in a picking mode
	if (inputMode.type === 'normal') {
		return null;
	}

	return (
		<div
			className="pointer-events-none fixed inset-0 z-50"
			style={
				{
					// Match viewport transform for world-space positioning
				}
			}
		>
			{/* Crosshair at cursor (when picking points) */}
			{(inputMode.type === 'pickPoint' || feedback?.crosshair) && feedback?.cursorWorldPos && (
				<Crosshair position={feedback.cursorWorldPos} zoom={zoom} pan={pan} />
			)}

			{/* Node highlight ring */}
			{feedback?.hoveredNodeId && <NodeHighlight nodeId={feedback.hoveredNodeId} zoom={zoom} pan={pan} />}

			{/* Preview edge */}
			{feedback?.previewEdge && <PreviewEdge edge={feedback.previewEdge} zoom={zoom} pan={pan} />}

			{/* Ghost node */}
			{feedback?.ghostNode && <GhostNode ghost={feedback.ghostNode} zoom={zoom} pan={pan} />}

			{/* Mode indicator at bottom */}
			<ModeIndicator inputMode={inputMode} prompt={currentInput?.prompt} />
		</div>
	);
}

/**
 * Crosshair component for point picking
 */
function Crosshair({
	position,
	zoom,
	pan,
}: {
	position: { x: number; y: number };
	zoom: number;
	pan: { x: number; y: number };
}) {
	// Convert world position to screen position
	const screenX = position.x * zoom + pan.x;
	const screenY = position.y * zoom + pan.y;

	return (
		<svg
			className="pointer-events-none absolute"
			style={{
				left: screenX - 20,
				top: screenY - 20,
				width: 40,
				height: 40,
			}}
		>
			{/* Horizontal line */}
			<line x1="0" y1="20" x2="15" y2="20" stroke="var(--list-item-border-active)" strokeWidth="2" />
			<line x1="25" y1="20" x2="40" y2="20" stroke="var(--list-item-border-active)" strokeWidth="2" />
			{/* Vertical line */}
			<line x1="20" y1="0" x2="20" y2="15" stroke="var(--list-item-border-active)" strokeWidth="2" />
			<line x1="20" y1="25" x2="20" y2="40" stroke="var(--list-item-border-active)" strokeWidth="2" />
			{/* Center dot */}
			<circle cx="20" cy="20" r="3" fill="var(--list-item-border-active)" />
		</svg>
	);
}

/**
 * Node highlight ring for node picking
 */
function NodeHighlight({
	nodeId,
	zoom,
	pan,
}: {
	nodeId: string;
	zoom: number;
	pan: { x: number; y: number };
}) {
	// This would need to look up the node position from the graph
	// For now, we'll render nothing - the actual highlighting is done
	// via CSS classes on the node element itself
	return null;
}

/**
 * Preview edge during edge creation
 */
function PreviewEdge({
	edge,
	zoom,
	pan,
}: {
	edge: { from: { x: number; y: number }; to: { x: number; y: number } };
	zoom: number;
	pan: { x: number; y: number };
}) {
	const fromScreen = {
		x: edge.from.x * zoom + pan.x,
		y: edge.from.y * zoom + pan.y,
	};
	const toScreen = {
		x: edge.to.x * zoom + pan.x,
		y: edge.to.y * zoom + pan.y,
	};

	return (
		<svg className="pointer-events-none absolute inset-0" style={{ width: '100%', height: '100%' }}>
			<line
				x1={fromScreen.x}
				y1={fromScreen.y}
				x2={toScreen.x}
				y2={toScreen.y}
				stroke="var(--list-item-border-active)"
				strokeWidth="2"
				strokeDasharray="5,5"
				markerEnd="url(#arrowhead)"
			/>
			<defs>
				<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
					<polygon points="0 0, 10 3.5, 0 7" fill="var(--list-item-border-active)" />
				</marker>
			</defs>
		</svg>
	);
}

/**
 * Ghost node for move operations
 */
function GhostNode({
	ghost,
	zoom,
	pan,
}: {
	ghost: { position: { x: number; y: number }; opacity: number };
	zoom: number;
	pan: { x: number; y: number };
}) {
	const screenPos = {
		x: ghost.position.x * zoom + pan.x,
		y: ghost.position.y * zoom + pan.y,
	};

	return (
		<div
			className="absolute rounded-lg border-2 border-dashed"
			style={{
				left: screenPos.x - 50,
				top: screenPos.y - 50,
				width: 100,
				height: 100,
				opacity: ghost.opacity,
				borderColor: 'var(--badge-info-border)',
				backgroundColor: 'var(--badge-info-bg)',
			}}
		/>
	);
}

/**
 * Mode indicator at bottom of screen
 */
function ModeIndicator({
	inputMode,
	prompt,
}: {
	inputMode: { type: string; prompt?: string };
	prompt?: string;
}) {
	const displayPrompt = prompt || inputMode.prompt || 'Waiting for input...';

	let modeLabel = '';
	switch (inputMode.type) {
		case 'pickPoint':
			modeLabel = 'Click to pick point';
			break;
		case 'pickNode':
			modeLabel = 'Click a node to select';
			break;
		case 'pickNodes':
			modeLabel = 'Click nodes to select (Shift+click for multiple)';
			break;
		case 'select':
			modeLabel = 'Choose an option';
			break;
		case 'text':
			modeLabel = 'Type your input';
			break;
		default:
			modeLabel = inputMode.type;
	}

	return (
		<div
			className="fixed bottom-16 left-1/2 -translate-x-1/2 rounded-lg border px-4 py-2 font-mono text-sm shadow-lg"
			style={{
				backgroundColor: 'var(--modal-bg)',
				borderColor: 'var(--modal-border)',
				color: 'var(--modal-text-primary)',
				opacity: 0.9,
			}}
		>
			<span style={{ color: 'var(--badge-info-text)' }}>{modeLabel}:</span> {displayPrompt}
		</div>
	);
}

export default CommandFeedbackOverlay;
