PubScript/apps/web/src/features/entities/EntityEditor.tsx

/**
 * EntityEditor — the right-rail drawer for creating and editing an entity.
 *
 * Composes the generic `EntityFields` renderer plus, for characters, the
 * `RelationshipEditor`. Emits the full entity on Save and deletes on demand.
 */
import React from "react";
import type { Character, Entity } from "@pubscript/core";
import { Button } from "@pubscript/ui";
import { EntityFields } from "./EntityFields.js";
import { RelationshipEditor } from "./RelationshipEditor.js";
import { RelationshipMap } from "./RelationshipMap.js";

interface EntityEditorProps {
  entity: Entity | null;
  entities: Entity[];
  open: boolean;
  onClose: () => void;
  onSave: (entity: Entity) => void;
  onDelete: (id: string) => void;
}

function isCharacter(e: Entity): e is Character {
  return "relationships" in e;
}

export function EntityEditor({
  entity,
  entities,
  open,
  onClose,
  onSave,
  onDelete,
}: EntityEditorProps) {
  const [draft, setDraft] = React.useState<Entity | null>(entity);

  React.useEffect(() => {
    setDraft(entity);
  }, [entity]);

  if (!open || !draft) return null;

  const isExisting = entities.some((e) => e.id === draft.id);
  const isCharacterDraft = isCharacter(draft);
  const canDelete = isExisting && isCharacterDraft;

  const title = isCharacterDraft
    ? (draft.name || "Edit character")
    : "fields" in draft
      ? `Edit ${draft.kind}`
      : "Edit note";

  const patch = (p: Partial<Entity>) => {
    setDraft({ ...draft, ...p });
  };

  const save = () => {
    onSave(draft);
    onClose();
  };

  return (
    <aside className="ps-entity-editor">
      <header className="ps-entity-editor-header">
        <h2>{isExisting ? title : "New entity"}</h2>
        <button type="button" className="ps-icon-btn" aria-label="Close" onClick={onClose}>
          ×
        </button>
      </header>

      <div className="ps-entity-editor-body">
        {isCharacterDraft ? (
          <>
            <EntityFields entity={draft} onChange={patch} />
            <div className="ps-relationship-section">
              <h3>Relationships</h3>
              <RelationshipEditor
                character={draft}
                entities={entities}
                onChange={(relationships) => patch({ relationships })}
              />
              <div className="ps-relationship-map-wrap">
                <RelationshipMap entities={entities} focusId={draft.id} />
              </div>
            </div>
          </>
        ) : (
          <EntityFields entity={draft} onChange={patch} />
        )}
      </div>

      <footer className="ps-entity-editor-actions">
        <div className="ps-spacer" />
        {canDelete ? (
          <Button
            variant="danger"
            onClick={() => onDelete(draft.id)}
          >
            Delete
          </Button>
        ) : null}
        <Button variant="ghost" onClick={onClose}>
          Cancel
        </Button>
        <Button onClick={save}>Save</Button>
      </footer>
    </aside>
  );
}