Schemas of schemas

"use client";

import { DataGrid } from "@publictheta/ui/components/data-grid/data-grid.tsx";
import type { CellChange, Run } from "@publictheta/ui/components/data-grid/data-grid.tsx";
import { ObjectEditor } from "@publictheta/ui/components/object-editor/object-editor.tsx";
import type { ObjectEditorHandle } from "@publictheta/ui/components/object-editor/object-editor.tsx";
import { Select, SelectItem } from "@publictheta/ui/components/select/select.tsx";
import { Button } from "@publictheta/ui/components/button/button.tsx";
import {
  checkSchema,
  fieldSchema,
  fromSchema,
  schemaSchema,
  toSchema,
} from "@publictheta/ui/primitives/schema-schema.ts";
import {
  blank,
  conform,
  conforms,
  schema,
  tagSchema,
  validate,
  withValueAt,
  withVariant,
} from "@publictheta/ui/primitives/schema.ts";
import type { Issue, ObjectSchema } from "@publictheta/ui/primitives/schema.ts";
import {
  conformRecords,
  deriveNested,
  deriveRecord,
  derivationsOf,
  lockKey,
} from "@publictheta/ui/primitives/derived.ts";
import type { Lock } from "@publictheta/ui/primitives/derived.ts";
import { useEffect, useId, useMemo, useRef, useState } from "react";
import type { ReactNode } from "react";

const product = schema({
  kind: "object",
  fields: [
    { key: "name", schema: { kind: "text", label: "Name", maxLength: 40 } },
    {
      key: "price",
      schema: { kind: "number", label: "Price", minimum: 0, format: "currency", currency: "USD" },
    },
    {
      key: "taxed",
      schema: {
        kind: "number",
        label: "With tax",
        format: "currency",
        currency: "USD",
        formula: "round(price * 1.1, 2)",
      },
    },
    {
      key: "status",
      schema: {
        kind: "choice",
        label: "Status",
        default: "draft",
        options: [
          { value: "draft", label: "Draft" },
          { value: "review", label: "In review" },
          { value: "live", label: "Live" },
        ],
      },
    },
    { key: "released", schema: { kind: "date", label: "Released", optional: true } },
    {
      key: "tags",
      schema: {
        kind: "list",
        label: "Tag",
        description: "Lowercase letters, digits and hyphens.",
        maxItems: 3,
        item: { kind: "text", pattern: "[a-z0-9-]+" },
      },
    },
    {
      key: "dimensions",
      schema: {
        kind: "object",
        label: "Dimensions",
        fields: [
          {
            key: "width",
            schema: { kind: "number", label: "Width", minimum: 0, dimension: "length", unit: "mm" },
          },
          {
            key: "height",
            schema: { kind: "number", label: "Height", minimum: 0, dimension: "length", unit: "mm" },
          },
        ],
      },
    },
  ],
});

type Row = Readonly<Record<string, unknown>>;

const PRODUCTS: readonly Row[] = [
  {
    name: "Teapot",
    price: 48,
    status: "live",
    released: "2026-03-02",
    tags: ["kitchen", "stoneware"],
    dimensions: { width: 180, height: 120 },
  },
  {
    name: "Tea caddy",
    price: 22.5,
    status: "review",
    released: null,
    tags: ["kitchen"],
    dimensions: { width: 80, height: 110 },
  },
  {
    name: "Tray",
    price: 36,
    status: "draft",
    released: null,
    tags: [],
    dimensions: { width: 320, height: 20 },
  },
];

/** One field in a record's description, whole or not: its `key`, and its `schema`'s description. */
type Field = Readonly<Record<string, unknown>>;

/** The description of the record's schema as it is being edited, whole or not. */
interface Description {
  readonly kind: "object";
  readonly fields: readonly Field[];
  readonly [setting: string]: unknown;
}

/** A field as the table of fields shows it: the settings worth a column of their own. */
const fieldRow = schema({
  kind: "object",
  fields: [
    { key: "key", schema: { kind: "text", label: "Key" } },
    // The kinds a schema can be, as the schema of schemas lists them.
    { key: "kind", schema: tagSchema(schemaSchema) },
    { key: "label", schema: { kind: "text", label: "Label", optional: true } },
    { key: "optional", schema: { kind: "boolean", label: "Optional" } },
    { key: "formula", schema: { kind: "text", label: "Formula", optional: true } },
  ],
});

