app/frontend/src/components/Flow/FlowNode.tsx

import { Handle, type NodeProps, Position } from "@xyflow/react"
import {
  AlertCircle,
  Braces,
  Clock,
  Code2,
  Database,
  Globe,
  Radio,
} from "lucide-react"
import { memo } from "react"

import type { MessageSpec, NodeDef_Input } from "@/client"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { cn } from "@/lib/utils"
import { portOf } from "./deriveEdges"
import { useNodeStatus } from "./liveStore"

const NODE_ICONS = {
  python: Code2,
  mqtt: Radio,
  http: Globe,
  influxdb: Database,
  delay: Clock,
  mlp: Braces,
} as const

const STATUS_STYLES = {
  running: { dot: "bg-primary animate-pulse", label: "Running" },
  success: { dot: "bg-status-success", label: "Last run succeeded" },
  error: { dot: "bg-destructive", label: "Failed" },
} as const

export type FlowNodeData = {
  definition: NodeDef_Input
  flow: string
  typeLabel: string
  issues: number
  issueText: string
  [key: string]: unknown
}

/** Vertically distribute handles so several ports stay reachable. */
function handleOffset(index: number, total: number): string {
  if (total <= 1) return "50%"
  const span = 60
  return `${50 - span / 2 + (span / (total - 1)) * index}%`
}

function PortHandles({
  specs,
  type,
  position,
}: {
  specs: MessageSpec[]
  type: "source" | "target"
  position: Position
}) {
  return (
    <>
      {specs.map((spec, index) => {
        const port = portOf(spec)
        return (
          <Handle
            key={`${type}-${port}`}
            id={port}
            type={type}
            position={position}
            className={cn(
              "!bg-card !border-muted-foreground/60",
              !spec.name && "unbound",
            )}
            style={{ top: handleOffset(index, specs.length) }}
          />
        )
      })}
    </>
  )
}

function FlowNodeComponent({ data, selected }: NodeProps) {
  const { definition, flow, typeLabel, issues, issueText } =
    data as FlowNodeData
  const live = useNodeStatus(`${flow}.${definition.id}`)
  const Icon = NODE_ICONS[definition.type as keyof typeof NODE_ICONS] ?? Code2

  const status = live?.status === "active" ? undefined : live?.status
  const style = status
    ? STATUS_STYLES[status as keyof typeof STATUS_STYLES]
    : undefined

  return (
    <div
      className={cn(
        "relative min-w-[168px] max-w-[220px] rounded-lg border border-border bg-card px-3 py-2.5 shadow-e1 transition-shadow",
        selected && "border-primary shadow-e2",
      )}
    >
      <PortHandles
        specs={definition.requires ?? []}
        type="target"
        position={Position.Left}
      />

      <div className="flex items-center gap-2.5">
        <span className="flex size-7 shrink-0 items-center justify-center rounded-sm bg-primary/10 text-primary">
          <Icon className="size-4" />
        </span>
        <span className="min-w-0 flex-1">
          <span className="block truncate text-sm font-medium">
            {definition.title || definition.id}
          </span>
          <span className="block truncate text-xs font-medium uppercase tracking-[0.5px] text-muted-foreground">
            {typeLabel}
          </span>
        </span>
        {style ? (
          <Tooltip>
            <TooltipTrigger asChild>
              <span
                role="img"
                className={cn("size-2 shrink-0 rounded-full", style.dot)}
                aria-label={style.label}
              />
            </TooltipTrigger>
            <TooltipContent>{live?.error ?? style.label}</TooltipContent>
          </Tooltip>
        ) : null}
      </div>

      {issues > 0 ? (
        <Tooltip>
          <TooltipTrigger asChild>
            <span className="absolute -right-1.5 -top-1.5 flex size-4 items-center justify-center rounded-full bg-destructive text-primary-foreground">
              <AlertCircle className="size-3" />
            </span>
          </TooltipTrigger>
          <TooltipContent className="max-w-xs">{issueText}</TooltipContent>
        </Tooltip>
      ) : null}

      <PortHandles
        specs={definition.provides ?? []}
        type="source"
        position={Position.Right}
      />
    </div>
  )
}

export const FlowNode = memo(FlowNodeComponent)