// ── Control-plane: content templates (list-only) ─────────────────────────
function CpTemplates() {
  const [rows, setRows] = React.useState(null);
  React.useEffect(() => { cpApi.listTemplates().then((d) => setRows(d.data)).catch(() => setRows([])); }, []);

  return (
    <div>
      <h1 style={{ fontSize: 24, marginBottom: 6 }}>Content templates</h1>
      <p style={{ color: "var(--ink-mute)", marginTop: 0, marginBottom: 18 }}>
        Master curricula that can be copied into a new school. Copying is wired in Milestone B.
      </p>
      {!rows ? <div style={{ color: "var(--ink-mute)" }}><Spinner /> Loading…</div>
        : rows.length === 0
          ? <EmptyState title="No templates yet" body="Templates are seeded by a maintainer for now." />
          : (
            <div className="panel tablewrap">
              <table className="grid">
                <thead><tr><th>Name</th><th>Key</th><th>Source</th><th>Updated</th><th></th></tr></thead>
                <tbody>
                  {rows.map((t) => (
                    <tr key={t.id}>
                      <td><div style={{ fontWeight: 600 }}>{t.name}</div>
                        {t.description && <div style={{ fontSize: 12, color: "var(--ink-mute)" }}>{t.description}</div>}</td>
                      <td className="mono" style={{ fontSize: 12 }}>{t.key}</td>
                      <td style={{ color: "var(--ink-mute)" }}>{t.source_kind}</td>
                      <td style={{ color: "var(--ink-mute)" }}>{timeAgo(t.updated_at)}</td>
                      <td style={{ textAlign: "right" }}>
                        <button className="btn sm" disabled title="Deferred to Milestone B">Copy into tenant…</button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
    </div>
  );
}

window.CpTemplates = CpTemplates;