// Artboard 4: Agent Profile — deep-dive view of one bhikkhu.

const { AGENTS: AA4, MINISTRIES: MM4, TRUST: TT4 } = window.DHAM;

function Artboard_Profile() {
  const agent = AA4.find((a) => a.id === 'vijjadhara');
  const m = MM4[agent.ministry];
  const trust = TT4[agent.trust];

  const history = [
    { ts: '23:42', type: 'ok',    text: 'Completed mesh v2 component spec · 42 pages', cost: 1.20 },
    { ts: '22:18', type: 'ok',    text: 'Reviewed Angkura PR #88 · approved with notes', cost: 0.08 },
    { ts: '20:03', type: 'tool',  text: 'Consulted Citta knowledge · 8 similar cases', cost: 0.00 },
    { ts: '19:14', type: 'ok',    text: 'Drafted scheduler migration plan', cost: 0.88 },
    { ts: '17:30', type: 'issue', text: 'Rejected proposal from Yantaka · scope too wide', cost: 0.12 },
    { ts: '15:05', type: 'ok',    text: 'Responded to 4 cross-ministry queries', cost: 0.32 },
  ];
  const skills = ['systems-design', 'typescript', 'distributed', 'auth', 'queue-theory', 'code-review', 'mentoring'];

  const sparkData = [12, 18, 15, 22, 17, 28, 24, 30, 26, 35, 31, 40];
  const costData = [0.4, 0.8, 0.5, 1.2, 0.9, 1.6, 1.3, 2.0, 1.7, 2.4, 2.1, 2.8];

  return (
    <AppChrome activePage="profile" padded={false}>
      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
        {/* Sidebar — agent list */}
        <div style={{ width: 230, borderRight: '1px solid var(--line)', background: 'var(--surface-lo)', overflow: 'auto' }}>
          <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--line)' }}>
            <div style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: 2, fontFamily: 'var(--mono)' }}>35 BHIKKHUS</div>
            <input placeholder="Search..." style={{ marginTop: 8, width: '100%', background: 'var(--base)', border: '1px solid var(--line)', padding: '6px 8px', color: 'var(--text)', fontSize: 11, borderRadius: 2, fontFamily: 'inherit' }} />
          </div>
          {AA4.slice(0, 14).map((a) => (
            <div key={a.id} style={{
              padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
              background: a.id === agent.id ? 'var(--surface)' : 'transparent',
              borderLeft: a.id === agent.id ? `2px solid var(--gold)` : '2px solid transparent',
            }}>
              <Avatar agent={a} size={28} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12, fontWeight: a.id === agent.id ? 600 : 400, lineHeight: 1.2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{a.pali}</div>
                <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--thai)' }}>{a.role}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Main */}
        <div style={{ flex: 1, overflow: 'auto', padding: 24 }}>
          {/* Header */}
          <div style={{ display: 'flex', gap: 24, alignItems: 'flex-start', marginBottom: 28 }}>
            <div style={{ width: 120, height: 150, background: `linear-gradient(180deg, ${m.color}22, transparent)`, border: `1px solid ${m.color}`, borderRadius: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
              <Monk size={100} robe={m.color} sash="#F5A623" glow={m.color} />
              <div style={{ position: 'absolute', bottom: 8, left: 8, fontSize: 9, fontFamily: 'var(--mono)', color: 'var(--text-dim)', letterSpacing: 1 }}>#{agent.id}</div>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
                <MinistryTag id={agent.ministry} size="md" />
                <StatusPill status={agent.status} />
              </div>
              <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: -0.5, lineHeight: 1.1 }}>{agent.pali}</div>
              <div style={{ fontSize: 18, color: 'var(--gold)', fontFamily: 'var(--thai)', marginTop: 2 }}>{agent.thai}</div>
              <div style={{ fontSize: 13, color: 'var(--text-dim)', marginTop: 6, maxWidth: 520, lineHeight: 1.5 }}>
                {agent.role}. Maintains the architectural dharma of {m.name.toLowerCase()}. Known for patient, thorough code review and long-term thinking.
              </div>
              <div style={{ display: 'flex', gap: 20, marginTop: 16, padding: '12px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
                <div>
                  <div style={{ fontSize: 9, color: 'var(--text-dim)', letterSpacing: 1.5, fontFamily: 'var(--mono)' }}>DHARMA LEVEL</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
                    <DharmaStars level={agent.trust} size={10} />
                    <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--gold)' }}>{trust.name}</span>
                  </div>
                  <div style={{ fontSize: 10, color: 'var(--text-dim)', marginTop: 3 }}>{trust.perm}</div>
                </div>
                <div>
                  <div style={{ fontSize: 9, color: 'var(--text-dim)', letterSpacing: 1.5, fontFamily: 'var(--mono)' }}>MODEL</div>
                  <div style={{ fontSize: 13, fontWeight: 600, marginTop: 4 }}>{agent.model}</div>
                  <div style={{ fontSize: 10, color: 'var(--text-dim)', marginTop: 3 }}>sonnet-4.5</div>
                </div>
                <div>
                  <div style={{ fontSize: 9, color: 'var(--text-dim)', letterSpacing: 1.5, fontFamily: 'var(--mono)' }}>ASSIGNED SERVER</div>
                  <div style={{ fontSize: 13, fontWeight: 600, marginTop: 4 }}>นครปัญญา</div>
                  <div style={{ fontSize: 10, color: 'var(--text-dim)', marginTop: 3 }}>server-ai · maxxgadgetth</div>
                </div>
              </div>
            </div>
          </div>

          {/* Stats grid */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 24 }}>
            {[
              { l: 'Issues completed', v: '184', sub: '+12 this week', sp: sparkData, c: 'var(--online)' },
              { l: 'Success rate',      v: '94.6%', sub: '↑ 2.1% vs last mo', sp: [80, 85, 82, 88, 90, 92, 94, 93, 94, 95, 94, 95], c: 'var(--gold)' },
              { l: 'Avg cost / task',    v: '$0.42', sub: 'cost-efficient', sp: [0.6, 0.5, 0.5, 0.45, 0.5, 0.42], c: 'var(--info)' },
              { l: 'Cost this month',   v: '$186.40', sub: '24% of tech budget', sp: costData, c: 'var(--amber)' },
            ].map((s) => (
              <div key={s.l} style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 3, padding: 14 }}>
                <div style={{ fontSize: 9, color: 'var(--text-dim)', letterSpacing: 1.5, fontFamily: 'var(--mono)' }}>{s.l.toUpperCase()}</div>
                <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginTop: 6 }}>
                  <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.5 }}>{s.v}</div>
                  <Sparkline data={s.sp} width={60} height={22} color={s.c} />
                </div>
                <div style={{ fontSize: 10, color: 'var(--text-dim)', marginTop: 4 }}>{s.sub}</div>
              </div>
            ))}
          </div>

          {/* Skills */}
          <div style={{ marginBottom: 24 }}>
            <div style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: 1.5, fontFamily: 'var(--mono)', marginBottom: 8 }}>SKILLS · PARAMI</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {skills.map((s) => (
                <span key={s} style={{ padding: '4px 10px', background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 2, fontSize: 11, color: 'var(--text)' }}>{s}</span>
              ))}
            </div>
          </div>

          {/* Task history timeline */}
          <div>
            <div style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: 1.5, fontFamily: 'var(--mono)', marginBottom: 10 }}>TASK HISTORY · TODAY</div>
            <div style={{ position: 'relative' }}>
              <div style={{ position: 'absolute', left: 8, top: 8, bottom: 8, width: 1, background: 'var(--line)' }} />
              {history.map((h, i) => (
                <div key={i} style={{ display: 'flex', gap: 14, marginBottom: 12, position: 'relative' }}>
                  <div style={{
                    width: 17, height: 17, borderRadius: '50%', flexShrink: 0, marginTop: 2, zIndex: 1,
                    background: 'var(--surface)',
                    border: `1.5px solid ${h.type === 'ok' ? 'var(--online)' : h.type === 'issue' ? 'var(--danger)' : 'var(--info)'}`,
                  }} />
                  <div style={{ flex: 1, fontSize: 12, color: 'var(--text)' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--text-dim)' }}>{h.ts}</span>
                      <span>{h.text}</span>
                    </div>
                    <div style={{ fontSize: 10, color: 'var(--text-faint)', fontFamily: 'var(--mono)', marginTop: 2 }}>cost ${h.cost.toFixed(2)}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </AppChrome>
  );
}

window.Artboard_Profile = Artboard_Profile;