// budget.jsx — Buget anual asistat. Generează proiecție din istoric + propune aprobare AGA.

function BudgetScreen({ state, tr, lang }) {
  // Compute historic monthly average (from MONTHLY_HISTORY + current)
  const histAvg = window.MONTHLY_HISTORY.reduce((s, m) => s + m.total_expenses, 0) / window.MONTHLY_HISTORY.length;
  const inflation = 0.045; // 4.5% INS 2025
  const yearlyProjected = histAvg * 12 * (1 + inflation);

  // Per-category projection
  const categoryProjection = window.CATEGORIES.map(cat => {
    const monthlyTotal = state.expenses.filter(e => e.category_id === cat.id).reduce((s, e) => s + parseFloat(e.amount), 0);
    return {
      cat,
      monthly: monthlyTotal,
      yearly: monthlyTotal * 12,
      projected: monthlyTotal * 12 * (1 + inflation),
    };
  }).filter(c => c.monthly > 0).sort((a, b) => b.yearly - a.yearly);

  const totalProjected = categoryProjection.reduce((s, c) => s + c.projected, 0);
  const investments = 8500 + 2400; // zugrăvire + interfon (din AGA active)

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24, maxWidth: 1280 }}>
      <PageHeader
        title="Buget anual 2026"
        subtitle="Proiecție automată din istoricul ultimilor 6 luni · ajustată cu inflația oficială INS (4.5%)"
        right={<Button variant="primary" icon="sparkles">Trimite la AGA pentru aprobare</Button>}
      />

      {/* Why */}
      <Card style={{ background: 'linear-gradient(135deg, #FEF3C7, #FDE68A)', border: '1px solid #F59E0B' }}>
        <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
          <div style={{ width: 44, height: 44, borderRadius: 12, background: '#F59E0B', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, flexShrink: 0 }}>📊</div>
          <div style={{ flex: 1, fontSize: 13.5, color: '#78350F', lineHeight: 1.55 }}>
            <b>Obligație legală:</b> Conform Legii 196/2018 art. 76, asociația trebuie să aprobe în AGA bugetul anual de venituri și cheltuieli înainte de începerea anului. <b>60% dintre asociații nu o fac</b> — riscul: amendă DJP până la 5.000 RON + răspunderea personală a administratorului. BlocApp generează proiecția automat din istoric.
          </div>
        </div>
      </Card>

      {/* Big projection */}
      <Card style={{ background: 'linear-gradient(135deg, #1F4738, #2d6a52)', color: '#fff' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, opacity: 0.7, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Proiecție 2026</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 6 }}>
              <Ticker value={totalProjected + investments} decimals={0} /> <span style={{ fontSize: 18, opacity: 0.7 }}>RON / an</span>
            </div>
            <div style={{ fontSize: 12, opacity: 0.8, marginTop: 6 }}>
              ~{Math.round((totalProjected + investments) / 12).toLocaleString('ro-RO')} RON / lună · ~{Math.round((totalProjected + investments) / 12 / state.apartments.length).toLocaleString('ro-RO')} RON / apartament
            </div>
          </div>
          <div style={{ display: 'flex', gap: 24, flexShrink: 0 }}>
            <div>
              <div style={{ fontSize: 10, opacity: 0.7, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>Operațional</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 18, fontWeight: 700 }}>{Math.round(totalProjected).toLocaleString('ro-RO')}</div>
            </div>
            <div>
              <div style={{ fontSize: 10, opacity: 0.7, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>Investiții planificate</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 18, fontWeight: 700 }}>{investments.toLocaleString('ro-RO')}</div>
            </div>
            <div>
              <div style={{ fontSize: 10, opacity: 0.7, textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>Inflație aplicată</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 18, fontWeight: 700 }}>+{(inflation * 100).toFixed(1)}%</div>
            </div>
          </div>
        </div>
      </Card>

      {/* Category breakdown */}
      <Card padded={false}>
        <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--border)' }}>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600, margin: 0, color: 'var(--ink)' }}>Proiecție pe categorii</h3>
          <p style={{ fontSize: 12.5, color: 'var(--muted)', margin: '4px 0 0' }}>Calculate din media ultimei perioade · ajustate la inflație</p>
        </div>
        {categoryProjection.map(c => (
          <div key={c.cat.id} style={{
            padding: '14px 24px', borderBottom: '1px solid var(--border)',
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 10, flexShrink: 0,
              background: c.cat.color + '22', color: c.cat.color,
              display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18,
            }}>{c.cat.icon}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, color: 'var(--ink)', fontSize: 14 }}>{c.cat.name}</div>
              <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>
                Lunar 2025: {window.fmtRONshort(c.monthly)} → proiecție 2026: {window.fmtRONshort(c.projected / 12)}/lună
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, fontWeight: 700, color: 'var(--ink)' }}>
                {window.fmtRONshort(c.projected)} RON
              </div>
              <div style={{ fontSize: 10.5, color: 'var(--muted)', marginTop: 2 }}>anual</div>
            </div>
          </div>
        ))}
        {/* Investments row */}
        <div style={{ padding: '14px 24px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 14, background: 'var(--surface-2)' }}>
          <div style={{ width: 36, height: 36, borderRadius: 10, background: '#FEF3C7', color: '#92400E', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, flexShrink: 0 }}>🏗️</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600, color: 'var(--ink)', fontSize: 14 }}>Investiții și reparații planificate</div>
            <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>Din hotărâri AGA active: zugrăvire 8.500 + interfon 2.400</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, fontWeight: 700, color: 'var(--ink)' }}>{investments.toLocaleString('ro-RO')} RON</div>
          </div>
        </div>
      </Card>

      {/* Required acceptance */}
      <Card style={{ background: 'var(--primary-light)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <div style={{ width: 56, height: 56, borderRadius: 14, background: 'var(--primary)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 26, flexShrink: 0 }}>🗳</div>
          <div style={{ flex: 1 }}>
            <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, color: 'var(--ink)', margin: 0 }}>Aprobare AGA</h4>
            <p style={{ fontSize: 12.5, color: 'var(--ink-2)', margin: '4px 0 0', lineHeight: 1.5 }}>
              Bugetul anual trebuie aprobat cu majoritate simplă în AGA. BlocApp creează automat propunerea, atașează acest raport ca PDF și trimite locatarilor pentru vot online.
            </p>
          </div>
          <Button variant="primary" icon="sparkles">Creează propunere AGA</Button>
        </div>
      </Card>
    </div>
  );
}

window.BudgetScreen = BudgetScreen;