// Artboard 5: Agent Brain — Citta · Knowledge graph + solution cards.

const { AGENTS: AA5, MINISTRIES: MM5 } = window.DHAM;

const SOLUTIONS = [
  { id: 1, title: 'Redis pool exhaustion under burst load',            by: 'arakkhaka',  tags: ['redis', 'ops', 'pool'],       problem: 'Pool limit of 20 hit during evening burst · 500ms+ waits', result: '+42% p99 latency fix', date: '2d' },
  { id: 2, title: 'Claude prompt routing for cost tier selection',     by: 'vijjadhara', tags: ['llm', 'routing', 'cost'],     problem: 'Haiku vs Sonnet decisions made ad-hoc · 2x cost overrun', result: '−$48/day', date: '4d' },
  { id: 3, title: 'Proxmox snapshot strategy for dev envs',            by: 'nidhi',      tags: ['proxmox', 'vms'],             problem: 'Restore times for clean dev envs were 12min average',     result: '12min → 40s',  date: '5d' },
  { id: 4, title: 'Kanban drag-drop jitter at scale',                  by: 'angkura',    tags: ['ui', 'react', 'perf'],        problem: 'With 200+ cards, drag preview stuttered below 30fps',      result: 'stable 60fps', date: '1w' },
  { id: 5, title: 'Telegram rate-limit safe fan-out',                  by: 'sasanaka',   tags: ['telegram', 'comms'],          problem: 'Broadcasting to 42 groups hit per-minute cap',            result: 'queue + backoff', date: '1w' },
  { id: 6, title: 'Key rotation without downtime',                     by: 'kuncika',    tags: ['security', 'secrets'],        problem: 'Weekly rotation required 3 services restarted',           result: 'zero-downtime', date: '2w' },
];

// Knowledge graph nodes (polar layout)
const GRAPH_NODES = [
  { id: 'redis', l: 'redis',       x: 0.65, y: 0.3,  r: 18, group: 'ops' },
  { id: 'llm',   l: 'llm/routing', x: 0.3,  y: 0.35, r: 22, group: 'tech' },
  { id: 'vms',   l: 'vms/proxmox', x: 0.5,  y: 0.2,  r: 14, group: 'ops' },
  { id: 'ui',    l: 'ui/react',    x: 0.22, y: 0.62, r: 16, group: 'tech' },
  { id: 'sec',   l: 'security',    x: 0.72, y: 0.65, r: 20, group: 'def' },
  { id: 'comms', l: 'comms',       x: 0.45, y: 0.72, r: 14, group: 'comm' },
  { id: 'perf',  l: 'perf',        x: 0.5,  y: 0.48, r: 26, group: 'tech' },
  { id: 'data',  l: 'data',        x: 0.15, y: 0.3,  r: 12, group: 'data' },
  { id: 'test',  l: 'testing',     x: 0.84, y: 0.42, r: 12, group: 'ops' },
];
const GRAPH_EDGES = [
  ['perf', 'redis'], ['perf', 'llm'], ['perf', 'ui'], ['perf', 'vms'],
  ['llm', 'data'], ['ui', 'comms'], ['sec', 'perf'], ['test', 'redis'], ['vms', 'test'],
];
const GROUP_C = { ops: '#60A5FA', tech: '#D4A843', def: '#EF6767', comm: '#F5A623', data: '#22D3EE' };

