/* ============================================================
   ZERO — Marketplace + Template Library. window.Screens.Marketplace
   ============================================================ */
(function () {
  const { useState } = React;
  const I = window.Icon;
  const { Card, SectionHead, Badge } = window.UI;
  const { AgentAvatar } = window.BUILD;
  const D = window.DATA;

  function Marketplace() {
    const [view, setView] = useState('agents'); // agents | templates
    const [installed, setInstalled] = useState(new Set());
    const toggle = (n) => setInstalled(s => { const x = new Set(s); x.has(n) ? x.delete(n) : x.add(n); return x; });

    return (
      <div className="page">
        {/* hero */}
        <div className="panel" style={{ padding: '20px 22px', marginBottom: 20, position: 'relative', overflow: 'hidden',
          background: 'linear-gradient(100deg, var(--violet-soft), transparent 55%), var(--bg-1)' }}>
          <div className="row between wrap gap16">
            <div className="row gap12">
              <span style={{ display: 'grid', placeItems: 'center', width: 44, height: 44, borderRadius: 12, background: 'var(--violet-soft)', color: 'var(--violet-2)' }}><I.store w={22} /></span>
              <div>
                <div className="h2">Marketplace de Agentes</div>
                <div style={{ fontSize: 12.5, color: 'var(--tx-2)', marginTop: 2 }}>Instale agentes especialistas prontos ou comece de um template de equipe.</div>
              </div>
            </div>
            <div className="row gap4" style={{ background: 'var(--bg-0)', padding: 3, borderRadius: 10, border: '1px solid var(--line)' }}>
              {[['agents', 'Agentes'], ['templates', 'Templates']].map(([id, l]) => (
                <button key={id} onClick={() => setView(id)} style={{ padding: '7px 16px', borderRadius: 7, fontSize: 12.5, fontWeight: 600, cursor: 'pointer', border: 'none',
                  background: view === id ? 'var(--bg-3)' : 'transparent', color: view === id ? 'var(--tx-0)' : 'var(--tx-2)' }}>{l}</button>
              ))}
            </div>
          </div>
        </div>

        {view === 'agents' ? (
          <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(280px,1fr))' }}>
            {D.marketplace.map(a => {
              const on = installed.has(a.name);
              return (
                <Card key={a.name} style={{ padding: 18 }}>
                  <div className="row between" style={{ marginBottom: 14 }}>
                    <AgentAvatar icon={a.icon} color={a.hue} size={46} />
                    <span className="badge" style={{ color: 'var(--amber)', background: 'var(--amber-soft)', borderColor: 'transparent' }}><I.star w={11} /> {a.rating.toString().replace('.', ',')}</span>
                  </div>
                  <div style={{ fontSize: 16, fontWeight: 800, letterSpacing: '-0.02em' }}>{a.name}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--tx-2)' }}>{a.role}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--tx-1)', lineHeight: 1.5, margin: '10px 0 14px', minHeight: 54 }}>{a.desc}</div>
                  <div className="row gap6 wrap" style={{ marginBottom: 14 }}>
                    {a.tags.map(t => <Badge key={t} soft="oklch(1 0 0 /.05)" color="var(--tx-2)">{t}</Badge>)}
                  </div>
                  <div className="row between">
                    <span className="mono" style={{ fontSize: 11, color: 'var(--tx-3)' }}>{a.installs} instalações</span>
                    <button onClick={() => toggle(a.name)} className={'btn btn-sm ' + (on ? '' : 'btn-primary')}>
                      {on ? <><I.check w={14} /> Instalado</> : <><I.download w={14} /> Instalar</>}
                    </button>
                  </div>
                </Card>
              );
            })}
          </div>
        ) : (
          <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(300px,1fr))' }}>
            {D.teamTemplates.map(t => (
              <Card key={t.name} style={{ padding: 18 }}>
                <div className="row gap10" style={{ marginBottom: 14 }}>
                  <span style={{ width: 10, height: 10, borderRadius: 3, background: t.hue }} />
                  <div className="grow"><div style={{ fontSize: 15, fontWeight: 800, letterSpacing: '-0.02em' }}>{t.name}</div></div>
                  <Badge soft="oklch(1 0 0 /.05)" color="var(--tx-2)">{t.roles.length} agentes</Badge>
                </div>
                <div style={{ fontSize: 12.5, color: 'var(--tx-1)', lineHeight: 1.5, marginBottom: 14, minHeight: 38 }}>{t.desc}</div>
                {/* mini avatar stack */}
                <div className="row" style={{ marginBottom: 16 }}>
                  {t.roles.slice(0, 6).map((r, i) => (
                    <span key={i} className="avatar" style={{ width: 30, height: 30, fontSize: 9.5, marginLeft: i ? -8 : 0,
                      background: D.agentColors[i % D.agentColors.length], border: '2px solid var(--bg-1)' }}>{r[0]}</span>
                  ))}
                </div>
                <div className="row gap6 wrap" style={{ marginBottom: 16 }}>
                  {t.roles.map((r, i) => <Badge key={i} soft="oklch(1 0 0 /.05)" color="var(--tx-2)">{r}</Badge>)}
                </div>
                <button className="btn btn-primary btn-sm" style={{ width: '100%', justifyContent: 'center' }}><I.network w={14} /> Usar template</button>
              </Card>
            ))}
          </div>
        )}
      </div>
    );
  }

  window.Screens = window.Screens || {};
  window.Screens.Marketplace = Marketplace;
})();