import React, { useContext } from 'react'
import { Handle, Position } from '@xyflow/react'
import { ArrowDownLeft, ArrowUpRight } from 'lucide-react'
import { FlowUIContext } from '@/lib/graph/flowContext'
import { cn } from '@/lib/utils'

type NodeHandleProps = {
    id: string
    /** Pass when this handle is a connection target so valid highlight can show as soon as connection starts */
    nodeId?: string
}

export function InputHandle({ id, nodeId }: NodeHandleProps) {
    const ctx = useContext(FlowUIContext)
    const connectionFrom = ctx?.connectionFrom ?? null
    const isValidConnection = ctx?.isValidConnection
    const isConnecting = Boolean(nodeId && connectionFrom && connectionFrom.nodeId !== nodeId)
    const isValidTarget =
        isConnecting &&
        isValidConnection?.({
            source: connectionFrom!.nodeId,
            sourceHandle: connectionFrom!.sourceHandle ?? null,
            target: nodeId!,
            targetHandle: id,
        })

    return (
        <Handle
            type="target"
            position={Position.Left}
            id={id}
            className={cn(isValidTarget && 'connection-valid-target', isConnecting && !isValidTarget && 'connection-invalid-target')}
            style={{
                top: 20,
                width: 20,
                height: 20,
                left: -15,
                borderRadius: '9999px',
                background: 'transparent',
                border: 'none',
                padding: 0,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        >
            <ArrowDownLeft className="w-4 h-4 text-foreground pointer-events-none" />
        </Handle>
    )
}

export function OutputHandle({ id }: NodeHandleProps) {
    return (
        <Handle
            type="source"
            position={Position.Right}
            id={id}
            style={{
                top: 20,
                width: 20,
                height: 20,
                right: -15,
                borderRadius: '9999px',
                background: 'transparent',
                border: 'none',
                padding: 0,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        >
            <ArrowUpRight className="w-4 h-4 text-foreground pointer-events-none" />
        </Handle>
    )
}