const isRecord = (value: unknown): value is Record<string, unknown> =>
  typeof value === "object" && value !== null && !Array.isArray(value);

// The same row for the same field, so the table sees a change only where there was one.
const rows = new WeakMap<Field, Row>();

function rowOf(field: Field): Row {
  let row = rows.get(field);
  if (row === undefined) {
    const of = isRecord(field.schema) ? field.schema : {};
    row = {
      key: field.key,
      kind: of.kind ?? null,
      label: of.label ?? null,
      optional: of.optional === true,
      formula: of.formula ?? null,
    };
    rows.set(field, row);
  }
  return row;
}

/** A field with one cell of its row changed. Another kind keeps the settings the two kinds share. */
function withCell(field: Field, key: string, value: unknown): Field {
  if (key === "key") return { ...field, key: value };
  if (key === "kind") {
    return {
      ...field,
      schema: withVariant(schemaSchema, field.schema, typeof value === "string" ? value : null),
    };
  }
  if (!isRecord(field.schema)) return field;
  return { ...field, schema: { ...field.schema, [key]: key === "optional" ? value === true : value } };
}

/** The field a new row of the table stands for. */
function fieldOf(row: Row): Field {
  let field: Field = blank(fieldSchema);
  for (const key of ["kind", "key", "label", "optional", "formula"]) {
    if (row[key] !== undefined && row[key] !== null) field = withCell(field, key, row[key]);
  }
  return field;
}

/**
 * What is wrong with a description: what the schema of schemas says of it, and
 * once that is nothing, what it cannot say — a minimum above its maximum, a key
 * used twice.
 */
function problemsOf(description: Description): Issue[] {
  if (!conforms(schemaSchema, description)) return validate(schemaSchema, description);
  return checkSchema(toSchema(description));
}

interface State {
  /** The schema as it is being edited, whole or not. */
  readonly description: Description;
  /** The last description with nothing wrong, as a schema: what the form and the records are built from. */
  readonly schema: ObjectSchema;
  readonly records: readonly Row[];
  /** The record in the form. */
  readonly draft: unknown;
  /** The locks on the form's fields. */
  readonly locks: ReadonlyMap<string, Lock>;
  /** The locks on the records' cells, each under the record's place and the field's key. */
  readonly recordLocks: ReadonlyMap<string, Lock>;
  /** Why the description as it stands is not the schema, though nothing is wrong with it. */
  readonly refused: string | null;
}

/** A record with every value it computes made right, keeping what is frozen. */
function computed(definition: ObjectSchema, record: unknown, frozen?: (key: string) => boolean): Row {
  const fitted = isRecord(record) ? record : {};
  const whole = deriveNested(definition, undefined, fitted);
  return deriveRecord(derivationsOf(definition).plan, whole, frozen === undefined ? {} : { frozen });
}

/** The same record when it already computes as it should, so the table sees a change only where there was one. */
function recomputed(definition: ObjectSchema, record: Row, frozen?: (key: string) => boolean): Row {
  const next = computed(definition, record, frozen);
  return Object.keys(next).every((key) => Object.is(next[key], record[key])) ? record : next;
}

/**
 * The held values a schema change would take or move — in the form's record, and
 * in the records — by name, with the values; `null` when there are none.
 */
