// budsjett-oversikt.jsx — Konsernoversikt og Per avdeling
// Inspirert av Nordlys-dashbordet, OsloKollega designprofil.

// ── Format-hjelpere ───────────────────────────────────────────
const BO_mnok  = n => n == null ? '—' : (n/1e6).toFixed(1).replace('.',',');
const BO_pct   = n => n == null ? '—' : (n*100).toFixed(1).replace('.',',') + ' %';
const BO_sign  = n => n > 0 ? '+' : '';
const BO_delta = (a, b) => b && b !== 0 ? (a-b)/Math.abs(b) : null;

// ── Mini sparkline (SVG) ──────────────────────────────────────
function BoSparkline({ values, farge, height=36, width=160 }) {
  if (!values || values.length < 2) return null;
  const min = Math.min(...values), max = Math.max(...values);
  const range = max - min || 1;
  const pts = values.map((v,i) => {
    const x = (i / (values.length-1)) * width;
    const y = height - ((v - min) / range) * height;
    return `${x},${y}`;
  }).join(' ');
  return (
    <svg width={width} height={height} style={{ display:'block' }}>
      <polyline points={pts} fill="none" stroke={farge} strokeWidth="2" strokeLinejoin="round" />
    </svg>
  );
}

// ── KPI-brikke med sammenligning ─────────────────────────────
function BoKpi({ label, verdi, enhet='MNOK', sammenligning, samLabel, margin }) {
  const delta = sammenligning != null ? BO_delta(verdi, sammenligning) : null;
  const deltaFarge = delta == null ? SK.soft : delta >= 0 ? '#1b6a2e' : SK.coral;
  return (
    <div style={{ padding:'18px 20px', background:'#fff', borderRadius:12, border:'1px solid rgba(17,24,61,.07)' }}>
      <div style={{ fontSize:11.5, fontWeight:600, color:SK.soft, textTransform:'uppercase', letterSpacing:0.06, marginBottom:6 }}>{label}</div>
      <div style={{ display:'flex', alignItems:'baseline', gap:6, marginBottom:6 }}>
        <span style={{ fontSize:28, fontWeight:800, color:SK.ink, lineHeight:1, letterSpacing:'-0.02em' }}>{enhet==='MNOK' ? BO_mnok(verdi) : verdi}</span>
        <span style={{ fontSize:12, fontWeight:600, color:SK.soft }}>{enhet}</span>
      </div>
      {delta != null && (
        <div style={{ fontSize:11.5, fontWeight:700, color:deltaFarge }}>
          {BO_sign(delta*100)}{(delta*100).toFixed(1).replace('.',',')} pp {samLabel && <span style={{ fontWeight:400, color:SK.soft }}>mot {samLabel}</span>}
        </div>
      )}
      {margin != null && <div style={{ fontSize:11.5, color:SK.soft, marginTop:2 }}>{BO_pct(margin)} margin</div>}
    </div>
  );
}

// ── Månedsgraf (SVG bar chart) ────────────────────────────────
function BoMaanedsgraf({ maaneder, label='Budsjett', sammenligning, samLabel }) {
  const MND = ['Jan','Feb','Mar','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Des'];
  const allVals = [...maaneder, ...(sammenligning||[])].filter(v=>v!=null);
  const maxVal  = Math.max(...allVals.map(Math.abs), 1);
  const barW    = 18, gap = sammenligning ? 4 : 0, grpW = sammenligning ? barW*2+gap+6 : barW+6;
  const h = 120, w = grpW * 12;

  return (
    <div>
      <svg width="100%" viewBox={`0 0 ${w} ${h+24}`} style={{ display:'block', overflow:'visible' }}>
        {/* Nullinje */}
        <line x1={0} y1={h} x2={w} y2={h} stroke="rgba(17,24,61,.08)" strokeWidth="1" />
        {maaneder.map((v, i) => {
          const x0   = i * grpW;
          const bh   = Math.abs(v) / maxVal * h;
          const y    = v < 0 ? h - bh : h;
          const sam  = sammenligning?.[i];
          const samBh= sam != null ? Math.abs(sam)/maxVal*h : 0;
          const samY = sam != null ? (sam < 0 ? h - samBh : h) : h;
          return (
            <g key={i}>
              {/* Sammenligningsbar (lys) */}
              {sam != null && <rect x={x0} y={samY} width={barW} height={samBh}
                fill={SK.iceBlue} rx="2" />}
              {/* Primærbar */}
              <rect x={x0 + (sammenligning ? barW+gap : 0)} y={y} width={barW} height={bh}
                fill={SK.ink} rx="2" />
              {/* Måneds-label */}
              <text x={x0 + grpW/2 - 2} y={h+16} textAnchor="middle"
                fontSize="9" fill={SK.soft} fontFamily="inherit">{MND[i]}</text>
            </g>
          );
        })}
      </svg>
      {sammenligning && (
        <div style={{ display:'flex', gap:14, fontSize:11, color:SK.soft, marginTop:4 }}>
          <span style={{ display:'flex', alignItems:'center', gap:4 }}>
            <span style={{ width:10, height:10, borderRadius:2, background:SK.ink, display:'inline-block' }} />{label}
          </span>
          <span style={{ display:'flex', alignItems:'center', gap:4 }}>
            <span style={{ width:10, height:10, borderRadius:2, background:SK.iceBlue, display:'inline-block' }} />{samLabel}
          </span>
        </div>
      )}
    </div>
  );
}

