@acms-subir/core 0.3.0 → 0.3.1

package/src/components/LiveManager.tsx

@@ -0,0 +1,910 @@
+import { useEffect, useId, useRef, useState, type FormEvent, type KeyboardEvent } from 'react';
+import type { LiveAdminState, LiveConfig, Provider, PublicConnection } from '../lib/live/types';
+import '../styles/live-admin.css';
+
+// Live video admin: settings (automatic / manual / off) plus one card per
+// provider where the owner connects their own developer app.
+//
+// Secrets are write-only: the server never returns them, inputs start blank,
+// nothing touches browser storage, and a saved secret is cleared from state.
+// Status reloads keep unsaved form edits; only a save/disconnect resets a form.
+
+type Mode = LiveConfig['mode'];
+type GoogleStatus = PublicConnection['googleStatus'];
+type Msg = { ok: string; err: string };
+type Tone = 'live' | 'ok' | 'warn' | 'bad' | 'idle';
+
+interface ConnForm { clientId: string; clientSecret: string; channelInput: string; googleStatus: GoogleStatus; dirty: boolean }
+interface ConfigForm {
+  mode: Mode; primary: Provider; fallbackUrl: string; showUpcoming: boolean;
+  watchUrl: string; title: string; hours: string; display: Display; dirty: boolean;
+}
+type Display = LiveConfig['display'];
+
+const NO_MSG: Msg = { ok: '', err: '' };
+const PROVIDERS: Provider[] = ['twitch', 'youtube'];
+const NAME: Record<string, string> = { twitch: 'Twitch', youtube: 'YouTube', facebook: 'Facebook', other: 'another site' };
+const HOURS = ['1', '2', '4', '8', '12'];
+const HOUR = 3_600_000;
+const ENDPOINT = '/api/live/settings';
+
+const STYLES: { id: Display['style']; name: string; desc: string }[] = [
+  { id: 'poster', name: 'Poster', desc: 'Big thumbnail with a live tag, title below.' },
+  { id: 'split', name: 'Split', desc: 'Thumbnail beside the title. Good for homepages.' },
+  { id: 'row', name: 'Compact row', desc: 'Small thumbnail in one line.' },
+];
+
+const SIGNALS: { id: 'bar' | 'header' | 'dock'; name: string; desc: string }[] = [
+  { id: 'bar', name: 'Live bar at the top', desc: 'Temporarily replaces your announcement bar.' },
+  { id: 'header', name: '“Live” marker in the header', desc: 'Jumps to your live video, or opens the stream.' },
+  { id: 'dock', name: 'Small floating card in the corner', desc: 'Hidden on pages that already show the live video.' },
+];
+
+const MODES: { id: Mode; name: string; desc: string }[] = [
+  { id: 'automatic', name: 'Automatic', desc: 'Show your broadcast when a connected channel goes live.' },
+  { id: 'manual', name: 'Manual', desc: 'Show a link you choose, for a set time.' },
+  { id: 'off', name: 'Off', desc: 'Hide live video everywhere on your site.' },
+];
+
+async function api<T>(body?: Record<string, unknown>): Promise<T> {
+  const res = await fetch(ENDPOINT, {
+    method: body ? 'POST' : 'GET',
+    credentials: 'same-origin',
+    signal: AbortSignal.timeout(75_000),
+    headers: body ? { 'content-type': 'application/json', accept: 'application/json' } : { accept: 'application/json' },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  const data = await res.json().catch(() => null);
+  if (!res.ok) throw new Error(data?.error || `${res.status} ${res.statusText || 'Request failed'}`);
+  if (!data) throw new Error('The server sent an empty response.');
+  return data as T;
+}
+
+const errText = (e: unknown) => (e instanceof Error ? e.message : String(e));
+const isHttps = (v: string) => { try { return new URL(v).protocol === 'https:'; } catch { return false; } };
+const conn = (s: LiveAdminState | null, p: Provider) => s?.connections.find((c) => c.provider === p);
+
+const toConnForm = (c?: PublicConnection): ConnForm => ({
+  clientId: c?.clientId ?? '', clientSecret: '', channelInput: c?.channelInput ?? '',
+  googleStatus: c?.googleStatus ?? 'testing', dirty: false,
+});
+
+const toConfigForm = (c: LiveConfig, now: number): ConfigForm => ({
+  mode: c.mode,
+  primary: c.priority[0] ?? 'youtube',
+  fallbackUrl: c.fallbackUrl,
+  showUpcoming: c.showUpcoming,
+  watchUrl: c.manual.watchUrl,
+  title: c.manual.title,
+  hours: c.mode === 'manual' && c.manual.until > now ? 'keep' : '4',
+  display: c.display,
+  dirty: false,
+});
+
+function rel(ts: number, now: number) {
+  const d = Math.round((ts - now) / 1000);
+  const a = Math.abs(d);
+  if (a < 45) return d <= 0 ? 'just now' : 'in under a minute';
+  const f = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
+  if (a < 3600) return f.format(Math.round(d / 60), 'minute');
+  if (a < 86400) return f.format(Math.round(d / 3600), 'hour');
+  return f.format(Math.round(d / 86400), 'day');
+}
+const fullTime = (ts: number) => new Date(ts).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
+
+function When({ ts, now, empty = 'Never' }: { ts: number; now: number; empty?: string }) {
+  if (!ts) return <>{empty}</>;
+  return <time dateTime={new Date(ts).toISOString()} title={fullTime(ts)}>{rel(ts, now)}</time>;
+}
+
+function health(c: PublicConnection | undefined, s: LiveAdminState): { tone: Tone; label: string } {
+  if (!c) return { tone: 'idle', label: 'Not connected' };
+  if (c.provider === 'youtube' && !c.authorized) return { tone: 'warn', label: 'Needs authorization' };
+  if (c.error) return { tone: 'bad', label: 'Needs attention' };
+  if (!c.testedAt) return { tone: 'warn', label: 'Not tested yet' };
+  if (!c.enabled) return { tone: 'idle', label: 'Tested, turned off' };
+  if (!s.scheduler.healthy || c.broadcastStatus === 'unknown') return { tone: 'warn', label: 'Awaiting a fresh check' };
+  if (c.broadcastStatus === 'upcoming') return { tone: 'ok', label: 'Upcoming broadcast' };
+  if (c.broadcastStatus === 'live') return { tone: 'live', label: 'Live now' };
+  return { tone: 'ok', label: 'Connected, offline' };
+}
+
+function Status({ tone, label }: { tone: Tone; label: string }) {
+  return <span className={`live-admin-status is-${tone}`}><i aria-hidden="true" />{label}</span>;
+}
+
+export default function LiveManager() {
+  const uid = useId();
+  const id = (s: string) => `${uid}-${s}`;
+  const [data, setData] = useState<LiveAdminState | null>(null);
+  const [loadError, setLoadError] = useState('');
+  const [cfg, setCfg] = useState<ConfigForm | null>(null);
+  const [forms, setForms] = useState<Record<Provider, ConnForm>>({ twitch: toConnForm(), youtube: toConnForm() });
+  const [channelPick, setChannelPick] = useState('');
+  const [tab, setTab] = useState<Provider>('twitch');
+  const [now, setNow] = useState(() => Date.now());
+
+  // one pending action at a time; the ref blocks double-clicks that land
+  // before React re-renders the disabled buttons
+  const [busy, setBusy] = useState<string | null>(null);
+  const busyRef = useRef<string | null>(null);
+  const [pageMsg, setPageMsg] = useState<Msg>(NO_MSG);
+  const [cfgMsg, setCfgMsg] = useState<Msg>(NO_MSG);
+  const [statusMsg, setStatusMsg] = useState<Msg>(NO_MSG);
+  const [connMsg, setConnMsgs] = useState<Record<Provider, Msg>>({ twitch: NO_MSG, youtube: NO_MSG });
+  const [copied, setCopied] = useState('');
+  const tabRefs = useRef<Record<Provider, HTMLButtonElement | null>>({ twitch: null, youtube: null });
+  const tabFromUrl = useRef(false);
+
+  const setConnMsg = (p: Provider, m: Msg) => setConnMsgs((x) => ({ ...x, [p]: m }));
+
+  function adopt(s: LiveAdminState, reset: { config?: boolean; provider?: Provider; channel?: boolean } = {}) {
+    const t = Date.now();
+    setData(s);
+    setNow(t);
+    setCfg((prev) => (!prev || !prev.dirty || reset.config ? toConfigForm(s.config, t) : prev));
+    setForms((prev) => {
+      const next = { ...prev };
+      for (const p of PROVIDERS) if (!prev[p].dirty || reset.provider === p) next[p] = toConnForm(conn(s, p));
+      return next;
+    });
+    const yt = conn(s, 'youtube');
+    const saved = yt?.channelId || yt?.channels[0]?.id || '';
+    setChannelPick((prev) => (reset.channel || !prev || !yt?.channels.some((c) => c.id === prev) ? saved : prev));
+  }
+
+  async function load() {
+    setLoadError('');
+    try {
+      const s = await api<LiveAdminState>();
+      if (!data && !tabFromUrl.current) setTab(s.config.priority[0] ?? 'twitch');
+      adopt(s);
+    } catch (e) {
+      setLoadError(errText(e));
+    }
+  }
+
+  useEffect(() => {
+    const q = new URLSearchParams(location.search);
+    const r = q.get('live');
+    if (r === 'connected') {
+      setPageMsg({ ok: 'YouTube is authorized. Confirm your channel below, then test the connection.', err: '' });
+    } else if (r === 'error') {
+      setPageMsg({ ok: '', err: 'YouTube authorization didn’t finish. Check that the redirect URI in Google matches exactly, then try Authorize again.' });
+    }
+    if (r) {
+      tabFromUrl.current = true;
+      setTab('youtube');
+      q.delete('live');
+      const qs = q.toString();
+      history.replaceState(history.state, '', location.pathname + (qs ? `?${qs}` : '') + location.hash);
+    }
+    void load();
+    const tick = setInterval(() => setNow(Date.now()), 30_000);
+    return () => clearInterval(tick);
+  }, []);
+
+  async function run(kind: string, fn: () => Promise<void>) {
+    if (busyRef.current) return;
+    busyRef.current = kind;
+    setBusy(kind);
+    try {
+      await fn();
+    } finally {
+      busyRef.current = null;
+      setBusy(null);
+    }
+  }
+
+  async function copy(text: string, what: string) {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(`${what} copied.`);
+    } catch {
+      setCopied('Copy failed. Select the text and copy it by hand.');
+    }
+    setTimeout(() => setCopied(''), 2500);
+  }
+
+  if (!data || !cfg) {
+    return (
+      <div className="live-admin">
+        {loadError ? (
+          <div className="flash error" role="alert">
+            Couldn’t load live video settings: {loadError}{' '}
+            <button type="button" className="btn sm" onClick={() => void load()}>Retry</button>
+          </div>
+        ) : (
+          <p className="hint" role="status">Loading live video settings…</p>
+        )}
+      </div>
+    );
+  }
+
+  const state = data;
+  const locked = busy !== null;
+  const enabledConns = state.connections.filter((c) => c.enabled && c.testedAt > 0);
+  const manualActive = state.config.mode === 'manual' && state.config.manual.until > now;
+  const twitchRedirect = `${location.origin}/admin/live`;
+
+  // ---- settings ----
+
+  const setCfgField = <K extends keyof ConfigForm>(k: K, v: ConfigForm[K]) => setCfg((x) => (x ? { ...x, [k]: v, dirty: true } : x));
+  const setDisplay = (patch: Partial<Display>) => setCfg((x) => (x ? { ...x, display: { ...x.display, ...patch }, dirty: true } : x));
+
+  function configBody(f: ConfigForm) {
+    const other: Provider = f.primary === 'youtube' ? 'twitch' : 'youtube';
+    const until = f.mode !== 'manual' ? 0 : f.hours === 'keep' ? state.config.manual.until : Date.now() + Number(f.hours) * HOUR;
+    return {
+      mode: f.mode,
+      priority: [f.primary, other],
+      fallbackUrl: f.fallbackUrl.trim(),
+      showUpcoming: f.showUpcoming,
+      manual: { watchUrl: f.watchUrl.trim(), title: f.title.trim(), until },
+      display: f.display,
+    };
+  }
+
+  async function saveConfig(e: FormEvent) {
+    e.preventDefault();
+    const f = cfg!;
+    setCfgMsg(NO_MSG);
+    if (f.fallbackUrl.trim() && !isHttps(f.fallbackUrl.trim())) return setCfgMsg({ ok: '', err: 'The offline link must start with https://' });
+    if (f.mode === 'manual') {
+      if (!f.watchUrl.trim()) return setCfgMsg({ ok: '', err: 'Paste the link to your live video.' });
+      if (!isHttps(f.watchUrl.trim())) return setCfgMsg({ ok: '', err: 'The live video link must start with https://' });
+    }
+    await run('config', async () => {
+      try {
+        const s = await api<LiveAdminState>({ action: 'saveConfig', config: configBody(f) });
+        adopt(s, { config: true });
+        setCfgMsg({
+          ok: s.config.mode === 'manual' ? `Saved. Your link shows until ${fullTime(s.config.manual.until)}.`
+            : s.config.mode === 'automatic' ? 'Saved. Your site will show broadcasts from your connected channels.'
+            : 'Saved. Live video is hidden on your site.',
+          err: '',
+        });
+      } catch (err) {
+        setCfgMsg({ ok: '', err: errText(err) });
+      }
+    });
+  }
+
+  async function endManual() {
+    setStatusMsg(NO_MSG);
+    const c = state.config;
+    await run('endManual', async () => {
+      try {
+        const s = await api<LiveAdminState>({
+          action: 'saveConfig',
+          config: {
+            mode: 'automatic', priority: c.priority, fallbackUrl: c.fallbackUrl, showUpcoming: c.showUpcoming,
+            manual: { watchUrl: c.manual.watchUrl, title: c.manual.title, until: 0 }, display: c.display,
+          },
+        });
+        adopt(s, { config: true });
+        setStatusMsg({ ok: 'Manual link ended. Back to automatic.', err: '' });
+      } catch (err) {
+        setStatusMsg({ ok: '', err: errText(err) });
+      }
+    });
+  }
+
+  async function refresh() {
+    setStatusMsg(NO_MSG);
+    await run('refresh', async () => {
+      try {
+        adopt(await api<LiveAdminState>());
+        setStatusMsg({ ok: 'Status updated.', err: '' });
+      } catch (err) {
+        setStatusMsg({ ok: '', err: errText(err) });
+      }
+    });
+  }
+
+  // ---- connections ----
+
+  const setForm = (p: Provider, patch: Partial<ConnForm>) => setForms((x) => ({ ...x, [p]: { ...x[p], ...patch, dirty: true } }));
+
+  async function saveConnection(p: Provider, e: FormEvent) {
+    e.preventDefault();
+    const f = forms[p];
+    const c = conn(state, p);
+    const clientId = f.clientId.trim();
+    const sameClient = !!c && c.clientId === clientId;
+    setConnMsg(p, NO_MSG);
+    if (!clientId) return setConnMsg(p, { ok: '', err: 'Enter the Client ID from your app.' });
+    if (!f.clientSecret.trim() && !(sameClient && c!.hasSecret)) {
+      return setConnMsg(p, { ok: '', err: c ? 'A new Client ID needs its Client Secret too.' : 'Enter the Client Secret from your app.' });
+    }
+    if (p === 'twitch' && !f.channelInput.trim()) return setConnMsg(p, { ok: '', err: 'Enter your Twitch channel link or username.' });
+    if (p === 'youtube' && c?.authorized && !sameClient && !confirm('Changing the Client ID removes the current YouTube authorization. Continue?')) return;
+    await run(`save-${p}`, async () => {
+      try {
+        const s = await api<LiveAdminState>({
+          action: 'saveConnection', provider: p, clientId, clientSecret: f.clientSecret.trim(),
+          channelInput: p === 'twitch' ? f.channelInput.trim() : '', googleStatus: f.googleStatus,
+        });
+        adopt(s, { provider: p, channel: p === 'youtube' });
+        const n = conn(s, p);
+        setConnMsg(p, {
+          ok: p === 'youtube' && !n?.authorized ? 'Saved. Next, authorize with Google.' : 'Saved. Test the connection to turn it on.',
+          err: '',
+        });
+      } catch (err) {
+        setConnMsg(p, { ok: '', err: errText(err) });
+      }
+    });
+  }
+
+  async function test(p: Provider) {
+    setConnMsg(p, NO_MSG);
+    await run(`test-${p}`, async () => {
+      try {
+        const s = await api<LiveAdminState>({ action: 'test', provider: p });
+        adopt(s, { channel: true });
+        const n = conn(s, p);
+        if (n?.error) setConnMsg(p, { ok: '', err: n.error });
+        else setConnMsg(p, {
+          ok: `Connection works${n?.channelName ? ` — found ${n.channelName}` : ''}.${n?.enabled ? '' : ' Turn it on when you’re ready.'}`,
+          err: '',
+        });
+      } catch (err) {
+        setConnMsg(p, { ok: '', err: errText(err) });
+      }
+    });
+  }
+
+  async function selectChannel() {
+    setConnMsg('youtube', NO_MSG);
+    await run('channel-youtube', async () => {
+      try {
+        adopt(await api<LiveAdminState>({ action: 'selectChannel', provider: 'youtube', channelId: channelPick }), { channel: true });
+        setConnMsg('youtube', { ok: 'Channel saved. Test the connection again to turn it on.', err: '' });
+      } catch (err) {
+        setConnMsg('youtube', { ok: '', err: errText(err) });
+      }
+    });
+  }
+
+  async function setEnabled(p: Provider, enabled: boolean) {
+    const c = conn(state, p);
+    setConnMsg(p, NO_MSG);
+    if (enabled && !c?.testedAt) return setConnMsg(p, { ok: '', err: 'Test the connection first. It can only be turned on after a successful test.' });
+    await run(`enable-${p}`, async () => {
+      try {
+        const s = await api<LiveAdminState>({ action: 'enable', provider: p, enabled });
+        adopt(s);
+        setConnMsg(p, {
+          ok: enabled
+            ? `Turned on. ACMS checks every minute or two.${s.config.mode === 'automatic' ? '' : ' Set live video to Automatic above to show it on your site.'}`
+            : 'Turned off. ACMS stopped checking this channel.',
+          err: '',
+        });
+      } catch (err) {
+        setConnMsg(p, { ok: '', err: errText(err) });
+      }
+    });
+  }
+
+  async function authorize() {
+    setConnMsg('youtube', NO_MSG);
+    if (forms.youtube.dirty) return setConnMsg('youtube', { ok: '', err: 'Save your changes before authorizing.' });
+    await run('auth-youtube', async () => {
+      try {
+        const r = await api<{ authorizationUrl: string }>({ action: 'authorize', provider: 'youtube' });
+        if (!r.authorizationUrl || !isHttps(r.authorizationUrl)) throw new Error('The server didn’t return a valid Google sign-in link.');
+        location.assign(r.authorizationUrl);
+      } catch (err) {
+        setConnMsg('youtube', { ok: '', err: errText(err) });
+      }
+    });
+  }
+
+  async function disconnect(p: Provider) {
+    if (!confirm(`Disconnect ${NAME[p]}? ACMS deletes the saved app details and stops checking this channel.`)) return;
+    setConnMsg(p, NO_MSG);
+    await run(`disconnect-${p}`, async () => {
+      try {
+        adopt(await api<LiveAdminState>({ action: 'disconnect', provider: p }), { provider: p, channel: p === 'youtube' });
+        setConnMsg(p, { ok: `${NAME[p]} disconnected.`, err: '' });
+      } catch (err) {
+        setConnMsg(p, { ok: '', err: errText(err) });
+      }
+    });
+  }
+
+  function onTabKey(e: KeyboardEvent<HTMLDivElement>) {
+    const i = PROVIDERS.indexOf(tab);
+    const next = e.key === 'ArrowRight' ? PROVIDERS[(i + 1) % PROVIDERS.length]
+      : e.key === 'ArrowLeft' ? PROVIDERS[(i - 1 + PROVIDERS.length) % PROVIDERS.length]
+      : e.key === 'Home' ? PROVIDERS[0] : e.key === 'End' ? PROVIDERS[PROVIDERS.length - 1] : null;
+    if (!next) return;
+    e.preventDefault();
+    setTab(next);
+    tabRefs.current[next]?.focus();
+  }
+
+  // ---- render pieces ----
+
+  const snap = state.snapshot;
+  const snapHref = snap?.watchUrl && isHttps(snap.watchUrl) ? snap.watchUrl : '';
+
+  function rightNow() {
+    const c = state.config;
+    if (c.mode === 'off') return <p>Live video is <b>off</b>. Nothing live-related shows on your site.</p>;
+    if (c.mode === 'manual' && manualActive) {
+      return <p>Showing your manual link until <b>{fullTime(c.manual.until)}</b>.</p>;
+    }
+    if (snap && snap.status === 'live') {
+      return <p><Status tone="live" label={`Live on ${NAME[snap.provider] ?? snap.provider}`} /> {snapHref ? <a href={snapHref} target="_blank" rel="noopener noreferrer">{snap.title || 'Watch'}</a> : snap.title}</p>;
+    }
+    if (snap && snap.status === 'upcoming' && c.showUpcoming) {
+      return <p>Next up on {NAME[snap.provider] ?? snap.provider}: {snapHref ? <a href={snapHref} target="_blank" rel="noopener noreferrer">{snap.title || 'Scheduled broadcast'}</a> : snap.title}{snap.startedAt ? <> · <When ts={snap.startedAt} now={now} /></> : null}</p>;
+    }
+    if (!enabledConns.length) return <p>No channel is turned on yet, so there’s nothing to watch for. Connect one below.</p>;
+    return <p>Not live right now. Your site updates within a minute or two of your broadcast starting.</p>;
+  }
+
+  function providerPanel(p: Provider) {
+    const c = conn(state, p);
+    const f = forms[p];
+    const h = health(c, state);
+    const m = connMsg[p];
+    const yt = p === 'youtube';
+    const sameClient = !!c && c.clientId === f.clientId.trim();
+    const needsAuth = yt && !!c && !c.authorized;
+    const canTest = !!c && !f.dirty && !needsAuth;
+    const channelChanged = yt && !!c && !!channelPick && channelPick !== c.channelId;
+
+    return (
+      <div
+        role="tabpanel"
+        id={id(`panel-${p}`)}
+        aria-labelledby={id(`tab-${p}`)}
+        hidden={tab !== p}
+        className="live-admin-panel"
+      >
+        <div className="live-admin-health">
+          <Status tone={h.tone} label={h.label} />
+          {c && (
+            <dl className="live-admin-dl">
+              <div><dt>Channel</dt><dd>{c.channelName || (yt ? 'Not chosen yet' : c.channelInput || 'Not found yet')}</dd></div>
+              <div><dt>Last successful check</dt><dd><When ts={c.checkedAt} now={now} /></dd></div>
+              <div><dt>Next check</dt><dd>{c.enabled ? <When ts={c.nextAt} now={now} empty="Soon" /> : 'Turned off'}</dd></div>
+              {c.failures > 0 && <div><dt>Failed checks in a row</dt><dd>{c.failures}</dd></div>}
+              {c.testedAt > 0 && <div><dt>Last tested</dt><dd><When ts={c.testedAt} now={now} /></dd></div>}
+            </dl>
+          )}
+          {c?.error && <p className="flash error live-admin-flash">{c.error}</p>}
+        </div>
+
+        {yt ? youtubeGuide() : twitchGuide()}
+
+        <form className="live-admin-form" onSubmit={(e) => void saveConnection(p, e)} aria-labelledby={id(`form-h-${p}`)}>
+          <h3 id={id(`form-h-${p}`)}>Your {NAME[p]} app</h3>
+          <fieldset disabled={locked || !state.encryptionReady}>
+            <div className="field-row">
+              <label className="field">
+                <span>Client ID</span>
+                <input
+                  type="text" className="mono" value={f.clientId} autoComplete="off" spellCheck={false}
+                  onChange={(e) => setForm(p, { clientId: e.target.value })}
+                />
+              </label>
+              <label className="field">
+                <span>Client Secret</span>
+                <input
+                  type="password" className="mono" value={f.clientSecret} autoComplete="new-password" spellCheck={false}
+                  data-1p-ignore data-lpignore="true"
+                  placeholder={c?.hasSecret && sameClient ? 'Saved — type to replace' : ''}
+                  onChange={(e) => setForm(p, { clientSecret: e.target.value })}
+                  aria-describedby={id(`secret-hint-${p}`)}
+                />
+                <small className="hint" id={id(`secret-hint-${p}`)}>
+                  {c?.hasSecret && !sameClient ? 'New Client ID: enter its secret too.' : 'Stored encrypted on the server. Never shown again or sent to visitors.'}
+                </small>
+              </label>
+            </div>
+            {!yt && (
+              <label className="field">
+                <span>Channel link or username</span>
+                <input
+                  type="text" value={f.channelInput} autoComplete="off" spellCheck={false}
+                  placeholder="https://twitch.tv/yourname"
+                  onChange={(e) => setForm(p, { channelInput: e.target.value })}
+                />
+              </label>
+            )}
+            {yt && (
+              <label className="field">
+                <span>Google consent screen status</span>
+                <select
+                  value={f.googleStatus}
+                  onChange={(e) => setForm(p, { googleStatus: e.target.value as GoogleStatus })}
+                  aria-describedby={id('gs-hint')}
+                >
+                  <option value="testing">Testing</option>
+                  <option value="production">In production</option>
+                </select>
+                <small className="hint" id={id('gs-hint')}>
+                  Match what Google Cloud shows. In Testing, Google ends the sign-in after 7 days, so you’ll need to authorize again each week.
+                  In production it lasts, but Google may ask you to verify the app first — requirements vary.
+                </small>
+              </label>
+            )}
+          </fieldset>
+          <div className="live-admin-actions">
+            <button type="submit" className="btn primary" disabled={locked || !f.dirty || !state.encryptionReady}>
+              {busy === `save-${p}` ? 'Saving…' : c ? 'Save changes' : 'Save'}
+            </button>
+            {f.dirty && c && (
+              <button type="button" className="btn ghost" disabled={locked} onClick={() => setForms((x) => ({ ...x, [p]: toConnForm(c) }))}>
+                Discard changes
+              </button>
+            )}
+            <span className="hint">Saving turns the connection off until you test it again.</span>
+          </div>
+        </form>
+
+        {c && (
+          <div className="live-admin-steps-row">
+            {yt && (
+              <div className="live-admin-step">
+                <h3>Authorize</h3>
+                <p className="hint">
+                  {c.authorized ? 'Google access is in place. Authorize again if checks start failing.' : 'Sign in with the Google account that owns your channel. ACMS asks for read-only access.'}
+                </p>
+                <button type="button" className={`btn ${c.authorized ? '' : 'primary'}`} disabled={locked || !c.hasSecret} onClick={() => void authorize()}>
+                  {busy === 'auth-youtube' ? 'Opening Google…' : c.authorized ? 'Authorize again' : 'Authorize with Google'}
+                </button>
+              </div>
+            )}
+
+            {yt && c.authorized && c.channels.length > 0 && (
+              <div className="live-admin-step">
+                <label className="field">
+                  <span>Channel</span>
+                  <select value={channelPick} disabled={locked} onChange={(e) => setChannelPick(e.target.value)}>
+                    {c.channels.map((ch) => <option key={ch.id} value={ch.id}>{ch.name}</option>)}
+                  </select>
+                </label>
+                {channelChanged && (
+                  <button type="button" className="btn" disabled={locked} onClick={() => void selectChannel()}>
+                    {busy === 'channel-youtube' ? 'Saving…' : 'Use this channel'}
+                  </button>
+                )}
+              </div>
+            )}
+
+            <div className="live-admin-step">
+              <h3>Test and turn on</h3>
+              <p className="hint">
+                {f.dirty ? 'Save your changes first.' : needsAuth ? 'Authorize with Google first.' : 'Testing checks your app and channel. It doesn’t turn anything on.'}
+              </p>
+              <div className="live-admin-actions">
+                <button type="button" className="btn" disabled={locked || !canTest} onClick={() => void test(p)}>
+                  {busy === `test-${p}` ? 'Testing…' : 'Test connection'}
+                </button>
+                {c.enabled ? (
+                  <button type="button" className="btn" disabled={locked} onClick={() => void setEnabled(p, false)}>
+                    {busy === `enable-${p}` ? 'Turning off…' : 'Turn off'}
+                  </button>
+                ) : (
+                  <button
+                    type="button" className="btn primary" disabled={locked || !c.testedAt || needsAuth}
+                    onClick={() => void setEnabled(p, true)} aria-describedby={c.testedAt ? undefined : id(`on-hint-${p}`)}
+                  >
+                    {busy === `enable-${p}` ? 'Turning on…' : 'Turn on'}
+                  </button>
+                )}
+              </div>
+              {!c.testedAt && <p className="hint" id={id(`on-hint-${p}`)}>Available after a successful test.</p>}
+            </div>
+          </div>
+        )}
+
+        <div className="live-admin-msgs" aria-live="polite">
+          {m.ok && <p className="flash live-admin-flash">{m.ok}</p>}
+        </div>
+        <div className="live-admin-msgs" role="alert">
+          {m.err && <p className="flash error live-admin-flash">{m.err}</p>}
+        </div>
+
+        {c && (
+          <div className="live-admin-danger">
+            <button type="button" className="btn ghost danger" disabled={locked} onClick={() => void disconnect(p)}>
+              {busy === `disconnect-${p}` ? 'Disconnecting…' : `Disconnect ${NAME[p]}`}
+            </button>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  function copyRow(value: string, label: string, what: string) {
+    return (
+      <div className="live-admin-copy">
+        <input type="text" className="mono" readOnly value={value} aria-label={label} onFocus={(e) => e.target.select()} />
+        <button type="button" className="btn sm" onClick={() => void copy(value, what)}>Copy</button>
+      </div>
+    );
+  }
+
+  function twitchGuide() {
+    return (
+      <details className="live-admin-guide">
+        <summary>How to set up Twitch</summary>
+        <ol>
+          <li>
+            Open the <a href="https://dev.twitch.tv/console/apps" target="_blank" rel="noopener noreferrer">Twitch Developer Console</a> and
+            choose <b>Register Your Application</b>. Twitch may ask you to turn on two-factor authentication first.
+          </li>
+          <li>
+            Give it any name. For <b>OAuth Redirect URL</b>, Twitch requires one, so paste this address (ACMS doesn’t actually use it):
+            {copyRow(twitchRedirect, 'Twitch redirect URL', 'Redirect URL')}
+          </li>
+          <li>Choose the category that best describes your site, set <b>Client Type</b> to <b>Confidential</b>, and create the app.</li>
+          <li>Open the app with <b>Manage</b>. Copy the <b>Client ID</b>, then choose <b>New Secret</b> and copy the secret.</li>
+          <li>Paste both below with your channel link or username, save, then test the connection.</li>
+          <li>When the test passes, turn it on.</li>
+        </ol>
+        <p className="hint">
+          ACMS uses an app-only token. You never sign in as the broadcaster here, and ACMS never needs your stream key.{' '}
+          <a href="https://dev.twitch.tv/docs/authentication/register-app/" target="_blank" rel="noopener noreferrer">Twitch’s guide ↗</a>
+        </p>
+      </details>
+    );
+  }
+
+  function youtubeGuide() {
+    return (
+      <details className="live-admin-guide">
+        <summary>How to set up YouTube</summary>
+        <ol>
+          <li>In the Google Cloud console, create a project (or pick one you already have).</li>
+          <li>
+            Enable the <a href="https://console.cloud.google.com/apis/library/youtube.googleapis.com" target="_blank" rel="noopener noreferrer">YouTube Data API v3</a> for that project.
+          </li>
+          <li>Set up the <b>OAuth consent screen</b>: choose External, fill in the app name and your email, and add your own Google account as a test user.</li>
+          <li>
+            Go to <b>Credentials → Create credentials → OAuth client ID</b> and choose <b>Web application</b>.
+            Under <b>Authorized redirect URIs</b>, paste this exactly:
+            {copyRow(state.callbackUrl, 'YouTube redirect URI', 'Redirect URI')}
+          </li>
+          <li>Copy the <b>Client ID</b> and <b>Client Secret</b> below, set the consent screen status, and save.</li>
+          <li>Choose <b>Authorize with Google</b> and sign in with the account that owns your channel. ACMS only asks for read-only access.</li>
+          <li>Confirm your channel, test the connection, then turn it on.</li>
+        </ol>
+        <p className="hint">
+          ACMS checks your broadcasts using Google’s{' '}
+          <a href="https://developers.google.com/youtube/v3/live/docs/liveBroadcasts/list" target="_blank" rel="noopener noreferrer">live broadcasts list ↗</a>.
+          One check a minute uses about 1,440 quota units a day, more with video checks, upcoming broadcasts or many simultaneous streams. Your daily limit depends on your Google Cloud project.
+        </p>
+      </details>
+    );
+  }
+
+  return (
+    <div className="live-admin" aria-busy={locked}>
+      <header className="page-head live-admin-head">
+        <div>
+          <h1>Live video</h1>
+          <p className="sub">Connect your own developer app. ACMS finds your live broadcasts and updates your site automatically.</p>
+        </div>
+      </header>
+
+      <p className="live-admin-lede">
+        Start your broadcast on Twitch or YouTube as usual. ACMS only watches for it — it never starts, stops, or changes a stream.
+      </p>
+
+      <div className="live-admin-msgs" aria-live="polite">{pageMsg.ok && <p className="flash">{pageMsg.ok}</p>}</div>
+      <div className="live-admin-msgs" role="alert">{pageMsg.err && <p className="flash error">{pageMsg.err}</p>}</div>
+
+      {!state.encryptionReady && (
+        <div className="notice warn" role="note">
+          ACMS can’t store app credentials safely yet. Ask your host to set a strong <code>SESSION_SECRET</code> (or <code>LIVE_ENCRYPTION_KEY</code>), then reload this page.
+        </div>
+      )}
+
+      {/* ---- status ---- */}
+      <section className="live-admin-card" aria-labelledby={id('now-h')}>
+        <div className="live-admin-card-head">
+          <h2 id={id('now-h')}>Right now</h2>
+          <button type="button" className="btn sm" disabled={locked} onClick={() => void refresh()}>
+            {busy === 'refresh' ? 'Checking…' : 'Refresh status'}
+          </button>
+        </div>
+        <div className="live-admin-now">{rightNow()}</div>
+        {manualActive && (
+          <button type="button" className="btn" disabled={locked} onClick={() => void endManual()}>
+            {busy === 'endManual' ? 'Ending…' : 'End manual link now'}
+          </button>
+        )}
+        <ul className="live-admin-conns" aria-label="Connections">
+          {PROVIDERS.map((p) => {
+            const h = health(conn(state, p), state);
+            return (
+              <li key={p}>
+                <b>{NAME[p]}</b>
+                <Status tone={h.tone} label={h.label} />
+              </li>
+            );
+          })}
+        </ul>
+        <p className="hint live-admin-sched">
+          {state.scheduler.lastAt ? <>Background checks last ran <When ts={state.scheduler.lastAt} now={now} />. </> : <>Background checks haven’t run yet. </>}
+          Updates land within a minute or two, not instantly.
+        </p>
+        {!state.scheduler.healthy && (state.config.mode === 'automatic' || enabledConns.length > 0) && (
+          <div className="notice warn live-admin-flash" role="note">
+            Background checks aren’t running on schedule, so automatic updates are paused. Your host needs to run the ACMS scheduled task every minute.
+          </div>
+        )}
+        <div className="live-admin-msgs" aria-live="polite">{statusMsg.ok && <p className="flash live-admin-flash">{statusMsg.ok}</p>}</div>
+        <div className="live-admin-msgs" role="alert">{statusMsg.err && <p className="flash error live-admin-flash">{statusMsg.err}</p>}</div>
+      </section>
+
+      {/* ---- settings ---- */}
+      <section className="live-admin-card" aria-labelledby={id('set-h')}>
+        <div className="live-admin-card-head">
+          <h2 id={id('set-h')}>What your site shows</h2>
+        </div>
+        <form onSubmit={(e) => void saveConfig(e)}>
+          <fieldset className="live-admin-modes" disabled={locked}>
+            <legend>Live video</legend>
+            {MODES.map((m) => (
+              <label key={m.id} className={`live-admin-mode ${cfg.mode === m.id ? 'on' : ''}`}>
+                <input type="radio" name={id('mode')} value={m.id} checked={cfg.mode === m.id} onChange={() => setCfgField('mode', m.id)} />
+                <span><b>{m.name}</b><small>{m.desc}</small></span>
+              </label>
+            ))}
+          </fieldset>
+
+          {cfg.mode === 'automatic' && (
+            <fieldset className="live-admin-fields" disabled={locked}>
+              {!enabledConns.length && (
+                <p className="notice warn live-admin-flash" role="note">No channel is turned on yet. Connect and test one below, then turn it on.</p>
+              )}
+              <div className="field-row">
+                <label className="field">
+                  <span>If both channels are live, show</span>
+                  <select value={cfg.primary} onChange={(e) => setCfgField('primary', e.target.value as Provider)}>
+                    <option value="youtube">YouTube</option>
+                    <option value="twitch">Twitch</option>
+                  </select>
+                </label>
+                <label className="field">
+                  <span>Link when you’re offline (optional)</span>
+                  <input
+                    type="url" inputMode="url" value={cfg.fallbackUrl} placeholder="https://"
+                    onChange={(e) => setCfgField('fallbackUrl', e.target.value)} aria-describedby={id('fb-hint')}
+                  />
+                  <small className="hint" id={id('fb-hint')}>For example your channel page. Leave empty to show nothing.</small>
+                </label>
+              </div>
+              <label className="check-row">
+                <input type="checkbox" checked={cfg.showUpcoming} onChange={(e) => setCfgField('showUpcoming', e.target.checked)} />
+                <span>Show your next scheduled broadcast while offline <span className="hint">(uses more YouTube quota)</span></span>
+              </label>
+            </fieldset>
+          )}
+
+          {cfg.mode === 'manual' && (
+            <fieldset className="live-admin-fields" disabled={locked}>
+              <label className="field">
+                <span>Live video link</span>
+                <input
+                  type="url" inputMode="url" value={cfg.watchUrl} placeholder="https://" required
+                  onChange={(e) => setCfgField('watchUrl', e.target.value)} aria-describedby={id('mu-hint')}
+                />
+                <small className="hint" id={id('mu-hint')}>Any https link works, including a Facebook live video.</small>
+              </label>
+              <div className="field-row">
+                <label className="field">
+                  <span>Title</span>
+                  <input type="text" value={cfg.title} maxLength={200} onChange={(e) => setCfgField('title', e.target.value)} />
+                </label>
+                <label className="field">
+                  <span>Show it for</span>
+                  <select value={cfg.hours} onChange={(e) => setCfgField('hours', e.target.value)}>
+                    {state.config.mode === 'manual' && state.config.manual.until > now && (
+                      <option value="keep">Until {fullTime(state.config.manual.until)}</option>
+                    )}
+                    {HOURS.map((h) => <option key={h} value={h}>{h} hour{h === '1' ? '' : 's'} from now</option>)}
+                  </select>
+                </label>
+              </div>
+            </fieldset>
+          )}
+
+          {cfg.mode !== 'off' && (
+            <fieldset className="live-admin-fields live-admin-look" disabled={locked}>
+              <legend>How it looks</legend>
+              <div className="live-admin-styles" role="radiogroup" aria-label="Card style">
+                {STYLES.map((st) => (
+                  <label key={st.id} className={`live-admin-mode live-admin-style ${cfg.display.style === st.id ? 'on' : ''}`}>
+                    <input type="radio" name={id('style')} value={st.id} checked={cfg.display.style === st.id} onChange={() => setDisplay({ style: st.id })} />
+                    <span>
+                      <i className={`live-admin-glyph is-${st.id}`} aria-hidden="true"><em /><s /></i>
+                      <b>{st.name}</b><small>{st.desc}</small>
+                    </span>
+                  </label>
+                ))}
+              </div>
+              <small className="hint live-admin-look-hint">Applies to Live video sections set to “card”. Sections set to “player” always use the split layout with a play button.</small>
+              <label className="check-row">
+                <input type="checkbox" checked={cfg.display.thumbnail} onChange={(e) => setDisplay({ thumbnail: e.target.checked })} />
+                <span>Show the stream thumbnail <span className="hint">(loaded through your site, so visitors don’t contact Twitch or YouTube until they press play)</span></span>
+              </label>
+              <label className="check-row">
+                <input type="checkbox" checked={cfg.display.viewers} onChange={(e) => setDisplay({ viewers: e.target.checked })} />
+                <span>Show how many people are watching</span>
+              </label>
+              <p className="live-admin-sub">While you’re live, also show on every page</p>
+              {SIGNALS.map((sg) => (
+                <label key={sg.id} className="check-row">
+                  <input type="checkbox" checked={cfg.display[sg.id]} onChange={(e) => setDisplay({ [sg.id]: e.target.checked })} />
+                  <span>{sg.name} <span className="hint">{sg.desc}</span></span>
+                </label>
+              ))}
+            </fieldset>
+          )}
+
+          <div className="live-admin-actions">
+            <button type="submit" className="btn primary" disabled={locked || !cfg.dirty}>
+              {busy === 'config' ? 'Saving…' : 'Save'}
+            </button>
+            {cfg.dirty && (
+              <button type="button" className="btn ghost" disabled={locked} onClick={() => setCfg(toConfigForm(state.config, Date.now()))}>
+                Discard changes
+              </button>
+            )}
+          </div>
+          <div className="live-admin-msgs" aria-live="polite">{cfgMsg.ok && <p className="flash live-admin-flash">{cfgMsg.ok}</p>}</div>
+          <div className="live-admin-msgs" role="alert">{cfgMsg.err && <p className="flash error live-admin-flash">{cfgMsg.err}</p>}</div>
+        </form>
+        <p className="hint live-admin-place">
+          Add a Live video section in <a href="/admin/design">Design → Pages</a>, or a Live video block on your <a href="/admin/links">Links page</a>.
+          Older widget layouts also have a Live video widget.
+        </p>
+      </section>
+
+      {/* ---- connections ---- */}
+      <section className="live-admin-card" aria-labelledby={id('con-h')}>
+        <div className="live-admin-card-head">
+          <h2 id={id('con-h')}>Connections</h2>
+        </div>
+        <div className="seg live-admin-tabs" role="tablist" aria-label="Providers" onKeyDown={onTabKey}>
+          {PROVIDERS.map((p) => {
+            const h = health(conn(state, p), state);
+            return (
+              <button
+                key={p}
+                ref={(el) => { tabRefs.current[p] = el; }}
+                type="button"
+                role="tab"
+                id={id(`tab-${p}`)}
+                aria-selected={tab === p}
+                aria-controls={id(`panel-${p}`)}
+                tabIndex={tab === p ? 0 : -1}
+                onClick={() => setTab(p)}
+              >
+                <i className={`live-admin-dot is-${h.tone}`} aria-hidden="true" />
+                {NAME[p]}
+                <span className="sr-only">, {h.label}</span>
+              </button>
+            );
+          })}
+        </div>
+        {PROVIDERS.map((p) => <div key={p}>{providerPanel(p)}</div>)}
+        <p className="hint live-admin-copied" aria-live="polite">{copied}</p>
+      </section>
+
+      <section className="live-admin-card live-admin-roadmap" aria-labelledby={id('fb-h')}>
+        <h2 id={id('fb-h')}>Facebook</h2>
+        <p>Manual links supported. Automatic Page integration will follow after permissions and access requirements are validated.</p>
+      </section>
+    </div>
+  );
+}