function heldTaken(state: State, next: ObjectSchema, draft: Row, records: readonly Row[]): string | null {
  const named: string[] = [];
  const formLock = (key: string) => state.locks.get(key);
  const taken = conformRecords(next, state.schema, [state.draft as Row], (_row, key) =>
    formLock(key),
  ).blocked.map((cell) => cell.key);
  // A formula changed under a held value would move it as surely.
  for (const key of state.locks.keys()) {
    if (formLock(key) === "held" && !taken.includes(key) && Object.hasOwn(draft, key)) {
      if (!Object.is(draft[key], (state.draft as Row)[key])) taken.push(key);
    }
  }
  for (const key of taken)
    named.push(`${key} (${JSON.stringify((state.draft as Row)[key] ?? null)}) in the form`);
  const recordLock = (row: number, key: string) => state.recordLocks.get(lockKey(String(row), key));
  const blocked = conformRecords(next, state.schema, state.records, recordLock).blocked;
  const moved = new Set(blocked.map((cell) => `${cell.row} ${cell.key}`));
  for (const [row, record] of state.records.entries()) {
    for (const key of Object.keys(record)) {
      const now = records[row];
      if (recordLock(row, key) === "held" && now !== undefined && Object.hasOwn(now, key)) {
        if (!Object.is(now[key], record[key])) moved.add(`${row} ${key}`);
      }
    }
  }
  for (const at of moved) {
    const [row = "0", key = ""] = at.split(" ");
    const value = state.records[Number(row)]?.[key] ?? null;
    named.push(`${key} (${JSON.stringify(value)}) in record ${Number(row) + 1}`);
  }
  if (named.length === 0) return null;
  return `Not applied: it would change ${named.length === 1 ? "a held value" : "held values"} — ${named.join(", ")}. Unlock ${named.length === 1 ? "it" : "them"} first.`;
}

/** The records' locks kept under the names their fields now have. */
function renamedRecordLocks(
  locks: ReadonlyMap<string, Lock>,
  before: ObjectSchema,
  after: ObjectSchema,
): ReadonlyMap<string, Lock> {
  if (locks.size === 0) return locks;
  const byRecord = new Map<string, Map<string, Lock>>();
  for (const [key, lock] of locks) {
    const [row = "", field = ""] = key.split("\u001f");
    const fields = byRecord.get(row) ?? new Map<string, Lock>();
    fields.set(field, lock);
    byRecord.set(row, fields);
  }
  const next = new Map<string, Lock>();
  for (const [row, fields] of byRecord) {
    for (const [field, lock] of renamedLocks(fields, before, after)) next.set(lockKey(row, field), lock);
  }
  return next;
}

/** Locks kept under the names their fields now have. */
function renamedLocks(
  locks: ReadonlyMap<string, Lock>,
  before: ObjectSchema,
  after: ObjectSchema,
): ReadonlyMap<string, Lock> {
  if (locks.size === 0) return locks;
  const next = new Map<string, Lock>();
  const now = new Set(after.fields.map((field) => field.key));
  const was = new Set(before.fields.map((field) => field.key));
  for (const [key, lock] of locks) {
    if (now.has(key)) next.set(key, lock);
    else {
      // Renamed in place: the field now where it stood has a name it did not have before.
      const at = before.fields.findIndex((field) => field.key === key);
      const there = after.fields[at]?.key;
      if (there !== undefined && !was.has(there)) next.set(there, lock);
    }
  }
  return next;
}

/**
 * The state after an edit of the description. A whole description becomes the
 * schema, and every record is made to fit it: what still fits is kept, a
 * renamed field keeps its value, the rest starts blank, and what is computed
 * is computed. A change that would take a held value from the form is not made.
 */
function described(state: State, description: Description): State {
  if (!conforms(schemaSchema, description) || problemsOf(description).length > 0) {
    return { ...state, description, refused: null };
  }
  const next = toSchema(description) as ObjectSchema;
  const locks = renamedLocks(state.locks, state.schema, next);
  const draft = computed(
    next,
    conform(next, state.draft, state.schema),
    (key) => locks.get(key) === "frozen",
  );
  const recordLocks = renamedRecordLocks(state.recordLocks, state.schema, next);
  // What each record computes is computed again, but for what is frozen in it.
  const records = state.records.map((record, row) =>
    recomputed(
      next,
      conform(next, record, state.schema),
      (key) => recordLocks.get(lockKey(String(row), key)) === "frozen",
    ),
  );
  const refused = heldTaken(state, next, draft, records);
  if (refused !== null) return { ...state, description, refused };
  return {
    description,
    schema: next,
    records: records.every((record, index) => record === state.records[index]) ? state.records : records,
    draft,
    locks,
    recordLocks,
    refused: null,
  };
}

