/* DEV Cost Monitor — the flagship. 21st sub-agente lives here. */

const DevCosts = ({ onOpenChat }) => {
  const providers = [
    { name: 'Anthropic', color: 'oklch(0.72 0.14 20)', today: 48.20, pct: 71, icon: 'sparkle' },
    { name: 'OpenAI', color: 'oklch(0.72 0.14 155)', today: 8.12, pct: 12 },
    { name: 'Voyage AI', color: 'var(--ai-500)', today: 5.88, pct: 9 },
    { name: 'fal.ai', color: 'oklch(0.70 0.15 300)', today: 2.40, pct: 4 },
    { name: 'ElevenLabs', color: 'oklch(0.70 0.14 80)', today: 1.52, pct: 2 },
    { name: 'Whisper', color: 'oklch(0.65 0.10 200)', today: 0.82, pct: 1 },
    { name: 'Hetzner', color: 'oklch(0.60 0.04 240)', today: 0.48, pct: 1 },
  ];

  const models = [
    { name: 'Opus 4.7', spend: 34.10, pct: 50, tokens: '1.2M', color: 'oklch(0.72 0.18 20)' },
    { name: 'Sonnet 4.6', spend: 22.40, pct: 33, tokens: '4.8M', color: 'var(--ai-500)' },
    { name: 'Haiku 4.5', spend: 10.92, pct: 16, tokens: '11.3M', color: 'oklch(0.72 0.14 155)' },
  ];

  const byMode = [
    { name: 'Clientes', v: 28.14, pct: 42 },
    { name: 'Colaboradores', v: 22.08, pct: 33 },
    { name: 'DEV', v: 10.12, pct: 15 },
    { name: 'Board', v: 7.08, pct: 10 },
  ];
  const byBrand = [
    { name: 'Mimaki', v: 22.10, pct: 33 },
    { name: 'BIOND', v: 14.88, pct: 22 },
    { name: 'Decal', v: 11.42, pct: 17 },
    { name: 'Sensek', v: 8.80, pct: 13 },
    { name: 'AllDecor', v: 6.72, pct: 10 },
    { name: 'Digidelta', v: 3.50, pct: 5 },
  ];

  return (
    <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>DEV · COSTS · 21st SUB-AGENTE · LANGFUSE + PROVIDER APIs</div>
          <h2 className="font-display" style={{ margin: '4px 0 0', fontSize: 22, fontWeight: 600 }}>Cost Monitor</h2>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <button className="btn btn-xs">30d</button>
          <button className="btn btn-xs">90d</button>
          <button className="btn btn-xs">MTD</button>
          <button className="btn btn-xs btn-ai" onClick={onOpenChat}><Icon name="sparkle" size={11} />Ask Digi</button>
        </div>
      </div>

      {/* Top strip: today vs yesterday vs 30d avg */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 14 }}>
        <div className="card" style={{ padding: 18, position: 'relative', overflow: 'hidden' }}>
          <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Hoje · 23 Abr</div>
          <div className="font-display" style={{ fontSize: 44, fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1, marginTop: 8 }}>$67.42</div>
          <div style={{ display: 'flex', gap: 16, marginTop: 10, fontSize: 11 }}>
            <div><span style={{ color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>vs ontem</span><br /><span style={{ color: 'var(--danger)', fontFamily: 'var(--font-mono)' }}>+$13.24 · +24%</span></div>
            <div><span style={{ color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>vs 30d avg</span><br /><span style={{ color: 'var(--warning)', fontFamily: 'var(--font-mono)' }}>+$12.60 · +23%</span></div>
            <div><span style={{ color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>MTD</span><br /><span style={{ fontFamily: 'var(--font-mono)' }}>$1,284.60</span></div>
          </div>
        </div>
        <div className="card kpi" style={{ padding: 14 }}>
          <div className="kpi-label">Ontem</div>
          <div className="kpi-value" style={{ fontSize: 24 }}>$54.18</div>
          <Spark data={[48, 52, 49, 55, 58, 54]} width={120} height={24} />
        </div>
        <div className="card kpi" style={{ padding: 14 }}>
          <div className="kpi-label">30d avg</div>
          <div className="kpi-value" style={{ fontSize: 24 }}>$54.82</div>
          <div className="font-mono" style={{ fontSize: 10, color: 'var(--text-dim)', marginTop: 4 }}>σ $8.12</div>
        </div>
        <div className="card kpi" style={{ padding: 14 }}>
          <div className="kpi-label">Budget Abril</div>
          <div className="kpi-value" style={{ fontSize: 24 }}>$1.8k <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>/ $2.5k</span></div>
          <div style={{ height: 4, background: 'var(--bg-sunken)', borderRadius: 2, overflow: 'hidden', marginTop: 8 }}>
            <div style={{ width: '72%', height: '100%', background: 'var(--warning)' }} />
          </div>
          <div className="font-mono" style={{ fontSize: 10, color: 'var(--text-dim)', marginTop: 4 }}>72% · 7d left</div>
        </div>
      </div>

      {/* Digi brief */}
      <div className="ai-surface" style={{ padding: 14, borderRadius: 8, display: 'flex', gap: 12, alignItems: 'flex-start' }}>
        <div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--ai-500)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
          <Icon name="sparkle" size={14} style={{ color: '#fff' }} />
        </div>
        <div style={{ flex: 1, fontSize: 12.5, lineHeight: 1.55 }}>
          Estás <strong>+23% acima</strong> da média 30d. Opus em Sales disparou — 3 sessões estratégicas longas hoje (Olimpo, Meta Print, GráficaSul). <strong>Sem anomalia</strong>: padrão típico de pré-Q2 review. Se mantiver ritmo, fecho de Abril em <strong>$2.1k</strong> (84% budget). Nada a fazer.
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <button className="btn btn-xs btn-ai">Top 5 conversas</button>
          <button className="btn btn-xs">Forecast</button>
        </div>
      </div>

      {/* 30-day stacked chart */}
      <div className="card" style={{ padding: 0 }}>
        <PanelHeader title="Custo 30 dias" tag="stacked · por provider"
          right={<div style={{ display: 'flex', gap: 10, fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)', flexWrap: 'wrap' }}>
            {providers.slice(0, 5).map(p => <span key={p.name} style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 8, height: 8, background: p.color, borderRadius: 2 }} />{p.name}</span>)}
          </div>}
        />
        <div style={{ padding: 14 }}>
          <CostStackedChart providers={providers} />
        </div>
      </div>

      {/* By mode / brand / model */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
        <div className="card" style={{ padding: 0 }}>
          <PanelHeader title="Por modo" tag="% do custo hoje" />
          <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {byMode.map(m => (
              <div key={m.name}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 }}>
                  <span>{m.name}</span>
                  <span><span className="font-display" style={{ fontWeight: 600 }}>${m.v}</span><span className="font-mono" style={{ fontSize: 10, color: 'var(--text-dim)', marginLeft: 6 }}>{m.pct}%</span></span>
                </div>
                <div style={{ height: 4, background: 'var(--bg-sunken)', borderRadius: 2 }}><div style={{ width: `${m.pct}%`, height: '100%', background: 'var(--ai-500)', borderRadius: 2 }} /></div>
              </div>
            ))}
          </div>
        </div>
        <div className="card" style={{ padding: 0 }}>
          <PanelHeader title="Por marca" tag="% do custo hoje" />
          <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {byBrand.map(b => (
              <div key={b.name} style={{ display: 'grid', gridTemplateColumns: '90px 1fr 70px', alignItems: 'center', gap: 10, fontSize: 12 }}>
                <span style={{ fontWeight: 500 }}>{b.name}</span>
                <div style={{ height: 4, background: 'var(--bg-sunken)', borderRadius: 2 }}><div style={{ width: `${b.pct * 3}%`, maxWidth: '100%', height: '100%', background: 'var(--brand-500)', borderRadius: 2 }} /></div>
                <span style={{ textAlign: 'right' }}><span className="font-display" style={{ fontWeight: 600 }}>${b.v}</span><span className="font-mono" style={{ fontSize: 10, color: 'var(--text-dim)', marginLeft: 4 }}>{b.pct}%</span></span>
              </div>
            ))}
          </div>
        </div>
        <div className="card" style={{ padding: 0 }}>
          <PanelHeader title="Por modelo" tag="Anthropic · hoje" />
          <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {models.map(m => (
              <div key={m.name} style={{ padding: 10, border: '1px solid var(--border)', borderRadius: 6 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ width: 8, height: 8, background: m.color, borderRadius: 2 }} />
                    <span className="font-display" style={{ fontWeight: 600, fontSize: 13 }}>{m.name}</span>
                  </div>
                  <span className="font-display" style={{ fontWeight: 600 }}>${m.spend.toFixed(2)}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--text-dim)' }}>
                  <span>{m.tokens} tokens</span><span>{m.pct}% · ${(m.spend / parseFloat(m.tokens) * 1000).toFixed(2)}/M</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Top expensive + budget caps */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 14 }}>
        <div className="card" style={{ padding: 0 }}>
          <PanelHeader title="Top 5 conversas · hoje" tag="ordenado por custo" right={<button className="btn btn-xs btn-ghost">Ver em Conversations →</button>} />
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
            <thead>
              <tr style={{ background: 'var(--bg-sunken)' }}>
                {['Trace', 'User · Mode', 'Brand', 'Model', 'Turns', 'Tokens in/out', 'Cost'].map(h => (
                  <th key={h} style={{ padding: '8px 12px', textAlign: 'left', fontSize: 10, fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '0.06em', color: 'var(--text-muted)', textTransform: 'uppercase', borderBottom: '1px solid var(--border)' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                { id: 'trc_7f2a91', user: 'Ana R · Clientes', brand: 'Mimaki', model: 'Opus 4.7', turns: 18, tin: '48k', tout: '12k', cost: 4.82 },
                { id: 'trc_e841c0', user: 'Patrícia M · Colab.', brand: 'BIOND', model: 'Opus 4.7', turns: 14, tin: '41k', tout: '9.1k', cost: 3.64 },
                { id: 'trc_b912fe', user: 'FC · DEV', brand: '—', model: 'Opus 4.7', turns: 22, tin: '68k', tout: '7.2k', cost: 3.12 },
                { id: 'trc_109ab4', user: 'Rui B · SAT', brand: 'Mimaki', model: 'Sonnet 4.6', turns: 9, tin: '22k', tout: '4.8k', cost: 1.28 },
                { id: 'trc_2c8d7a', user: 'Walter N · BI', brand: 'Digidelta', model: 'Sonnet 4.6', turns: 12, tin: '31k', tout: '5.2k', cost: 1.04 },
              ].map(r => (
                <tr key={r.id} style={{ borderBottom: '1px solid var(--border)' }}>
                  <td style={{ padding: '8px 12px', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ai-500)' }}>{r.id}</td>
                  <td style={{ padding: '8px 12px' }}>{r.user}</td>
                  <td style={{ padding: '8px 12px' }}><span className="badge" style={{ fontSize: 10 }}>{r.brand}</span></td>
                  <td style={{ padding: '8px 12px', fontFamily: 'var(--font-mono)', fontSize: 11 }}>{r.model}</td>
                  <td style={{ padding: '8px 12px', fontFamily: 'var(--font-mono)', fontSize: 11 }}>{r.turns}</td>
                  <td style={{ padding: '8px 12px', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)' }}>{r.tin} / {r.tout}</td>
                  <td style={{ padding: '8px 12px', fontFamily: 'var(--font-display)', fontWeight: 600 }}>${r.cost.toFixed(2)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="card" style={{ padding: 0 }}>
          <PanelHeader title="Budget caps · marca" tag="threshold alerts" right={<button className="btn btn-xs btn-ghost"><Icon name="plus" size={11} />Novo</button>} />
          <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { brand: 'Mimaki', cap: 800, spent: 540, pct: 68 },
              { brand: 'BIOND', cap: 500, spent: 380, pct: 76 },
              { brand: 'Decal', cap: 400, spent: 290, pct: 73 },
              { brand: 'Sensek', cap: 300, spent: 128, pct: 43 },
              { brand: 'AllDecor', cap: 250, spent: 210, pct: 84, warn: true },
            ].map(b => (
              <div key={b.brand} style={{ padding: 10, border: '1px solid var(--border)', borderRadius: 6, background: b.warn ? 'color-mix(in oklch, var(--warning) 6%, transparent)' : 'transparent' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 }}>
                  <span style={{ fontWeight: 500 }}>{b.brand}</span>
                  <span className="font-mono" style={{ fontSize: 10, color: b.warn ? 'var(--warning)' : 'var(--text-dim)' }}>${b.spent} / ${b.cap}</span>
                </div>
                <div style={{ height: 4, background: 'var(--bg-sunken)', borderRadius: 2 }}>
                  <div style={{ width: `${b.pct}%`, height: '100%', background: b.warn ? 'var(--warning)' : b.pct > 60 ? 'var(--ai-500)' : 'var(--success)', borderRadius: 2 }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const CostStackedChart = ({ providers }) => {
  // 30 days of stacked data (synthetic, realistic-looking)
  const days = Array.from({ length: 30 }, (_, i) => i + 1);
  const base = [48, 8, 6, 2.4, 1.5, 0.8, 0.5];
  const data = days.map((d, i) => {
    const noise = Math.sin(i * 0.5) * 0.2 + Math.cos(i * 0.3) * 0.15;
    return base.map(b => Math.max(0.1, b * (1 + noise + (i / 30) * 0.3)));
  });
  const W = 1160, H = 200, pad = 30;
  const bw = (W - pad * 2) / days.length;
  const maxTotal = 90;
  return (
    <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ display: 'block' }} preserveAspectRatio="none">
      {[0, 20, 40, 60, 80].map(g => {
        const y = H - pad - (g / maxTotal) * (H - pad * 1.5);
        return <g key={g}>
          <line x1={pad} x2={W - pad} y1={y} y2={y} stroke="var(--border)" strokeDasharray="2 3" />
          <text x={pad - 6} y={y + 3} fontSize="9" fill="var(--text-dim)" textAnchor="end" fontFamily="var(--font-mono)">${g}</text>
        </g>;
      })}
      {data.map((stack, i) => {
        let acc = 0;
        return stack.map((v, j) => {
          const color = providers[j]?.color || 'var(--border)';
          const h = (v / maxTotal) * (H - pad * 1.5);
          const y = H - pad - acc - h;
          acc += h;
          return <rect key={`${i}-${j}`} x={pad + i * bw + 1} y={y} width={bw - 2} height={h} fill={color} />;
        });
      })}
      {[1, 7, 14, 21, 28].map(d => (
        <text key={d} x={pad + (d - 1) * bw + bw / 2} y={H - 8} fontSize="9" fill="var(--text-dim)" textAnchor="middle" fontFamily="var(--font-mono)">{d < 10 ? '0' + d : d}/04</text>
      ))}
    </svg>
  );
};

window.DevCosts = DevCosts;