website/client/src/routes/admin/views/EngagementTriggers.jsx

import { useEffect, useState } from 'react'
import { Loading, ErrorState } from '../../../components/PageState.jsx'
import { api } from '../../../api/client.js'

// Admin → Engagement → Triggers (ENGAGEMENT.md §4.3, Phase 5b).
//
// Read-only, and structurally so: **there is no table behind this screen.** A
// trigger is DECLARED in code by core or by an installed module, so this is
// whatever registered on the current boot. Uninstall a module and its triggers
// stop appearing here; nothing was deleted and nothing needs to be.
//
// It exists because the two things it shows are otherwise invisible and both are
// load-bearing elsewhere:
//
//   • **The variables** are the contract a template may reference. When a rule
//     mails nothing sensible, "which variables does this event actually carry"
//     is the first question, and the answer used to live only in a module's source.
//   • **The ceiling** is the security boundary from G24 — the widest audience a
//     rule may ever give this trigger. A rule editor that offers a narrower set
//     than an operator expects is obeying a number declared here.

const CEILING_NOTE = {
  owner: 'only the person the event is about',
  members: 'only members of the thing it is about',
  subscribers: 'only people who opted in',
  staff: 'only staff',
  admin: 'only administrators',
  authenticated: 'any signed-in account',
  everyone: 'anyone',
}

export default function EngagementTriggers() {
  const [triggers, setTriggers] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    let alive = true
    ;(async () => {
      try {
        const { triggers: list } = await api.admin.engagementTriggers()
        if (alive) setTriggers(list || [])
      } catch (err) {
        if (alive) setError(err.message)
      } finally {
        if (alive) setLoading(false)
      }
    })()
    return () => { alive = false }
  }, [])

  if (loading) return <Loading />
  if (error) return <ErrorState message={error} />

  return (
    <section>
      <p className="sans" style={{ margin: '0 0 16px', fontSize: '0.86rem', color: 'var(--muted)', maxWidth: 680 }}>
        The events a rule can be built on, declared in code by core and by installed modules. This
        list is whatever is registered right now — it is not stored anywhere, so a module that is
        uninstalled simply stops appearing.
      </p>

      {triggers.length === 0 && (
        <p className="sans dim" style={{ fontSize: '0.85rem' }}>Nothing is registered.</p>
      )}

      {triggers.map((t) => (
        <div className="panel" key={t.id} style={{ padding: 18, marginBottom: 14 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
            <div>
              <h3 className="sans" style={{ margin: '0 0 2px', fontSize: '0.98rem' }}>{t.label}</h3>
              <p className="sans dim" style={{ margin: 0, fontSize: '0.78rem' }}>
                <code>{t.id}</code> · from {t.owner} · v{t.version}
              </p>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="field-label" style={{ marginBottom: 2 }}>Can reach at most</div>
              <div className="sans" style={{ fontSize: '0.84rem' }}>
                {t.ceiling}
                <span className="dim"> — {CEILING_NOTE[t.ceiling] || 'see the design document'}</span>
              </div>
            </div>
          </div>

          {t.description && (
            <p className="sans" style={{ margin: '10px 0 0', fontSize: '0.84rem', color: 'var(--muted)' }}>
              {t.description}
            </p>
          )}

          {(t.variables || []).length > 0 && (
            <table className="adm-table" style={{ marginTop: 14 }}>
              <thead>
                <tr>
                  <th className="adm-th">Variable</th>
                  <th className="adm-th">Type</th>
                  <th className="adm-th">Example</th>
                  <th className="adm-th">What it is</th>
                </tr>
              </thead>
              <tbody>
                {t.variables.map((v) => (
                  <tr key={v.name}>
                    {/* `nowrap`: without it the "always set" pill wraps between its
                        two words on a longer variable name, orphaning "set" on a
                        line of its own and making the row read as two facts. */}
                    <td className="adm-td" style={{ whiteSpace: 'nowrap' }}>
                      <code style={{ fontSize: '0.8rem' }}>{`{{${v.name}}}`}</code>
                      {v.required && <span className="pill" style={{ marginLeft: 6, fontSize: '0.66rem' }}>always set</span>}
                    </td>
                    <td className="adm-td">{v.type}</td>
                    <td className="adm-td" style={{ maxWidth: 260, overflowWrap: 'anywhere' }}>
                      <span className="dim" style={{ fontSize: '0.8rem' }}>
                        {/* A list variable's example is an array of objects; showing
                            it as JSON is honest and short, and it is the shape an
                            item list repeats over. */}
                        {typeof v.example === 'string' ? v.example : JSON.stringify(v.example)}
                      </span>
                    </td>
                    <td className="adm-td" style={{ fontSize: '0.82rem' }}>{v.description || ''}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      ))}
    </section>
  )
}