// budsjett-finans.jsx — Finansielle investeringer og avkastningsberegning

const BF_TYPER = [
  { v:'fond',          l:'Verdipapirfond',    ikon:'📈' },
  { v:'obligasjon',    l:'Obligasjon',        ikon:'📄' },
  { v:'aksje',         l:'Aksjer',            ikon:'📊' },
  { v:'bankinnskudd',  l:'Bankinnskudd',      ikon:'🏦' },
  { v:'annet',         l:'Annet',             ikon:'💼' },
];

const BF_FARGE = {
  fond:'#1b6a2e', obligasjon:'#586ba4', aksje:SK.coral, bankinnskudd:'#08605f', annet:SK.soft,
};

const bfFmt  = n => n == null ? '—' : Math.round(n).toLocaleString('nb-NO');
const bfMnok = n => n == null ? '—' : (n/1e6).toFixed(2).replace('.',',') + ' M';
const bfPct  = n => n == null ? '—' : Number(n).toFixed(2).replace('.',',') + ' %';

// Beregn månedlig fordeling av årsavkastning
function bfMndFordeling(inv) {
  const arsAvkastning = Number(inv.investert_belop||0) * Number(inv.avkastning_pct||0) / 100;
  if (inv.fordeling_jan_des && Array.isArray(inv.fordeling_jan_des) && inv.fordeling_jan_des.length===12) {
    return inv.fordeling_jan_des.map(a => (a||0) * arsAvkastning);
  }
  return Array(12).fill(arsAvkastning / 12);
}

const MND = ['Jan','Feb','Mar','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Des'];

