import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { Loading, ErrorState } from '../../../components/PageState.jsx'
import { useAuth } from '../../../contexts/AuthContext.jsx'
import { api } from '../../../api/client.js'
import {
  formFromDefinition,
  payloadFromForm,
  blankPhase,
  blankAdvance,
  blankWhere,
  whereFormFrom,
  ADVANCE_KINDS,
  blankStep,
  describeSchedule,
  scheduleFromForm,
  SCHEDULE_KINDS,
  MONTHLY_NTHS,
  WEEKDAYS,
  PARAM_FORM,
  PARAM_JSON,
  paramsMode,
  paramValue,
  setParam,
  setParamList,
  listValue,
  addToList,
  filterOptions,
  datetimeInputValue,
  priceBodyFrom,
  worthPricing,
  boolValue,
  isSegmentable,
  noteFor,
  missingParams,
  guardedAdvance,
  shortfallSentence,
  blankStart,
  isStartableTrigger,
  describeTriggerStarts,
} from '../../../lib/eventAuthoring.js'
import { operatorsForType, coerceLiteral } from '../../../lib/engagementRules.js'

// Admin → Events → the definition editor (EVENTS.md §I, Phase 3).
//
// **A vertical timeline, not a node graph**, and that is a decision about what
// the engine can actually do rather than a matter of taste. The condition
// grammar has no branching — it is `and`/`or`/`not` over comparisons, bounded at
// depth five — so a canvas would promise power this project has never handed an
// operator. Phases in order, each with its steps in order, says exactly what the
// runner does with them.
//
// **Core renders no game word here.** Every label on a step comes from the
// action's own registration — its `label`, its params' names, their descriptions
// and their examples — so an installed module's vocabulary appears without core
// knowing any of it, and `check:modules` already fails core's build on a UO
// identifier.
//
// **The params are a FORM as of Phase 13**, one control per declared param,
// rendered from a schema core does not understand — §I's *"the condition
// builder, exactly"*. The JSON box did not go away: it is the escape hatch, and
// a step opens in it automatically when the form could not hold what the step
// carries. That rule is the condition builder's own, ported rather than
// reinvented — dropping a param the action does not declare and flattening
// `A and (B or C)` are the same mistake, a save that looks clean and means
// something else.
//
// **The meter beside the timeline is not a lighter dry run.** `POST
// /admin/events/price` dispatches nothing, so it knows nothing a module knows —
// whether the landmark exists, whether the shard is up. It answers the half core
// can answer alone, which is what a plan would SPEND, and it can therefore run on
// a debounce while somebody types. The dry run stays the thing that asks the
// modules, and the screen labels them apart.

/**
 * The values behind one param's `source` (§F *Param option sources*, Phase 7).
 *
 * **A refusal renders as a warning and leaves the field usable**, which is the
 * contract rather than a nicety: a source is answered by a module that may be
 * talking to a sidecar, and an authoring form a shard outage can make unusable
 * would be a worse failure than the typo the dropdown exists to prevent. The
 * operator very often knows the value they want to type.
 *
 * The picker WRITES INTO THE JSON box rather than replacing it, because the box
 * is still the field until the schema-driven form arrives — so this is the one
 * affordance that can exist today and be right afterwards: the values come from
 * the module, and the exact spelling is never typed by hand. When the JSON does
 * not parse the picker says so rather than silently doing nothing, because
 * "clicked and nothing happened" is the one behaviour a form must never have.
 */