// ── Beregn månedlige resultater fra posteringer ───────────────
function boMaanedResultat(post) {
  const mnd = Array(12).fill(0);
  post.forEach(p => {
    if (p.fordeling_jan_des && Array.isArray(p.fordeling_jan_des)) {
      p.fordeling_jan_des.forEach((andel, i) => { mnd[i] += p.belop * andel; });
    } else {
      const mndFra = Number(p.mnd_fra||1)-1, mndTil = Number(p.mnd_til||12)-1;
      const antMnd = mndTil - mndFra + 1;
      for (let m = mndFra; m <= mndTil; m++) mnd[m] += p.belop / antMnd;
    }
  });
  // Resultat = -(inntekter er negative) - kostnader (positive) → positivt = overskudd
  return mnd;
}

// ── Innleveringsstatus ────────────────────────────────────────
// Viser data-basert innlevering nå; godkjennings-basert kommer i neste fane.
function BoInnleveringsstatus({ data, versjonId }) {
  const linjerAvd = new Set((data.linjer||[]).filter(l=>l.versjon_id===versjonId).map(l=>l.avdeling_id));
  const lonnAvd   = new Set((data.lonn||[]).filter(l=>l.versjon_id===versjonId).map(l=>l.avdeling_id));
  const levertAvd = new Set([...linjerAvd, ...lonnAvd]);
  const driftsAvd = (data.enheter||[]).filter(e=>!['styre','konsern'].includes(e.type));
  return (
    <div>
      <div style={{ fontSize:12.5, fontWeight:700, color:SK.ink, marginBottom:2 }}>Innleveringsstatus</div>
      <div style={{ fontSize:11.5, color:SK.soft, marginBottom:10 }}>
        Avdelingsbudsjett pr. selskap
        <span style={{ marginLeft:6, padding:'1px 6px', borderRadius:4, background:'#fcefca', color:'#8e5a05', fontSize:10 }}>Per-avdeling godkjenning kommer</span>
      </div>
      {(data.selskaper||[]).map(s => {
        const avdI  = driftsAvd.filter(e=>e.selskap_id===s.id); if (!avdI.length) return null;
        const levert= avdI.filter(e=>levertAvd.has(e.id)).length;
        const pct   = levert / avdI.length;
        return (
          <div key={s.id} style={{ marginBottom:10 }}>
            <div style={{ display:'flex', justifyContent:'space-between', marginBottom:4 }}>
              <span style={{ fontSize:12.5 }}>{s.navn.replace('OsloKollega ','')}</span>
              <span style={{ fontSize:11.5, color:pct===1?'#1b6a2e':SK.soft, fontWeight:pct===1?700:400 }}>{levert} / {avdI.length} avd.</span>
            </div>
            <div style={{ height:5, borderRadius:99, background:'rgba(17,24,61,.08)', overflow:'hidden' }}>
              <div style={{ height:'100%', width:`${pct*100}%`, borderRadius:99,
                background:pct===1?'#1b6a2e':pct>0.5?SK.ink:SK.coral, transition:'width .4s' }} />
            </div>
          </div>
        );
      })}
      <div style={{ borderTop:'1px solid rgba(17,24,61,.07)', paddingTop:10, marginTop:4,
        display:'flex', justifyContent:'space-between', fontSize:12, color:SK.soft }}>
        <span>Totalt levert</span>
        <span style={{ fontWeight:700, color:SK.ink }}>{levertAvd.size} / {driftsAvd.length} avdelinger</span>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// KONSERNOVERSIKT
// Viser alltid konsoliderte tall. budAggreger('konsern') eliminerer automatisk.
// Ingen manuell elimineringsbryter — konserninternt nuller seg alltid ut.
// ════════════════════════════════════════════════════════════
function BudOversikt({ data, post, versjonId, versjon, selById }) {
  const [drillSelskap, setDrillSelskap] = React.useState(null);

  const fjoraarsVersjon = React.useMemo(() =>
    (data.versjoner||[]).find(v => v.ar===(versjon?.ar||0)-1 && v.type==='budsjett') || null
  , [versjon?.id]);

  const fjoraarsPost = React.useMemo(() =>
    fjoraarsVersjon ? window.budBeregnPosteringer(data, fjoraarsVersjon.id) : []
  , [fjoraarsVersjon?.id]);

  const summer = (posteringer) => {
    const f = window.budAggreger(posteringer, 'konsern');
    const inntekt = -f.filter(p=>p.belop<0).reduce((s,p)=>s+p.belop,0);
    const kostnad =  f.filter(p=>p.belop>0).reduce((s,p)=>s+p.belop,0);
    return { inntekt, kostnad, resultat: inntekt - kostnad };
  };

  const naa    = summer(post);
  const fjor   = fjoraarsPost.length ? summer(fjoraarsPost) : null;
  const margin = naa.inntekt > 0 ? naa.resultat / naa.inntekt : null;
  const samLabel = fjoraarsVersjon ? `B${fjoraarsVersjon.ar}` : null;

  // Månedsgraf: fordel jevnt på måneder i perioden
  const maanedResultat = (posteringer) => {
    const mnd = Array(12).fill(0);
    window.budAggreger(posteringer, 'konsern').forEach(p => {
      const fra = Number(p.mnd_fra||1)-1, til = Number(p.mnd_til||12)-1;
      const ant = til - fra + 1 || 12;
      for (let m = fra; m <= til; m++) mnd[m] += p.belop / ant;
    });
    return mnd.map(v => -v); // positivt = overskudd
  };

  const resultatMnd    = maanedResultat(post);
  const fjorMnd        = fjoraarsPost.length ? maanedResultat(fjoraarsPost) : null;
  const maxBarVal      = Math.max(...resultatMnd.map(Math.abs), ...(fjorMnd||[]).map(Math.abs), 1);
  const BAR_H          = 80;

  // Selskapstall: selskapsnivå (intern eliminering) for tabellen, konsern for sumraden
  const perSel = {}, fjorPerSel = {};
  data.selskaper.forEach(s => { perSel[s.id] = { inntekt:0, kostnad:0 }; });
  window.budAggreger(post, 'selskap').forEach(p => {
    const r = perSel[p.selskap_id]; if (!r) return;
    if (p.belop<0) r.inntekt -= p.belop; else r.kostnad += p.belop;
  });
  if (fjor) {
    data.selskaper.forEach(s => { fjorPerSel[s.id] = { inntekt:0, kostnad:0 }; });
    window.budAggreger(fjoraarsPost, 'selskap').forEach(p => {
      const r = fjorPerSel[p.selskap_id]; if (!r) return;
      if (p.belop<0) r.inntekt -= p.belop; else r.kostnad += p.belop;
    });
  }

  // Konserninternt: skal nulle seg ut, vis som egen rad for transparens
  const konsernInt     = post.filter(p => p.eliminer_nivaa === 'konsern');
  const konsernIntInn  = -konsernInt.filter(p=>p.belop<0).reduce((s,p)=>s+p.belop,0);
  const konsernIntKost =  konsernInt.filter(p=>p.belop>0).reduce((s,p)=>s+p.belop,0);
  const MND = ['Jan','Feb','Mar','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Des'];

  return (
    <div>
      {/* KPI-rad */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12, marginBottom:20 }}>
        {[
          { label:'Driftsinntekter', verdi:naa.inntekt,  fjorV:fjor?.inntekt },
          { label:'Driftskostnader', verdi:naa.kostnad,  fjorV:fjor?.kostnad },
          { label:'Driftsresultat',  verdi:naa.resultat, fjorV:fjor?.resultat },
          { label:'Driftsmargin',    verdi:margin,        fjorV:fjor&&fjor.inntekt>0?fjor.resultat/fjor.inntekt:null, erPct:true },
        ].map(({ label, verdi, fjorV, erPct }) => {
          const delta = fjorV != null && fjorV !== 0 ? (verdi - fjorV) / Math.abs(fjorV) : null;
          return (
            <div key={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 }}>{label}</div>
              <div style={{ display:'flex', alignItems:'baseline', gap:5, marginBottom:6 }}>
                <span style={{ fontSize:26, fontWeight:800, color:SK.ink, lineHeight:1, letterSpacing:'-0.02em' }}>
                  {erPct ? (verdi!=null?(verdi*100).toFixed(1).replace('.',','):'—') : BO_mnok(verdi)}
                </span>
                <span style={{ fontSize:12, fontWeight:600, color:SK.soft }}>{erPct?'%':'MNOK'}</span>
              </div>
              {delta != null && (
                <div style={{ fontSize:11.5, fontWeight:700, color:delta>=0?'#1b6a2e':SK.coral }}>
                  {delta>=0?'+':''}{(delta*100).toFixed(1).replace('.',',')} %
                  <span style={{ fontWeight:400, color:SK.soft, marginLeft:4 }}>mot {samLabel}</span>
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* Graf + Innlevering */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 300px', gap:16, marginBottom:20 }}>
        <div style={{ background:'#fff', borderRadius:12, border:'1px solid rgba(17,24,61,.07)', padding:'18px 20px' }}>
          <div style={{ marginBottom:14 }}>
            <div style={{ fontSize:13, fontWeight:700, color:SK.ink }}>Driftsresultat pr. måned</div>
            <div style={{ fontSize:11.5, color:SK.soft }}>Konsolidert · MNOK</div>
          </div>
          {/* Inline flexbox-graf — ingen SVG overflow-problemer */}
          <div style={{ display:'flex', alignItems:'flex-end', gap:3, height:BAR_H+24, paddingBottom:20, position:'relative' }}>
            {resultatMnd.map((v, i) => {
              const bh  = Math.max(Math.round(Math.abs(v)/maxBarVal*BAR_H), 1);
              const fv  = fjorMnd?.[i];
              const fbh = fv != null ? Math.max(Math.round(Math.abs(fv)/maxBarVal*BAR_H), 1) : 0;
              return (
                <div key={i} style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'flex-end', height:'100%', position:'relative', minWidth:0 }}>
                  <div style={{ display:'flex', gap:1, alignItems:'flex-end', height:BAR_H, width:'100%' }}>
                    {fv != null && <div style={{ flex:1, height:fbh, background:SK.iceBlue, borderRadius:'2px 2px 0 0' }} />}
                    <div style={{ flex:fv!=null?1:2, height:bh, background:i===6?'rgba(17,24,61,.12)':SK.ink, borderRadius:'2px 2px 0 0' }} />
                  </div>
                  <div style={{ fontSize:9, color:SK.soft, position:'absolute', bottom:0, left:'50%', transform:'translateX(-50%)', whiteSpace:'nowrap' }}>{MND[i]}</div>
                </div>
              );
            })}
          </div>
          {fjorMnd && (
            <div style={{ display:'flex', gap:14, fontSize:11, color:SK.soft, marginTop:2 }}>
              <span style={{ display:'flex', alignItems:'center', gap:4 }}>
                <span style={{ width:10, height:10, borderRadius:2, background:SK.ink, display:'inline-block' }} />B{versjon?.ar}
              </span>
              <span style={{ display:'flex', alignItems:'center', gap:4 }}>
                <span style={{ width:10, height:10, borderRadius:2, background:SK.iceBlue, display:'inline-block' }} />{samLabel}
              </span>
            </div>
          )}
        </div>
        <div style={{ background:'#fff', borderRadius:12, border:'1px solid rgba(17,24,61,.07)', padding:'18px 20px' }}>
          <BoInnleveringsstatus data={data} versjonId={versjonId} />
        </div>
      </div>

      {/* Selskapstabell */}
      <div style={{ background:'#fff', borderRadius:12, border:'1px solid rgba(17,24,61,.07)', overflow:'hidden' }}>
        <div style={{ padding:'14px 20px', borderBottom:'1px solid rgba(17,24,61,.07)', display:'flex', justifyContent:'space-between' }}>
          <span style={{ fontSize:13, fontWeight:700, color:SK.ink }}>Resultat pr. selskap</span>
          <span style={{ fontSize:11.5, color:SK.soft }}>Beløp i MNOK · Selskapsinterne poster eliminert</span>
        </div>
        <table style={{ width:'100%', borderCollapse:'collapse' }}>
          <thead>
            <tr style={{ borderBottom:'1px solid rgba(17,24,61,.07)' }}>
              {['Selskap','Driftsinntekter','Driftskostnader','Resultat','Margin'].map((h,i) => (
                <th key={h} style={{ padding:`9px ${i===0||i===4?'20px':'16px'}`, textAlign:i===0?'left':'right',
                  fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.05 }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {data.selskaper.map(s => {
              const r   = perSel[s.id]; if (!r) return null;
              const res = r.inntekt - r.kostnad;
              const marg= r.inntekt > 0 ? res/r.inntekt : null;
              const fj  = fjorPerSel[s.id];
              const fjRes = fj ? fj.inntekt - fj.kostnad : null;
              const isOpen = drillSelskap === s.id;
              const avdC = (data.enheter||[]).filter(e=>e.selskap_id===s.id&&e.type!=='styre').length;
              const avdPoster = window.budAggreger(post,'selskap').filter(p=>{
                const e=(data.enheter||[]).find(x=>x.id===p.avd_id); return e?.selskap_id===s.id;
              });
              return (
                <React.Fragment key={s.id}>
                  <tr onClick={()=>setDrillSelskap(isOpen?null:s.id)} style={{ cursor:'pointer',
                    borderBottom:'1px solid rgba(17,24,61,.05)', background:isOpen?SK.iceBlueLight:'transparent' }}
                    onMouseEnter={e=>{if(!isOpen)e.currentTarget.style.background='rgba(17,24,61,.02)';}}
                    onMouseLeave={e=>{if(!isOpen)e.currentTarget.style.background=isOpen?SK.iceBlueLight:'transparent';}}>
                    <td style={{ padding:'12px 20px' }}>
                      <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                        <span style={{ width:8, height:8, borderRadius:'50%', flexShrink:0, background:s.type==='morselskap'?SK.ink:SK.coral }} />
                        <div>
                          <div style={{ fontSize:13, fontWeight:s.type==='morselskap'?700:500 }}>{s.navn.replace('OsloKollega ','')}</div>
                          <div style={{ fontSize:11, color:SK.soft }}>{s.type==='morselskap'?'Morselskap':`Datterselskap · ${avdC} avd.`}</div>
                        </div>
                      </div>
                    </td>
                    <td style={{ padding:'12px 16px', textAlign:'right', fontSize:13 }}>{BO_mnok(r.inntekt)}</td>
                    <td style={{ padding:'12px 16px', textAlign:'right', fontSize:13 }}>{BO_mnok(r.kostnad)}</td>
                    <td style={{ padding:'12px 16px', textAlign:'right' }}>
                      <span style={{ fontSize:13, fontWeight:700, color:res>0?'#1b6a2e':res<0?SK.coral:SK.soft }}>{BO_mnok(res)}</span>
                      {fjRes!=null && <div style={{ fontSize:10.5, color:SK.soft }}>{samLabel}: {BO_mnok(fjRes)}</div>}
                    </td>
                    <td style={{ padding:'12px 20px', textAlign:'right', fontSize:12.5, color:marg!=null&&marg>0?'#1b6a2e':SK.soft }}>{marg!=null?BO_pct(marg):'—'}</td>
                  </tr>
                  {isOpen && (data.enheter||[]).filter(e=>e.selskap_id===s.id&&e.type!=='styre').sort((a,b)=>(a.avd_nr||'').localeCompare(b.avd_nr||'')).map(e => {
                    const ap = avdPoster.filter(p=>p.avd_id===e.id);
                    const ai = -ap.filter(p=>p.belop<0).reduce((s,p)=>s+p.belop,0);
                    const ak =  ap.filter(p=>p.belop>0).reduce((s,p)=>s+p.belop,0);
                    const ar = ai - ak;
                    if (!ap.length) return null;
                    return (
                      <tr key={e.id} style={{ background:'#f8f9ff', borderBottom:'1px solid rgba(17,24,61,.04)' }}>
                        <td style={{ padding:'8px 20px 8px 44px', fontSize:12 }}>
                          <span style={{ color:SK.soft, marginRight:8 }}>{e.avd_nr}</span>{e.navn}
                        </td>
                        <td style={{ padding:'8px 16px', textAlign:'right', fontSize:12, color:SK.soft }}>{BO_mnok(ai)}</td>
                        <td style={{ padding:'8px 16px', textAlign:'right', fontSize:12, color:SK.soft }}>{BO_mnok(ak)}</td>
                        <td style={{ padding:'8px 16px', textAlign:'right', fontSize:12.5, fontWeight:600, color:ar>0?'#1b6a2e':ar<0?SK.coral:SK.soft }}>{BO_mnok(ar)}</td>
                        <td style={{ padding:'8px 20px', textAlign:'right', fontSize:11.5, color:SK.soft }}>{ai>0?BO_pct(ar/ai):'—'}</td>
                      </tr>
                    );
                  })}
                </React.Fragment>
              );
            })}
            {/* Konserninternt (nuller seg ut — vises for transparens) */}
            {(konsernIntInn > 0 || konsernIntKost > 0) && (
              <tr style={{ borderTop:'1px solid rgba(17,24,61,.07)', background:'rgba(224,141,60,.04)' }}>
                <td style={{ padding:'10px 20px' }}>
                  <div style={{ fontSize:12.5, fontWeight:600, color:'#8e5a05' }}>Eliminering konserninternt</div>
                  <div style={{ fontSize:11, color:SK.soft }}>Viderefakturering mor → dtre · nuller seg ut</div>
                </td>
                <td style={{ padding:'10px 16px', textAlign:'right', fontSize:13, color:'#8e5a05' }}>{konsernIntInn>0?BO_mnok(-konsernIntInn):'—'}</td>
                <td style={{ padding:'10px 16px', textAlign:'right', fontSize:13, color:'#8e5a05' }}>{konsernIntKost>0?BO_mnok(konsernIntKost):'—'}</td>
                <td style={{ padding:'10px 16px', textAlign:'right', fontSize:13, fontWeight:600, color:'#8e5a05' }}>0,0</td>
                <td></td>
              </tr>
            )}
            {/* Konsern sum */}
            <tr style={{ borderTop:'2px solid rgba(17,24,61,.12)', background:SK.iceBlueLight }}>
              <td style={{ padding:'12px 20px', fontSize:13, fontWeight:800, color:SK.ink }}>Konsern (konsolidert)</td>
              <td style={{ padding:'12px 16px', textAlign:'right', fontSize:13, fontWeight:700 }}>{BO_mnok(naa.inntekt)}</td>
              <td style={{ padding:'12px 16px', textAlign:'right', fontSize:13, fontWeight:700 }}>{BO_mnok(naa.kostnad)}</td>
              <td style={{ padding:'12px 16px', textAlign:'right', fontSize:14, fontWeight:800, color:naa.resultat>0?'#1b6a2e':SK.coral }}>{BO_mnok(naa.resultat)}</td>
              <td style={{ padding:'12px 20px', textAlign:'right', fontSize:13, fontWeight:700, color:SK.soft }}>{margin!=null?BO_pct(margin):'—'}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}


// ════════════════════════════════════════════════════════════
// PER AVDELING
// ════════════════════════════════════════════════════════════
function BudPerAvdeling({ data, post, versjonId, versjon, selById, enhById }) {
  const [valgtSelskap, setValgtSelskap] = React.useState('alle');
  const [apenAvd,      setApenAvd]      = React.useState({});
  const [apenKonto,    setApenKonto]    = React.useState({});
  const [soek,         setSoek]         = React.useState('');

  const fjoraarsVersjon = (data.versjoner||[]).find(v => v.ar === (versjon?.ar||0)-1 && v.type==='budsjett');
  const fjoraarsPost    = fjoraarsVersjon ? window.budBeregnPosteringer(data, fjoraarsVersjon.id) : [];

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

  // Bygg per-avdeling aggregat for gjeldende versjon
  const perAvd = {};
  post.forEach(p => {
    if (!perAvd[p.avd_id]) perAvd[p.avd_id] = { inntekt:0, kostnad:0, poster:[] };
    if (p.belop<0) perAvd[p.avd_id].inntekt -= p.belop;
    else perAvd[p.avd_id].kostnad += p.belop;
    perAvd[p.avd_id].poster.push(p);
  });

  // Fjorårets per-avdeling
  const fjorAvd = {};
  fjoraarsPost.forEach(p => {
    if (!fjorAvd[p.avd_id]) fjorAvd[p.avd_id] = { inntekt:0, kostnad:0 };
    if (p.belop<0) fjorAvd[p.avd_id].inntekt -= p.belop;
    else fjorAvd[p.avd_id].kostnad += p.belop;
  });

  const avdListe = (data.enheter||[])
    .filter(e => perAvd[e.id])
    .filter(e => valgtSelskap==='alle' || e.selskap_id===valgtSelskap)
    .filter(e => !soek || e.navn.toLowerCase().includes(soek.toLowerCase()) || (e.avd_nr||'').includes(soek))
    .sort((a,b)=>(a.avd_nr||'').localeCompare(b.avd_nr||''));

  const samLabel = fjoraarsVersjon ? `B${fjoraarsVersjon.ar}` : null;
  const totInn  = avdListe.reduce((s,e)=>s+(perAvd[e.id]?.inntekt||0),0);
  const totKost = avdListe.reduce((s,e)=>s+(perAvd[e.id]?.kostnad||0),0);
  const totRes  = totInn - totKost;

  return (
    <div>
      {/* Filtrering */}
      <div style={{ display:'flex', gap:8, marginBottom:16, flexWrap:'wrap', alignItems:'center' }}>
        <button onClick={()=>setValgtSelskap('alle')} style={{ padding:'6px 14px', borderRadius:7, fontSize:12.5, fontWeight:600, cursor:'pointer', fontFamily:'inherit',
          border:valgtSelskap==='alle'?'none':'1px solid rgba(17,24,61,.12)', background:valgtSelskap==='alle'?SK.ink:'#fff', color:valgtSelskap==='alle'?'#fff':SK.ink }}>
          Alle selskaper
        </button>
        {(data.selskaper||[]).map(s => (
          <button key={s.id} onClick={()=>setValgtSelskap(s.id)} style={{ padding:'6px 14px', borderRadius:7, fontSize:12.5, fontWeight:600, cursor:'pointer', fontFamily:'inherit',
            border:valgtSelskap===s.id?'none':'1px solid rgba(17,24,61,.12)', background:valgtSelskap===s.id?SK.ink:'#fff', color:valgtSelskap===s.id?'#fff':SK.ink }}>
            {s.navn.replace('OsloKollega ','')}
          </button>
        ))}
        <input className="ok-input" value={soek} onChange={e=>setSoek(e.target.value)}
          style={{ marginLeft:'auto', padding:'6px 12px', fontSize:12.5, width:180 }} placeholder="Søk avdeling…" />
      </div>

      {/* Tabell */}
      <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)' }}>
              <th style={{ padding:'9px 20px 9px 14px', textAlign:'left', fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.05, width:32 }}></th>
              <th style={{ padding:'9px 8px', textAlign:'left', fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.05 }}>Avdeling</th>
              <th style={{ padding:'9px 16px', textAlign:'right', fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.05 }}>Inntekter</th>
              <th style={{ padding:'9px 16px', textAlign:'right', fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.05 }}>Kostnader</th>
              <th style={{ padding:'9px 16px', textAlign:'right', fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.05 }}>Resultat</th>
              <th style={{ padding:'9px 20px', textAlign:'right', fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.05 }}>Margin</th>
            </tr>
          </thead>
          <tbody>
            {avdListe.map(e => {
              const r   = perAvd[e.id];
              const fj  = fjorAvd[e.id];
              const res = r.inntekt - r.kostnad;
              const marg= r.inntekt > 0 ? res/r.inntekt : null;
              const fjRes = fj ? fj.inntekt - fj.kostnad : null;
              const isOpen = apenAvd[e.id];

              // Konto-drill
              const kontoMap = {};
              r.poster.forEach(p => {
                if (!kontoMap[p.konto]) kontoMap[p.konto] = { konto:p.konto, inntekt:0, kostnad:0, poster:[] };
                if (p.belop<0) kontoMap[p.konto].inntekt -= p.belop;
                else kontoMap[p.konto].kostnad += p.belop;
                kontoMap[p.konto].poster.push(p);
              });
              const kontoLinjer = Object.values(kontoMap).sort((a,b)=>a.konto-b.konto);

              return (
                <React.Fragment key={e.id}>
                  <tr onClick={()=>setApenAvd(a=>({...a,[e.id]:!a[e.id]}))} style={{ cursor:'pointer', borderBottom:'1px solid rgba(17,24,61,.05)', background:isOpen?SK.iceBlueLight:'transparent' }}
                    onMouseEnter={ev=>{if(!isOpen)ev.currentTarget.style.background='rgba(17,24,61,.02)';}}
                    onMouseLeave={ev=>{if(!isOpen)ev.currentTarget.style.background='transparent';}}>
                    <td style={{ padding:'11px 8px 11px 20px', color:SK.soft, fontSize:12 }}>{isOpen?'▾':'▸'}</td>
                    <td style={{ padding:'11px 8px' }}>
                      <div style={{ fontSize:13, fontWeight:500, color:SK.ink }}>{e.navn}</div>
                      <div style={{ fontSize:11, color:SK.soft }}>{e.avd_nr} · {selById[e.selskap_id]?.navn?.replace('OsloKollega ','')}</div>
                    </td>
                    <td style={{ padding:'11px 16px', textAlign:'right', fontSize:13 }}>{BO_mnok(r.inntekt)}</td>
                    <td style={{ padding:'11px 16px', textAlign:'right', fontSize:13 }}>{BO_mnok(r.kostnad)}</td>
                    <td style={{ padding:'11px 16px', textAlign:'right' }}>
                      <span style={{ fontSize:13, fontWeight:700, color:res>0?'#1b6a2e':res<0?SK.coral:SK.soft }}>{BO_mnok(res)}</span>
                      {fjRes!=null && <div style={{ fontSize:10.5, color:SK.soft }}>{samLabel}: {BO_mnok(fjRes)}</div>}
                    </td>
                    <td style={{ padding:'11px 20px', textAlign:'right', fontSize:12.5, color:marg!=null&&marg>0?'#1b6a2e':SK.soft }}>{marg!=null?BO_pct(marg):'—'}</td>
                  </tr>

                  {/* Konto-drill */}
                  {isOpen && kontoLinjer.map(kl => {
                    const koRes = kl.inntekt - kl.kostnad;
                    const koOpen = apenKonto[e.id+'-'+kl.konto];
                    return (
                      <React.Fragment key={kl.konto}>
                        <tr onClick={()=>setApenKonto(a=>({...a,[e.id+'-'+kl.konto]:!a[e.id+'-'+kl.konto]}))}
                          style={{ cursor:'pointer', background:'#f8f9ff', borderBottom:'1px solid rgba(17,24,61,.04)' }}>
                          <td style={{ padding:'7px 8px 7px 36px', fontSize:11, color:SK.soft }}>{koOpen?'▾':'▸'}</td>
                          <td style={{ padding:'7px 8px' }}>
                            <span style={{ fontSize:11.5, fontFamily:'ui-monospace,monospace', color:SK.soft, marginRight:8 }}>{kl.konto}</span>
                            <span style={{ fontSize:12 }}>{kpByKonto[kl.konto]?.navn || 'Konto '+kl.konto}</span>
                          </td>
                          <td style={{ padding:'7px 16px', textAlign:'right', fontSize:12, color:SK.soft }}>{kl.inntekt?BO_mnok(kl.inntekt):'—'}</td>
                          <td style={{ padding:'7px 16px', textAlign:'right', fontSize:12, color:SK.soft }}>{kl.kostnad?BO_mnok(kl.kostnad):'—'}</td>
                          <td style={{ padding:'7px 16px', textAlign:'right', fontSize:12.5, fontWeight:500, color:koRes>0?'#1b6a2e':koRes<0?SK.coral:SK.soft }}>{BO_mnok(koRes)}</td>
                          <td style={{ padding:'7px 20px' }}></td>
                        </tr>
                        {/* Posteringsdetaljer */}
                        {koOpen && kl.poster.map((p,i) => (
                          <tr key={i} style={{ background:'#f4f5fc', borderBottom:'1px solid rgba(17,24,61,.03)' }}>
                            <td colSpan={2} style={{ padding:'5px 8px 5px 56px', fontSize:11, color:SK.soft }}>{p.tekst||p.kilde||p.type}</td>
                            <td colSpan={2}></td>
                            <td style={{ padding:'5px 16px', textAlign:'right', fontSize:11, color:p.belop<0?'#1b6a2e':SK.soft }}>{window.budFmtKrFull(p.belop)}</td>
                            <td></td>
                          </tr>
                        ))}
                      </React.Fragment>
                    );
                  })}
                </React.Fragment>
              );
            })}

            {/* Sum-rad */}
            <tr style={{ borderTop:'2px solid rgba(17,24,61,.12)', background:SK.iceBlueLight }}>
              <td colSpan={2} style={{ padding:'12px 20px', fontSize:13, fontWeight:800, color:SK.ink }}>
                Sum {valgtSelskap!=='alle' ? selById[valgtSelskap]?.navn?.replace('OsloKollega ','') : 'alle avdelinger'}
              </td>
              <td style={{ padding:'12px 16px', textAlign:'right', fontSize:13, fontWeight:700 }}>{BO_mnok(totInn)}</td>
              <td style={{ padding:'12px 16px', textAlign:'right', fontSize:13, fontWeight:700 }}>{BO_mnok(totKost)}</td>
              <td style={{ padding:'12px 16px', textAlign:'right', fontSize:14, fontWeight:800, color:totRes>0?'#1b6a2e':SK.coral }}>{BO_mnok(totRes)}</td>
              <td style={{ padding:'12px 20px', textAlign:'right', fontSize:13, fontWeight:700, color:SK.soft }}>{totInn>0?BO_pct(totRes/totInn):'—'}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}

Object.assign(window, { BudOversikt, BudPerAvdeling });