// views_admin.jsx — super-admin platform console: Operations, Launch
// readiness, Tenants & access, Settings & logs.
(function () {
  const { useState } = React;
  const D = window.JS_DATA;

  const jobTone = s => s === 'done' ? 'green' : s === 'running' ? 'amber' : s === 'failed' ? 'coral' : null;
  async function runAdminAction(label, action, setStatus) {
    setStatus(`${label} running…`);
    try {
      await action();
      setStatus(`${label} completed`);
    } catch (e) {
      setStatus(`${label} failed: ${e.message}`);
    }
  }

  // ============================================================ OPERATIONS
  function Production({ go }) {
    const [status, setStatus] = useState('');
    return (
      <div className="js-view js-view--wide">
        <div className="js-pagehead"><div><p className="eyebrow">Platform operations</p><h1>Operations <em>console</em></h1>
          <p className="sub">Authentication, tenancy, job queue, and live health. The backend remains the source of truth for authorization.</p></div>
          <Btn kind="ghost" icon="refresh" sm onClick={() => runAdminAction('Operations refresh', () => window.JS_API.production.dashboard(), setStatus)}>Refresh</Btn></div>
        {status && <div className="js-gap sev-low" style={{ marginBottom: 18 }}><p style={{ margin: 0 }}>{status}</p></div>}

        <div className="js-stats" style={{ marginBottom: 22 }}>
          {D.OPS.metrics.map(m => <Stat key={m.k} {...m} dir={m.dir} />)}
        </div>

        <div className="js-cols-main">
          <Panel>
            <PanelHead eyebrow="Job queue" title="Background audits" desc="Queued and running crawls across all tenants.">
              <Pill tone="amber">1 running</Pill>
            </PanelHead>
            <div className="js-table-wrap">
              <table className="js-table">
                <thead><tr><th>Job</th><th>Site</th><th>Pages</th><th>Started</th><th>State</th></tr></thead>
                <tbody>
                  {D.OPS.jobs.length ? D.OPS.jobs.map(j => (
                    <tr key={j.id}>
                      <td className="t-strong" style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>{j.id}</td>
                      <td style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>{j.site}</td>
                      <td className="js-num">{j.pages}</td>
                      <td className="js-tag">{j.started}</td>
                      <td><Pill tone={jobTone(j.state)} dot={false}>{j.state}</Pill></td>
                    </tr>
                  )) : <tr><td colSpan="5"><EmptyState icon="activity" title="No backend jobs" desc="The production queue is empty for this session." /></td></tr>}
                </tbody>
              </table>
            </div>
          </Panel>
          <Panel raised>
            <PanelHead title="Access control" />
            <div className="stack" style={{ gap: 10 }}>
              {Object.values(D.ROLES).map(r => (
                <div key={r.key} className="row" style={{ justifyContent: 'space-between' }}>
                  <div className="row" style={{ gap: 10 }}><span style={{ width: 30, height: 30, borderRadius: '50%', background: 'var(--gold)', color: 'var(--on-lime)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600 }}>{r.initials}</span>
                    <div><div style={{ fontSize: 13, fontWeight: 600 }}>{r.label}</div><div className="rc-sub">{r.org}</div></div></div>
                  <Pill tone="green" dot={false}>Active</Pill>
                </div>
              ))}
            </div>
            <hr className="js-divider" />
            <div className="row" style={{ color: 'var(--emerald)', gap: 8 }}><Icon name="shieldCheck" size={16} /><span className="js-tag" style={{ color: 'var(--emerald)' }}>RBAC enforced · platform_admin → super_admin</span></div>
          </Panel>
        </div>

        <Panel style={{ marginTop: 18 }}>
          <PanelHead eyebrow="Tenancy" title="Tenants & usage" />
          <div className="js-table-wrap">
            <table className="js-table">
              <thead><tr><th>Tenant</th><th>Type</th><th>Seats</th><th>Clients</th><th>Usage</th><th>Plan</th></tr></thead>
              <tbody>
                {D.OPS.tenants.map((t, i) => (
                  <tr key={i}><td className="t-strong">{t.name}</td><td>{t.type}</td><td className="js-num">{t.seats}</td><td className="js-num">{t.clients}</td>
                    <td><div className="row" style={{ gap: 8 }}><div className="track" style={{ width: 60, height: 6, background: 'var(--surface-2)', borderRadius: 99, overflow: 'hidden' }}><div style={{ height: '100%', width: t.usage, background: 'var(--gold)' }} /></div><span className="js-num" style={{ fontSize: 12 }}>{t.usage}</span></div></td>
                    <td><Pill dot={false}>{t.plan}</Pill></td></tr>
                ))}
              </tbody>
            </table>
          </div>
        </Panel>
      </div>
    );
  }
  window.Production = Production;

  // ============================================================ LAUNCH
  function Launch({ go }) {
    const L = D.LAUNCH;
    const [status, setStatus] = useState('');
    const stTone = s => s === 'done' ? 'green' : s === 'in-progress' ? 'amber' : null;
    return (
      <div className="js-view js-view--wide">
        <div className="js-pagehead"><div><p className="eyebrow">Launch readiness</p><h1>Ready to <em>ship</em>?</h1>
          <p className="sub">QA, onboarding, backups, migrations and error monitoring — the gate before onboarding pilot clients.</p></div>
          <div className="js-head-actions"><Btn kind="ghost" icon="refresh" sm onClick={() => runAdminAction('Launch refresh', () => window.JS_API.launch.dashboard(), setStatus)}>Refresh</Btn><Btn icon="shieldCheck" onClick={() => runAdminAction('Readiness check', () => window.JS_API.launch.readinessCheck({ source: 'cloud-master-ui' }), setStatus)}>Run readiness check</Btn></div></div>
        {status && <div className="js-gap sev-low" style={{ marginBottom: 18 }}><p style={{ margin: 0 }}>{status}</p></div>}

        <div className="js-cols-main" style={{ marginBottom: 18 }}>
          <Panel raised className="js-artback" style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 28, alignItems: 'center' }}>
            <ScoreDial value={L.readiness} label="Readiness" size="sm" />
            <div>
              <p className="eyebrow">Go / no-go</p>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, margin: '10px 0 8px', color: 'var(--ink)' }}>Nearly there</h3>
              <p style={{ fontSize: 14, color: 'var(--ink-soft)', margin: 0, lineHeight: 1.55 }}>12 of 13 QA suites green. Two checklist items in progress: backup rehearsal and incident runbook sign-off.</p>
            </div>
          </Panel>
          <div className="js-grid-2" style={{ gridTemplateColumns: '1fr 1fr', alignContent: 'start' }}>
            {L.metrics.map(m => <Stat key={m.k} k={m.k} v={m.v} dir={m.dir} />)}
          </div>
        </div>

        <div className="js-cols-main">
          <Panel>
            <PanelHead eyebrow="Checklist" title="Launch tasks" />
            <div className="stack" style={{ gap: 10 }}>
              {L.checklist.map((c, i) => (
                <div key={i} className="row" style={{ justifyContent: 'space-between', padding: '11px 14px', background: 'var(--bg-2)', borderRadius: 'var(--r-sm)', border: '1px solid var(--line-soft)' }}>
                  <div className="row" style={{ gap: 10 }}>
                    <span style={{ width: 22, height: 22, borderRadius: '50%', display: 'grid', placeItems: 'center', background: c.state === 'done' ? 'var(--emerald-soft)' : c.state === 'in-progress' ? 'var(--gold-soft)' : 'var(--surface-2)', color: c.state === 'done' ? 'var(--emerald)' : c.state === 'in-progress' ? 'var(--gold)' : 'var(--mute)' }}>
                      {c.state === 'done' ? <Icon name="check" size={13} /> : c.state === 'in-progress' ? <Icon name="dot" size={13} /> : <Icon name="dot" size={13} />}</span>
                    <span style={{ fontSize: 14, color: c.state === 'todo' ? 'var(--ink-soft)' : 'var(--ink)' }}>{c.item}</span>
                  </div>
                  <Pill tone={stTone(c.state)} dot={false}>{c.state === 'in-progress' ? 'In progress' : c.state === 'done' ? 'Done' : 'To do'}</Pill>
                </div>
              ))}
            </div>
          </Panel>
          <div className="stack">
            <Panel>
              <PanelHead title="Recent errors" />
              <div className="stack" style={{ gap: 10 }}>
                {L.errors.map((e, i) => (
                  <div key={i} className="row" style={{ justifyContent: 'space-between', gap: 12 }}>
                    <div style={{ minWidth: 0, flex: 1 }}><div style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--ink)' }}>{e.sig}</div><div className="rc-sub">last {e.last}</div></div>
                    <div className="row" style={{ gap: 8, flex: 'none' }}><span className="js-num" style={{ color: 'var(--coral)' }}>{e.count}</span><Pill tone={e.sev === 'medium' ? 'amber' : null} dot={false}>{e.sev}</Pill></div>
                  </div>
                ))}
              </div>
            </Panel>
            <Panel>
              <PanelHead title="Migrations" />
              <div className="stack" style={{ gap: 8 }}>
                {L.migrations.map((m, i) => (
                  <div key={i} className="row" style={{ justifyContent: 'space-between' }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>{m.id}</span>
                    <Pill tone={m.state === 'applied' ? 'green' : 'amber'} dot={false}>{m.state}</Pill>
                  </div>
                ))}
              </div>
              <div className="row" style={{ gap: 8, marginTop: 16 }}><Btn sm kind="ghost" icon="database" onClick={() => runAdminAction('Migrations', () => window.JS_API.launch.runMigrations(), setStatus)}>Run migrations</Btn><Btn sm kind="ghost" icon="box" onClick={() => runAdminAction('Backup', () => window.JS_API.launch.createBackup({ reason: 'cloud-master-ui' }), setStatus)}>Backups</Btn></div>
            </Panel>
          </div>
        </div>
      </div>
    );
  }
  window.Launch = Launch;

  // ============================================================ TENANTS (admin clients)
  function AdminTenants({ go }) {
    return (
      <div className="js-view js-view--wide">
        <div className="js-pagehead"><div><p className="eyebrow">Tenancy</p><h1>Tenants &amp; <em>clients</em></h1>
          <p className="sub">Every organization on the platform — agencies and direct clients — with seat usage and plan.</p></div>
          <Btn kind="ghost" icon="filter" sm onClick={() => alert('Tenant filters are intentionally deferred; this table is already backend-scoped by your authenticated role.')}>Filter</Btn></div>
        <Panel>
          <div className="js-table-wrap">
            <table className="js-table">
              <thead><tr><th>Tenant</th><th>Type</th><th>Seats</th><th>Clients</th><th>Usage</th><th>Plan</th><th></th></tr></thead>
              <tbody>
                {D.OPS.tenants.length ? D.OPS.tenants.map((t, i) => (
                  <tr key={i}><td className="t-strong">{t.name}</td><td>{t.type}</td><td className="js-num">{t.seats}</td><td className="js-num">{t.clients}</td>
                    <td><span className="js-num" style={{ fontSize: 12 }}>{t.usage}</span></td><td><Pill dot={false}>{t.plan}</Pill></td>
                    <td><Icon name="chevronRight" size={16} style={{ color: 'var(--mute)' }} /></td></tr>
                )) : <tr><td colSpan="7"><EmptyState icon="building" title="No backend organizations" desc="Create or seed organizations to populate this table." /></td></tr>}
              </tbody>
            </table>
          </div>
        </Panel>
      </div>
    );
  }
  window.AdminTenants = AdminTenants;

  // ============================================================ SETTINGS & LOGS
  function Settings({ role, go }) {
    const [toggles, setToggles] = useState({ authRequired: true, scheduler: true, llmEval: false, publicWidget: true });
    const [status, setStatus] = useState('');
    const t = (k) => setToggles(s => ({ ...s, [k]: !s[k] }));
    const Toggle = ({ on, onClick }) => (
      <button onClick={onClick} style={{ width: 44, height: 26, borderRadius: 99, border: 0, background: on ? 'var(--lime-gradient)' : 'var(--surface-2)', position: 'relative', cursor: 'pointer', transition: 'background .3s', boxShadow: on ? 'var(--glow-lime)' : 'none' }}>
        <span style={{ position: 'absolute', top: 3, left: on ? 21 : 3, width: 20, height: 20, borderRadius: '50%', background: on ? 'var(--on-lime)' : 'var(--ink-soft)', transition: 'left .3s var(--ease-spring)' }} /></button>
    );
    const logs = [
      { who: 'Avery Stone', act: 'ran migrations 0042–0043', when: '12m ago', tag: 'system' },
      { who: 'Mara Vidal', act: 'published approved assets in dry-run mode', when: '1h ago', tag: 'publish' },
      { who: 'system', act: 'auto-backup completed', when: '3h ago', tag: 'backup' },
      { who: 'Avery Stone', act: 'elevated agency_owner → temp admin', when: '1d ago', tag: 'access' },
    ];
    const settings = [
      ['authRequired', 'Require authentication', 'Enforce login + bearer tokens on all API routes.'],
      ['scheduler', 'Monitoring scheduler', 'Run weekly/monthly re-audit plans automatically.'],
      ['llmEval', 'LLM visibility evaluator', 'Use an OpenAI-compatible endpoint instead of the local evaluator.'],
      ['publicWidget', 'Public widget endpoint', 'Allow embedded widgets to query the knowledge graph.'],
    ];
    return (
      <div className="js-view">
        <div className="js-pagehead"><div><p className="eyebrow">System</p><h1>Settings &amp; <em>logs</em></h1>
          <p className="sub">Platform-wide configuration and the audit trail. Changes here are logged and reversible.</p></div>
          <div className="js-head-actions"><Btn kind="ghost" icon="refresh" sm onClick={() => runAdminAction('Settings refresh', () => window.JS_API.production.settings(), setStatus)}>Refresh settings</Btn><Btn kind="ghost" icon="fileText" sm onClick={() => runAdminAction('Audit logs', () => window.JS_API.production.auditLogs(), setStatus)}>Load audit logs</Btn></div></div>
        {status && <div className="js-gap sev-low" style={{ marginBottom: 18 }}><p style={{ margin: 0 }}>{status}</p></div>}

        <div className="js-cols-main">
          <Panel>
            <PanelHead eyebrow="Configuration" title="Platform flags" />
            <div className="stack" style={{ gap: 4 }}>
              {settings.map(([k, name, desc]) => (
                <div key={k} className="row" style={{ justifyContent: 'space-between', padding: '14px 0', borderBottom: '1px solid var(--line-soft)' }}>
                  <div style={{ maxWidth: '78%' }}><div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>{name}</div><div className="rc-sub">{desc}</div></div>
                  <Toggle on={toggles[k]} onClick={() => t(k)} />
                </div>
              ))}
            </div>
            <div className="js-gap sev-high" style={{ marginTop: 20 }}>
              <h4><Icon name="alert" size={16} style={{ color: 'var(--coral)' }} />Danger zone</h4>
              <p>Destructive operations. Backups are taken automatically before each.</p>
              <div className="row" style={{ gap: 8 }}><Btn sm kind="ghost" icon="database" onClick={() => runAdminAction('Backup list', () => window.JS_API.launch.backups(), setStatus)}>List backups</Btn><Btn sm kind="ghost" icon="refresh" onClick={() => runAdminAction('Readiness check', () => window.JS_API.launch.readinessCheck({ source: 'settings' }), setStatus)}>Replay methodology</Btn></div>
            </div>
          </Panel>
          <Panel raised>
            <PanelHead title="Audit log" />
            <div className="stack" style={{ gap: 0 }}>
              {logs.map((l, i) => (
                <div key={i} style={{ padding: '12px 0', borderBottom: i < logs.length - 1 ? '1px solid var(--line-soft)' : 0 }}>
                  <div className="row" style={{ justifyContent: 'space-between' }}><span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{l.who}</span><span className="js-tag">{l.when}</span></div>
                  <div className="rc-sub" style={{ marginTop: 3 }}>{l.act}</div>
                </div>
              ))}
            </div>
            <span className="js-link-gold" style={{ marginTop: 14 }}>View full log <Icon name="arrow" size={14} /></span>
          </Panel>
        </div>
      </div>
    );
  }
  window.Settings = Settings;

})();