// ── Investeringsmodal ─────────────────────────────────────────
function BfModal({ inv, data, versjonId, onLukk, onLagret }) {
  const ny = !inv?.id;
  const finansKontoer = (data.kontoplan||[])
    .filter(k => String(k.konto).startsWith('8'))
    .sort((a,b) => Number(a.konto)-Number(b.konto));

  const [f, setF] = React.useState({
    navn:           inv?.navn || '',
    type:           inv?.type || 'fond',
    avdeling_id:    inv?.avdeling_id || '',
    investert_belop: inv?.investert_belop || '',
    avkastning_pct: inv?.avkastning_pct || '',
    konto:          inv?.konto || 8050,
    noter:          inv?.noter || '',
    fordeling_jan_des: inv?.fordeling_jan_des || null,
  });
  const [visFordeling, setVisFordeling] = React.useState(false);
  const [fordelModus,  setFordelModus]  = React.useState('jevn');
  const [mndVerdier,   setMndVerdier]   = React.useState(Array(12).fill(''));
  const [pctVerdier,   setPctVerdier]   = React.useState(Array(12).fill(''));
  const [lagrer,       setLagrer]       = React.useState(false);
  const [feil,         setFeil]         = React.useState(null);
  const set = (k,v) => setF(p=>({...p,[k]:v}));

  const arsAvkastning = Number(f.investert_belop||0) * Number(f.avkastning_pct||0) / 100;

  const effAndeler = fordelModus==='jevn' ? Array(12).fill(1/12)
    : fordelModus==='pct' ? (() => { const sum=pctVerdier.reduce((s,v)=>s+(parseFloat(v)||0),0); return pctVerdier.map(v=>sum?((parseFloat(v)||0)/sum):0); })()
    : (() => { const sum=mndVerdier.reduce((s,v)=>s+(parseFloat(v)||0),0); return mndVerdier.map(v=>sum?((parseFloat(v)||0)/sum):0); })();

  const effMndBeloep = effAndeler.map(a => a * arsAvkastning);
  const sumFordelt   = effMndBeloep.reduce((s,v)=>s+v,0);
  const rest         = arsAvkastning - sumFordelt;

  const lagre = async () => {
    if (!f.navn || !f.investert_belop) { setFeil('Navn og investeringssum er påkrevd.'); return; }
    setLagrer(true); setFeil(null);
    try {
      const felt = {
        versjon_id: versjonId,
        avdeling_id: f.avdeling_id || null,
        navn: f.navn, type: f.type,
        investert_belop: Number(f.investert_belop),
        avkastning_pct:  Number(f.avkastning_pct||0),
        konto: Number(f.konto||8050),
        noter: f.noter || null,
        fordeling_jan_des: fordelModus !== 'jevn' ? effAndeler : null,
        updated_at: new Date().toISOString(),
      };
      if (ny) await window.budDB.lagre('bud_finans_investering', felt);
      else await window.budDB.oppdater('bud_finans_investering', inv.id, felt);
      onLagret();
    } catch(e) { setFeil(e.message); setLagrer(false); }
  };

  const lbl = { fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.04, display:'block', marginBottom:3 };
  const inp = { padding:'8px 10px', fontSize:13 };

  return (
    <div onClick={onLukk} style={{ position:'fixed', inset:0, background:'rgba(17,24,61,.45)', zIndex:200, display:'flex', alignItems:'center', justifyContent:'center', padding:20 }}>
      <div onClick={e=>e.stopPropagation()} style={{ background:'#fff', borderRadius:14, padding:'24px 28px', width:'100%', maxWidth:600, boxShadow:'0 24px 64px rgba(17,24,61,.25)', maxHeight:'90vh', overflowY:'auto' }}>
        <div style={{ fontSize:17, fontWeight:700, marginBottom:18 }}>{ny ? 'Ny investering' : 'Rediger investering'}</div>
        {feil && <div style={budFeil}>{feil}</div>}

        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:14 }}>
          {/* Navn */}
          <div style={{ gridColumn:'1/-1' }}>
            <label style={lbl}>Navn *</label>
            <input className="ok-input" value={f.navn} onChange={e=>set('navn',e.target.value)} style={{ ...inp, width:'100%' }} placeholder="f.eks. Obligasjonsportefølje 2026" />
          </div>
          {/* Type */}
          <div>
            <label style={lbl}>Type investering</label>
            <div style={{ display:'flex', gap:6, flexWrap:'wrap', marginTop:2 }}>
              {BF_TYPER.map(t=>(
                <button key={t.v} onClick={()=>set('type',t.v)} style={{ padding:'5px 10px', borderRadius:7, fontSize:12, fontWeight:600, cursor:'pointer', fontFamily:'inherit',
                  border:f.type===t.v?'none':'1px solid rgba(17,24,61,.12)', background:f.type===t.v?BF_FARGE[t.v]:'#fff',
                  color:f.type===t.v?'#fff':SK.ink }}>
                  {t.ikon} {t.l}
                </button>
              ))}
            </div>
          </div>
          {/* Avdeling */}
          <div>
            <label style={lbl}>Selskap / Avdeling</label>
            <select className="ok-input" value={f.avdeling_id} onChange={e=>set('avdeling_id',e.target.value)} style={inp}>
              <option value="">— Konsernivå —</option>
              {(data.selskaper||[]).map(s => (
                <optgroup key={s.id} label={s.navn.replace('OsloKollega ','')}>
                  {(data.enheter||[]).filter(e=>e.selskap_id===s.id&&e.type!=='styre').map(e=>(
                    <option key={e.id} value={e.id}>{e.avd_nr} {e.navn}</option>
                  ))}
                </optgroup>
              ))}
            </select>
          </div>
        </div>

        {/* Beregning */}
        <div style={{ padding:'14px 16px', borderRadius:10, background:SK.iceBlueLight, marginBottom:14 }}>
          <div style={{ fontSize:12, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.05, marginBottom:10 }}>Beregning</div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:12 }}>
            <div>
              <label style={lbl}>Investeringssum (kr) *</label>
              <input className="ok-input" type="number" value={f.investert_belop} onChange={e=>set('investert_belop',e.target.value)} style={inp} placeholder="0" />
            </div>
            <div>
              <label style={lbl}>Forventet avkastning %</label>
              <input className="ok-input" type="number" step="0.1" value={f.avkastning_pct} onChange={e=>set('avkastning_pct',e.target.value)} style={inp} placeholder="0,0" />
            </div>
            <div>
              <label style={lbl}>Inntektskonto</label>
              <select className="ok-input" value={f.konto} onChange={e=>set('konto',e.target.value)} style={inp}>
                {finansKontoer.map(k=><option key={k.konto} value={k.konto}>{k.konto} {k.navn}</option>)}
              </select>
            </div>
          </div>
          {arsAvkastning > 0 && (
            <div style={{ marginTop:12, padding:'8px 12px', borderRadius:8, background:'#fff', border:'1px solid rgba(17,24,61,.08)', display:'flex', gap:20, fontSize:13 }}>
              <span>Årsavkastning: <b style={{ color:'#1b6a2e' }}>{bfFmt(Math.round(arsAvkastning))} kr</b></span>
              <span>Per måned: <b>{bfFmt(Math.round(arsAvkastning/12))} kr</b></span>
            </div>
          )}
        </div>

        {/* Månedlig fordeling */}
        <div style={{ marginBottom:14 }}>
          <button onClick={()=>setVisFordeling(v=>!v)} style={{ fontSize:12.5, padding:'6px 12px', borderRadius:7, border:'1px solid rgba(17,24,61,.15)', background:'#fff', cursor:'pointer', fontFamily:'inherit', fontWeight:600, color:SK.ink }}>
            {visFordeling ? '▲' : '▼'} Månedlig fordeling {f.fordeling_jan_des && fordelModus!=='jevn' ? '(tilpasset)' : '(jevn)'}
          </button>
          {visFordeling && (
            <div style={{ marginTop:10, padding:'14px 16px', borderRadius:10, border:'1px solid rgba(17,24,61,.09)', background:'#fafbff' }}>
              <div style={{ display:'flex', gap:6, marginBottom:12 }}>
                {[['jevn','Jevn'],['pct','% per måned'],['belop','kr per måned']].map(([v,l])=>(
                  <button key={v} onClick={()=>setFordelModus(v)} style={{ padding:'5px 10px', borderRadius:6, fontSize:11.5, fontWeight:600, cursor:'pointer', fontFamily:'inherit',
                    border:fordelModus===v?'none':'1px solid rgba(17,24,61,.12)', background:fordelModus===v?SK.ink:'#fff', color:fordelModus===v?'#fff':SK.ink }}>{l}</button>
                ))}
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:8 }}>
                {MND.map((m,i) => {
                  const vis = fordelModus==='jevn' ? Math.round(arsAvkastning/12)
                    : fordelModus==='pct' ? pctVerdier[i]
                    : mndVerdier[i];
                  const pctVis = arsAvkastning > 0 && effMndBeloep[i] ? (effMndBeloep[i]/arsAvkastning*100).toFixed(1) : null;
                  return (
                    <div key={i}>
                      <label style={{ fontSize:10, fontWeight:700, color:SK.soft, textTransform:'uppercase', display:'block', marginBottom:2 }}>
                        {m}{fordelModus!=='jevn'&&pctVis ? <span style={{ marginLeft:4, color:SK.soft, fontWeight:400 }}>{pctVis}%</span> : null}
                      </label>
                      {fordelModus==='jevn' ? (
                        <div style={{ padding:'6px 8px', borderRadius:7, background:SK.iceBlueLight, fontSize:12.5, fontWeight:500 }}>
                          {bfFmt(vis)}
                        </div>
                      ) : (
                        <input className="ok-input" type="number" value={vis} placeholder="0"
                          onChange={e => {
                            if (fordelModus==='pct') setPctVerdier(s=>s.map((v,j)=>j===i?e.target.value:v));
                            else setMndVerdier(s=>s.map((v,j)=>j===i?e.target.value:v));
                          }}
                          style={{ padding:'6px 8px', fontSize:12, width:'100%', boxSizing:'border-box' }} />
                      )}
                    </div>
                  );
                })}
              </div>
              {fordelModus !== 'jevn' && (
                <div style={{ marginTop:10, padding:'8px 10px', borderRadius:7, fontSize:12,
                  background: Math.abs(rest)<1 ? '#e7f4ea':'rgba(17,24,61,.04)',
                  border:`1px solid ${Math.abs(rest)<1?'#86c79a':'rgba(17,24,61,.1)'}`,
                  display:'flex', justifyContent:'space-between' }}>
                  <span>Fordelt: <b>{bfFmt(Math.round(sumFordelt))} kr</b></span>
                  <span style={{ fontWeight:700, color:Math.abs(rest)<1?'#1b6a2e':rest>0?'#8e5a05':SK.coral }}>
                    {Math.abs(rest)<1 ? '✓ Fullt fordelt' : rest>0 ? `Rest: ${bfFmt(Math.round(rest))} kr` : `Over: ${bfFmt(Math.round(-rest))} kr`}
                  </span>
                </div>
              )}
            </div>
          )}
        </div>

        {/* Notater */}
        <div style={{ marginBottom:16 }}>
          <label style={lbl}>Notater / forutsetninger</label>
          <textarea className="ok-input" value={f.noter} onChange={e=>set('noter',e.target.value)}
            style={{ width:'100%', padding:'8px 10px', fontSize:13, minHeight:60, resize:'vertical', boxSizing:'border-box', fontFamily:'inherit' }}
            placeholder="f.eks. basert på renteavtale nr X, gjelder Q1–Q4..." />
        </div>

        <div style={{ display:'flex', gap:10 }}>
          <Button variant="primary" onClick={lagre} disabled={lagrer}>{lagrer?'Lagrer…':'Lagre'}</Button>
          <Button onClick={onLukk}>Avbryt</Button>
        </div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// HOVED-KOMPONENT
