evidence-binder/src/FormRenderer.tsx

/**
 * FormRenderer — renders a FormSchema as evidence-backed attributes.
 *
 * Each attribute registers itself with the rect registry under
 * `kind="field"` and the field's `id`, so the SVG visual guide can
 * draw curves from the active attribute to its linked evidence card and
 * on to the source highlight.
 *
 * CE-WP-0007-T10/T11: add/edit flows use FieldDefinitionForm.
 * CE-WP-0010: user-facing "Attributes" vocabulary, `Key (type)` labels,
 * and a ≥3-character filter next to the caption.
 */

import {
  useMemo,
  useRef,
  useState,
  type ChangeEvent,
  type CSSProperties,
} from "react";

import type { EvidenceTarget } from "@citation-evidence/engine/shared";

import { FieldDefinitionForm, type FieldType } from "./FieldDefinitionForm";
import { useActiveState, type ActiveState } from "./state/active";
import { useRegisterRect } from "./visual-guide/react-hooks";

const FILTER_MIN_CHARS = 3;

function isFieldActive(state: ActiveState, fieldId: string): boolean {
  return (
    state.activeTarget?.targetType === "form-field" &&
    state.activeTarget?.targetId === fieldId
  );
}

/** Case-insensitive substring match; empty / short queries match everything. */
export function matchesTextFilter(
  query: string,
  parts: readonly (string | undefined | null)[],
  minChars = FILTER_MIN_CHARS,
): boolean {
  const q = query.trim();
  if (q.length < minChars) return true;
  const needle = q.toLowerCase();
  return parts.some((p) => p != null && String(p).toLowerCase().includes(needle));
}

export interface FormFieldSchema {
  readonly type: "text" | "textarea" | "date";
  readonly id: string;
  readonly label: string;
}

export interface FormSchema {
  readonly id: string;
  readonly title: string;
  readonly fields: readonly FormFieldSchema[];
}

export interface FieldDefinitionPatch {
  readonly label: string;
  readonly type: FieldType;
}

export interface FormRendererProps {
  readonly schema: FormSchema;
  readonly values?: Readonly<Record<string, string>>;
  readonly onValueChange?: (fieldId: string, value: string) => void;
  readonly linkCounts?: Readonly<Record<string, number>>;
  readonly linkHints?: Readonly<Record<string, string>>;
  readonly showAddFieldForm?: boolean;
  readonly onRequestAddField?: () => void;
  readonly onConfirmAddField?: (patch: FieldDefinitionPatch) => void;
  readonly onCancelAddField?: () => void;
  readonly editingFieldId?: string | null;
  readonly onBeginEditField?: (fieldId: string) => void;
  readonly onSaveFieldEdit?: (fieldId: string, patch: FieldDefinitionPatch) => void;
  readonly onCancelFieldEdit?: () => void;
}

const iconButtonStyle: CSSProperties = {
  fontSize: 11,
  padding: "2px 6px",
  background: "white",
  border: "1px solid #888",
  borderRadius: 3,
  cursor: "pointer",
  lineHeight: 1,
};

function FieldRow({
  field,
  value,
  linkCount,
  linkHint,
  isActive,
  isEditing,
  editLabel,
  editType,
  onChange,
  onFocus,
  onBeginEdit,
  onChangeEditLabel,
  onChangeEditType,
  onSaveEdit,
  onCancelEdit,
}: {
  field: FormFieldSchema;
  value: string;
  linkCount: number;
  linkHint?: string;
  isActive: boolean;
  isEditing: boolean;
  editLabel: string;
  editType: FieldType;
  onChange: (next: string) => void;
  onFocus: () => void;
  onBeginEdit: () => void;
  onChangeEditLabel: (next: string) => void;
  onChangeEditType: (next: FieldType) => void;
  onSaveEdit: () => void;
  onCancelEdit: () => void;
}) {
  const ref = useRef<HTMLDivElement>(null);
  useRegisterRect("field", field.id, ref);

  if (isEditing) {
    return (
      <div ref={ref} data-field-id={field.id} style={{ marginBottom: 12 }}>
        <FieldDefinitionForm
          label={editLabel}
          type={editType}
          onChangeLabel={onChangeEditLabel}
          onChangeType={onChangeEditType}
          onSave={onSaveEdit}
          onCancel={onCancelEdit}
          saveLabel="Save attribute"
          badge="Editing attribute"
          testidPrefix={`field-edit-${field.id}`}
        />
      </div>
    );
  }

  const sharedProps = {
    id: `field-${field.id}`,
    value,
    onFocus,
    onChange: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
      onChange(e.target.value),
    style: { width: "100%", boxSizing: "border-box" as const, fontSize: 13, padding: 4 },
  };

  return (
    <div
      ref={ref}
      data-field-id={field.id}
      data-link-count={String(linkCount)}
      aria-current={isActive ? "true" : undefined}
      style={{
        position: "relative",
        marginBottom: 12,
        fontFamily: "system-ui, sans-serif",
        padding: 4,
        borderRadius: 4,
        background: isActive ? "#e8f0ff" : "transparent",
      }}
    >
      <button
        type="button"
        aria-label={`Edit ${field.id}`}
        data-testid={`field-edit-toggle-${field.id}`}
        title="Edit attribute key and type"
        onClick={(e) => {
          e.stopPropagation();
          onBeginEdit();
        }}
        style={{
          ...iconButtonStyle,
          position: "absolute",
          top: 4,
          right: 4,
          zIndex: 1,
        }}
      >
        ✎
      </button>
      <label
        htmlFor={sharedProps.id}
        style={{
          display: "block",
          fontSize: 12,
          fontWeight: 600,
          marginBottom: 4,
          paddingRight: 28,
        }}
      >
        {field.label}{" "}
        <span style={{ fontWeight: 400, color: "#666" }}>({field.type})</span>
        {linkCount > 0 ? (
          <span
            data-testid={`field-${field.id}-chip`}
            title={linkHint}
            style={{
              marginLeft: 8,
              padding: "1px 6px",
              borderRadius: 4,
              background: "#e7f0ff",
              color: "#0050b3",
              fontSize: 11,
              fontWeight: 500,
            }}
          >
            {linkCount} evidence
          </span>
        ) : null}
      </label>
      {field.type === "textarea" ? (
        <textarea rows={2} {...sharedProps} />
      ) : (
        <input type={field.type === "date" ? "date" : "text"} {...sharedProps} />
      )}
    </div>
  );
}

