Socrates/apps/web/components/diagram-canvas/NodeInspector.tsx

// Edit panel for the selected block — rename, change kind, add/remove properties, delete.

"use client";

import { useState, useEffect } from "react";
import type { BlockKind } from "../../lib/fixtures/aristotle";
import type { BlockNodeData } from "./nodes/BlockNode";

interface NodeInspectorProps {
  nodeId: string;
  data: BlockNodeData;
  onChange: (patch: Partial<BlockNodeData>) => void;
  onDelete: () => void;
  onClose: () => void;
}

const KINDS: Array<BlockKind | "system"> = ["system", "block", "actor", "constraint"];

export function NodeInspector({ nodeId, data, onChange, onDelete, onClose }: NodeInspectorProps) {
  // Local label state for smooth typing — push on blur
  const [label, setLabel] = useState(data.label);
  const [expression, setExpression] = useState(data.expression ?? "");

  useEffect(() => {
    setLabel(data.label);
    setExpression(data.expression ?? "");
  }, [nodeId, data.label, data.expression]);

  function commitLabel() {
    if (label.trim() && label !== data.label) onChange({ label: label.trim() });
  }

  function commitExpression() {
    onChange({ expression });
  }

  function updateProp(idx: number, value: string) {
    const next = [...data.properties];
    next[idx] = value;
    onChange({ properties: next });
  }

  function removeProp(idx: number) {
    onChange({ properties: data.properties.filter((_, i) => i !== idx) });
  }

  function addProp() {
    onChange({ properties: [...data.properties, "new_property"] });
  }

  return (
    <div className="diagram-inspector" onClick={e => e.stopPropagation()}>
      <div className="diagram-inspector-row">
        <span className="diagram-inspector-label">Kind</span>
        <select
          className="diagram-inspector-select"
          value={data.kind}
          onChange={e => onChange({ kind: e.target.value as BlockKind | "system" })}
        >
          {KINDS.map(k => (
            <option key={k} value={k}>«{k}»</option>
          ))}
        </select>
      </div>

      <div className="diagram-inspector-row">
        <span className="diagram-inspector-label">Label</span>
        <input
          className="diagram-inspector-input"
          value={label}
          onChange={e => setLabel(e.target.value)}
          onBlur={commitLabel}
          onKeyDown={e => {
            if (e.key === "Enter") {
              e.preventDefault();
              (e.target as HTMLInputElement).blur();
            }
          }}
        />
      </div>

      {data.kind === "constraint" ? (
        <div className="diagram-inspector-row">
          <span className="diagram-inspector-label">Expression</span>
          <input
            className="diagram-inspector-input"
            value={expression}
            onChange={e => setExpression(e.target.value)}
            onBlur={commitExpression}
            placeholder="{ tenancy = institutional }"
          />
        </div>
      ) : (
        <div className="diagram-inspector-row">
          <span className="diagram-inspector-label">Properties</span>
          <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
            {data.properties.map((p, i) => (
              <div key={i} className="diagram-inspector-prop">
                <input
                  defaultValue={p}
                  onBlur={e => updateProp(i, e.target.value)}
                  onKeyDown={e => {
                    if (e.key === "Enter") {
                      e.preventDefault();
                      (e.target as HTMLInputElement).blur();
                    }
                  }}
                />
                <button
                  className="diagram-inspector-prop-x"
                  onClick={() => removeProp(i)}
                  title="Remove property"
                  type="button"
                >
                  ×
                </button>
              </div>
            ))}
            <button className="diagram-inspector-add" onClick={addProp} type="button">
              + property
            </button>
          </div>
        </div>
      )}

      <div className="diagram-inspector-actions">
        <button className="diagram-inspector-btn" onClick={onClose} type="button">
          Close
        </button>
        <button
          className="diagram-inspector-btn diagram-inspector-btn-danger"
          onClick={onDelete}
          type="button"
        >
          Delete
        </button>
      </div>
    </div>
  );
}