// ════════════════════════════════════════════════════════════
function BudFinans({ data, versjonId, versjon, enhById, selById, laast, onEndret }) {
  const [modal,   setModal]   = React.useState(null); // inv-objekt eller {ny:true}
  const [filter,  setFilter]  = React.useState('alle'); // 'alle' | selskap_id
  const [bekreft, setBekreft] = React.useState(null);

  const investeringer = (data.finansInvesteringer||[]).filter(i => i.versjon_id === versjonId);
  const filtrert = filter==='alle' ? investeringer
    : investeringer.filter(i => {
        if (!i.avdeling_id) return false;
        const e = enhById[i.avdeling_id];
        return e?.selskap_id === filter;
      });

  // Summer
  const totalInvestert   = investeringer.reduce((s,i)=>s+Number(i.investert_belop||0),0);
  const totalAvkastning  = investeringer.reduce((s,i)=>s+Number(i.investert_belop||0)*Number(i.avkastning_pct||0)/100,0);
  const snittAvkastning  = totalInvestert > 0 ? totalAvkastning/totalInvestert*100 : 0;

  // Månedlig totalfordeling
  const mndTotal = Array(12).fill(0);
  investeringer.forEach(inv => { bfMndFordeling(inv).forEach((v,i)=>{ mndTotal[i]+=v; }); });

  const slett = async (inv) => {
    if (!confirm(`Slette «${inv.navn}»?`)) return;
    await window.budDB.slett('bud_finans_investering', inv.id);
    onEndret();
  };

  // Kpn-kart
  const kpByKonto = Object.fromEntries((data.kontoplan||[]).map(k=>[k.konto,k]));

  return (
    <div>
      {/* ── KPI-rad ── */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:12, marginBottom:20 }}>
        {[
          { label:'Samlet investeringsportefølje', verdi: bfMnok(totalInvestert), sub:'MNOK' },
          { label:'Forventet årsavkastning',       verdi: bfFmt(Math.round(totalAvkastning)) + ' kr', sub:'' },
          { label:'Vektet snittavkastning',        verdi: bfPct(snittAvkastning), sub:'' },
        ].map(k=>(
          <div key={k.label} style={{ padding:'16px 20px', background:'#fff', borderRadius:12, border:'1px solid rgba(17,24,61,.07)' }}>
            <div style={{ fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.06, marginBottom:8 }}>{k.label}</div>
            <div style={{ fontSize:22, fontWeight:800, color:SK.ink, letterSpacing:'-0.02em' }}>{k.verdi}</div>
          </div>
        ))}
      </div>

      {/* ── Månedsgraf ── */}
      {totalAvkastning > 0 && (
        <div style={{ background:'#fff', borderRadius:12, border:'1px solid rgba(17,24,61,.07)', padding:'18px 20px', marginBottom:20 }}>
          <div style={{ fontSize:13, fontWeight:700, color:SK.ink, marginBottom:4 }}>Finansinntekter pr. måned</div>
          <div style={{ fontSize:11.5, color:SK.soft, marginBottom:12 }}>Alle investeringer · kr</div>
          <div style={{ display:'flex', alignItems:'flex-end', gap:4, height:80 }}>
            {mndTotal.map((v,i) => {
              const maxV = Math.max(...mndTotal, 1);
              const h = Math.max(Math.round(v/maxV*72), 2);
              return (
                <div key={i} style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:3 }}>
                  <div style={{ width:'100%', height:h, background:'#1b6a2e', borderRadius:'2px 2px 0 0', opacity:0.85 }} />
                  <div style={{ fontSize:9, color:SK.soft }}>{MND[i]}</div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* ── Filterrad + Legg til ── */}
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16, flexWrap:'wrap', gap:10 }}>
        <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
          {[['alle','Alle selskaper'], ...(data.selskaper||[]).map(s=>[s.id,s.navn.replace('OsloKollega ','')])].map(([v,l])=>(
            <button key={v} onClick={()=>setFilter(v)} style={{ padding:'6px 12px', borderRadius:7, fontSize:12.5, fontWeight:600, cursor:'pointer', fontFamily:'inherit',
              border:filter===v?'none':'1px solid rgba(17,24,61,.12)', background:filter===v?SK.ink:'#fff', color:filter===v?'#fff':SK.ink }}>{l}</button>
          ))}
        </div>
        {!laast && <Button icon={I.plus} onClick={()=>setModal({})}>Ny investering</Button>}
      </div>

      {/* ── Investeringstabell ── */}
      {filtrert.length === 0 ? (
        <div style={{ padding:'40px 20px', textAlign:'center', color:SK.soft, background:'#fff', borderRadius:12, border:'1px solid rgba(17,24,61,.07)' }}>
          <div style={{ fontSize:32, marginBottom:10 }}>📈</div>
          <div style={{ fontSize:14, fontWeight:600, color:SK.ink, marginBottom:6 }}>Ingen investeringer lagt til</div>
          <div style={{ fontSize:13, marginBottom:16 }}>Legg til investeringssummer og forventet avkastning for å beregne finansielle inntekter.</div>
          {!laast && <Button variant="primary" onClick={()=>setModal({})}>Legg til første investering</Button>}
        </div>
      ) : (
        <div style={{ background:'#fff', borderRadius:12, border:'1px solid rgba(17,24,61,.07)', overflow:'hidden' }}>
          <table style={{ width:'100%', borderCollapse:'collapse' }}>
            <thead>
              <tr style={{ borderBottom:'1px solid rgba(17,24,61,.07)', background:SK.iceBlueLight }}>
                {[
                  { h:'Investering',      a:'left',  p:'20px' },
                  { h:'Type',             a:'left',  p:'12px' },
                  { h:'Selskap / Avd.',   a:'left',  p:'12px' },
                  { h:'Investert',        a:'right', p:'12px' },
                  { h:'Avkastning %',     a:'right', p:'12px' },
                  { h:'Årsavkastning',    a:'right', p:'12px' },
                  { h:'Konto',            a:'left',  p:'12px' },
                  { h:'Jan', a:'right', p:'8px' }, { h:'Feb', a:'right', p:'8px' },
                  { h:'Mar', a:'right', p:'8px' }, { h:'Apr', a:'right', p:'8px' },
                  { h:'Mai', a:'right', p:'8px' }, { h:'Jun', a:'right', p:'8px' },
                  { h:'Jul', a:'right', p:'8px' }, { h:'Aug', a:'right', p:'8px' },
                  { h:'Sep', a:'right', p:'8px' }, { h:'Okt', a:'right', p:'8px' },
                  { h:'Nov', a:'right', p:'8px' }, { h:'Des', a:'right', p:'8px' },
                  ...(!laast ? [{ h:'', a:'right', p:'12px' }] : []),
                ].map(({h,a,p})=>(
                  <th key={h} style={{ padding:`9px ${p}`, textAlign:a, fontSize:10, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.04, whiteSpace:'nowrap' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {filtrert.map(inv => {
                const enhet   = inv.avdeling_id ? enhById[inv.avdeling_id] : null;
                const selskap = enhet ? selById[enhet.selskap_id] : null;
                const arsAvk  = Number(inv.investert_belop||0) * Number(inv.avkastning_pct||0) / 100;
                const mndVals = bfMndFordeling(inv);
                const typeCfg = BF_TYPER.find(t=>t.v===inv.type) || BF_TYPER[4];
                const kontoObj= kpByKonto[inv.konto];
                return (
                  <tr key={inv.id} style={{ borderBottom:'1px solid rgba(17,24,61,.05)' }}
                    onMouseEnter={e=>e.currentTarget.style.background='rgba(17,24,61,.015)'}
                    onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                    <td style={{ padding:'11px 20px' }}>
                      <div style={{ fontSize:13, fontWeight:600 }}>{inv.navn}</div>
                      {inv.noter && <div style={{ fontSize:11, color:SK.soft, marginTop:1 }}>{inv.noter}</div>}
                    </td>
                    <td style={{ padding:'11px 12px' }}>
                      <span style={{ fontSize:11.5, padding:'2px 8px', borderRadius:99, background:(BF_FARGE[inv.type]||SK.soft)+'18', color:BF_FARGE[inv.type]||SK.soft, fontWeight:600 }}>
                        {typeCfg.ikon} {typeCfg.l}
                      </span>
                    </td>
                    <td style={{ padding:'11px 12px', fontSize:12.5 }}>
                      {selskap ? (
                        <div>
                          <div style={{ fontWeight:500 }}>{selskap.navn.replace('OsloKollega ','')}</div>
                          {enhet && <div style={{ fontSize:11, color:SK.soft }}>{enhet.avd_nr} {enhet.navn}</div>}
                        </div>
                      ) : <span style={{ color:SK.soft, fontSize:12 }}>Konsernnivå</span>}
                    </td>
                    <td style={{ padding:'11px 12px', textAlign:'right', fontSize:13, fontWeight:600 }}>
                      {bfFmt(Math.round(Number(inv.investert_belop||0)))}
                    </td>
                    <td style={{ padding:'11px 12px', textAlign:'right', fontSize:13, color:'#1b6a2e', fontWeight:700 }}>
                      {bfPct(inv.avkastning_pct)}
                    </td>
                    <td style={{ padding:'11px 12px', textAlign:'right', fontSize:13, fontWeight:700, color:'#1b6a2e' }}>
                      {bfFmt(Math.round(arsAvk))}
                    </td>
                    <td style={{ padding:'11px 12px', fontSize:11.5, color:SK.soft }}>
                      {kontoObj ? `${kontoObj.konto} ${kontoObj.navn}` : inv.konto}
                    </td>
                    {mndVals.map((v,i)=>(
                      <td key={i} style={{ padding:'11px 8px', textAlign:'right', fontSize:11, color:SK.ink, background:i===6?'rgba(17,24,61,.02)':undefined }}>
                        {Math.round(v).toLocaleString('nb-NO')}
                      </td>
                    ))}
                    {!laast && (
                      <td style={{ padding:'11px 12px', textAlign:'right' }}>
                        <div style={{ display:'flex', gap:4, justifyContent:'flex-end' }}>
                          <button onClick={()=>setModal(inv)} style={budIkonKnapp}>✎</button>
                          <button onClick={()=>slett(inv)} style={budIkonKnapp}>🗑</button>
                        </div>
                      </td>
                    )}
                  </tr>
                );
              })}
            </tbody>
            {/* Sumrad */}
            {filtrert.length > 1 && (() => {
              const sumInv  = filtrert.reduce((s,i)=>s+Number(i.investert_belop||0),0);
              const sumAvk  = filtrert.reduce((s,i)=>s+Number(i.investert_belop||0)*Number(i.avkastning_pct||0)/100,0);
              const mndSum  = Array(12).fill(0);
              filtrert.forEach(inv=>{ bfMndFordeling(inv).forEach((v,j)=>{ mndSum[j]+=v; }); });
              return (
                <tfoot>
                  <tr style={{ borderTop:'2px solid rgba(17,24,61,.12)', background:SK.iceBlueLight, fontWeight:700 }}>
                    <td colSpan={3} style={{ padding:'10px 20px', fontSize:12.5 }}>Sum finansinntekter</td>
                    <td style={{ padding:'10px 12px', textAlign:'right', fontSize:13 }}>{bfFmt(Math.round(sumInv))}</td>
                    <td style={{ padding:'10px 12px', textAlign:'right', fontSize:13, color:'#1b6a2e' }}>{bfPct(sumInv>0?sumAvk/sumInv*100:0)}</td>
                    <td style={{ padding:'10px 12px', textAlign:'right', fontSize:13, color:'#1b6a2e' }}>{bfFmt(Math.round(sumAvk))}</td>
                    <td></td>
                    {mndSum.map((v,i)=>(
                      <td key={i} style={{ padding:'10px 8px', textAlign:'right', fontSize:11, fontWeight:700 }}>
                        {Math.round(v).toLocaleString('nb-NO')}
                      </td>
                    ))}
                    {!laast && <td></td>}
                  </tr>
                </tfoot>
              );
            })()}
          </table>
        </div>
      )}

      {/* Modal */}
      {modal !== null && (
        <BfModal inv={modal} data={data} versjonId={versjonId}
          onLukk={()=>setModal(null)}
          onLagret={()=>{ setModal(null); onEndret(); }} />
      )}
    </div>
  );
}

Object.assign(window, { BudFinans });