function Section({ title, children }: { title: string; children: ReactNode }) {
  return (
    <section className="flex min-w-0 flex-col gap-3">
      <h4 className="text-sm font-semibold text-fg-strong">{title}</h4>
      {children}
    </section>
  );
}

export default function SchemaEditor() {
  const [state, setState] = useState<State>(() => ({
    description: fromSchema(product) as Description & { readonly kind: "object" },
    schema: product,
    records: PRODUCTS.map((row) => computed(product, row)),
    draft: computed(product, blank(product)),
    locks: new Map(),
    recordLocks: new Map(),
    refused: null,
  }));
  const { description, records, draft } = state;
  const { fields } = description;
  const change = (next: Description) => setState((current) => described(current, next));
  const setFields = (next: readonly Field[]) => change({ ...description, fields: next });

  // Which field the inspector shows.
  const [picked, setPicked] = useState(0);
  const at = Math.min(picked, fields.length - 1);
  const field = fields[at];
  const fieldLabelId = useId();
  const name = (index: number) => {
    const key = fields[index]?.key;
    return typeof key === "string" && key !== "" ? key : `Field ${index + 1}`;
  };
  function move(by: 1 | -1) {
    const to = at + by;
    if (field === undefined || to < 0 || to >= fields.length) return;
    setFields(fields.toSpliced(at, 1).toSpliced(to, 0, field));
    setPicked(to);
  }

  const problems = useMemo(() => problemsOf(description), [description]);
  // Those of the field in the inspector, as paths within it.
  const fieldProblems = useMemo(
    () =>
      problems
        .filter((issue) => issue.path[0] === "fields" && issue.path[1] === at)
        .map((issue) => ({ ...issue, path: issue.path.slice(2) })),
    [problems, at],
  );
  // Those the table has a cell for, each by its field's place and the column it is in.
  const cellProblems = useMemo(
    () =>
      problems.flatMap((issue): Issue[] => {
        const [list, index, part, setting] = issue.path;
        if (list !== "fields" || typeof index !== "number") return [];
        const column = part === "schema" ? setting : part;
        return typeof column === "string" ? [{ ...issue, path: [index, column] }] : [];
      }),
    [problems],
  );
  const inspector = useRef<ObjectEditorHandle>(null);
  const [shown, setShown] = useState(false);
  // How many times the first problem has been asked for: each time, focus goes to it.
  const [sought, setSought] = useState(0);
  useEffect(() => {
    if (sought > 0) inspector.current?.focusFirstIssue();
  }, [sought]);
  const fieldRows = useMemo(() => fields.map(rowOf), [fields]);

  const form = useRef<ObjectEditorHandle>(null);
  const [attempted, setAttempted] = useState(false);
  const formatter = new Intl.NumberFormat("en-US");

  return (
    <div className="@container w-full">
      <div className="grid gap-x-6 gap-y-10 @2xl:grid-cols-2">
        <div className="flex min-w-0 flex-col gap-6">
          <Section title="Fields">
            <DataGrid
              aria-label="Fields"
              schema={fieldRow}
              locale="en-US"
              rows={fieldRows}
              onCellsChange={(changes: readonly CellChange[]) => {
                const next = fields.slice();
                for (const { row, key, value } of changes) {
                  if (next[row] !== undefined) next[row] = withCell(next[row], key, value);
                }
                setFields(next);
              }}
              onRowsInsert={(index, added) => {
                setFields(fields.toSpliced(index, 0, ...added.map(fieldOf)));
                setPicked(index);
              }}
              onRowsRemove={(runs: ReadonlyArray<Run<Row>>) => {
                const gone = new Set(runs.flatMap((run) => run.rows.map((_, index) => run.at + index)));
                setFields(fields.filter((_, index) => !gone.has(index)));
              }}
              issues={cellProblems}
              // The inspector shows the field whose row the active cell is in.
              onActiveCellChange={(cell) => {
                if (cell !== null && cell.row < fields.length) setPicked(cell.row);
              }}
              columnWidth={116}
              style={{ height: 264 }}
            />
            <p aria-live="polite" className="flex min-h-8 flex-wrap items-center gap-x-3 gap-y-1 text-sm">
              {problems.length === 0 && state.refused !== null ? (
                <span className="text-danger">{state.refused}</span>
              ) : problems.length === 0 ? (
                <span className="text-fg-muted">The form and the records follow every change.</span>
              ) : (
                <>
                  <span className="text-danger">
                    {formatter.format(problems.length)} {problems.length === 1 ? "problem" : "problems"}: the
                    form and the records keep the last schema that had none.
                  </span>
                  <Button
                    onClick={() => {
                      const first = problems.find((issue) => issue.path[0] === "fields");
                      if (typeof first?.path[1] === "number") setPicked(first.path[1]);
                      setShown(true);
                      setSought(sought + 1);
                    }}
                  >
                    Show the first
                  </Button>
                </>
              )}
            </p>
          </Section>

          <Section title="Field">
            {field === undefined ? (
              <p className="text-sm text-fg-muted">Type a key into the table above to add a field.</p>
            ) : (
              <>
                <div className="flex flex-wrap items-center gap-2">
                  <span id={fieldLabelId} className="sr-only">
                    Field
                  </span>
                  <Select
                    aria-labelledby={fieldLabelId}
                    className="min-w-0 flex-1"
                    value={String(at)}
                    onValueChange={(next) => setPicked(Number(next))}
                  >
                    {fields.map((_, index) => (
                      // Fields have no identity but their place: a key may be missing, or used twice.
                      // oxlint-disable-next-line react/no-array-index-key
                      <SelectItem key={index} value={String(index)}>
                        {name(index)}
                      </SelectItem>
                    ))}
                  </Select>
                  <Button disabled={at === 0} onClick={() => move(-1)}>
                    Move up
                  </Button>
                  <Button disabled={at === fields.length - 1} onClick={() => move(1)}>
                    Move down
                  </Button>
                </div>
                <ObjectEditor
                  ref={inspector}
                  aria-label={name(at)}
                  schema={fieldSchema}
                  locale="en-US"
                  value={field}
                  onValueChange={(next) => change(withValueAt(description, ["fields", at], next))}
                  issues={fieldProblems}
                  showAllIssues={shown}
                />
              </>
            )}
          </Section>
        </div>

        <div className="flex min-w-0 flex-col gap-6">
          <Section title="A record">
            <form
              className="flex flex-col gap-4"
              onSubmit={(event) => {
                event.preventDefault();
                if (validate(state.schema, draft).length > 0) {
                  setAttempted(true);
                  form.current?.focusFirstIssue();
                  return;
                }
                setAttempted(false);
                // The record goes into the table with its locks.
                const recordLocks = new Map(state.recordLocks);
                for (const [key, lock] of state.locks)
                  recordLocks.set(lockKey(String(records.length), key), lock);
                setState({
                  ...state,
                  records: [...records, draft as Row],
                  draft: computed(state.schema, blank(state.schema)),
                  locks: new Map(),
                  recordLocks,
                });
              }}
            >
              <ObjectEditor
                ref={form}
                schema={state.schema}
                locale="en-US"
                value={draft}
                onValueChange={(next) => setState((current) => ({ ...current, draft: next }))}
                locks={state.locks}
                onLocksChange={(locks) => setState((current) => ({ ...current, locks }))}
                showAllIssues={attempted}
              />
              <Button type="submit" className="self-start">
                Add to the records
              </Button>
            </form>
          </Section>

          <Section title="Records">
            <DataGrid
              aria-label="Records"
              schema={state.schema}
              locale="en-US"
              rows={records}
              // What a row computes comes with what was typed into it, from the table itself.
              onRowsChange={(next) => setState((current) => ({ ...current, records: next }))}
              locks={state.recordLocks}
              onLocksChange={(recordLocks) => setState((current) => ({ ...current, recordLocks }))}
              columnWidth={132}
              style={{ height: 220 }}
            />
            <p className="text-sm text-fg-muted">
              {formatter.format(records.length)} {records.length === 1 ? "record" : "records"}. A list or a
              nested record has no column: it is edited in the form. With tax follows the price; type over it
              to freeze it, or hold a cell from the menu, and a change to the schema that would move it is
              refused.
            </p>
          </Section>
        </div>
      </div>
    </div>
  );
}