function Artboard_Brain() {
  const [sel, setSel] = React.useState(null);
  return (
    <AppChrome activePage="brain" title="Citta · Collective Brain" subtitle="847 SOLUTIONS · 6 MINISTRIES · GROWING">
      <div style={{ display: 'flex', gap: 16, flex: 1, overflow: 'hidden' }}>
        {/* Left: search + solutions */}
        <div style={{ width: 430, display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
            <input placeholder="Search the collective mind..." style={{ flex: 1, background: 'var(--surface)', border: '1px solid var(--line)', padding: '8px 12px', color: 'var(--text)', fontSize: 12, borderRadius: 2, fontFamily: 'inherit' }} />
            <button style={{ padding: '8px 14px', background: 'var(--gold)', color: 'var(--base)', border: 'none', borderRadius: 2, fontWeight: 600, fontSize: 11, letterSpacing: 0.5, cursor: 'pointer', fontFamily: 'inherit' }}>SEEK</button>
          </div>
          <div style={{ display: 'flex', gap: 5, marginBottom: 12, fontSize: 10, fontFamily: 'var(--mono)', flexWrap: 'wrap' }}>
            {['ALL', 'OPS', 'LLM', 'UI', 'SECURITY', 'PERF'].map((t, i) => (
              <span key={t} style={{ padding: '3px 8px', borderRadius: 2, cursor: 'pointer', background: i === 0 ? 'var(--gold)' : 'transparent', color: i === 0 ? 'var(--base)' : 'var(--text-dim)', border: `1px solid ${i === 0 ? 'var(--gold)' : 'var(--line)'}`, fontWeight: 600 }}>{t}</span>
            ))}
          </div>
          <div style={{ overflow: 'auto', flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {SOLUTIONS.map((s) => {
              const agent = AA5.find((a) => a.id === s.by);
              return (
                <div key={s.id} onClick={() => setSel(s.id)} style={{
                  background: sel === s.id ? 'var(--surface-hi)' : 'var(--surface)',
                  border: `1px solid ${sel === s.id ? 'var(--gold)' : 'var(--line)'}`,
                  borderRadius: 3, padding: 12, cursor: 'pointer',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                    {agent && <Avatar agent={agent} size={18} showStatus={false} />}
                    <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-dim)' }}>{agent?.pali}</span>
                    <div style={{ flex: 1 }} />
                    <span style={{ fontSize: 10, color: 'var(--text-faint)', fontFamily: 'var(--mono)' }}>{s.date} ago</span>
                  </div>
                  <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 8, lineHeight: 1.3 }}>{s.title}</div>
                  <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                    <div style={{ display: 'flex', gap: 4 }}>
                      {s.tags.map((t) => <span key={t} style={{ fontSize: 9, fontFamily: 'var(--mono)', padding: '2px 6px', background: 'var(--base)', color: 'var(--text-dim)', borderRadius: 2 }}>#{t}</span>)}
                    </div>
                    <div style={{ flex: 1 }} />
                    <span style={{ fontSize: 10, color: 'var(--online)', fontFamily: 'var(--mono)', fontWeight: 600 }}>→ {s.result}</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Right: knowledge graph */}
        <div style={{ flex: 1, background: 'var(--surface-lo)', border: '1px solid var(--line)', borderRadius: 3, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: 14, left: 16, fontSize: 10, letterSpacing: 2, fontFamily: 'var(--mono)', color: 'var(--text-dim)' }}>KNOWLEDGE GRAPH</div>
          <div style={{ position: 'absolute', top: 14, right: 16, fontSize: 10, fontFamily: 'var(--mono)', color: 'var(--text-dim)' }}>9 concepts · 9 links</div>
          <svg width="100%" height="100%" viewBox="0 0 600 500" preserveAspectRatio="xMidYMid meet">
            {/* edges */}
            {GRAPH_EDGES.map(([a, b], i) => {
              const na = GRAPH_NODES.find((n) => n.id === a);
              const nb = GRAPH_NODES.find((n) => n.id === b);
              return <line key={i} x1={na.x * 600} y1={na.y * 500} x2={nb.x * 600} y2={nb.y * 500} stroke="var(--line-strong)" strokeWidth="1" />;
            })}
            {/* nodes */}
            {GRAPH_NODES.map((n) => (
              <g key={n.id}>
                <circle cx={n.x * 600} cy={n.y * 500} r={n.r + 6} fill={GROUP_C[n.group]} opacity="0.15" />
                <circle cx={n.x * 600} cy={n.y * 500} r={n.r} fill={GROUP_C[n.group]} opacity="0.85" stroke="var(--base)" strokeWidth="2" />
                <text x={n.x * 600} y={n.y * 500 + n.r + 14} textAnchor="middle" fontSize="11" fill="var(--text)" fontFamily="var(--mono)">{n.l}</text>
              </g>
            ))}
          </svg>
          {/* learning timeline at bottom */}
          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 14, borderTop: '1px solid var(--line)', background: 'var(--surface)' }}>
            <div style={{ fontSize: 10, letterSpacing: 2, fontFamily: 'var(--mono)', color: 'var(--text-dim)', marginBottom: 6 }}>LEARNING · LAST 30 DAYS</div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 40 }}>
              {[3, 5, 2, 4, 6, 3, 5, 8, 6, 4, 7, 9, 5, 6, 8, 10, 7, 9, 11, 8, 6, 9, 12, 8, 10, 13, 9, 11, 14, 10].map((v, i) => (
                <div key={i} style={{ flex: 1, height: `${v * 7}%`, background: i > 25 ? 'var(--gold)' : 'var(--info)', opacity: 0.7, borderRadius: '1px 1px 0 0' }} />
              ))}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 9, color: 'var(--text-faint)', fontFamily: 'var(--mono)', marginTop: 4 }}>
              <span>30 days ago</span><span>today · 10 new</span>
            </div>
          </div>
        </div>
      </div>
    </AppChrome>
  );
}

window.Artboard_Brain = Artboard_Brain;