function ParamOptions({ entry, label, disabled, onPick }) {
  if (!entry || entry.state === 'loading') {
    return <div className="dim" style={{ fontSize: '0.72rem', marginTop: 4 }}>Reading the list…</div>
  }
  if (entry.state === 'failed') {
    return (
      <div className="sans" style={{ fontSize: '0.72rem', marginTop: 4, color: '#d98b84' }}>
        {entry.reason} — type the value by hand.
      </div>
    )
  }
  if (!entry.options.length) {
    return (
      <div className="dim" style={{ fontSize: '0.72rem', marginTop: 4 }}>
        {label} has nothing to offer right now — type the value by hand.
      </div>
    )
  }

  const grouped = entry.options.some((o) => o.group)
  const groups = grouped
    ? [...new Set(entry.options.map((o) => o.group || 'Other'))]
    : []

  return (
    <select
      className="input"
      style={{ fontSize: '0.75rem', marginTop: 4 }}
      value=""
      disabled={disabled}
      onChange={(e) => { if (e.target.value) onPick(e.target.value) }}
    >
      <option value="">{`Pick from ${label}…`}</option>
      {grouped
        ? groups.map((g) => (
          <optgroup key={g} label={g}>
            {entry.options.filter((o) => (o.group || 'Other') === g).map((o) => (
              <option key={o.value} value={o.value}>{o.label}</option>
            ))}
          </optgroup>
        ))
        : entry.options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
    </select>
  )
}

/**
 * A source too large for a dropdown, as a search box (Phase 13).
 *
 * **The first source that needed this made it unavoidable.** Phase 12b's spawner
 * target is 6,707 spawn points against `MAX_OPTIONS`' bound of 2,000, so a flat
 * list drops two thirds of the world and says nothing about which two thirds —
 * an author picking from it would be choosing from a truncation they cannot see.
 * The sidecar half of that shipped in 12b; this is what asks.
 *
 * `searchable` on the answer decides which control is drawn, rather than the
 * length of the list: inferring it from a truncated answer reads correctly right
 * up until a small deployment's list happens to fit, at which point the same
 * source is a dropdown on one shard and a search box on another.
 *
 * A term is sent on a debounce and the answer is dropped if it is not the one
 * for the term still in the box — a slow source answering after a faster one
 * would otherwise repaint the list under the author's cursor with results for
 * something they have finished typing.
 */
function SearchableOptions({ sourceId, label, disabled, onPick }) {
  const [term, setTerm] = useState('')
  const [state, setState] = useState({ status: 'idle', options: [] })
  const latest = useRef('')

  useEffect(() => {
    const wanted = term.trim()
    latest.current = wanted
    if (!wanted) {
      setState({ status: 'idle', options: [] })
      return undefined
    }
    setState((s) => ({ ...s, status: 'loading' }))
    const timer = setTimeout(async () => {
      try {
        const answer = await api.admin.eventOptions(sourceId, wanted)
        if (latest.current !== wanted) return
        setState(
          answer?.ok
            ? { status: 'ok', options: answer.options || [] }
            : { status: 'failed', options: [], reason: answer?.reason || 'this list could not be read' },
        )
      } catch (err) {
        if (latest.current !== wanted) return
        setState({ status: 'failed', options: [], reason: err.message || 'this list could not be read' })
      }
    }, 250)
    return () => clearTimeout(timer)
  }, [term, sourceId])

  return (
    <div style={{ marginTop: 4 }}>
      <input
        className="input"
        style={{ fontSize: '0.75rem' }}
        value={term}
        disabled={disabled}
        placeholder={`Search ${label}…`}
        onChange={(e) => setTerm(e.target.value)}
      />
      {state.status === 'loading' && (
        <div className="dim" style={{ fontSize: '0.72rem', marginTop: 4 }}>Searching…</div>
      )}
      {state.status === 'failed' && (
        <div className="sans" style={{ fontSize: '0.72rem', marginTop: 4, color: '#d98b84' }}>
          {state.reason} — type the value by hand.
        </div>
      )}
      {state.status === 'ok' && state.options.length === 0 && (
        <div className="dim" style={{ fontSize: '0.72rem', marginTop: 4 }}>
          Nothing matches “{term}”.
        </div>
      )}
      {state.status === 'ok' && state.options.length > 0 && (
        <ul style={{ listStyle: 'none', margin: '4px 0 0', padding: 0, maxHeight: 160, overflowY: 'auto' }}>
          {state.options.map((o) => (
            <li key={o.value}>
              <button
                type="button"
                className="pill"
                style={{ fontSize: '0.72rem', width: '100%', textAlign: 'left', marginBottom: 2 }}
                onClick={() => { onPick(o.value); setTerm('') }}
              >
                {o.label}
                {o.group && <span className="dim"> · {o.group}</span>}
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}

/**
 * The chosen option's note (MODULE_API 1.13.0), found even when the list the
 * form holds does not reach it.
 *
 * A searchable source answers the form a bounded first page, so the value an
 * author picked — or a template filled in — may not be in it, and its note with
 * it. Then the source is asked for that value as a search term, once per value,
 * and the row whose value matches exactly is the one whose note is shown. A
 * failure is no note: advice never breaks the field it advises.
 */
function useChosenNote(sourceId, value, entry) {
  const [asked, setAsked] = useState({ key: null, note: null })
  const text = value === undefined || value === null ? '' : String(value)
  const known = noteFor(entry, value)
  const needAsk = Boolean(sourceId && entry?.state === 'ok' && entry.searchable && text && !known &&
    !entry.options.some((o) => o.value === text))
  const key = needAsk ? `${sourceId}\u0000${text}` : null

  useEffect(() => {
    if (!key || asked.key === key) return undefined
    let alive = true
    const timer = setTimeout(async () => {
      try {
        const answer = await api.admin.eventOptions(sourceId, text)
        const row = answer?.ok ? (answer.options || []).find((o) => o.value === text) : null
        if (alive) setAsked({ key, note: row?.note || null })
      } catch {
        if (alive) setAsked({ key, note: null })
      }
    }, 300)
    return () => {
      alive = false
      clearTimeout(timer)
    }
  }, [key, asked.key, sourceId, text])

  if (known) return known
  return key && asked.key === key ? asked.note : null
}

/**
 * A row of buttons for a choice of two or three (Rust PLAN_REDESIGNS §2.4).
 *
 * A dropdown of two hides the other choice behind a click; a row shows both and
 * which one is on. `aria-pressed` carries the state for a screen reader, the
 * opacity for everyone else — the same convention the weekday buttons use.
 */
function Segmented({ choices, value, disabled, onPick }) {
  const current = value === undefined || value === null ? '' : String(value)
  return (
    <div role="group" style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
      {choices.map((c) => {
        const on = current === String(c.value)
        return (
          <button key={String(c.value)} type="button" className="pill" disabled={disabled}
            aria-pressed={on}
            style={{ fontSize: '0.74rem', opacity: on ? 1 : 0.45 }}
            onClick={() => onPick(String(c.value))}>
            {c.label}
          </button>
        )
      })}
    </div>
  )
}

/**
 * One declared param, as the control its type implies (Phase 13; reworked for
 * MODULE_API 1.13.0, Rust PLAN_REDESIGNS §2.1).
 *
 * **Core does not know what any of this means and that is the design.** The
 * label is the param's own name, the help is its own description, the placeholder
 * is its own example, and the values behind it come from the module that declared
 * the source — `check:modules` fails core's build on a UO identifier, so there is
 * nowhere for a game word to be written here even by accident.
 *
 * **The field is the thing it does, not its type.** There is no ` · int` tag and
 * no bare asterisk (U-3): a required field says so in words, and only when it is
 * empty at save time (`missing`). The controls:
 *
 * • **A boolean is a toggle when it is required and three buttons when it is
 *   optional** (D334). For an OPTIONAL boolean "not set" is a real third state —
 *   the action's own default — and a two-state control would post `false` for
 *   every param an author never touched.
 * • **A number shows its range and its unit beside it** when the declaration has
 *   them: a lease's `min`–`max`, a duration's minutes.
 * • **A closed set of two or three is a row of buttons**, whether it is a lease's
 *   `values` or a source that answered with that few (§2.4).
 * • **A source-backed param keeps its free-text field** otherwise. The dropdown
 *   writes into it; it does not replace it. §F: a source is answered by a module
 *   that may be talking to a sidecar, and an authoring form a shard outage can
 *   make unusable is a worse failure than the typo the dropdown exists to
 *   prevent. A row of buttons replaces the text box only while the source has
 *   answered and the value is one of its choices.
 * • **The chosen option's `note` is shown under the field** (§2.6).
 *
 * `label`, `range` and `values` are passed by the lease form, which draws one
 * lease's fields out of `core.lease`'s generic ones.
 */
function ParamField({ param, value, sourceEntry, disabled, onChange, missing, label, range, values }) {
  const common = { className: 'input', disabled, style: { fontSize: '0.8rem' } }
  const asText = value === undefined || value === null ? '' : String(value)
  const placeholder = param.example === undefined || param.example === null ? '' : String(param.example)

  let control
  let beside = null
  if (param.type === 'boolean') {
    const b = boolValue(value)
    control = param.required ? (
      <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
        <input type="checkbox" role="switch" disabled={disabled} checked={b === true}
          onChange={(e) => onChange(e.target.checked ? 'true' : 'false')} />
        <span className="sans" style={{ fontSize: '0.8rem' }}>
          {b === null ? 'Not set yet' : b ? 'Yes' : 'No'}
        </span>
      </label>
    ) : (
      <Segmented
        disabled={disabled}
        value={b === null ? '' : String(b)}
        onPick={onChange}
        choices={[
          { value: '', label: 'Not set' },
          { value: 'true', label: 'Yes' },
          { value: 'false', label: 'No' },
        ]}
      />
    )
  } else if (values && values.length) {
    control = values.length <= 3 ? (
      <Segmented disabled={disabled} value={asText} onPick={onChange}
        choices={values.map((v) => ({ value: v, label: v }))} />
    ) : (
      <select {...common} value={asText} onChange={(e) => onChange(e.target.value)}>
        <option value="">Choose…</option>
        {values.map((v) => <option key={v} value={v}>{v}</option>)}
      </select>
    )
  } else if (param.type === 'datetime') {
    control = (
      <input
        {...common}
        type="datetime-local"
        value={datetimeInputValue(asText)}
        onChange={(e) => onChange(e.target.value)}
      />
    )
  } else if (param.type === 'int' || param.type === 'float') {
    control = (
      <input
        {...common}
        type="number"
        step={param.type === 'int' ? '1' : 'any'}
        min={range?.min ?? undefined}
        max={range?.max ?? undefined}
        value={asText}
        placeholder={placeholder}
        style={{ ...common.style, maxWidth: 180 }}
        onChange={(e) => onChange(e.target.value)}
      />
    )
    const parts = []
    if (param.duration === 'minutes') parts.push('minutes')
    if (range && range.min !== null && range.min !== undefined && range.max !== null && range.max !== undefined) {
      parts.push(`${range.min}–${range.max}`)
    } else if (range && range.max !== null && range.max !== undefined) {
      parts.push(`at most ${range.max}`)
    }
    if (parts.length) beside = <span className="sans dim" style={{ fontSize: '0.76rem' }}>{parts.join(' · ')}</span>
  } else if (param.type === 'url') {
    control = (
      <input {...common} type="url" value={asText} placeholder={placeholder}
        onChange={(e) => onChange(e.target.value)} />
    )
  } else {
    control = (
      <input {...common} value={asText} placeholder={placeholder}
        onChange={(e) => onChange(e.target.value)} />
    )
  }

  // A source of two or three answered choices is a row of buttons, and the text
  // box goes — unless the value is not one of them, which must stay visible and
  // editable rather than look unset.
  const segmented = param.source && param.type !== 'boolean' && !values && isSegmentable(sourceEntry)
  const offList = segmented && asText !== '' && !sourceEntry.options.some((o) => o.value === asText)
  const note = useChosenNote(param.source, value, sourceEntry)

  return (
    <div style={{ marginBottom: 12 }}>
      <label style={{ display: 'block' }}>
        <span className="field-label">{label || param.name}</span>
        {(!segmented || offList) && (
          beside
            ? <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>{control}{beside}</span>
            : control
        )}
      </label>
      {segmented && (
        <Segmented disabled={disabled} value={asText} onPick={onChange}
          choices={sourceEntry.options.map((o) => ({ value: o.value, label: o.label }))} />
      )}
      {missing && (
        <span className="sans" style={{ display: 'block', fontSize: '0.74rem', color: '#d98b84' }}>
          This is required — fill it in before saving.
        </span>
      )}
      {param.description && (
        <span className="sans dim" style={{ display: 'block', fontSize: '0.74rem' }}>{param.description}</span>
      )}
      {note && (
        <span className="sans" style={{ display: 'block', fontSize: '0.76rem', color: '#d9c184', marginTop: 4 }}>{note}</span>
      )}
      {param.source && !segmented && (
        sourceEntry?.searchable
          ? (
            <SearchableOptions
              sourceId={param.source}
              label={sourceEntry.label || param.source}
              disabled={disabled}
              onPick={onChange}
            />
          )
          : (
            <ParamOptions
              entry={sourceEntry}
              label={sourceEntry?.label || param.source}
              disabled={disabled}
              onPick={onChange}
            />
          )
      )}
    </div>
  )
}

/**
 * A param that holds several values, as a multi-select (MODULE_API 1.14.0; Rust
 * PLAN_REDESIGNS §12.3, D344).
 *
 * The chosen values are chips above the control, each with its remove button,
 * and the control is whichever the param's source allows:
 *
 * • **a source that answered** — a grouped checklist in the source's own order,
 *   with a filter box over it, because a server's few hundred permissions are a
 *   list to narrow, not to scroll;
 * • **a searchable source** — the typeahead, each pick adding a chip;
 * • **no source, or one that failed** — a tag box, a value per Enter. A failure
 *   is said and the field stays usable, the single-value field's rule (§F).
 *
 * Ticking past `max` is refused in words, where the click was. The order the
 * author picked in is the order stored, and the server keeps it.
 */
function MultiParamField({ param, value, sourceEntry, disabled, onChange, missing }) {
  const list = listValue(value)
  const [term, setTerm] = useState('')
  const [typed, setTyped] = useState('')
  const [refused, setRefused] = useState(null)
  const max = param.max || 20

  const answered = sourceEntry && sourceEntry.state === 'ok'
  const byValue = new Map(answered ? sourceEntry.options.map((o) => [o.value, o]) : [])
  const add = (v) => {
    const next = addToList(list, v, max)
    if (next.refused) setRefused(next.refused)
    else {
      setRefused(null)
      onChange(next.list)
    }
  }
  const remove = (v) => {
    setRefused(null)
    onChange(list.filter((x) => String(x) !== String(v)))
  }
  const toggle = (v) => (list.some((x) => String(x) === v) ? remove(v) : add(v))

  const shown = answered && !sourceEntry.searchable ? filterOptions(sourceEntry.options, term) : []
  const groups = [...new Set(shown.map((o) => o.group || ''))]
  const chosenNotes = list
    .map((v) => ({ v, note: byValue.get(String(v))?.note }))
    .filter((x) => x.note)

  const tagBox = (
    <div style={{ display: 'flex', gap: 6, marginTop: 4 }}>
      <input className="input" style={{ fontSize: '0.8rem' }} disabled={disabled} value={typed}
        placeholder={param.example === undefined || param.example === null ? '' : String(param.example)}
        onChange={(e) => setTyped(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            e.preventDefault()
            add(typed)
            setTyped('')
          }
        }} />
      <button type="button" className="pill" style={{ fontSize: '0.72rem' }} disabled={disabled || !typed.trim()}
        onClick={() => { add(typed); setTyped('') }}>
        Add
      </button>
    </div>
  )

  let control
  if (param.source && sourceEntry?.searchable) {
    control = (
      <SearchableOptions sourceId={param.source} label={sourceEntry.label || param.source}
        disabled={disabled} onPick={add} />
    )
  } else if (param.source && answered && sourceEntry.options.length) {
    control = (
      <div style={{ marginTop: 4 }}>
        <input className="input" style={{ fontSize: '0.75rem' }} disabled={disabled} value={term}
          placeholder={`Filter ${sourceEntry.label || param.source}…`} onChange={(e) => setTerm(e.target.value)} />
        <div role="group" aria-label={param.name}
          style={{ maxHeight: 240, overflowY: 'auto', marginTop: 4, border: '1px solid rgba(255,255,255,0.08)', padding: '4px 8px' }}>
          {shown.length === 0 && (
            <div className="dim" style={{ fontSize: '0.72rem' }}>Nothing matches “{term}”.</div>
          )}
          {groups.map((g) => (
            <div key={g || '—'}>
              {g && <div className="field-label" style={{ fontSize: '0.7rem', margin: '6px 0 2px' }}>{g}</div>}
              {shown.filter((o) => (o.group || '') === g).map((o) => (
                <label key={o.value} style={{ display: 'flex', alignItems: 'baseline', gap: 6, fontSize: '0.76rem' }}>
                  <input type="checkbox" disabled={disabled}
                    checked={list.some((x) => String(x) === o.value)}
                    onChange={() => toggle(o.value)} />
                  <span>{o.label}</span>
                  {o.note && <span className="dim" style={{ fontSize: '0.7rem' }}>{o.note}</span>}
                </label>
              ))}
            </div>
          ))}
        </div>
      </div>
    )
  } else {
    control = (
      <>
        {param.source && (
          <ParamOptions entry={sourceEntry} label={sourceEntry?.label || param.source} disabled={disabled} onPick={add} />
        )}
        {tagBox}
      </>
    )
  }

  return (
    <div style={{ marginBottom: 12 }}>
      <span className="field-label">
        {param.name} <span className="dim" style={{ fontWeight: 'normal' }}>· {list.length} of at most {max}</span>
      </span>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
        {list.length === 0 && <span className="sans dim" style={{ fontSize: '0.76rem' }}>None chosen yet.</span>}
        {list.map((v) => (
          <span key={String(v)} className="pill" style={{ fontSize: '0.74rem', display: 'inline-flex', gap: 6, alignItems: 'center' }}>
            {byValue.get(String(v))?.label || String(v)}
            <button type="button" aria-label={`Remove ${v}`} disabled={disabled}
              style={{ background: 'none', border: 'none', color: 'inherit', cursor: 'pointer', padding: 0 }}
              onClick={() => remove(v)}>
              ×
            </button>
          </span>
        ))}
      </div>
      {refused && (
        <span className="sans" style={{ display: 'block', fontSize: '0.74rem', color: '#d98b84', marginTop: 4 }}>{refused}</span>
      )}
      {control}
      {missing && (
        <span className="sans" style={{ display: 'block', fontSize: '0.74rem', color: '#d98b84' }}>
          This is required — choose at least one before saving.
        </span>
      )}
      {param.description && (
        <span className="sans dim" style={{ display: 'block', fontSize: '0.74rem' }}>{param.description}</span>
      )}
      {chosenNotes.map(({ v, note }) => (
        <span key={String(v)} className="sans" style={{ display: 'block', fontSize: '0.76rem', color: '#d9c184', marginTop: 4 }}>
          {byValue.get(String(v))?.label || String(v)}: {note}
        </span>
      ))}
    </div>
  )
}

/**
 * `core.lease`, drawn as the chosen lease (Rust PLAN_REDESIGNS §2.1, U-4, F11).
 *
 * `core.lease` declares four generic fields — a lease id, a value as text, a
 * target as text, a number of minutes — because one action serves every lease
 * there is. Drawn as declared, a Rust admin was shown a skill-gain rate as the
 * example and a free-text box for a target the lease has a list of. So the
 * lease is picked by its label, and the other three become that lease's own:
 *
 * • the value as the lease's type — a toggle, a number with the lease's range,
 *   or its closed set of values — with the lease's own example;
 * • the target as a picker over the lease's own `target.source` (F11: the editor
 *   read only `param.source`, and `core.lease`'s target param has none, on
 *   purpose — see its declaration);
 * • the minutes with the lease's longest hold beside them.
 *
 * What is written is still `core.lease`'s params, as text where the action says
 * text: the action coerces the value to the lease's type, and that stays the one
 * place that knows both halves.
 */
function LeaseFields({ action, step, leases, sources, disabled, missing, onParam }) {
  const declared = new Map((action.params || []).map((p) => [p.name, p]))
  const leaseId = paramValue(step, 'lease')
  const lease = leases.find((l) => l.id === leaseId) || null
  const target = paramValue(step, 'target')
  const owners = [...new Set(leases.map((l) => l.owner || 'other'))]

  return (
    <>
      <div style={{ marginBottom: 12 }}>
        <label style={{ display: 'block' }}>
          <span className="field-label">What to borrow</span>
          <select className="input" style={{ fontSize: '0.8rem' }} disabled={disabled} value={leaseId || ''}
            onChange={(e) => onParam('lease', e.target.value)}>
            <option value="">Pick a value to borrow…</option>
            {owners.map((owner) => (
              <optgroup key={owner} label={owner}>
                {leases.filter((l) => (l.owner || 'other') === owner).map((l) => (
                  <option key={l.id} value={l.id}>{l.label}</option>
                ))}
              </optgroup>
            ))}
            {leaseId && !lease && <option value={leaseId}>{leaseId} (not installed)</option>}
          </select>
        </label>
        {missing.includes('lease') && (
          <span className="sans" style={{ display: 'block', fontSize: '0.74rem', color: '#d98b84' }}>
            This is required — fill it in before saving.
          </span>
        )}
        {lease?.description && (
          <span className="sans dim" style={{ display: 'block', fontSize: '0.74rem' }}>{lease.description}</span>
        )}
        {leaseId && !lease && (
          <span className="sans" style={{ display: 'block', fontSize: '0.74rem', color: '#d9c184' }}>
            No installed module declares <code>{leaseId}</code>.
          </span>
        )}
      </div>

      {lease && (
        <ParamField
          param={{
            name: 'value',
            type: lease.type === 'bool' ? 'boolean' : lease.type,
            required: true,
            example: lease.example ?? (lease.type === 'int' || lease.type === 'float' ? lease.min : ''),
          }}
          label="Hold it at"
          range={lease.type === 'int' || lease.type === 'float' ? { min: lease.min, max: lease.max } : null}
          values={lease.values}
          value={paramValue(step, 'value')}
          disabled={disabled}
          missing={missing.includes('value')}
          onChange={(raw) => onParam('value', raw)}
        />
      )}

      {lease?.target && (
        <ParamField
          param={{
            name: 'target',
            type: 'string',
            required: true,
            example: lease.target.example ?? '',
            source: lease.target.source,
            description: lease.target.description,
          }}
          label={lease.target.label}
          value={target}
          sourceEntry={lease.target.source ? sources[lease.target.source] : null}
          disabled={disabled}
          missing={missing.includes('target')}
          onChange={(raw) => onParam('target', raw)}
        />
      )}
      {lease && !lease.target && target !== undefined && target !== '' && (
        <p className="sans" style={{ fontSize: '0.76rem', color: '#d9c184', margin: '0 0 12px' }}>
          {lease.label} is a single value and takes no target, so the step will be refused with
          <code> {String(target)}</code> in it.{' '}
          <button type="button" className="pill" style={{ fontSize: '0.7rem' }} disabled={disabled}
            onClick={() => onParam('target', '')}>
            Clear it
          </button>
        </p>
      )}

      {declared.get('minutes') && (
        <ParamField
          param={declared.get('minutes')}
          label="For how long"
          range={lease ? { min: 1, max: Math.floor(lease.maxDurationMs / 60_000) } : null}
          value={paramValue(step, 'minutes')}
          disabled={disabled}
          missing={missing.includes('minutes')}
          onChange={(raw) => onParam('minutes', raw)}
        />
      )}
    </>
  )
}

/**
 * "Start from a template" on a new event (MODULE_API 1.13.0; Rust PLAN_REDESIGNS
 * §2.5, D192).
 *
 * A module's named starting point: the author fills in a few inputs and gets an
 * ordinary draft in the editor below — the title, the phases, the steps — which
 * they read, change and save like any other. **Nothing is saved here**, and
 * nothing about the template follows the definition: it is a shortcut past
 * typing, and the editor is still where the event is made.
 *
 * The inputs are params and are drawn by `ParamField`, so an input with a source
 * gets the same dropdown, buttons and search a step's field does.
 */
function TemplatePicker({ templates, sources, loadSource, onDraft }) {
  const [chosenId, setChosenId] = useState('')
  const [inputs, setInputs] = useState({})
  const [errors, setErrors] = useState([])
  const [busy, setBusy] = useState(false)
  const chosen = templates.find((t) => t.id === chosenId) || null

  useEffect(() => {
    for (const p of chosen?.inputs || []) if (p.source) loadSource(p.source)
  }, [chosen, loadSource])

  const choose = (id) => {
    setChosenId(id)
    setErrors([])
    const t = templates.find((x) => x.id === id)
    // Prefilled from the examples, like a fresh step — but only the required
    // ones, because an example of a kit is not a kit this deployment has.
    setInputs({})
    if (t) setInputs(Object.fromEntries(t.inputs.filter((p) => p.required && !p.source).map((p) => [p.name, p.example])))
  }

  const fill = async () => {
    setBusy(true)
    setErrors([])
    try {
      const { draft } = await api.admin.buildEventTemplate(chosen.id, inputs)
      onDraft(draft, chosen)
    } catch (err) {
      setErrors(err.body?.errors || [err.message])
    } finally {
      setBusy(false)
    }
  }

  return (
    <div className="panel-flat" style={{ padding: 14, marginBottom: 14, borderLeft: '3px solid var(--accent, #6d7f9c)' }}>
      <h3 className="sans" style={{ margin: '0 0 6px', fontSize: '0.92rem' }}>Start from a template</h3>
      <p className="sans dim" style={{ margin: '0 0 10px', fontSize: '0.78rem' }}>
        A starting point an installed module offers. It fills in the plan below; nothing is saved
        until you create the draft, and you can change every part of it first.
      </p>
      <select className="input" style={{ fontSize: '0.8rem', maxWidth: 360 }} value={chosenId}
        onChange={(e) => choose(e.target.value)}>
        <option value="">Start from nothing</option>
        {templates.map((t) => <option key={t.id} value={t.id}>{t.label}</option>)}
      </select>

      {chosen && (
        <div style={{ marginTop: 12 }}>
          {chosen.description && (
            <p className="sans dim" style={{ margin: '0 0 10px', fontSize: '0.8rem' }}>{chosen.description}</p>
          )}
          {chosen.inputs.map((p) => (
            <ParamField
              key={p.name}
              param={p}
              value={inputs[p.name]}
              sourceEntry={p.source ? sources[p.source] : null}
              disabled={busy}
              onChange={(raw) => setInputs((cur) => {
                const next = { ...cur }
                if (raw === '' || raw === undefined || raw === null) delete next[p.name]
                else next[p.name] = coerceLiteral(p.type, raw)
                return next
              })}
            />
          ))}
          {errors.length > 0 && (
            <ul className="sans" style={{ margin: '0 0 10px', paddingLeft: 18, fontSize: '0.8rem', color: '#d98b84' }}>
              {errors.map((e) => <li key={e}>{e}</li>)}
            </ul>
          )}
          <button type="button" className="pill" style={{ fontSize: '0.74rem' }} disabled={busy} onClick={fill}>
            Fill in the plan
          </button>
        </div>
      )}
    </div>
  )
}

/**
 * The advance condition, as a builder rather than as JSON (Phase 13).
 *
 * **This is the engagement condition builder**, and being the same one is the
 * point rather than a saving: the grammar is `engagement/conditions.js`, the
 * server validates a phase gate with it, and the run console's diagnosis panel
 * renders its sentence from the same labels. A second editor here would be a
 * second opinion about a grammar core owns — exactly what §I refuses on the read
 * side, where the sentence is rendered on the server for the same reason.
 *
 * It offers the FLAT half of the grammar — one `and`/`or` over a list of
 * comparisons — because that is what a dropdown per operator can render
 * honestly. A tree it cannot hold opens READ-ONLY with its JSON showing and one
 * choice: leave it, or clear it and start again. Flattening `A and (B or C)`
 * into `A and B and C` changes which firings release the phase, and an author
 * would have no way to know the save had done it.
 */
function WhereBuilder({ advance, trigger, operators, disabled, onChange, emptyText }) {
  const variables = trigger?.variables || []
  const rows = advance.whereRows || []

  if (advance.whereEditable === false) {
    return (
      <div style={{ marginTop: 10 }}>
        <span className="field-label">Only when</span>
        <pre className="dim" style={{ fontSize: '0.76rem', margin: 0, whiteSpace: 'pre-wrap' }}>
          {advance.whereText}
        </pre>
        <p className="sans" style={{ fontSize: '0.74rem', color: '#d9c184', margin: '6px 0 0' }}>
          This condition nests, and the builder only holds one <code>and</code>/<code>or</code> over a
          flat list. It is kept exactly as authored and posted back unchanged — flattening it would
          change which firings release the phase without saying so.
        </p>
        <button type="button" className="pill" style={{ fontSize: '0.72rem', marginTop: 6 }} disabled={disabled}
          onClick={() => onChange(blankWhere())}>
          Clear it and start again
        </button>
      </div>
    )
  }

  const setRow = (i, patch) =>
    onChange({ whereRows: rows.map((r, j) => (j === i ? { ...r, ...patch } : r)) })

  return (
    <div style={{ marginTop: 10 }}>
      <span className="field-label">Only when</span>
      {rows.length === 0 && (
        <p className="sans dim" style={{ fontSize: '0.76rem', margin: '4px 0 0' }}>
          {emptyText || 'Every firing of this trigger counts. Add a clause to narrow it — the phase then waits for firings that match.'}
        </p>
      )}
      {rows.length > 1 && (
        <label style={{ display: 'block', margin: '6px 0' }}>
          <span className="field-label">Match</span>
          <select className="input" style={{ maxWidth: 220, fontSize: '0.76rem' }} value={advance.whereOp}
            disabled={disabled}
            onChange={(e) => onChange({ whereOp: e.target.value })}>
            <option value="and">all of these</option>
            <option value="or">any of these</option>
          </select>
        </label>
      )}
      {rows.map((row, i) => {
        const declared = variables.find((v) => v.name === row.variable)
        const usable = operatorsForType(operators, declared?.type)
        const valueless = row.cmp === 'present' || row.cmp === 'absent'
        return (
          <div key={i} style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap', marginTop: 6 }}>
            <select className="input" style={{ flex: '1 1 150px', fontSize: '0.76rem' }} value={row.variable}
              disabled={disabled}
              onChange={(e) => setRow(i, { variable: e.target.value, cmp: '' })}>
              <option value="">Which variable…</option>
              {variables.map((v) => <option key={v.name} value={v.name}>{v.name} ({v.type})</option>)}
            </select>
            <select className="input" style={{ flex: '0 1 130px', fontSize: '0.76rem' }} value={row.cmp}
              disabled={disabled || !row.variable}
              onChange={(e) => setRow(i, { cmp: e.target.value })}>
              <option value="">is…</option>
              {usable.map((o) => <option key={o.cmp} value={o.cmp}>{o.label}</option>)}
            </select>
            {!valueless && (
              <input className="input" style={{ flex: '1 1 140px', fontSize: '0.76rem' }} value={row.value ?? ''}
                disabled={disabled || !row.cmp}
                placeholder={row.cmp === 'in' || row.cmp === 'nin' ? 'north, south, east' : ''}
                onChange={(e) => setRow(i, { value: e.target.value })} />
            )}
            <button type="button" className="pill" style={{ fontSize: '0.72rem' }} disabled={disabled}
              onClick={() => onChange({ whereRows: rows.filter((_, j) => j !== i) })}>
              ✕
            </button>
          </div>
        )
      })}
      <button type="button" className="pill" style={{ fontSize: '0.72rem', marginTop: 8 }}
        disabled={disabled || !variables.length}
        onClick={() => onChange({ whereRows: [...rows, { variable: '', cmp: '', value: '' }] })}>
        Add a clause
      </button>
      {!variables.length && advance.on && (
        <span className="sans dim" style={{ fontSize: '0.74rem', marginLeft: 8 }}>
          This trigger declares no variables, so there is nothing to narrow on.
        </span>
      )}
      <p className="sans dim" style={{ fontSize: '0.74rem', margin: '8px 0 0' }}>
        A list operator takes comma-separated values. Every literal is read as the type the trigger
        declared, and a variable it does not have comes back named from the save.
      </p>
    </div>
  )
}

/**
 * The live cap meter (§I, Phase 13).
 *
 * Two facts per dimension — what this plan draws, and what the deployment allows
 * — because that is all a cap is. §I says the same thing about the run console's
 * meter: *"a meter per dimension rather than a sentence, because unlike a gate a
 * cap is two numbers and a name and needs no grammar rendered to be read."*
 *
 * **It says what it does not know.** A step core could not price makes every
 * total below an under-count, and an author reading a number smaller than what
 * will happen is worse off than one reading no number at all. So `unpriced` is
 * rendered as prominently as the totals, not tucked underneath them.
 *
 * And it does not claim to be the dry run: the caption says so, because a green
 * meter beside a plan whose landmarks do not exist would otherwise read as a
 * pass.
 */
function CapMeter({ report, budgets, stale }) {
  const labelOf = (id) => budgets.find((b) => b.id === id)?.label || id
  const unitOf = (id) => budgets.find((b) => b.id === id)?.unit || ''
  if (!report) return null
  const nothing = report.cost.length === 0 && report.unpriced.length === 0
  return (
    <div className="panel-flat" style={{ padding: '10px 14px', marginBottom: 12, opacity: stale ? 0.55 : 1 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 10 }}>
        <h3 className="sans" style={{ margin: 0, fontSize: '0.88rem' }}>
          What this plan draws
          {stale && <span className="dim" style={{ fontWeight: 'normal' }}> · recalculating…</span>}
        </h3>
        <span className="sans dim" style={{ fontSize: '0.74rem' }}>
          {report.steps} step{report.steps === 1 ? '' : 's'}
        </span>
      </div>

      {nothing && (
        <p className="sans dim" style={{ margin: '6px 0 0', fontSize: '0.8rem' }}>
          Nothing in this plan spends a capped resource.
        </p>
      )}

      {report.cost.length > 0 && (
        <table className="sans" style={{ fontSize: '0.8rem', borderCollapse: 'collapse', marginTop: 6 }}>
          <tbody>
            {report.cost.map((c) => (
              <tr key={c.dimension} style={{ color: c.over ? '#d98b84' : undefined }}>
                <td style={{ paddingRight: 12 }}>{labelOf(c.dimension)}</td>
                <td style={{ paddingRight: 12 }}>{c.total} {unitOf(c.dimension)}</td>
                <td className="dim">
                  {c.cap === null ? 'no cap' : `of ${c.cap} per run${c.from ? ` (${c.from})` : ''}`}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}

      {report.unpriced.length > 0 && (
        <div style={{ marginTop: 8, borderLeft: '3px solid #d9c184', paddingLeft: 10 }}>
          <p className="sans" style={{ margin: 0, fontSize: '0.78rem' }}>
            <strong>These totals are incomplete.</strong>
          </p>
          <ul className="sans" style={{ margin: '4px 0 0', paddingLeft: 18, fontSize: '0.78rem' }}>
            {report.unpriced.map((u, i) => (
              <li key={`${u.phase}-${u.seq}-${u.code}-${i}`}>
                <code className="dim" style={{ fontSize: '0.76rem' }}>phase {u.phase + 1} · step {u.seq + 1}</code>
                {' — '}{u.message}
              </li>
            ))}
          </ul>
        </div>
      )}

      <p className="sans dim" style={{ margin: '8px 0 0', fontSize: '0.74rem' }}>
        Arithmetic only — nothing was dispatched, so this does not know whether the places and things
        these steps name exist. The dry run asks the modules that do.
      </p>
    </div>
  )
}

/**
 * Starting a run, with the three things the route has always taken (Phase 13).
 *
 * **Two of them were unreachable from this screen until now**, and one of those
 * is not a nicety: `concurrencyKey` is a `{placeholder}` template rendered from
 * the RUN's own params, so an event whose key names one could not be started
 * correctly from the UI at all — every manual run rendered the same key and the
 * second one was refused as an overlap.
 *
 * **Rehearsal is a real run.** §I: the world changes are real, the announcements
 * are ceilinged to `staff`. It is not a dry run and the dialog says so, because
 * the two words are near enough to swap in a hurry.
 */
function StartDialog({ onStart, onCancel, busy, draftAhead, publishedVersion, mayPublish }) {
  const [rehearsal, setRehearsal] = useState(false)
  const [scope, setScope] = useState('')
  const [paramsText, setParamsText] = useState('{}')
  const [problem, setProblem] = useState(null)
  // Rust PLAN_REDESIGNS §2.3 (U-5). A run is pinned to the PUBLISHED version, so
  // an author who saved an edit and pressed Start ran the old plan without being
  // told. When the working copy is ahead, the dialog asks which one — and does
  // not pick for them: publishing is a decision with consequences of its own
  // (scheduled occurrences move to the new version).
  const [which, setWhich] = useState(null)

  const go = () => {
    let params = null
    const text = paramsText.trim()
    if (text && text !== '{}') {
      try {
        params = JSON.parse(text)
      } catch (err) {
        setProblem(`The params are not valid JSON (${err.message})`)
        return
      }
      if (!params || typeof params !== 'object' || Array.isArray(params)) {
        setProblem('The params must be a JSON object')
        return
      }
    }
    if (draftAhead && !which) {
      setProblem('Choose which plan to start: your edits, published first, or the published version.')
      return
    }
    onStart(
      { rehearsal, scope: scope || undefined, ...(params ? { params } : {}) },
      { publishFirst: draftAhead && which === 'publish' },
    )
  }

  return (
    <div className="panel-flat" style={{ padding: 14, marginBottom: 14, borderLeft: '3px solid var(--accent, #6d7f9c)' }}>
      <h3 className="sans" style={{ margin: '0 0 10px', fontSize: '0.92rem' }}>Start a run now</h3>

      {draftAhead && (
        <div style={{ marginBottom: 12, borderLeft: '3px solid #d9c184', paddingLeft: 10 }}>
          <p className="sans" style={{ margin: '0 0 6px', fontSize: '0.84rem' }}>
            <strong>This definition has edits that are not published.</strong>{' '}
            <span className="dim">A run uses a published version, never the working copy.</span>
          </p>
          {mayPublish && (
            <label style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 4 }}>
              <input type="radio" name="start-which" checked={which === 'publish'} onChange={() => setWhich('publish')} />
              <span className="sans" style={{ fontSize: '0.84rem' }}>
                Publish and start <span className="dim">— your edits become v{(publishedVersion || 0) + 1}, and scheduled occurrences move to it</span>
              </span>
            </label>
          )}
          <label style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <input type="radio" name="start-which" checked={which === 'published'} onChange={() => setWhich('published')} />
            <span className="sans" style={{ fontSize: '0.84rem' }}>
              Start version {publishedVersion} <span className="dim">(the published one, without your edits)</span>
            </span>
          </label>
        </div>
      )}

      <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', marginBottom: 10 }}>
        <input type="checkbox" checked={rehearsal} onChange={(e) => setRehearsal(e.target.checked)} />
        <span className="sans" style={{ fontSize: '0.84rem' }}>
          <strong>Rehearsal.</strong>{' '}
          <span className="dim">
            A real run — every world change actually happens — with its announcements ceilinged to
            staff, so no player is told. This is not the dry run.
          </span>
        </span>
      </label>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: 12 }}>
        <label>
          <span className="field-label">Scope (optional)</span>
          <input className="input" value={scope} onChange={(e) => setScope(e.target.value)} />
          <span className="sans dim" style={{ fontSize: '0.74rem' }}>
            Passed to the module verbatim. Core never parses it.
          </span>
        </label>
        <label>
          <span className="field-label">Run params (optional)</span>
          <textarea className="input" rows={3} spellCheck={false}
            style={{ fontFamily: 'var(--mono, monospace)', fontSize: '0.78rem' }}
            value={paramsText} onChange={(e) => setParamsText(e.target.value)} />
          <span className="sans dim" style={{ fontSize: '0.74rem' }}>
            What the concurrency key’s <code>{'{placeholders}'}</code> are filled from.
          </span>
        </label>
      </div>

      {problem && (
        <p className="sans" style={{ fontSize: '0.8rem', color: '#d98b84', margin: '10px 0 0' }}>{problem}</p>
      )}

      <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
        <button type="button" className="pill" style={{ fontSize: '0.74rem' }} disabled={busy} onClick={go}>
          Start it
        </button>
        <button type="button" className="pill" style={{ fontSize: '0.74rem' }} disabled={busy} onClick={onCancel}>
          Cancel
        </button>
      </div>
    </div>
  )
}

const DORMANT_NOTE =
  'The module that registered this action is not installed. The step is kept exactly as authored — nothing was dropped — but the definition cannot be published until it is resolved.'

export default function EventEditor() {
  const { id } = useParams()
  const navigate = useNavigate()
  const { user } = useAuth()
  const isNew = id === 'new'

  const [form, setForm] = useState(null)
  const [event, setEvent] = useState(null)
  const [catalog, setCatalog] = useState(null)
  const [series, setSeries] = useState([])
  const [versions, setVersions] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [problems, setProblems] = useState([])
  const [notice, setNotice] = useState(null)
  const [busy, setBusy] = useState(false)
  // The dry run's answer (Phase 6). Cleared on every save and every publish,
  // because a report is a statement about a spec and both of those change it —
  // a stale green report beside an edited plan is worse than no report.
  const [report, setReport] = useState(null)
  // Phase 13. The meter's answer, and whether the plan has moved since it was
  // asked — `stale` is what stops the number reading as current while a request
  // is in flight, which on a debounce it very often is not.
  const [priced, setPriced] = useState(null)
  const [priceStale, setPriceStale] = useState(false)
  // The start dialog is open. Not a modal: this screen is long, and a dialog
  // that covers the plan hides the thing being started.
  const [starting, setStarting] = useState(false)

  const isAdmin = user?.role === 'admin'
  // Reads here are staff-wide (§K), so a moderator reaches this screen legitimately
  // — the run console is their whole job and a definition is what a run is OF. But
  // authoring is `admin` + `editor`, so Save has to follow the route it calls.
  // Offering it and letting the server answer 403 is the shape §K calls "a gate
  // nobody notices was missing", only inverted: a button that does nothing.
  const mayAuthor = isAdmin || user?.role === 'editor'

  const load = useCallback(async () => {
    const [cat, ser] = await Promise.all([api.admin.eventCatalog(), api.admin.eventSeries()])
    setCatalog(cat)
    setSeries(ser.series || [])
    if (isNew) {
      setEvent(null)
      setVersions([])
      setForm(formFromDefinition({ spec: { schedule: { kind: 'manual' }, phases: [] } }))
      return
    }
    const [{ event: loaded }, { versions: history }] = await Promise.all([
      api.admin.getEvent(id),
      api.admin.listEventVersions(id),
    ])
    setEvent(loaded)
    setVersions(history || [])
    setForm(formFromDefinition(loaded))
  }, [id, isNew])

  useEffect(() => {
    let alive = true
    ;(async () => {
      setLoading(true)
      try {
        await load()
        if (alive) setError(null)
      } catch (err) {
        if (alive) setError(err.message)
      } finally {
        if (alive) setLoading(false)
      }
    })()
    return () => {
      alive = false
    }
  }, [load])

  const actions = useMemo(() => catalog?.actions || [], [catalog])
  const actionById = useMemo(() => new Map(actions.map((a) => [a.id, a])), [actions])
  // Phase 5. Served with the actions on the same route, so an EDITOR sees the
  // same catalog an admin does — `/admin/engagement/triggers` is admin-only, and
  // an editor writing a trigger id from memory into a field the save path then
  // refuses is the failure this avoids.
  const triggers = useMemo(() => catalog?.triggers || [], [catalog])
  const triggerById = useMemo(() => new Map(triggers.map((t) => [t.id, t])), [triggers])
  // Rust PLAN_REDESIGNS §2.1: `core.lease` is drawn as the chosen lease.
  const leases = useMemo(() => catalog?.leases || [], [catalog])
  const leaseById = useMemo(() => new Map(leases.map((l) => [l.id, l])), [leases])
  // §2.5: a new event may start from a module's template.
  const templates = useMemo(() => catalog?.templates || [], [catalog])
  // §2.1: a required field says it is empty only once a save has been tried —
  // a form that opens covered in red reads as broken before anyone has typed.
  const [checkMissing, setCheckMissing] = useState(false)

  // Phase 7. source id -> { state: 'loading' | 'ok' | 'failed', options, reason }.
  //
  // Resolved LAZILY, one request per source, and only for the sources the steps
  // on this page actually name. A definition uses two or three of them; a
  // deployment with a game module installed may register a dozen, and asking a
  // shard for eight hundred creature names to draw a form that needs none of
  // them is a page that opens slowly for no one's benefit.
  const [sources, setSources] = useState({})

  // **The guard is a ref, and it has to be.** `setSources` QUEUES its updater
  // rather than running it, so a "have I already asked for this?" check written
  // inside the updater cannot be read on the next line — it has not run yet. The
  // first draft did exactly that and the field sat on *Reading the list…* for
  // ever, having never made the request at all: state is the wrong tool for a
  // question that must be answered synchronously, at the call.
  const requested = useRef(new Set())
  const loadSource = useCallback(async (sourceId) => {
    if (requested.current.has(sourceId)) return
    requested.current.add(sourceId)
    setSources((s) => ({ ...s, [sourceId]: { state: 'loading', options: [] } }))
    try {
      const answer = await api.admin.eventOptions(sourceId)
      setSources((s) => ({
        ...s,
        [sourceId]: answer?.ok
          // `searchable` is the SOURCE's answer about itself (Phase 12b), not a
          // guess from how long the list came back. A source bounded at 2,000
          // that happens to have 40 entries on this deployment is still the one
          // that has to be searched on the shard where it has 6,707.
          ? {
            state: 'ok',
            label: answer.label,
            searchable: Boolean(answer.searchable),
            options: answer.options || [],
          }
          : { state: 'failed', options: [], reason: answer?.reason || 'this list could not be read' },
      }))
    } catch (err) {
      // The route answers a refusal with a 200, so reaching here means the
      // REQUEST failed rather than the source — and the field's behaviour is the
      // same either way: it degrades to free text and says why.
      setSources((s) => ({
        ...s,
        [sourceId]: { state: 'failed', options: [], reason: err.message || 'this list could not be read' },
      }))
    }
  }, [])

  // Phase 7. Every option source the steps on this page name, resolved once.
  //
  // An effect rather than a lookup at render time, because resolving one is a
  // request and a request started during render is a render with a side effect.
  // `sources` is deliberately NOT a dependency: `loadSource` keeps its own ref of
  // what it has already asked for, so re-running this on every answer would be a
  // pass over the same set, changing nothing.
  useEffect(() => {
    const wanted = new Set()
    for (const phase of form?.phases || []) {
      for (const step of phase.steps || []) {
        for (const p of actionById.get(step.actionId)?.params || []) {
          if (p.source) wanted.add(p.source)
        }
        // A lease step's target list is the chosen LEASE's (F11), which only
        // becomes knowable once a lease is picked.
        if (step.actionId === 'core.lease') {
          const source = leaseById.get(paramValue(step, 'lease'))?.target?.source
          if (source) wanted.add(source)
        }
      }
    }
    for (const id of wanted) loadSource(id)
  }, [form, actionById, leaseById, loadSource])

  /**
   * The live cap meter (§I, Phase 13).
   *
   * **A debounce and a generation counter, and the counter is not optional.**
   * Requests started 400ms apart do not necessarily answer in that order, and an
   * older answer landing last would leave the meter showing the cost of a plan
   * the author has already changed — stale in the one direction that matters,
   * silently, with nothing on the screen to say so.
   *
   * A failure leaves the LAST answer standing rather than blanking the meter or
   * raising an error box: this is an aid to authoring, and the plan is still
   * saveable, dry-runnable and publishable without it. The staleness marker is
   * how the screen stays honest about it.
   */
  const priceGeneration = useRef(0)
  useEffect(() => {
    if (!form || !worthPricing(form)) {
      setPriced(null)
      setPriceStale(false)
      return undefined
    }
    setPriceStale(true)
    const generation = ++priceGeneration.current
    const timer = setTimeout(async () => {
      try {
        const answer = await api.admin.priceEvent(priceBodyFrom(form))
        if (priceGeneration.current !== generation) return
        setPriced(answer)
        setPriceStale(false)
      } catch {
        if (priceGeneration.current !== generation) return
        // Left stale on purpose: a number the screen cannot vouch for is shown
        // dimmed rather than replaced by nothing.
        setPriceStale(true)
      }
    }, 400)
    return () => clearTimeout(timer)
  }, [form])

  /** The meter's per-phase rollup, by ordinal, for the timeline. */
  const drawByPhase = useMemo(
    () => new Map((priced?.phases || []).map((p) => [p.phase, p.draw])),
    [priced],
  )
  const budgets = useMemo(() => catalog?.budgets || [], [catalog])

  const set = (patch) => setForm((f) => ({ ...f, ...patch }))

  const setPhase = (pi, patch) =>
    setForm((f) => ({
      ...f,
      phases: f.phases.map((p, i) => (i === pi ? { ...p, ...patch } : p)),
    }))

  const movePhase = (pi, delta) =>
    setForm((f) => {
      const next = [...f.phases]
      const to = pi + delta
      if (to < 0 || to >= next.length) return f
      ;[next[pi], next[to]] = [next[to], next[pi]]
      return { ...f, phases: next }
    })

  const moveStep = (pi, si, delta) =>
    setForm((f) => ({
      ...f,
      phases: f.phases.map((p, i) => {
        if (i !== pi) return p
        const steps = [...p.steps]
        const to = si + delta
        if (to < 0 || to >= steps.length) return p
        ;[steps[si], steps[to]] = [steps[to], steps[si]]
        return { ...p, steps }
      }),
    }))

  /**
   * Changing a step's action REPLACES its params with the new action's examples.
   *
   * The alternative — keeping what was typed — leaves an object whose keys belong
   * to a different action, and the save refuses it with "x is not a param of y"
   * for every one of them. Replacing is the honest move and it is not
   * destructive in any way an author minds: they have just said this step does
   * something else.
   */
  const changeAction = (pi, si, actionId) => {
    const action = actionById.get(actionId)
    const fresh = blankStep(action)
    setStep(pi, si, { actionId, label: fresh.label, paramsText: fresh.paramsText, onFailure: '' }, { timed: true })
  }

  /**
   * Write one step and, when the change could make it a timed step, keep its
   * phase open long enough for it (Rust PLAN_REDESIGNS §2.2, U-6).
   *
   * Teardown gives a held thing back when the run ends, so a lease "for 10
   * minutes" in a one-phase event with no advance rule lasted a second. Only a
   * phase with NO rule is given one — `after: <the longest hold>`, on the screen,
   * for the author to change; a rule the author chose is left alone and the
   * sentence under the phase says what it costs. Only changes that can create or
   * lengthen a hold ask (`timed`), so an author who removed the rule on purpose
   * and then edits a message is not overruled.
   */
  const setStep = (pi, si, patch, { timed = false } = {}) =>
    setForm((f) => {
      const phases = f.phases.map((p, i) =>
        i === pi ? { ...p, steps: p.steps.map((s, j) => (j === si ? { ...s, ...patch } : s)) } : p,
      )
      if (!timed) return { ...f, phases }
      const advance = guardedAdvance(phases, pi, actionById)
      return { ...f, phases: advance ? phases.map((p, i) => (i === pi ? { ...p, advance } : p)) : phases }
    })

  const addStep = (pi) =>
    setForm((f) => {
      const phases = f.phases.map((p, i) => (i === pi ? { ...p, steps: [...p.steps, blankStep(actions[0])] } : p))
      const advance = guardedAdvance(phases, pi, actionById)
      return { ...f, phases: advance ? phases.map((p, i) => (i === pi ? { ...p, advance } : p)) : phases }
    })

  /** One param of one step, from a form control. */
  const setStepParam = (pi, si, step, param, raw) =>
    setStep(pi, si, { paramsText: setParam(step, param.name, raw, param.type) }, { timed: Boolean(param.duration) })

  /** Every required field the plan leaves empty, as the sentences the save shows. */
  const missingSentences = () => {
    const out = []
    form.phases.forEach((phase, pi) => phase.steps.forEach((step, si) => {
      for (const name of missingParams(step, actionById.get(step.actionId), leaseById)) {
        out.push(`Phase ${pi + 1} "${phase.label || phase.key}", step ${si + 1}: ${name} is required`)
      }
    }))
    return out
  }

  const save = async () => {
    setProblems([])
    setNotice(null)
    // §2.1: a required field left empty is named under the field AND in the
    // list, here, before the round trip the server would refuse it on anyway.
    setCheckMissing(true)
    const missing = missingSentences()
    if (missing.length) {
      setProblems(missing)
      return
    }
    setBusy(true)
    // A report describes a spec, and saving changes it. A green report left
    // standing beside an edited plan is worse than no report at all.
    setReport(null)
    // The declared variable types, so the builder's literals are coerced to
    // them before the request rather than compared as strings by a server that
    // will rightly refuse them.
    const built = payloadFromForm(form, { triggersById: triggerById })
    if (!built.ok) {
      setProblems(built.errors)
      setBusy(false)
      return
    }
    try {
      if (isNew) {
        const result = await api.admin.createEvent(built.payload)
        navigate(`/admin/events/${result.event.id}`, { replace: true })
      } else {
        const result = await api.admin.updateEvent(id, built.payload)
        setEvent(result.event)
        setForm(formFromDefinition(result.event))
        setNotice('Saved.')
      }
    } catch (err) {
      // The server answers with every problem rather than the first, so an author
      // fixing a spec does it in one pass rather than six round trips.
      setProblems(err.body?.errors || [err.message])
    } finally {
      setBusy(false)
    }
  }

  const publish = async () => {
    setBusy(true)
    setProblems([])
    setNotice(null)
    setReport(null)
    try {
      const result = await api.admin.publishEvent(id)
      setEvent(result.event)
      setVersions(await api.admin.listEventVersions(id).then((r) => r.versions || []))
      // The re-pin count is said out loud, because an editor who does not know
      // their fix reached next Friday finds out on Friday. So is a dry run that
      // carried over from the draft (W5): it is why no second one is asked for.
      setNotice(
        [
          `Published as v${result.version}.`,
          result.verified ? 'The dry run that passed on this draft counts for it.' : '',
          result.repinned
            ? `${result.repinned} scheduled occurrence${result.repinned === 1 ? '' : 's'} moved to it.`
            : '',
        ].filter(Boolean).join(' '),
      )
    } catch (err) {
      setProblems(err.body?.errors || [err.message])
    } finally {
      setBusy(false)
    }
  }

  /**
   * The dry run (Phase 6).
   *
   * `admin, editor` — it dispatches nothing. What it verifies follows the
   * definition's state, and the server says which: a `ready` definition is
   * checked against its PUBLISHED version, because that is the only thing that
   * ever actually runs and it is that pass §K's gate is about; a draft is checked
   * against the working spec the author is still holding.
   *
   * Findings arrive with a 200 — the request succeeded, the plan has problems —
   * so they are rendered rather than thrown into the error box.
   */
  const verify = async () => {
    setBusy(true)
    setProblems([])
    setNotice(null)
    setReport(null)
    try {
      const result = await api.admin.verifyEvent(id)
      setReport(result)
      if (result.recorded) setEvent(await api.admin.getEvent(id).then((r) => r.event))
    } catch (err) {
      setProblems(err.body?.errors || [err.message])
    } finally {
      setBusy(false)
    }
  }

  /**
   * Start a run, with what the dialog collected (Phase 13).
   *
   * The route has taken `rehearsal`, `scope` and `params` since Phase 10 and this
   * screen sent `{}` — so rehearsal, the affordance §I asks for by name, was
   * unreachable, and an event whose concurrency key names a `{placeholder}` could
   * not be started correctly at all: every manual run rendered the same key and
   * the second was refused as an overlap with the first.
   */
  const start = async (body, { publishFirst = false } = {}) => {
    setBusy(true)
    setProblems([])
    try {
      // §2.3: "Publish and start" is the two calls an admin would otherwise
      // make by hand, in order, and a publish the server refuses stops here
      // rather than starting the old version behind the author's back.
      if (publishFirst) {
        const published = await api.admin.publishEvent(id)
        setEvent(published.event)
      }
      const result = await api.admin.startEventRun(id, body)
      navigate(`/admin/events/runs/${result.run.id}`)
    } catch (err) {
      setProblems(err.body?.errors || [err.message])
      setStarting(false)
    } finally {
      setBusy(false)
    }
  }

  // **The error is checked BEFORE the form.** `!form` is true for every failed
  // load, so testing it first put the error state permanently behind a spinner:
  // the screen that could not load said "Loading…" for ever and named nothing.
  if (error) return <ErrorState message={error} />
  if (loading || !form) return <Loading />

  const archived = event?.state === 'archived'

  return (
    <section>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, flexWrap: 'wrap', marginBottom: 14 }}>
        <div>
          <h2 className="sans" style={{ margin: 0, fontSize: '1.05rem' }}>
            {isNew ? 'New event' : event?.title}
          </h2>
          <p className="sans dim" style={{ margin: '4px 0 0', fontSize: '0.8rem' }}>
            {isNew ? (
              'The slug is derived from the title once and frozen afterwards — the public event page lives at it.'
            ) : (
              <>
                {event?.slug} · {event?.state}
                {event?.currentVersion ? ` · published v${event.currentVersion}` : ' · never published'}
              </>
            )}
          </p>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {mayAuthor && (
            <button type="button" className="pill" style={{ fontSize: '0.74rem' }} disabled={busy || archived} onClick={save}>
              {isNew ? 'Create draft' : 'Save'}
            </button>
          )}
          {/* The dry run is admin+editor, deliberately wider than publish: an
              author should be able to find out what their event would cost
              before asking an admin to commit the deployment to it. */}
          {!isNew && mayAuthor && (
            <button type="button" className="pill" style={{ fontSize: '0.74rem' }} disabled={busy || archived} onClick={verify}>
              Dry run
            </button>
          )}
          {/* Publish and start are admin ONLY (§N2) and not the same gate as the
              live controls: publishing commits a definition a schedule will later
              start unattended. */}
          {!isNew && isAdmin && (
            <button type="button" className="pill" style={{ fontSize: '0.74rem' }} disabled={busy || archived} onClick={publish}>
              Publish
            </button>
          )}
          {!isNew && isAdmin && event?.state === 'ready' && (
            <button type="button" className="pill" style={{ fontSize: '0.74rem' }} disabled={busy}
              onClick={() => setStarting((s) => !s)}>
              Start now
            </button>
          )}
        </div>
      </div>

      {!mayAuthor && (
        <p className="sans dim" style={{ fontSize: '0.82rem' }}>
          You can read this definition and watch its runs. Editing and publishing an event are an
          admin or editor's, and starting one is an admin's alone — live control of a run already in
          flight is yours.
        </p>
      )}

      {archived && (
        <p className="sans" style={{ fontSize: '0.84rem', color: '#d9c184' }}>
          This definition is archived. It is kept so its past runs can still be explained, and it
          cannot be edited or run again.
        </p>
      )}

      {/* ── §K's gate, said where it can still be acted on ──
          A published version that nobody has dry-run will not start on its
          schedule. The alternative to saying so here is an operator finding out
          on the Friday it did not run, so it is a banner rather than a log line —
          and only for a definition that actually HAS a schedule to be held. */}
      {!isNew && event?.state === 'ready' && !event?.currentVersionVerifiedAt && !archived && (
        <div className="panel-flat" style={{ padding: '10px 14px', marginBottom: 14, borderLeft: '3px solid #d9c184' }}>
          <p className="sans" style={{ margin: 0, fontSize: '0.84rem' }}>
            <strong>This version has not been dry-run.</strong> Scheduled occurrences are held until it
            is — an event that starts while nobody is watching gets one review, and this is it.
            Starting it by hand is unaffected.
          </p>
        </div>
      )}

      {report && (
        <div
          className="panel-flat"
          style={{
            padding: '10px 14px',
            marginBottom: 14,
            borderLeft: `3px solid ${report.report.ok ? '#8fc79a' : '#d98b84'}`,
          }}
        >
          <p className="sans" style={{ margin: '0 0 6px', fontSize: '0.84rem' }}>
            <strong>
              {report.report.ok ? 'Dry run passed' : 'Dry run found problems'}
            </strong>{' '}
            <span className="dim">
              · {report.report.steps} step{report.report.steps === 1 ? '' : 's'} checked against{' '}
              {/* Which spec was checked. The two answer different questions, and a
                  report that did not say would be read as the other one. */}
              {report.target === 'version' ? `published v${report.version}` : 'the working draft'}
              {report.recorded && ' · recorded, so scheduled occurrences may now start'}
              {report.draftRecorded && ' · kept, so publishing this draft unchanged makes a verified version'}
            </span>
          </p>

          {report.report.findings.length > 0 && (
            <ul className="sans" style={{ margin: '0 0 6px', paddingLeft: 18, fontSize: '0.82rem' }}>
              {report.report.findings.map((f, i) => (
                <li key={`${f.phase}-${f.seq}-${f.code}-${i}`} style={{ color: f.level === 'warning' ? '#d9c184' : undefined }}>
                  {f.phase !== null && (
                    <code className="dim" style={{ fontSize: '0.78rem' }}>
                      {f.phase} · step {f.seq + 1}
                      {f.actionId ? ` · ${f.actionId}` : ''}
                    </code>
                  )}
                  {f.phase !== null && ' — '}
                  {f.message}
                </li>
              ))}
            </ul>
          )}

          {/* The whole-plan cost, which is the finding no other path can make: a
              step that fits on its own and does not fit alongside its siblings. */}
          {report.report.cost.length > 0 && (
            <table className="sans" style={{ fontSize: '0.8rem', borderCollapse: 'collapse' }}>
              <tbody>
                {report.report.cost.map((c) => (
                  <tr key={c.dimension} style={{ color: c.over ? '#d98b84' : undefined }}>
                    <td style={{ paddingRight: 12 }}><code style={{ fontSize: '0.78rem' }}>{c.dimension}</code></td>
                    <td style={{ paddingRight: 12 }}>{c.total}</td>
                    <td className="dim">
                      {c.cap === null ? 'no cap' : `of ${c.cap} per run${c.from ? ` (${c.from})` : ''}`}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}

          {report.report.findings.length === 0 && report.report.cost.length === 0 && (
            <p className="sans dim" style={{ margin: 0, fontSize: '0.82rem' }}>
              Nothing this event does costs a capped resource.
            </p>
          )}
        </div>
      )}

      {starting && (
        <StartDialog busy={busy} onCancel={() => setStarting(false)} onStart={start}
          draftAhead={Boolean(event?.draftAhead)} publishedVersion={event?.currentVersion} mayPublish={isAdmin} />
      )}

      {notice && <p className="sans" style={{ fontSize: '0.84rem', color: '#8fc79a' }}>{notice}</p>}

      {problems.length > 0 && (
        <div className="panel-flat" style={{ padding: '10px 14px', marginBottom: 14, borderLeft: '3px solid #d98b84' }}>
          <p className="sans" style={{ margin: '0 0 6px', fontSize: '0.84rem' }}>That did not save:</p>
          <ul className="sans" style={{ margin: 0, paddingLeft: 18, fontSize: '0.82rem' }}>
            {problems.map((p) => <li key={p}>{p}</li>)}
          </ul>
        </div>
      )}

      {isNew && mayAuthor && templates.length > 0 && (
        <TemplatePicker
          templates={templates}
          sources={sources}
          loadSource={loadSource}
          onDraft={(draft, template) => {
            setForm(formFromDefinition({ title: draft.title, summary: draft.summary, spec: draft.spec }))
            setProblems([])
            setNotice(`Filled in from "${template.label}". Nothing is saved until you create the draft.`)
          }}
        />
      )}

      {/* ── Basics ── */}
      <div className="panel-flat" style={{ padding: 14, marginBottom: 14 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: 12 }}>
          <label>
            <span className="field-label">Title</span>
            <input className="input" value={form.title} onChange={(e) => set({ title: e.target.value })} />
          </label>
          <label>
            <span className="field-label">Series</span>
            <select className="select" value={form.seriesId} onChange={(e) => set({ seriesId: e.target.value })}>
              <option value="">Not part of a series</option>
              {series.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
            </select>
          </label>
          <label>
            <span className="field-label">Timezone</span>
            <input className="input" value={form.timezone} onChange={(e) => set({ timezone: e.target.value })} />
          </label>
          <label>
            <span className="field-label">Grace window (seconds)</span>
            <input className="input" type="number" min="0" value={form.graceSeconds}
              onChange={(e) => set({ graceSeconds: e.target.value })} />
          </label>
          <label>
            <span className="field-label">Concurrency key</span>
            <input className="input" value={form.concurrencyKey} placeholder="invasion:{region}"
              onChange={(e) => set({ concurrencyKey: e.target.value })} />
          </label>
        </div>
        <label style={{ display: 'block', marginTop: 12 }}>
          <span className="field-label">Summary</span>
          <input className="input" value={form.summary} onChange={(e) => set({ summary: e.target.value })} />
        </label>
        <label style={{ display: 'block', marginTop: 12 }}>
          <span className="field-label">Storyline</span>
          <textarea className="input" rows={4} value={form.body} onChange={(e) => set({ body: e.target.value })} />
        </label>
        {/* Announcement, not permission. Publishing is what makes an event
            RUNNABLE, so without this switch a surprise invasion would have to be
            advertised a fortnight in advance in order to be allowed to happen. */}
        <label style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 14 }}>
          <input
            type="checkbox"
            checked={Boolean(form.listed)}
            onChange={(e) => set({ listed: e.target.checked })}
          />
          <span className="field-label" style={{ margin: 0 }}>Show on the public calendar</span>
        </label>
        <p className="sans dim" style={{ fontSize: '0.78rem', margin: '10px 0 0' }}>
          The grace window is how late this event may still start: past it an occurrence becomes
          <em> missed</em> rather than beginning hours after it was announced. Two runs sharing a
          concurrency key never overlap — <code>{'{placeholders}'}</code> are filled from the run&rsquo;s own
          params. An event that is <em>not</em> shown publicly still schedules, still runs and is
          still on this calendar — it is simply not announced, and its lifecycle mails carry no
          link because there is no page to link to.
        </p>
      </div>

      {/* ── Schedule ── */}
      {/*
        Four closed shapes rendered as a form, never a cron string. A cron
        expression is the one field an operator cannot proofread, and the whole
        point of the closed set is that this panel can be read back in English —
        which is what the preview line under it does.
      */}
      <div className="panel-flat" style={{ padding: 14, marginBottom: 14 }}>
        <h3 className="sans" style={{ margin: '0 0 10px', fontSize: '0.92rem' }}>Schedule</h3>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(180px,1fr))', gap: 12 }}>
          <label>
            <span className="field-label">Repeats</span>
            <select className="select" value={form.scheduleKind} disabled={archived}
              onChange={(e) => set({ scheduleKind: e.target.value })}>
              {SCHEDULE_KINDS.map((k) => <option key={k.value} value={k.value}>{k.label}</option>)}
            </select>
          </label>

          {form.scheduleKind === 'once' && (
            <label>
              <span className="field-label">Date and time</span>
              <input className="input" type="datetime-local" value={form.scheduleAt} disabled={archived}
                onChange={(e) => set({ scheduleAt: e.target.value.slice(0, 16) })} />
            </label>
          )}

          {form.scheduleKind === 'monthly' && (
            <>
              <label>
                <span className="field-label">Week</span>
                <select className="select" value={form.scheduleNth} disabled={archived}
                  onChange={(e) => set({ scheduleNth: e.target.value })}>
                  {MONTHLY_NTHS.map((n) => <option key={n.value} value={n.value}>{n.label}</option>)}
                </select>
              </label>
              <label>
                <span className="field-label">Weekday</span>
                <select className="select" value={form.scheduleWeekday} disabled={archived}
                  onChange={(e) => set({ scheduleWeekday: e.target.value })}>
                  {WEEKDAYS.map((d) => (
                    <option key={d} value={d}>{d.charAt(0).toUpperCase() + d.slice(1)}</option>
                  ))}
                </select>
              </label>
            </>
          )}

          {(form.scheduleKind === 'weekly' || form.scheduleKind === 'monthly') && (
            <label>
              <span className="field-label">Time</span>
              <input className="input" type="time" value={form.scheduleTime} disabled={archived}
                onChange={(e) => set({ scheduleTime: e.target.value })} />
            </label>
          )}
        </div>

        {form.scheduleKind === 'weekly' && (
          <div style={{ marginTop: 12 }}>
            <span className="field-label">Days</span>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 6 }}>
              {WEEKDAYS.map((day) => {
                const on = (form.scheduleDays || []).includes(day)
                return (
                  <button key={day} type="button" className="pill" disabled={archived}
                    aria-pressed={on}
                    style={{ fontSize: '0.72rem', opacity: on ? 1 : 0.45 }}
                    onClick={() => set({
                      scheduleDays: on
                        ? form.scheduleDays.filter((d) => d !== day)
                        : WEEKDAYS.filter((d) => d === day || form.scheduleDays.includes(d)),
                    })}>
                    {day.charAt(0).toUpperCase() + day.slice(1, 3)}
                  </button>
                )
              })}
            </div>
          </div>
        )}

        <p className="sans" style={{ margin: '12px 0 0', fontSize: '0.84rem' }}>
          {describeSchedule(scheduleFromForm(form), form.timezone)}
        </p>
        <p className="sans dim" style={{ fontSize: '0.78rem', margin: '8px 0 0' }}>
          Times are the event&rsquo;s own, in <code>{form.timezone}</code> — not the reader&rsquo;s. A
          recurring schedule goes live when the definition is published and stops when it is
          archived; occurrences become real runs a fortnight before they happen, and the
          calendar forecasts the rest. A time that daylight saving skips moves forward to the next
          one that exists, and an hour that happens twice takes the first.
        </p>
      </div>

      {/* ── Started by the game (Rust PLAN_REDESIGNS §14.3.12, D370) ──
          A start is a phase gate's trigger and condition plus a cooldown, so it
          is drawn with the gate's own builder. Beside the schedule rather than
          inside it: a definition may have either, or both. */}
      <div className="panel-flat" style={{ padding: 14, marginBottom: 14 }}>
        <h3 className="sans" style={{ margin: '0 0 6px', fontSize: '0.92rem' }}>Started by the game</h3>
        <p className="sans dim" style={{ fontSize: '0.78rem', margin: '0 0 10px' }}>
          Start a run when something happens in the game — <em>when a boss appears on a chosen server</em>.
          One run at a time: a firing while a run is going starts nothing, and nor does one inside the
          cooldown after the last run a trigger started. Like a schedule, it only starts a published
          version that has passed its dry run.
        </p>

        {(form.starts || []).map((start, si) => {
          const setStart = (patch) =>
            set({ starts: form.starts.map((s, i) => (i === si ? { ...s, ...patch } : s)) })
          return (
            <div key={si} style={{ borderTop: si ? '1px solid var(--rule, #2a2f3a)' : 'none', paddingTop: si ? 10 : 0, marginTop: si ? 10 : 0 }}>
              <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end', flexWrap: 'wrap' }}>
                <label style={{ flex: '1 1 260px' }}>
                  <span className="field-label">When</span>
                  {/* Changing the trigger clears the condition, as a gate's does. */}
                  <select className="input" value={start.on} disabled={archived}
                    onChange={(e) => setStart({ on: e.target.value, dormant: false, ...blankWhere() })}>
                    <option value="">Choose a trigger…</option>
                    {start.on && !triggerById.has(start.on) && (
                      <option value={start.on}>{start.on} — no module registers it</option>
                    )}
                    {triggers.filter(isStartableTrigger).map((t) => (
                      <option key={t.id} value={t.id}>{t.label} — {t.id}</option>
                    ))}
                  </select>
                </label>
                <label style={{ flex: '0 1 140px' }}>
                  <span className="field-label">Cooldown</span>
                  <input className="input" value={start.cooldown} disabled={archived} placeholder="30m"
                    onChange={(e) => setStart({ cooldown: e.target.value })} />
                </label>
                <button type="button" className="pill" style={{ fontSize: '0.72rem' }} disabled={archived}
                  onClick={() => set({ starts: form.starts.filter((_, i) => i !== si) })}>
                  Remove
                </button>
              </div>
              {start.on && !triggerById.has(start.on) && (
                <p className="sans" style={{ fontSize: '0.76rem', color: '#d9c184', margin: '6px 0 0' }}>
                  No installed module registers <code>{start.on}</code>. The start is kept, and the
                  definition cannot be published until the module is back or the start is removed.
                </p>
              )}
              {start.on && (
                <WhereBuilder
                  advance={start}
                  trigger={triggerById.get(start.on)}
                  operators={catalog?.operators || []}
                  disabled={archived}
                  emptyText="Every firing of this trigger starts a run. Add a clause to narrow it — only firings that match then start one."
                  onChange={(patch) => setStart(patch)}
                />
              )}
            </div>
          )
        })}

        <button type="button" className="pill" style={{ fontSize: '0.74rem', marginTop: 10 }}
          disabled={archived || (form.starts || []).length >= 10}
          onClick={() => set({ starts: [...(form.starts || []), blankStart()] })}>
          Add a trigger
        </button>
        <p className="sans dim" style={{ fontSize: '0.76rem', margin: '8px 0 0' }}>
          A cooldown is a whole number of <code>s</code>, <code>m</code>, <code>h</code> or <code>d</code>,
          from <code>0m</code> to <code>7d</code>. Zero leaves one run at a time as the only limit.
        </p>
        {describeTriggerStarts(event?.triggerStarts) && (
          <p className="sans" style={{ fontSize: '0.8rem', margin: '8px 0 0' }}>
            {describeTriggerStarts(event.triggerStarts)}
          </p>
        )}
      </div>

      {/* ── The live cap meter (Phase 13) ──
          Above the timeline rather than under it, because what a plan draws is a
          fact about the whole plan and an author scrolling twelve steps to find
          out they are over is an author who finds out too late. */}
      <CapMeter report={priced} budgets={budgets} stale={priceStale} />

      {/* ── The phase timeline ── */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
        <h3 className="sans" style={{ margin: 0, fontSize: '0.95rem' }}>Phases</h3>
        <button type="button" className="pill" style={{ fontSize: '0.72rem' }} disabled={archived}
          onClick={() => set({ phases: [...form.phases, blankPhase(form.phases)] })}>
          Add phase
        </button>
      </div>

      {form.phases.length === 0 && (
        <p className="sans dim" style={{ fontSize: '0.85rem' }}>
          No phases yet. An event needs at least one phase with at least one step before it can be
          published.
        </p>
      )}

      {form.phases.map((phase, pi) => (
        <div key={pi} className="panel-flat" style={{ padding: 14, marginBottom: 12, borderLeft: '3px solid var(--accent, #6d7f9c)' }}>
          <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end', flexWrap: 'wrap' }}>
            <label style={{ flex: '1 1 200px' }}>
              <span className="field-label">Phase {pi + 1} — label</span>
              <input className="input" value={phase.label} onChange={(e) => setPhase(pi, { label: e.target.value })} />
            </label>
            <label style={{ flex: '0 1 180px' }}>
              <span className="field-label">Key</span>
              <input className="input" value={phase.key} onChange={(e) => setPhase(pi, { key: e.target.value })} />
            </label>
            <div style={{ display: 'flex', gap: 6 }}>
              <button type="button" className="pill" style={{ fontSize: '0.72rem' }} disabled={pi === 0} onClick={() => movePhase(pi, -1)}>↑</button>
              <button type="button" className="pill" style={{ fontSize: '0.72rem' }} disabled={pi === form.phases.length - 1} onClick={() => movePhase(pi, 1)}>↓</button>
              <button type="button" className="pill" style={{ fontSize: '0.72rem' }}
                onClick={() => set({ phases: form.phases.filter((_, i) => i !== pi) })}>Remove</button>
            </div>
          </div>
          <p className="sans dim" style={{ fontSize: '0.76rem', margin: '8px 0 0' }}>
            The key is what the run console groups by and what &ldquo;Phase p3: steps done, waiting to advance&rdquo; names, so it
            cannot change once runs exist.
          </p>

          {/* §I asks the timeline for "phases in order, each with its steps, its
              advance condition, its cap draw and its failure policy". This is
              the cap draw, and it is the phase's own rather than a share of the
              total: an author moving a step between phases is asking exactly
              this question. */}
          {(drawByPhase.get(pi) || []).length > 0 && (
            <p className="sans dim" style={{ fontSize: '0.76rem', margin: '4px 0 0' }}>
              Draws{' '}
              {(drawByPhase.get(pi) || [])
                .map((d) => `${d.total} ${budgets.find((b) => b.id === d.dimension)?.label || d.dimension}`)
                .join(' · ')}
            </p>
          )}

          {/* ── The advance condition (Phase 5) ──
              A gate is an ADDITIONAL condition and never a replacement, which is
              what the caption has to say: a phase whose steps are still running
              is not advanced by a boss that spawned early. */}
          <div style={{ marginTop: 12, borderTop: '1px solid var(--rule, #2a2f3a)', paddingTop: 12 }}>
            <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end', flexWrap: 'wrap' }}>
              <label style={{ flex: '1 1 240px' }}>
                <span className="field-label">This phase advances</span>
                <select className="input" value={phase.advance?.kind || ''}
                  onChange={(e) => setPhase(pi, { advance: { ...(phase.advance || blankAdvance()), kind: e.target.value } })}>
                  {ADVANCE_KINDS.map((k) => <option key={k.value} value={k.value}>{k.label}</option>)}
                </select>
              </label>
              {phase.advance?.kind === 'after' && (
                <label style={{ flex: '0 1 160px' }}>
                  <span className="field-label">Delay</span>
                  <input className="input" value={phase.advance.after}
                    onChange={(e) => setPhase(pi, { advance: { ...phase.advance, after: e.target.value } })}
                    placeholder="30m" />
                </label>
              )}
              {phase.advance?.kind === 'on' && (
                <>
                  <label style={{ flex: '1 1 240px' }}>
                    <span className="field-label">Trigger</span>
                    {/* Changing the trigger CLEARS the predicate, for the same
                        reason changing a step's action replaces its params:
                        every clause names a variable of the old trigger, and the
                        save would refuse each of them by name. Keeping them
                        would look like tolerance and behave like a form that
                        cannot be saved. */}
                    <select className="input" value={phase.advance.on}
                      onChange={(e) => setPhase(pi, {
                        advance: { ...phase.advance, on: e.target.value, ...blankWhere() },
                      })}>
                      <option value="">Choose a trigger…</option>
                      {triggers.map((t) => <option key={t.id} value={t.id}>{t.label} — {t.id}</option>)}
                    </select>
                  </label>
                  <label style={{ flex: '0 1 110px' }}>
                    <span className="field-label">How many</span>
                    <input className="input" type="number" min="1" value={phase.advance.count}
                      onChange={(e) => setPhase(pi, { advance: { ...phase.advance, count: e.target.value } })} />
                  </label>
                </>
              )}
            </div>

            {phase.advance?.kind === 'on' && (
              <WhereBuilder
                advance={phase.advance}
                trigger={triggerById.get(phase.advance.on)}
                operators={catalog?.operators || []}
                disabled={archived}
                onChange={(patch) => setPhase(pi, { advance: { ...phase.advance, ...patch } })}
              />
            )}

            <p className="sans dim" style={{ fontSize: '0.76rem', margin: '8px 0 0' }}>
              {phase.advance?.kind
                ? 'This is in ADDITION to its steps: the phase waits until every step has finished AND this is met. Nothing times out — if the condition never happens, the run is marked stalled and a person advances it from the run console.'
                : 'The phase advances the moment every one of its steps is finished.'}
            </p>
            {/* §2.2 (U-6). A held value is given back when the RUN ends, so a
                plan that can end sooner than its longest hold is said out loud
                here, where the rule that decides it is. */}
            {shortfallSentence(form.phases, pi, actionById) && (
              <p className="sans" style={{ fontSize: '0.78rem', color: '#d9c184', margin: '6px 0 0' }}>
                {shortfallSentence(form.phases, pi, actionById)}
              </p>
            )}
          </div>

          <div style={{ marginTop: 12 }}>
            {phase.steps.map((step, si) => {
              const action = actionById.get(step.actionId)
              // Phase 13. Which editor this step gets, and — when it is not the
              // author's choice — why.
              const mode = paramsMode(step, action)
              return (
                <div key={si} style={{ borderTop: '1px solid var(--rule, #2a2f3a)', paddingTop: 12, marginTop: 12 }}>
                  <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end', flexWrap: 'wrap' }}>
                    <label style={{ flex: '1 1 220px' }}>
                      <span className="field-label">Step {si + 1} — action</span>
                      <select className="select" value={step.actionId} onChange={(e) => changeAction(pi, si, e.target.value)}>
                        <option value="">Pick an action…</option>
                        {actions.map((a) => <option key={a.id} value={a.id}>{a.label} — {a.id}</option>)}
                        {/* A step whose module has been uninstalled keeps its
                            action id, so the select must be able to show a value
                            that is not in the catalog rather than silently
                            resetting the step to nothing. */}
                        {step.actionId && !action && <option value={step.actionId}>{step.actionId} (not installed)</option>}
                      </select>
                    </label>
                    <label style={{ flex: '0 1 200px' }}>
                      <span className="field-label">If it fails</span>
                      <select className="select" value={step.onFailure} onChange={(e) => setStep(pi, si, { onFailure: e.target.value })}>
                        <option value="">
                          Default{action ? ` — ${catalog?.onFailureByRisk?.[action.risk] || 'pause'}` : ''}
                        </option>
                        {(catalog?.onFailure || []).map((f) => <option key={f} value={f}>{f}</option>)}
                      </select>
                    </label>
                    <div style={{ display: 'flex', gap: 6 }}>
                      <button type="button" className="pill" style={{ fontSize: '0.72rem' }} disabled={si === 0} onClick={() => moveStep(pi, si, -1)}>↑</button>
                      <button type="button" className="pill" style={{ fontSize: '0.72rem' }} disabled={si === phase.steps.length - 1} onClick={() => moveStep(pi, si, 1)}>↓</button>
                      <button type="button" className="pill" style={{ fontSize: '0.72rem' }}
                        onClick={() => setPhase(pi, { steps: phase.steps.filter((_, j) => j !== si) })}>Remove</button>
                    </div>
                  </div>

                  {step.dormant && (
                    <p className="sans" style={{ fontSize: '0.78rem', color: '#d9c184', margin: '8px 0 0' }}>{DORMANT_NOTE}</p>
                  )}

                  {action && (
                    <p className="sans dim" style={{ fontSize: '0.78rem', margin: '8px 0 0' }}>
                      {action.description} <span style={{ opacity: 0.75 }}>· risk: {action.risk} · reversible: {action.reversible}</span>
                    </p>
                  )}

                  {/* ── The params (Phase 13) ──
                      A form of the action's own declaration, with the JSON box
                      kept as the escape hatch. A step the form cannot hold
                      without losing something opens in JSON and says why — the
                      condition builder's rule, and the same one, because
                      dropping an undeclared param and flattening a nested
                      condition are the same failure: a save that looks clean
                      and means something else. */}
                  <div style={{ marginTop: 10 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 10 }}>
                      <span className="field-label" style={{ marginBottom: 0 }}>Params</span>
                      {!mode.forced && action && (action.params || []).length > 0 && (
                        <button type="button" className="pill" style={{ fontSize: '0.7rem' }}
                          onClick={() => setStep(pi, si, {
                            paramsMode: mode.mode === PARAM_JSON ? PARAM_FORM : PARAM_JSON,
                          })}>
                          {mode.mode === PARAM_JSON ? 'Edit as a form' : 'Edit as JSON'}
                        </button>
                      )}
                    </div>

                    {mode.forced && (
                      <p className="sans" style={{ fontSize: '0.76rem', color: '#d9c184', margin: '6px 0 0' }}>
                        Opened as JSON: {mode.reason}. Nothing has been dropped — what is here is
                        exactly what was authored.
                      </p>
                    )}

                    {mode.mode === PARAM_FORM ? (
                      <div style={{ marginTop: 8 }}>
                        {action?.id === 'core.lease' ? (
                          <LeaseFields
                            action={action}
                            step={step}
                            leases={leases}
                            sources={sources}
                            disabled={archived}
                            missing={checkMissing ? missingParams(step, action, leaseById) : []}
                            onParam={(name, raw) => {
                              const declared = action.params.find((p) => p.name === name)
                              // A new lease changes which hold this is, so it is
                              // checked like a new duration.
                              setStep(pi, si, { paramsText: setParam(step, name, raw, declared.type) },
                                { timed: name === 'lease' || Boolean(declared.duration) })
                            }}
                          />
                        ) : (action?.params || []).map((p) => (p.multiple ? (
                          <MultiParamField
                            key={p.name}
                            param={p}
                            value={paramValue(step, p.name)}
                            sourceEntry={p.source ? sources[p.source] : null}
                            disabled={archived}
                            missing={checkMissing && missingParams(step, action, leaseById).includes(p.name)}
                            onChange={(list) => setStep(pi, si, { paramsText: setParamList(step, p.name, list, p.type) })}
                          />
                        ) : (
                          <ParamField
                            key={p.name}
                            param={p}
                            value={paramValue(step, p.name)}
                            sourceEntry={p.source ? sources[p.source] : null}
                            disabled={archived}
                            missing={checkMissing && missingParams(step, action, leaseById).includes(p.name)}
                            onChange={(raw) => setStepParam(pi, si, step, p, raw)}
                          />
                        )))}
                        {action && (action.params || []).length === 0 && (
                          <p className="sans dim" style={{ fontSize: '0.78rem', margin: 0 }}>
                            This action takes no params.
                          </p>
                        )}
                        {!action && (
                          <p className="sans dim" style={{ fontSize: '0.78rem', margin: 0 }}>
                            Pick an action and its fields appear here, straight from what the module
                            declared.
                          </p>
                        )}
                      </div>
                    ) : (
                      <>
                        <textarea className="input" rows={Math.max(4, (step.paramsText || '').split('\n').length)}
                          style={{ fontFamily: 'var(--mono, monospace)', fontSize: '0.8rem', marginTop: 8 }}
                          value={step.paramsText} onChange={(e) => setStep(pi, si, { paramsText: e.target.value })} />
                        {action && (action.params || []).length > 0 && (
                          <span className="sans dim" style={{ fontSize: '0.74rem' }}>
                            <code>{action.id}</code> declares{' '}
                            {(action.params || []).map((p) => `${p.name} (${p.multiple ? `a list of ${p.type}, at most ${p.max}` : p.type}${p.required ? ', required' : ''})`).join(', ')}.
                          </span>
                        )}
                      </>
                    )}
                  </div>
                </div>
              )
            })}

            <button type="button" className="pill" style={{ fontSize: '0.72rem', marginTop: 12 }} disabled={archived}
              onClick={() => addStep(pi)}>
              Add step
            </button>
          </div>
        </div>
      ))}

      {!isNew && versions.length > 0 && (
        <div className="panel-flat" style={{ padding: 14, marginTop: 14 }}>
          <h3 className="sans" style={{ margin: '0 0 6px', fontSize: '0.92rem' }}>Versions</h3>
          <p className="sans dim" style={{ margin: '0 0 8px', fontSize: '0.8rem' }}>
            Publishing snapshots the whole spec into a version nothing ever edits. Editing this
            definition while a run is live is free — <strong>the live run keeps the version it
            pinned</strong> and is unaffected by anything on this screen.
          </p>
          <table className="adm-table">
            <tbody>
              {versions.map((v) => (
                <tr key={v.id}>
                  <td className="adm-td" style={{ fontSize: '0.82rem' }}>v{v.version}{v.current && <span className="dim"> · current</span>}</td>
                  <td className="adm-td dim" style={{ fontSize: '0.8rem' }}>{new Date(v.publishedAt).toLocaleString()}</td>
                  <td className="adm-td dim" style={{ fontSize: '0.8rem' }}>{v.publishedByUsername || '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </section>
  )
}