// Budget & P&L view
(function() {
  const { CatPill } = window.UI;

  function Budget() {
    const totalSpent = DATA.budgets.reduce((s,b)=>s+b.spent,0);
    const totalLimit = DATA.budgets.reduce((s,b)=>s+b.limit,0);

    return (
      <div className="page">
        <div className="page-head">
          <div>
            <div className="crumb">workspace<span className="sep">›</span>budget<span className="sep">›</span>april 2026</div>
            <h1 className="display">Budget <span style={{ color: 'var(--accent)', fontStyle: 'italic' }}>&</span> P&amp;L</h1>
            <div className="mono" style={{ fontSize: 11, color: 'var(--fg-2)', marginTop: 6, letterSpacing: '0.1em' }}>
              cycle · Apr 1 → Apr 30 · 20/30 days · {Math.round(totalSpent/totalLimit*100)}% of budget spent
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn">Prev month</button>
            <button className="btn">Next month</button>
            <button className="btn primary">Close Books</button>
          </div>
        </div>

        <div className="g-4">
          <div className="metric">
            <span className="label">Revenue · MTD</span>
            <span className="value">$241<span style={{ color: 'var(--fg-3)', fontSize: 18 }}>,880</span></span>
            <div className="sub"><span style={{ color: 'var(--pos)' }}>+12.4%</span><span style={{ color: 'var(--fg-3)' }}>vs prev</span></div>
          </div>
          <div className="metric">
            <span className="label">Expenses · MTD</span>
            <span className="value">${(totalSpent/1000).toFixed(1)}<span style={{ color: 'var(--fg-3)', fontSize: 18 }}>k</span></span>
            <div className="sub"><span style={{ color: 'var(--neg)' }}>+4.1%</span><span style={{ color: 'var(--fg-3)' }}>vs budget</span></div>
          </div>
          <div className="metric">
            <span className="label">Gross Margin</span>
            <span className="value">57.2<span style={{ color: 'var(--fg-3)', fontSize: 18 }}>%</span></span>
            <div className="sub"><span style={{ color: 'var(--pos)' }}>+1.8pp</span><span style={{ color: 'var(--fg-3)' }}>YoY</span></div>
          </div>
          <div className="metric">
            <span className="label">Tax Reserve</span>
            <span className="value">$64<span style={{ color: 'var(--fg-3)', fontSize: 18 }}>,820</span></span>
            <div className="sub"><span style={{ color: 'var(--pos)' }}>on track</span><span style={{ color: 'var(--fg-3)' }}>30% rev</span></div>
          </div>
        </div>

        <div style={{ height: 'var(--gap)' }} />

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--gap)' }}>
          <div className="panel">
            <div className="panel-head">
              <span className="panel-title">Budget · by Category</span>
              <span className="mono" style={{ fontSize: 10, color: 'var(--fg-3)' }}>${(totalSpent/1000).toFixed(0)}k / ${(totalLimit/1000).toFixed(0)}k</span>
            </div>
            <div style={{ padding: '6px 0' }}>
              {DATA.budgets.map(b => {
                const c = DATA.categories[b.cat];
                const pct = b.spent / b.limit;
                const over = pct > 1;
                return (
                  <div key={b.cat} style={{ padding: '10px var(--pad-x)', borderBottom: '1px solid var(--line)' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <span style={{ width: 8, height: 8, background: c.color, display: 'inline-block' }} />
                        <span style={{ fontSize: 13 }}>{c.label}</span>
                      </div>
                      <div style={{ display: 'flex', gap: 14, fontFamily: 'var(--font-mono)', fontSize: 11, alignItems: 'baseline' }}>
                        <span style={{ color: 'var(--fg-0)' }}>${b.spent.toLocaleString()}</span>
                        <span style={{ color: 'var(--fg-3)' }}>/ ${b.limit.toLocaleString()}</span>
                        <span style={{ color: over ? 'var(--neg)' : 'var(--fg-2)', width: 40, textAlign: 'right' }}>{Math.round(pct*100)}%</span>
                      </div>
                    </div>
                    <div style={{ height: 6, background: 'var(--bg-2)', border: '1px solid var(--line)', position: 'relative' }}>
                      <div style={{ position: 'absolute', inset: 0, width: Math.min(100, pct*100)+'%', background: c.color, opacity: 0.8 }} />
                      {over && <div style={{ position: 'absolute', top: 0, bottom: 0, left: '100%', width: 2, background: 'var(--neg)' }} />}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--gap)' }}>
            <div className="panel">
              <div className="panel-head"><span className="panel-title">P&amp;L · April (condensed)</span></div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, padding: 'var(--pad-x)', lineHeight: 2 }}>
                {[
                  ['Revenue',          '$241,880', 'var(--pos)', false],
                  ['  · Subscription', '$198,400', 'var(--fg-1)', false],
                  ['  · Services',     ' $43,480', 'var(--fg-1)', false],
                  ['COGS',             '−$103,420', 'var(--neg)', false],
                  ['Gross Profit',     '$138,460', 'var(--pos)', true],
                  ['OpEx',             '−$84,980',  'var(--neg)', false],
                  ['  · Payroll',      '−$54,200', 'var(--fg-1)', false],
                  ['  · Infra',        '−$18,480', 'var(--fg-1)', false],
                  ['  · SaaS',         ' −$1,790', 'var(--fg-1)', false],
                  ['  · Other',        '−$10,510', 'var(--fg-1)', false],
                  ['Operating Income', ' $53,480', 'var(--pos)', true],
                  ['Tax Accrual (30%)', '−$16,044', 'var(--neg)', false],
                  ['Net Income',        ' $37,436', 'var(--pos)', true],
                ].map((r, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', color: r[2], fontWeight: r[3] ? 600 : 400, borderTop: r[3] ? '1px solid var(--line)' : 'none', paddingTop: r[3] ? 4 : 0 }}>
                    <span style={{ color: r[3] ? 'var(--fg-0)' : (r[0].startsWith('  ') ? 'var(--fg-2)' : 'var(--fg-1)') }}>{r[0]}</span>
                    <span style={{ color: r[2] }}>{r[1]}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="panel">
              <div className="panel-head"><span className="panel-title">Anomalies · auto-detected</span></div>
              <div style={{ padding: '4px 0' }}>
                {[
                  ['AWS', '+42%', 'spend spike vs 90d avg · $12.4k', 'var(--cat-amber)'],
                  ['Ace Hotel NY', 'new', 'merchant never seen before', 'var(--cat-cyan)'],
                  ['Datadog', '3x', 'triple billing — likely annual renewal', 'var(--cat-violet)'],
                ].map((a, i) => (
                  <div key={i} style={{ padding: '8px var(--pad-x)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: i ? '1px solid var(--line)' : 'none' }}>
                    <div>
                      <div style={{ fontSize: 12 }}>{a[0]} <span className="mono" style={{ color: a[3], fontSize: 10, marginLeft: 6 }}>{a[1]}</span></div>
                      <div className="mono" style={{ fontSize: 10, color: 'var(--fg-3)' }}>{a[2]}</div>
                    </div>
                    <button className="btn">Review</button>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
  window.BudgetView = Budget;
})();