import React, { useContext, useMemo } from 'react'
import { GraphContext } from '@/lib/graph/flowContext'
import { ArrowDownLeft, ArrowUpRight } from 'lucide-react'
import { NodeHelpPopover } from '@/components/graph/NodeHelpPopover'
import { getNodeType, getNodeClassificationLabel } from '@/lib/graph/nodeRegistry'

type Props = {
    nodeId: string
    nodeType: string
    children?: React.ReactNode
}

export function NodeFooterEdgeIndicators({ nodeId, nodeType, children }: Props) {
    const ctx = useContext(GraphContext)
    const edges = ctx?.edges ?? []

    const { inputs, outputs } = useMemo(() => {
        let inputs = 0
        let outputs = 0
        for (const e of edges) {
            if (e.target === nodeId) inputs += 1
            if (e.source === nodeId) outputs += 1
        }
        return { inputs, outputs }
    }, [edges, nodeId])

    const descriptor = getNodeType(nodeType)
    const showInput = descriptor?.hasInput ?? false
    const showOutput = descriptor?.hasOutput ?? false
    const classificationLabel = getNodeClassificationLabel(nodeType)

    return (
        <div className="flex items-center gap-2 w-full text-xs text-muted-foreground">
            {showInput && (
                <span className="flex items-center gap-1 shrink-0" title="Input connections">
                    <ArrowDownLeft className="size-3.5" />
                    <span>{inputs}</span>
                </span>
            )}
            {showOutput && (
                <span className="flex items-center gap-1 shrink-0" title="Output connections">
                    <ArrowUpRight className="size-3.5" />
                    <span>{outputs}</span>
                </span>
            )}
            {children != null && (
                <>
                    {(showInput || showOutput) && <span className="shrink-0">|</span>}
                    <span className="min-w-0 truncate">{children}</span>
                </>
            )}
            {classificationLabel != null && (
                <>
                    {(showInput || showOutput || children != null) && <span className="shrink-0">|</span>}
                    <span className="shrink-0" title="Node classification">{classificationLabel}</span>
                </>
            )}
            <span className="shrink-0 ml-auto">
                <NodeHelpPopover nodeType={nodeType} />
            </span>
        </div>
    )
}