export function FormRenderer({
  schema,
  values,
  onValueChange,
  linkCounts,
  linkHints,
  showAddFieldForm,
  onRequestAddField,
  onConfirmAddField,
  onCancelAddField,
  editingFieldId,
  onBeginEditField,
  onSaveFieldEdit,
  onCancelFieldEdit,
}: FormRendererProps) {
  const { state, focusTarget } = useActiveState();
  const [addLabel, setAddLabel] = useState("New attribute");
  const [addType, setAddType] = useState<FieldType>("text");
  const [editLabel, setEditLabel] = useState("");
  const [editType, setEditType] = useState<FieldType>("text");
  const [filterQuery, setFilterQuery] = useState("");

  const handleFocus = (fieldId: string) => {
    const target: EvidenceTarget = { targetType: "form-field", targetId: fieldId };
    focusTarget(target);
  };

  const beginEdit = (field: FormFieldSchema) => {
    setEditLabel(field.label);
    setEditType(field.type);
    onBeginEditField?.(field.id);
  };

  const visibleFields = useMemo(
    () =>
      schema.fields.filter((field) =>
        matchesTextFilter(filterQuery, [
          field.label,
          field.type,
          field.id,
          values?.[field.id],
        ]),
      ),
    [schema.fields, filterQuery, values],
  );

  return (
    <div data-form-id={schema.id} style={{ padding: 12 }} role="group" aria-label="Attributes">
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 8,
          marginBottom: 8,
          flexWrap: "wrap",
        }}
      >
        <h2
          style={{
            fontSize: 14,
            margin: 0,
            fontFamily: "system-ui, sans-serif",
            flex: "0 0 auto",
          }}
        >
          {schema.title}
        </h2>
        <input
          type="search"
          value={filterQuery}
          onChange={(e) => setFilterQuery(e.target.value)}
          placeholder="Filter…"
          aria-label="Filter attributes"
          data-testid="attributes-filter"
          style={{
            flex: "1 1 100px",
            minWidth: 80,
            maxWidth: 160,
            fontSize: 12,
            padding: "4px 6px",
            border: "1px solid #ccc",
            borderRadius: 4,
          }}
        />
        <button
          type="button"
          data-testid="add-field-button"
          onClick={() => {
            setAddLabel(`New attribute ${schema.fields.length + 1}`);
            setAddType("text");
            onRequestAddField?.();
          }}
          style={{
            fontSize: 11,
            padding: "4px 10px",
            border: "1px solid #888",
            borderRadius: 4,
            background: "white",
            cursor: "pointer",
          }}
        >
          Add attribute
        </button>
      </div>

      {showAddFieldForm && (
        <FieldDefinitionForm
          label={addLabel}
          type={addType}
          onChangeLabel={setAddLabel}
          onChangeType={setAddType}
          onSave={() =>
            onConfirmAddField?.({
              label: addLabel.trim(),
              type: addType,
            })
          }
          onCancel={() => onCancelAddField?.()}
          saveLabel="Add attribute"
          badge="New attribute"
          testidPrefix="field-add"
        />
      )}

      {visibleFields.length === 0 && schema.fields.length > 0 && (
        <p
          style={{ fontSize: 12, color: "#888", margin: "8px 0" }}
          data-testid="attributes-filter-empty"
        >
          No matches.
        </p>
      )}

      {visibleFields.map((field) => (
        <FieldRow
          key={field.id}
          field={field}
          value={values?.[field.id] ?? ""}
          linkCount={linkCounts?.[field.id] ?? 0}
          {...(linkHints?.[field.id] != null
            ? { linkHint: linkHints[field.id] }
            : {})}
          isActive={isFieldActive(state, field.id)}
          isEditing={editingFieldId === field.id}
          editLabel={editLabel}
          editType={editType}
          onChange={(next) => onValueChange?.(field.id, next)}
          onFocus={() => handleFocus(field.id)}
          onBeginEdit={() => beginEdit(field)}
          onChangeEditLabel={setEditLabel}
          onChangeEditType={setEditType}
          onSaveEdit={() =>
            onSaveFieldEdit?.(field.id, {
              label: editLabel.trim(),
              type: editType,
            })
          }
          onCancelEdit={() => onCancelFieldEdit?.()}
        />
      ))}
    </div>
  );
}