// Artboard 7: Settings — trust matrix + server map + keys + health.

const { TRUST: TT7, SERVERS: SS7 } = window.DHAM;

const PERMS = ['read', 'write', 'deploy', 'spend<$10', 'spend>$10', 'spawn-agent', 'modify-self'];
// matrix[trustLevel][permIdx] = 'auto' | 'ask' | 'no'
const MATRIX = [
  ['auto', 'ask',  'no',   'ask',  'no',   'no',   'no'],   // 0 Puthujjana
  ['auto', 'auto', 'ask',  'ask',  'no',   'no',   'no'],   // 1 Sotapanna
  ['auto', 'auto', 'ask',  'auto', 'ask',  'no',   'no'],   // 2 Sakadagami
  ['auto', 'auto', 'auto', 'auto', 'ask',  'ask',  'no'],   // 3 Anagami
  ['auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'ask'],  // 4 Arahant
];

const CELL = {
  auto: { c: 'var(--online)', bg: 'rgba(74,222,128,0.12)',  l: '✓' },
  ask:  { c: 'var(--amber)',  bg: 'rgba(245,166,35,0.12)',  l: '?' },
  no:   { c: 'var(--danger)', bg: 'rgba(239,103,103,0.12)', l: '—' },
};

function Artboard_Settings() {
  const [tab, setTab] = React.useState('trust');
  const tabs = [
    { id: 'trust',   l: 'Trust Matrix' },
    { id: 'servers', l: 'Server Map' },
    { id: 'keys',    l: 'API Keys' },
    { id: 'health',  l: 'System Health' },
  ];
  return (
    <AppChrome activePage="settings" title="Settings · Config" subtitle="CITY RULES · KASATRIYA COUNCIL">
      <div style={{ display: 'flex', gap: 2, marginBottom: 16, borderBottom: '1px solid var(--line)' }}>
        {tabs.map((t) => (
          <div key={t.id} onClick={() => setTab(t.id)} style={{
            padding: '8px 16px', cursor: 'pointer', fontSize: 12, fontWeight: tab === t.id ? 600 : 400,
            color: tab === t.id ? 'var(--gold)' : 'var(--text-dim)',
            borderBottom: tab === t.id ? '2px solid var(--gold)' : '2px solid transparent',
            marginBottom: -1,
          }}>{t.l}</div>
        ))}
      </div>

      <div style={{ flex: 1, overflow: 'auto' }}>
        {tab === 'trust' && (
          <div>
            <div style={{ fontSize: 11, color: 'var(--text-dim)', marginBottom: 14, maxWidth: 620, lineHeight: 1.5 }}>
              Permissions are earned through the Dharma path. Each bhikkhu begins as Puthujjana and ascends by demonstrating skill, reliability, and restraint. Legend: <span style={{ color: 'var(--online)' }}>✓ auto</span> · <span style={{ color: 'var(--amber)' }}>? approval</span> · <span style={{ color: 'var(--danger)' }}>— denied</span>.
            </div>
            <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 3, overflow: 'hidden' }}>
              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 11 }}>
                <thead>
                  <tr>
                    <th style={{ textAlign: 'left', padding: '10px 14px', fontWeight: 600, color: 'var(--text-dim)', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: 1.5, borderBottom: '1px solid var(--line)', width: 230 }}>TRUST LEVEL</th>
                    {PERMS.map((p) => (
                      <th key={p} style={{ padding: '10px 8px', fontWeight: 600, color: 'var(--text-dim)', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: 0.5, borderBottom: '1px solid var(--line)', textAlign: 'center' }}>{p.toUpperCase()}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {TT7.map((t, ti) => (
                    <tr key={t.level} style={{ borderBottom: ti < TT7.length - 1 ? '1px solid var(--line)' : 'none' }}>
                      <td style={{ padding: '12px 14px' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                          <DharmaStars level={t.level} size={8} />
                          <div>
                            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--gold)' }}>{t.name}</div>
                            <div style={{ fontSize: 10, color: 'var(--text-dim)' }}>L{t.level} · {t.meaning}</div>
                          </div>
                        </div>
                      </td>
                      {MATRIX[ti].map((val, pi) => {
                        const c = CELL[val];
                        return (
                          <td key={pi} style={{ textAlign: 'center' }}>
                            <div style={{ display: 'inline-flex', width: 30, height: 24, alignItems: 'center', justifyContent: 'center', background: c.bg, color: c.c, fontWeight: 700, borderRadius: 2, fontFamily: 'var(--mono)', fontSize: 12 }}>{c.l}</div>
                          </td>
                        );
                      })}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {tab === 'servers' && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
            {SS7.map((s) => (
              <div key={s.id} style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 3, padding: 16 }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 8 }}>
                  <div>
                    <div style={{ fontSize: 16, fontFamily: 'var(--thai)', color: 'var(--gold)', fontWeight: 600 }}>{s.thai}</div>
                    <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>{s.eng} · server-{s.id}</div>
                  </div>
                  <StatusPill status={s.status} />
                </div>
                <div style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--mono)', margin: '6px 0 14px' }}>
                  {s.role} · <span style={{ color: 'var(--text)' }}>@{s.account}</span>
                </div>
                {[
                  ['CPU', s.cpu, 'var(--info)'],
                  ['RAM', s.ram, 'var(--gold)'],
                  s.gpu != null && ['GPU', s.gpu, 'var(--danger)'],
                ].filter(Boolean).map(([l, v, c]) => (
                  <div key={l} style={{ marginBottom: 8 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, fontFamily: 'var(--mono)', marginBottom: 3 }}>
                      <span style={{ color: 'var(--text-dim)' }}>{l}</span><span style={{ color: 'var(--text)' }}>{v}%</span>
                    </div>
                    <div style={{ height: 3, background: 'var(--surface-lo)', borderRadius: 1, overflow: 'hidden' }}>
                      <div style={{ height: '100%', width: `${v}%`, background: c }} />
                    </div>
                  </div>
                ))}
              </div>
            ))}
          </div>
        )}

        {tab === 'keys' && (
          <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 3 }}>
            {[
              { svc: 'Anthropic · Claude',  k: 'sk-ant-···················1m0w', rot: '2d ago', spend: '$184.20 / mo' },
              { svc: 'Google · Gemini',     k: 'AIza···················Fn3k',     rot: '5d ago', spend: '$42.10 / mo' },
              { svc: 'Telegram Bot API',    k: '7382····················iRz8',    rot: '1w ago', spend: 'free' },
              { svc: 'Ollama (self-host)',  k: '—',                                rot: 'n/a',    spend: 'free' },
              { svc: 'MinIO S3',            k: 'AKIA···················QPL',      rot: '2w ago', spend: '$8.00 / mo' },
            ].map((k, i, arr) => (
              <div key={i} style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 16, borderBottom: i < arr.length - 1 ? '1px solid var(--line)' : 'none' }}>
                <div style={{ width: 180 }}>
                  <div style={{ fontSize: 12, fontWeight: 600 }}>{k.svc}</div>
                  <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--mono)' }}>rotated {k.rot}</div>
                </div>
                <div style={{ flex: 1, fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--mono)' }}>{k.k}</div>
                <div style={{ fontSize: 11, color: 'var(--gold)', fontFamily: 'var(--mono)' }}>{k.spend}</div>
                <button style={{ padding: '4px 10px', fontSize: 10, fontFamily: 'var(--mono)', background: 'transparent', border: '1px solid var(--line)', color: 'var(--text-dim)', borderRadius: 2, cursor: 'pointer' }}>ROTATE</button>
              </div>
            ))}
          </div>
        )}

        {tab === 'health' && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 3, padding: 16 }}>
              <div style={{ fontSize: 10, letterSpacing: 2, fontFamily: 'var(--mono)', color: 'var(--text-dim)', marginBottom: 10 }}>OVERALL</div>
              <div style={{ fontSize: 36, fontWeight: 600, color: 'var(--online)' }}>Healthy</div>
              <div style={{ fontSize: 12, color: 'var(--text-dim)', marginTop: 4 }}>33 of 35 bhikkhus online · 2 resting</div>
              <div style={{ display: 'flex', gap: 2, marginTop: 20, height: 40 }}>
                {Array.from({ length: 60 }).map((_, i) => {
                  const bad = i === 17 || i === 42;
                  return <div key={i} style={{ flex: 1, background: bad ? 'var(--danger)' : 'var(--online)', opacity: 0.6, borderRadius: 1 }} />;
                })}
              </div>
              <div style={{ fontSize: 9, color: 'var(--text-faint)', fontFamily: 'var(--mono)', marginTop: 4, display: 'flex', justifyContent: 'space-between' }}>
                <span>60 min ago</span><span>2 incidents recovered</span>
              </div>
            </div>
            <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 3, padding: 16 }}>
              <div style={{ fontSize: 10, letterSpacing: 2, fontFamily: 'var(--mono)', color: 'var(--text-dim)', marginBottom: 10 }}>TREASURY · TODAY</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <div style={{ fontSize: 32, fontWeight: 600, color: 'var(--gold)' }}>$47.12</div>
                <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>of $80 daily budget</div>
              </div>
              <div style={{ height: 4, background: 'var(--surface-lo)', borderRadius: 2, overflow: 'hidden', marginTop: 10 }}>
                <div style={{ height: '100%', width: '58%', background: 'var(--gold)' }} />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginTop: 16 }}>
                {[['Claude', '$38.20'], ['Gemini', '$3.92'], ['Infra', '$5.00']].map(([l, v]) => (
                  <div key={l}>
                    <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--mono)' }}>{l}</div>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ gridColumn: 'span 2', background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 3, padding: 16 }}>
              <div style={{ fontSize: 10, letterSpacing: 2, fontFamily: 'var(--mono)', color: 'var(--text-dim)', marginBottom: 10 }}>RECENT EVENTS</div>
              {[
                ['22:18', 'ok', 'Arakkhaka fixed redis pool exhaustion on nakhara-ready'],
                ['21:42', 'warn', 'GPU usage on nakhara-ai above 90% for 8min'],
                ['20:03', 'ok', 'Weekly key rotation complete (5 services · 0 downtime)'],
                ['18:12', 'info', 'Rahu ingested 48 AI news sources · 312 new articles'],
              ].map(([ts, sev, text], i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '6px 0', fontSize: 12, borderBottom: i < 3 ? '1px solid var(--line)' : 'none' }}>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--text-dim)', width: 40 }}>{ts}</span>
                  <span style={{ color: sev === 'ok' ? 'var(--online)' : sev === 'warn' ? 'var(--amber)' : 'var(--info)', fontSize: 10, fontFamily: 'var(--mono)', letterSpacing: 1, width: 50 }}>{sev.toUpperCase()}</span>
                  <span style={{ flex: 1 }}>{text}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </AppChrome>
  );
}

window.Artboard_Settings = Artboard_Settings;