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

import { useQuery } from "@tanstack/react-query"
import { Maximize2, Minimize2, X } from "lucide-react"
import { lazy, Suspense, useEffect, useRef, useState } from "react"

import type { DType, MessageSpec, NodeDef_Input, NodeTypeInfo } from "@/client"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { cn } from "@/lib/utils"
import { nodeSourceQueryOptions } from "./queries"
import { PANEL_SECTION, SidePanel } from "./SidePanel"

const NodeEditor = lazy(() => import("./NodeEditor"))

const DTYPES: DType[] = ["float", "int", "str", "bool", "json"]

const SECTION = PANEL_SECTION

/**
 * A message name, typed freely or picked from the names already in play.
 *
 * The suggestions are the point: a message only connects when both ends spell
 * it the same way, so choosing beats typing.
 */
function MessageNameInput({
  value,
  suggestions,
  placeholder,
  autoFocus,
  onChange,
}: {
  value: string
  suggestions: string[]
  placeholder: string
  autoFocus: boolean
  onChange: (next: string) => void
}) {
  const [open, setOpen] = useState(false)
  const matches = suggestions.filter(
    (name) =>
      name !== value && name.toLowerCase().includes(value.toLowerCase()),
  )

  return (
    <Popover open={open && matches.length > 0} onOpenChange={setOpen}>
      <PopoverAnchor asChild>
        <Input
          value={value}
          placeholder={placeholder}
          aria-label="Message name"
          autoComplete="off"
          // A port added by hand is meant to be named right away.
          autoFocus={autoFocus}
          className="h-8 flex-1 font-mono text-sm"
          onFocus={() => setOpen(true)}
          onBlur={() => setOpen(false)}
          onChange={(event) => {
            onChange(event.target.value)
            setOpen(true)
          }}
          onKeyDown={(event) => {
            if (event.key === "Escape") setOpen(false)
          }}
        />
      </PopoverAnchor>
      <PopoverContent
        align="start"
        className="w-[--radix-popover-trigger-width] p-0"
        onOpenAutoFocus={(event) => event.preventDefault()}
      >
        <Command shouldFilter={false}>
          <CommandList>
            <CommandEmpty>No matching message.</CommandEmpty>
            <CommandGroup>
              {matches.map((name) => (
                <CommandItem
                  key={name}
                  value={name}
                  className="font-mono text-sm"
                  // Blur fires before click, so commit on mousedown.
                  onMouseDown={(event) => {
                    event.preventDefault()
                    onChange(name)
                    setOpen(false)
                  }}
                  onSelect={() => {
                    onChange(name)
                    setOpen(false)
                  }}
                >
                  {name}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}

function PortList({
  title,
  specs,
  flow,
  emptyHint,
  suggestions,
  onChange,
}: {
  title: string
  specs: MessageSpec[]
  flow: string
  emptyHint: string
  suggestions: string[]
  onChange: (next: MessageSpec[]) => void
}) {
  // The port just added, so its name field can take focus.
  const [freshIndex, setFreshIndex] = useState<number | null>(null)

  const update = (index: number, patch: Partial<MessageSpec>) => {
    const next = specs.map((spec, i) =>
      i === index ? { ...spec, ...patch } : spec,
    )
    onChange(next)
  }

  return (
    <div className="grid gap-2">
      <div className="flex items-center justify-between">
        <span className={SECTION}>{title}</span>
        <Button
          variant="ghost"
          size="sm"
          className="h-7 text-xs text-muted-foreground"
          onClick={() => {
            setFreshIndex(specs.length)
            onChange([...specs, { name: "", dtype: "float" }])
          }}
        >
          Add
        </Button>
      </div>

      {specs.length === 0 ? (
        <p className="text-sm text-muted-foreground">{emptyHint}</p>
      ) : null}

      {specs.map((spec, index) => (
        <div key={`port-${index}`} className="flex items-center gap-1.5">
          <MessageNameInput
            value={spec.name ?? ""}
            suggestions={suggestions}
            placeholder={`name in ${flow}`}
            autoFocus={index === freshIndex}
            onChange={(name) => update(index, { name, port: "" })}
          />
          <Select
            value={spec.dtype ?? "float"}
            onValueChange={(value) => update(index, { dtype: value as DType })}
          >
            <SelectTrigger className="!h-8 w-[92px] text-sm" aria-label="Type">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {DTYPES.map((dtype) => (
                <SelectItem key={dtype} value={dtype}>
                  {dtype}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Button
            variant="ghost"
            size="icon-sm"
            className="text-muted-foreground"
            aria-label="Remove port"
            onClick={() => onChange(specs.filter((_, i) => i !== index))}
          >
            <X />
          </Button>
        </div>
      ))}
    </div>
  )
}

/** A small form built from the node type's declared parameters. */
function ParamsForm({
  schema,
  params,
  onChange,
}: {
  schema: Record<string, unknown> | undefined
  params: Record<string, unknown>
  onChange: (next: Record<string, unknown>) => void
}) {
  const properties = (schema?.properties ?? {}) as Record<
    string,
    { type?: string; title?: string; default?: unknown }
  >
  const entries = Object.entries(properties)
  if (entries.length === 0) return null

  const set = (key: string, value: unknown) =>
    onChange({ ...params, [key]: value })

  return (
    <div className="grid gap-3">
      <span className={SECTION}>Settings</span>
      {entries.map(([key, property]) => {
        const value = params[key] ?? property.default ?? ""
        const label = property.title ?? key

        if (property.type === "boolean") {
          return (
            <div key={key} className="flex items-center justify-between gap-2">
              <Label htmlFor={`param-${key}`} className="text-sm font-normal">
                {label}
              </Label>
              <Switch
                id={`param-${key}`}
                checked={Boolean(value)}
                onCheckedChange={(checked) => set(key, checked)}
              />
            </div>
          )
        }

        if (property.type === "object" || property.type === "array") {
          return null
        }

        const numeric =
          property.type === "integer" || property.type === "number"
        return (
          <div key={key} className="grid gap-1.5">
            <Label htmlFor={`param-${key}`} className="text-sm font-normal">
              {label}
            </Label>
            <Input
              id={`param-${key}`}
              className="h-8 text-sm"
              type={numeric ? "number" : "text"}
              value={String(value)}
              onChange={(event) =>
                set(
                  key,
                  numeric ? Number(event.target.value) : event.target.value,
                )
              }
            />
          </div>
        )
      })}
    </div>
  )
}

function PanelBody({
  node,
  flow,
  nodeType,
  suggestions,
  expanded,
  onChange,
  onSaveSource,
  onToggleExpand,
}: {
  node: NodeDef_Input
  flow: string
  nodeType: NodeTypeInfo | undefined
  suggestions: PortSuggestions
  expanded: boolean
  onChange: (next: NodeDef_Input) => void
  onSaveSource: (code: string) => void
  onToggleExpand: () => void
}) {
  const hasSource = nodeType?.has_source ?? node.type === "python"
  const { data: source } = useQuery({
    ...nodeSourceQueryOptions(flow, node.id),
    enabled: hasSource,
  })

  const [code, setCode] = useState<string | null>(null)
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
  const pending = useRef<string | null>(null)
  const save = useRef(onSaveSource)
  save.current = onSaveSource

  const editCode = (next: string) => {
    setCode(next)
    pending.current = next
    if (timer.current) clearTimeout(timer.current)
    timer.current = setTimeout(() => {
      timer.current = null
      save.current(next)
    }, 1000)
  }

  // Closing the panel must not lose the last keystrokes.
  useEffect(() => {
    return () => {
      if (timer.current) {
        clearTimeout(timer.current)
        if (pending.current !== null) save.current(pending.current)
      }
    }
  }, [])

  return (
    <>
      <div className={cn("grid gap-5 p-4", expanded && "max-w-2xl")}>
        <PortList
          title="Consumes"
          specs={node.requires ?? []}
          flow={flow}
          emptyHint="Nothing yet. Add a message this node reads."
          suggestions={suggestions.consumes}
          onChange={(requires) => onChange({ ...node, requires })}
        />
        <PortList
          title="Provides"
          specs={node.provides ?? []}
          flow={flow}
          emptyHint="Nothing yet. Add a message this node publishes."
          suggestions={suggestions.provides}
          onChange={(provides) => onChange({ ...node, provides })}
        />
        <ParamsForm
          schema={nodeType?.params_schema}
          params={node.params ?? {}}
          onChange={(params) => onChange({ ...node, params })}
        />
      </div>

      {hasSource ? (
        <div className="flex min-h-[280px] flex-1 flex-col gap-2 px-4 pb-4">
          <div className="flex items-center justify-between">
            <span className={SECTION}>Code</span>
            <Button
              variant="ghost"
              size="icon-sm"
              className="hidden text-muted-foreground md:inline-flex"
              onClick={onToggleExpand}
              aria-label={
                expanded ? "Collapse the editor" : "Expand the editor"
              }
              data-testid="toggle-editor-size"
            >
              {expanded ? <Minimize2 /> : <Maximize2 />}
            </Button>
          </div>
          <div className="min-h-0 flex-1 overflow-hidden rounded-md border border-border">
            <Suspense
              fallback={
                <div className="h-full w-full animate-pulse bg-muted" />
              }
            >
              <NodeEditor
                value={code ?? source?.code ?? ""}
                onChange={editCode}
              />
            </Suspense>
          </div>
        </div>
      ) : null}
    </>
  )
}

/**
 * Node settings, floating over the canvas so the graph stays visible and live.
 * On a phone there is no room for that, so it becomes a full-screen sheet.
 */
/** Message names worth offering on each side of a node. */
export type PortSuggestions = { consumes: string[]; provides: string[] }

export function NodePanel({
  node,
  flow,
  nodeTypes,
  suggestions,
  expanded,
  onChange,
  onSaveSource,
  onToggleExpand,
  onClose,
  onDelete,
}: {
  node: NodeDef_Input | null
  flow: string
  nodeTypes: NodeTypeInfo[]
  suggestions: PortSuggestions
  expanded: boolean
  onChange: (next: NodeDef_Input) => void
  onSaveSource: (code: string) => void
  onToggleExpand: () => void
  onClose: () => void
  onDelete: () => void
}) {
  const nodeType = nodeTypes.find((entry) => entry.type === node?.type)

  return (
    <SidePanel
      open={Boolean(node)}
      label="Node settings"
      testId="node-panel"
      bodyKey={node?.id ?? "none"}
      expanded={expanded}
      onClose={onClose}
      header={
        node ? (
          <Input
            value={node.title || node.id}
            aria-label="Node name"
            className="h-8 flex-1 text-sm font-medium"
            onChange={(event) =>
              onChange({ ...node, title: event.target.value })
            }
          />
        ) : null
      }
      footer={
        <Button
          variant="ghost"
          size="sm"
          className="text-destructive hover:text-destructive"
          onClick={onDelete}
        >
          Delete node
        </Button>
      }
    >
      {node ? (
        <PanelBody
          node={node}
          flow={flow}
          nodeType={nodeType}
          suggestions={suggestions}
          expanded={expanded}
          onChange={onChange}
          onSaveSource={onSaveSource}
          onToggleExpand={onToggleExpand}
        />
      ) : null}
    </SidePanel>
  )
}