// budsjett-avdrapport.jsx
// Avdelingsrapport med grupperinger for Rapport-fanen og Oversikt-fanen.
// Eksporterer: BudAvdRapport, BudAvdGruppeoppsett

// ── Formatering ──────────────────────────────────────────────────────────────
const BAR_fmt  = n => n == null ? '—' : Math.round(n/1000).toLocaleString('nb-NO');
const BAR_pct  = n => n == null ? '—' : (n*100).toFixed(1).replace('.',',')+' %';

const SK2 = {
  ink: '#11183d', soft: '#6b7280', iceBlue: '#e8ecf7', iceBlueLight: '#f3f5fc',
  coral: '#e05252', green: '#1b6a2e',
};

// ── Summer posteringer for én avdeling via rapportoppsett ────────────────────
function barSummerAvd(posteringer, versjonId, data) {
  // Bygg belopPerRl fra posteringer for denne avdelingen
  const belopPerRl = {};
  posteringer.forEach(p => {
    const m = (data.kontomapping || []).find(x =>
      x.versjon_id === versjonId && x.konto === p.konto &&
      (x.selskap_id === p.selskap_id || x.selskap_id == null)
    );
    if (!m || !m.rapportlinje_id) return;
    belopPerRl[m.rapportlinje_id] = (belopPerRl[m.rapportlinje_id] || 0) + p.belop;
  });

  const rl = (data.rapportlinjer || []).filter(r => r.versjon_id === versjonId && !r.selskap_id);
  const sum = (fra, til, type) => {
    let tot = 0;
    rl.filter(r => r.linjenr >= fra && r.linjenr <= til
                && r.type !== 'sum' && r.type !== 'subtotal'
                && (!type || r.type === type))
      .forEach(r => { tot += belopPerRl[r.id] || 0; });
    return tot;
  };

  const inntekt    = -sum(100, 190);
  const kostnad    = sum(210, 395, 'kostnad') - (-sum(210, 395, 'inntekt'));
  const finansInn  = -sum(410, 410);
  const finansKost =  sum(420, 420);
  const avkastning = -sum(430, 430);
  const nFinans    = finansInn - finansKost + avkastning;

  return { inntekt, kostnad, resultat: inntekt - kostnad, nFinans };
}

// ── BudAvdRapport ────────────────────────────────────────────────────────────
function BudAvdRapport({ data, versjonId, selById }) {
  const [åpenGruppe, setÅpenGruppe] = React.useState({});

  // Finn gjeldende og forrige versjon
  const versjon       = (data.versjoner || []).find(v => v.id === versjonId);
  const forrigeVersjon = (data.versjoner || []).find(v => v.ar === (versjon?.ar - 1) && v.type === versjon?.type);

  // Beregn alle posteringer
  const post     = window.budBeregnPosteringer(data, versjonId);
  const fjorPost = forrigeVersjon ? window.budBeregnPosteringer(data, forrigeVersjon.id) : [];

  // Grupper og koblinger
  const grupper        = (data.avdGrupper || []).slice().sort((a,b) => a.sortering - b.sortering);
  const vanligeGrupper = grupper.filter(g => !g.er_tiltak);
  const tiltakGrupper  = grupper.filter(g =>  g.er_tiltak);
  const koblinger      = data.avdGruppeKobling || [];
  const tiltakKobling  = data.avdTiltakKobling || [];
  const gruppeById     = Object.fromEntries(grupper.map(g => [g.id, g]));
  const gruppeForEnhet = Object.fromEntries(koblinger.map(k => [k.enhet_id, k.gruppe_id]));
  const tiltakForEnhet = Object.fromEntries(tiltakKobling.map(k => [k.enhet_id, k.tiltak_id]));

  // Bygg per-avdeling summer
  const avdPost = {};
  post.forEach(p => {
    if (!avdPost[p.avd_id]) avdPost[p.avd_id] = [];
    avdPost[p.avd_id].push(p);
  });
  const fjorAvdPost = {};
  fjorPost.forEach(p => {
    if (!fjorAvdPost[p.avd_id]) fjorAvdPost[p.avd_id] = [];
    fjorAvdPost[p.avd_id].push(p);
  });

  const sumAvd = (avdId, vId, postMap) => {
    const ps = postMap[avdId] || [];
    if (!ps.length) return { inntekt:0, kostnad:0, resultat:0, nFinans:0 };
    return barSummerAvd(ps, vId, data);
  };

  const harTiltak = tiltakGrupper.length > 0 && tiltakKobling.length > 0;

  // Summer en gruppe
  const sumGruppe = (gruppeId, vId, postMap) => {
    const enheter = (data.enheter || []).filter(e => gruppeForEnhet[e.id] === gruppeId);
    return enheter.reduce((acc, e) => {
      const s = sumAvd(e.id, vId, postMap);
      return { inntekt: acc.inntekt+s.inntekt, kostnad: acc.kostnad+s.kostnad,
               resultat: acc.resultat+s.resultat, nFinans: acc.nFinans+s.nFinans };
    }, { inntekt:0, kostnad:0, resultat:0, nFinans:0 });
  };

  // Summer selskap
  const sumSelskap = (selskapId, vId, postMap) => {
    const enheter = (data.enheter || []).filter(e => e.selskap_id === selskapId);
    return enheter.reduce((acc, e) => {
      const s = sumAvd(e.id, vId, postMap);
      return { inntekt: acc.inntekt+s.inntekt, kostnad: acc.kostnad+s.kostnad,
               resultat: acc.resultat+s.resultat, nFinans: acc.nFinans+s.nFinans };
    }, { inntekt:0, kostnad:0, resultat:0, nFinans:0 });
  };

  // Summer konsern
  const sumKonsern = (vId, postMap) => {
    return (data.enheter || []).reduce((acc, e) => {
      const s = sumAvd(e.id, vId, postMap);
      return { inntekt: acc.inntekt+s.inntekt, kostnad: acc.kostnad+s.kostnad,
               resultat: acc.resultat+s.resultat, nFinans: acc.nFinans+s.nFinans };
    }, { inntekt:0, kostnad:0, resultat:0, nFinans:0 });
  };

  const th = (label, right) => (
    <th style={{ padding:'8px 12px', textAlign:right?'right':'left',
      fontSize:10, fontWeight:700, color:SK2.soft, textTransform:'uppercase',
      letterSpacing:0.08, borderBottom:'1px solid rgba(17,24,61,.08)', whiteSpace:'nowrap' }}>
      {label}
    </th>
  );

  const samLabel = forrigeVersjon ? `B${forrigeVersjon.ar}` : null;

  // Rad-komponent
  const Rad = ({ navn, naa, fjor, bold, indent, erSelskap, grå }) => {
    const res = naa.resultat;
    const fjorRes = fjor?.resultat ?? null;
    const avvik = fjorRes != null ? res - fjorRes : null;
    return (
      <tr style={{ borderBottom:'1px solid rgba(17,24,61,.04)',
        background: bold ? SK2.iceBlueLight : grå ? 'rgba(17,24,61,.015)' : 'transparent' }}>
        <td style={{ padding:`${bold?9:7}px 12px`, paddingLeft: indent ? 28 : 12 }}>
          <span style={{ fontSize: bold?13:12.5, fontWeight: bold?700:400,
            color: erSelskap ? SK2.soft : SK2.ink }}>{navn}</span>
        </td>
        <td style={{ padding:'7px 12px', textAlign:'right', fontSize:12.5,
          color: naa.inntekt>0?SK2.ink:SK2.soft }}>
          {naa.inntekt ? BAR_fmt(naa.inntekt) : '—'}
        </td>
        <td style={{ padding:'7px 12px', textAlign:'right', fontSize:12.5,
          color: naa.kostnad>0?SK2.ink:SK2.soft }}>
          {naa.kostnad ? BAR_fmt(naa.kostnad) : '—'}
        </td>
        <td style={{ padding:'7px 12px', textAlign:'right' }}>
          <span style={{ fontSize:bold?13:12.5, fontWeight:bold?700:500,
            color: res>0?SK2.green:res<0?SK2.coral:SK2.soft }}>
            {BAR_fmt(res)}
          </span>
          {samLabel && fjorRes!=null && (
            <div style={{ fontSize:10, color:SK2.soft }}>{samLabel}: {BAR_fmt(fjorRes)}</div>
          )}
        </td>
        {samLabel && (
          <td style={{ padding:'7px 12px', textAlign:'right', fontSize:12,
            color: avvik!=null ? (avvik>0?SK2.green:avvik<0?SK2.coral:SK2.soft) : SK2.soft }}>
            {avvik!=null ? BAR_fmt(avvik) : '—'}
          </td>
        )}
        <td style={{ padding:'7px 12px', textAlign:'right', fontSize:12,
          color: naa.nFinans>0?SK2.green:naa.nFinans<0?SK2.coral:SK2.soft }}>
          {naa.nFinans ? BAR_fmt(naa.nFinans) : '—'}
        </td>
        <td style={{ padding:'7px 12px', textAlign:'right', fontSize:11.5, color:SK2.soft }}>
          {naa.inntekt>0 ? BAR_pct(naa.resultat/naa.inntekt) : '—'}
        </td>
      </tr>
    );
  };

  // Grupper avdelinger per selskap (for selskaps-sum-rader)
  const selskaper = (data.selskaper || []).filter(s => s.type !== 'morselskap' || true);

  // Tiltak-sum: summer avdelinger basert på tiltakForEnhet (separat fra gruppeForEnhet)
  const sumTiltak = (tiltakId, vId, postMap) => {
    const enheter = (data.enheter || []).filter(e => tiltakForEnhet[e.id] === tiltakId);
    return enheter.reduce((acc, e) => {
      const s = sumAvd(e.id, vId, postMap);
      return { inntekt: acc.inntekt+s.inntekt, kostnad: acc.kostnad+s.kostnad,
               resultat: acc.resultat+s.resultat, nFinans: acc.nFinans+s.nFinans };
    }, { inntekt:0, kostnad:0, resultat:0, nFinans:0 });
  };

  const TiltakBlokk = () => {
    if (!harTiltak) return null;
    const tiltakSummer = tiltakGrupper.map(g => ({
      gruppe: g,
      naa: sumTiltak(g.id, versjonId, avdPost),
      fjor: forrigeVersjon ? sumTiltak(g.id, forrigeVersjon.id, fjorAvdPost) : null,
    }));
    const tiltakTotal = tiltakSummer.reduce(
      (acc,t) => ({ inntekt:acc.inntekt+t.naa.inntekt, kostnad:acc.kostnad+t.naa.kostnad,
                    resultat:acc.resultat+t.naa.resultat, nFinans:acc.nFinans+t.naa.nFinans }),
      { inntekt:0, kostnad:0, resultat:0, nFinans:0 }
    );
    const tiltakFjorTotal = forrigeVersjon ? tiltakSummer.reduce(
      (acc,t) => t.fjor ? { inntekt:acc.inntekt+t.fjor.inntekt, kostnad:acc.kostnad+t.fjor.kostnad,
                             resultat:acc.resultat+t.fjor.resultat, nFinans:acc.nFinans+t.fjor.nFinans } : acc,
      { inntekt:0, kostnad:0, resultat:0, nFinans:0 }
    ) : null;
    return (
      <>
        {tiltakSummer.map(({ gruppe, naa, fjor }) => (
          <Rad key={gruppe.id} navn={gruppe.navn} naa={naa} fjor={fjor} indent />
        ))}
        <Rad navn="Sum Per tiltak" naa={tiltakTotal} fjor={tiltakFjorTotal} bold grå />
      </>
    );
  };

  // Bygg visning per selskap
  const konsernNaa  = sumKonsern(versjonId, avdPost);
  const konsernFjor = forrigeVersjon ? sumKonsern(forrigeVersjon.id, fjorAvdPost) : null;

  return (
    <div style={{ padding:'0 0 32px' }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:16 }}>
        <div>
          <div style={{ fontSize:16, fontWeight:700, color:SK2.ink }}>Budsjett per avdeling og selskap</div>
          <div style={{ fontSize:12, color:SK2.soft, marginTop:2 }}>
            Beløp i TNOK · Driftsresultat ekskl. finansposter
            {samLabel && ` · Avvik mot ${samLabel}`}
          </div>
        </div>
      </div>

      <div style={{ background:'#fff', borderRadius:12, border:'1px solid rgba(17,24,61,.08)', overflow:'hidden' }}>
        <table style={{ width:'100%', borderCollapse:'collapse' }}>
          <thead>
            <tr style={{ background:SK2.iceBlueLight }}>
              {th('Spesifikasjon resultat')}
              {th('Inntekter', true)}
              {th('Kostnader', true)}
              {th('Driftsresultat', true)}
              {samLabel && th(`Avvik mot ${samLabel}`, true)}
              {th('Finansposter', true)}
              {th('Margin', true)}
            </tr>
          </thead>
          <tbody>
            {/* Selskaper med grupper */}
            {selskaper.map(sel => {
              const selAvd = (data.enheter || []).filter(e => e.selskap_id === sel.id);
              if (!selAvd.length) return null;
              const selNaa  = sumSelskap(sel.id, versjonId, avdPost);
              const selFjor = forrigeVersjon ? sumSelskap(sel.id, forrigeVersjon.id, fjorAvdPost) : null;

              // Vanlige grupper med avdelinger i dette selskapet
              const grupperISelskap = vanligeGrupper.filter(g =>
                selAvd.some(e => gruppeForEnhet[e.id] === g.id)
              );
              // Avdelinger uten gruppe i dette selskapet
              const utenGruppe = selAvd.filter(e => !gruppeForEnhet[e.id]);

              return (
                <React.Fragment key={sel.id}>
                  {grupperISelskap.map(g => {
                    const avdIGruppe = selAvd.filter(e => gruppeForEnhet[e.id] === g.id);
                    const gNaa  = avdIGruppe.reduce((acc,e) => {
                      const s = sumAvd(e.id, versjonId, avdPost);
                      return { inntekt:acc.inntekt+s.inntekt, kostnad:acc.kostnad+s.kostnad,
                               resultat:acc.resultat+s.resultat, nFinans:acc.nFinans+s.nFinans };
                    }, {inntekt:0,kostnad:0,resultat:0,nFinans:0});
                    const gFjor = forrigeVersjon ? avdIGruppe.reduce((acc,e) => {
                      const s = sumAvd(e.id, forrigeVersjon.id, fjorAvdPost);
                      return { inntekt:acc.inntekt+s.inntekt, kostnad:acc.kostnad+s.kostnad,
                               resultat:acc.resultat+s.resultat, nFinans:acc.nFinans+s.nFinans };
                    }, {inntekt:0,kostnad:0,resultat:0,nFinans:0}) : null;

                    const isOpen = åpenGruppe[g.id+sel.id];
                    return (
                      <React.Fragment key={g.id}>
                        <tr onClick={()=>setÅpenGruppe(a=>({...a,[g.id+sel.id]:!a[g.id+sel.id]}))}
                          style={{ cursor:'pointer', borderBottom:'1px solid rgba(17,24,61,.05)',
                            background: isOpen ? SK2.iceBlueLight : 'rgba(17,24,61,.015)' }}>
                          <td style={{ padding:'8px 12px' }}>
                            <span style={{ fontSize:13, fontWeight:600, color:SK2.ink }}>
                              {isOpen?'▾':'▸'} {g.navn}
                            </span>
                          </td>
                          <td style={{ padding:'8px 12px', textAlign:'right', fontSize:12.5 }}>{gNaa.inntekt ? BAR_fmt(gNaa.inntekt) : '—'}</td>
                          <td style={{ padding:'8px 12px', textAlign:'right', fontSize:12.5 }}>{gNaa.kostnad ? BAR_fmt(gNaa.kostnad) : '—'}</td>
                          <td style={{ padding:'8px 12px', textAlign:'right' }}>
                            <span style={{ fontSize:13, fontWeight:700,
                              color:gNaa.resultat>0?SK2.green:gNaa.resultat<0?SK2.coral:SK2.soft }}>
                              {BAR_fmt(gNaa.resultat)}
                            </span>
                            {samLabel && gFjor && (
                              <div style={{ fontSize:10, color:SK2.soft }}>{samLabel}: {BAR_fmt(gFjor.resultat)}</div>
                            )}
                          </td>
                          {samLabel && (
                            <td style={{ padding:'8px 12px', textAlign:'right', fontSize:12, color:SK2.soft }}>
                              {gFjor ? BAR_fmt(gNaa.resultat - gFjor.resultat) : '—'}
                            </td>
                          )}
                          <td style={{ padding:'8px 12px', textAlign:'right', fontSize:12,
                            color:gNaa.nFinans>0?SK2.green:gNaa.nFinans<0?SK2.coral:SK2.soft }}>
                            {gNaa.nFinans ? BAR_fmt(gNaa.nFinans) : '—'}
                          </td>
                          <td style={{ padding:'8px 12px', textAlign:'right', fontSize:11.5, color:SK2.soft }}>
                            {gNaa.inntekt>0 ? BAR_pct(gNaa.resultat/gNaa.inntekt) : '—'}
                          </td>
                        </tr>
                        {isOpen && avdIGruppe.map(e => {
                          const naa  = sumAvd(e.id, versjonId, avdPost);
                          const fjor = forrigeVersjon ? sumAvd(e.id, forrigeVersjon.id, fjorAvdPost) : null;
                          return <Rad key={e.id} navn={`${e.avd_nr} ${e.navn}`} naa={naa} fjor={fjor} indent />;
                        })}
                      </React.Fragment>
                    );
                  })}

                  {/* Tiltak-blokk (kun én gang, under første selskap med tiltak) */}
                  {harTiltak && tiltakGrupper.some(g => selAvd.some(e => tiltakForEnhet[e.id] === g.id)) && (
                    <React.Fragment>
                      <tr style={{ background:'rgba(17,24,61,.015)', borderBottom:'1px solid rgba(17,24,61,.05)' }}>
                        <td colSpan={7} style={{ padding:'8px 12px 4px', fontSize:11, fontWeight:700,
                          color:SK2.soft, textTransform:'uppercase', letterSpacing:0.08 }}>
                          Per tiltak
                        </td>
                      </tr>
                      <TiltakBlokk />
                    </React.Fragment>
                  )}

                  {/* Avdelinger uten gruppe */}
                  {utenGruppe.map(e => {
                    const naa  = sumAvd(e.id, versjonId, avdPost);
                    const fjor = forrigeVersjon ? sumAvd(e.id, forrigeVersjon.id, fjorAvdPost) : null;
                    return <Rad key={e.id} navn={`${e.avd_nr} ${e.navn}`} naa={naa} fjor={fjor} indent />;
                  })}

                  {/* Selskaps-sum */}
                  <Rad navn={`Sum ${sel.navn.replace('OsloKollega ','')}`}
                    naa={selNaa} fjor={selFjor} bold />

                  {/* Herav avkastning verdipapirer for selskapet */}
                  {selNaa.nFinans !== 0 && (
                    <tr style={{ borderBottom:'1px solid rgba(17,24,61,.04)', background:'rgba(17,24,61,.01)' }}>
                      <td style={{ padding:'5px 12px 5px 28px', fontSize:11.5, color:SK2.soft, fontStyle:'italic' }}>
                        Herav avkastning verdipapirer
                      </td>
                      <td colSpan={5}></td>
                      <td style={{ padding:'5px 12px', textAlign:'right', fontSize:11.5, color:SK2.soft }}>
                        {BAR_fmt(selNaa.nFinans)}
                      </td>
                    </tr>
                  )}
                </React.Fragment>
              );
            })}

            {/* Konsern total */}
            <tr style={{ borderTop:'2px solid rgba(17,24,61,.12)', background:SK2.iceBlueLight }}>
              <td style={{ padding:'10px 12px', fontSize:13, fontWeight:800, color:SK2.ink }}>
                Totalt OsloKollega Konsern
              </td>
              <td style={{ padding:'10px 12px', textAlign:'right', fontSize:13, fontWeight:700 }}>
                {BAR_fmt(konsernNaa.inntekt)}
              </td>
              <td style={{ padding:'10px 12px', textAlign:'right', fontSize:13, fontWeight:700 }}>
                {BAR_fmt(konsernNaa.kostnad)}
              </td>
              <td style={{ padding:'10px 12px', textAlign:'right' }}>
                <span style={{ fontSize:14, fontWeight:800,
                  color:konsernNaa.resultat>0?SK2.green:konsernNaa.resultat<0?SK2.coral:SK2.soft }}>
                  {BAR_fmt(konsernNaa.resultat)}
                </span>
                {samLabel && konsernFjor && (
                  <div style={{ fontSize:10.5, color:SK2.soft }}>
                    {samLabel}: {BAR_fmt(konsernFjor.resultat)}
                  </div>
                )}
              </td>
              {samLabel && (
                <td style={{ padding:'10px 12px', textAlign:'right', fontSize:13, fontWeight:700,
                  color: konsernFjor ? (konsernNaa.resultat-konsernFjor.resultat>0?SK2.green:SK2.coral) : SK2.soft }}>
                  {konsernFjor ? BAR_fmt(konsernNaa.resultat - konsernFjor.resultat) : '—'}
                </td>
              )}
              <td style={{ padding:'10px 12px', textAlign:'right', fontSize:13, fontWeight:700,
                color:konsernNaa.nFinans>0?SK2.green:konsernNaa.nFinans<0?SK2.coral:SK2.soft }}>
                {BAR_fmt(konsernNaa.nFinans)}
              </td>
              <td style={{ padding:'10px 12px', textAlign:'right', fontSize:12.5, color:SK2.soft }}>
                {konsernNaa.inntekt>0 ? BAR_pct(konsernNaa.resultat/konsernNaa.inntekt) : '—'}
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* ── Tiltak-sammendrag ── */}
      {harTiltak && (
      <div style={{ marginTop:32 }}>
        <div style={{ fontSize:15, fontWeight:700, color:SK2.ink, marginBottom:4 }}>
          Sammendrag per tiltak
        </div>
        <div style={{ fontSize:12, color:SK2.soft, marginBottom:14 }}>
          Avdelinger summert på tvers av selskaper — ingen eliminering
        </div>
        <div style={{ background:'#fff', borderRadius:12, border:'1px solid rgba(17,24,61,.08)', overflow:'hidden' }}>
          <table style={{ width:'100%', borderCollapse:'collapse' }}>
            <thead>
              <tr style={{ background:SK2.iceBlueLight }}>
                {th('Tiltak')}
                {th('Inntekter', true)}
                {th('Kostnader', true)}
                {th('Driftsresultat', true)}
                {samLabel && th(`Avvik mot ${samLabel}`, true)}
                {th('Finansposter', true)}
                {th('Margin', true)}
              </tr>
            </thead>
            <tbody>
              {tiltakGrupper.map(g => {
                const naa  = sumTiltak(g.id, versjonId, avdPost);
                const fjor = forrigeVersjon ? sumTiltak(g.id, forrigeVersjon.id, fjorAvdPost) : null;
                // Finn avdelinger i dette tiltaket
                const avdITiltak = (data.enheter||[]).filter(e => tiltakForEnhet[e.id] === g.id);
                if (!avdITiltak.length) return null;
                const isOpen = åpenGruppe['tiltak-'+g.id];
                const avvik = fjor ? naa.resultat - fjor.resultat : null;
                return (
                  <React.Fragment key={g.id}>
                    <tr onClick={()=>setÅpenGruppe(a=>({...a,['tiltak-'+g.id]:!a['tiltak-'+g.id]}))}
                      style={{ cursor:'pointer', borderBottom:'1px solid rgba(17,24,61,.05)',
                        background: isOpen ? SK2.iceBlueLight : 'rgba(17,24,61,.015)' }}>
                      <td style={{ padding:'9px 12px' }}>
                        <span style={{ fontSize:13, fontWeight:600, color:SK2.ink }}>
                          {isOpen?'▾':'▸'} {g.navn}
                        </span>
                        <span style={{ fontSize:11, color:SK2.soft, marginLeft:8 }}>
                          {avdITiltak.length} avd.
                        </span>
                      </td>
                      <td style={{ padding:'9px 12px', textAlign:'right', fontSize:12.5 }}>
                        {naa.inntekt ? BAR_fmt(naa.inntekt) : '—'}
                      </td>
                      <td style={{ padding:'9px 12px', textAlign:'right', fontSize:12.5 }}>
                        {naa.kostnad ? BAR_fmt(naa.kostnad) : '—'}
                      </td>
                      <td style={{ padding:'9px 12px', textAlign:'right' }}>
                        <span style={{ fontSize:13, fontWeight:700,
                          color:naa.resultat>0?SK2.green:naa.resultat<0?SK2.coral:SK2.soft }}>
                          {BAR_fmt(naa.resultat)}
                        </span>
                        {samLabel && fjor && (
                          <div style={{ fontSize:10, color:SK2.soft }}>{samLabel}: {BAR_fmt(fjor.resultat)}</div>
                        )}
                      </td>
                      {samLabel && (
                        <td style={{ padding:'9px 12px', textAlign:'right', fontSize:12,
                          color:avvik!=null?(avvik>0?SK2.green:avvik<0?SK2.coral:SK2.soft):SK2.soft }}>
                          {avvik!=null ? BAR_fmt(avvik) : '—'}
                        </td>
                      )}
                      <td style={{ padding:'9px 12px', textAlign:'right', fontSize:12,
                        color:naa.nFinans>0?SK2.green:naa.nFinans<0?SK2.coral:SK2.soft }}>
                        {naa.nFinans ? BAR_fmt(naa.nFinans) : '—'}
                      </td>
                      <td style={{ padding:'9px 12px', textAlign:'right', fontSize:11.5, color:SK2.soft }}>
                        {naa.inntekt>0 ? BAR_pct(naa.resultat/naa.inntekt) : '—'}
                      </td>
                    </tr>
                    {isOpen && avdITiltak.sort((a,b)=>(a.avd_nr||'').localeCompare(b.avd_nr||'')).map(e => {
                      const eNaa  = sumAvd(e.id, versjonId, avdPost);
                      const eFjor = forrigeVersjon ? sumAvd(e.id, forrigeVersjon.id, fjorAvdPost) : null;
                      return <Rad key={e.id} navn={`${e.avd_nr} ${e.navn}`} naa={eNaa} fjor={eFjor} indent />;
                    })}
                  </React.Fragment>
                );
              })}
              {/* Totalsum tiltak */}
              {(() => {
                const totNaa  = tiltakGrupper.reduce((acc,g) => {
                  const s = sumTiltak(g.id, versjonId, avdPost);
                  return { inntekt:acc.inntekt+s.inntekt, kostnad:acc.kostnad+s.kostnad,
                           resultat:acc.resultat+s.resultat, nFinans:acc.nFinans+s.nFinans };
                }, {inntekt:0,kostnad:0,resultat:0,nFinans:0});
                const totFjor = forrigeVersjon ? tiltakGrupper.reduce((acc,g) => {
                  const s = sumTiltak(g.id, forrigeVersjon.id, fjorAvdPost);
                  return { inntekt:acc.inntekt+s.inntekt, kostnad:acc.kostnad+s.kostnad,
                           resultat:acc.resultat+s.resultat, nFinans:acc.nFinans+s.nFinans };
                }, {inntekt:0,kostnad:0,resultat:0,nFinans:0}) : null;
                const avvik = totFjor ? totNaa.resultat - totFjor.resultat : null;
                return (
                  <tr style={{ borderTop:'2px solid rgba(17,24,61,.12)', background:SK2.iceBlueLight }}>
                    <td style={{ padding:'10px 12px', fontSize:13, fontWeight:800, color:SK2.ink }}>
                      Sum alle tiltak
                    </td>
                    <td style={{ padding:'10px 12px', textAlign:'right', fontSize:13, fontWeight:700 }}>
                      {BAR_fmt(totNaa.inntekt)}
                    </td>
                    <td style={{ padding:'10px 12px', textAlign:'right', fontSize:13, fontWeight:700 }}>
                      {BAR_fmt(totNaa.kostnad)}
                    </td>
                    <td style={{ padding:'10px 12px', textAlign:'right' }}>
                      <span style={{ fontSize:14, fontWeight:800,
                        color:totNaa.resultat>0?SK2.green:totNaa.resultat<0?SK2.coral:SK2.soft }}>
                        {BAR_fmt(totNaa.resultat)}
                      </span>
                    </td>
                    {samLabel && (
                      <td style={{ padding:'10px 12px', textAlign:'right', fontSize:13, fontWeight:700,
                        color:avvik!=null?(avvik>0?SK2.green:avvik<0?SK2.coral:SK2.soft):SK2.soft }}>
                        {avvik!=null ? BAR_fmt(avvik) : '—'}
                      </td>
                    )}
                    <td style={{ padding:'10px 12px', textAlign:'right', fontSize:13, fontWeight:700,
                      color:totNaa.nFinans>0?SK2.green:totNaa.nFinans<0?SK2.coral:SK2.soft }}>
                      {totNaa.nFinans ? BAR_fmt(totNaa.nFinans) : '—'}
                    </td>
                    <td style={{ padding:'10px 12px', textAlign:'right', fontSize:12.5, color:SK2.soft }}>
                      {totNaa.inntekt>0 ? BAR_pct(totNaa.resultat/totNaa.inntekt) : '—'}
                    </td>
                  </tr>
                );
              })()}
            </tbody>
          </table>
        </div>
      </div>
    )}
    </div>
  );
}

// ── BudAvdGruppeoppsett — admin UI for å sette gruppe per avdeling ────────────
function BudAvdGruppeoppsett({ data, onEndret }) {
  const [lagrer, setLagrer] = React.useState(false);
  const [søk, setSøk]       = React.useState('');

  const grupper        = (data.avdGrupper || []).slice().sort((a,b) => a.sortering - b.sortering);
  const vanligeGrupper = grupper.filter(g => !g.er_tiltak);
  const tiltakGrupper  = grupper.filter(g => g.er_tiltak);
  const koblinger      = data.avdGruppeKobling || [];
  const tiltakKobling  = data.avdTiltakKobling || [];
  const gruppeForEnhet = Object.fromEntries(koblinger.map(k => [k.enhet_id, k]));
  const tiltakForEnhet = Object.fromEntries(tiltakKobling.map(k => [k.enhet_id, k]));

  const enheter = (data.enheter || [])
    .filter(e => e.type !== 'styre')
    .filter(e => !søk || e.navn.toLowerCase().includes(søk.toLowerCase()) || (e.avd_nr||'').includes(søk))
    .sort((a,b) => (a.avd_nr||'').localeCompare(b.avd_nr||''));

  const settTiltak = async (enhetId, tiltakId) => {
    setLagrer(true);
    try {
      const eks = tiltakForEnhet[enhetId];
      if (tiltakId === '') {
        if (eks) await window._sb.from('bud_avd_tiltak_kobling').delete().eq('id', eks.id);
      } else if (eks) {
        await window._sb.from('bud_avd_tiltak_kobling').update({ tiltak_id: tiltakId }).eq('id', eks.id);
      } else {
        await window._sb.from('bud_avd_tiltak_kobling').insert({ enhet_id: enhetId, tiltak_id: tiltakId });
      }
      await onEndret();
    } catch(e) { alert('Feil: '+e.message); }
    setLagrer(false);
  };

  const settGruppe = async (enhetId, gruppeId) => {
    setLagrer(true);
    try {
      const eks = gruppeForEnhet[enhetId];
      if (gruppeId === '') {
        if (eks) await window._sb.from('bud_avd_gruppe_kobling').delete().eq('id', eks.id);
      } else if (eks) {
        await window._sb.from('bud_avd_gruppe_kobling').update({ gruppe_id: gruppeId }).eq('id', eks.id);
      } else {
        await window._sb.from('bud_avd_gruppe_kobling').insert({ enhet_id: enhetId, gruppe_id: gruppeId });
      }
      await onEndret();
    } catch(e) { alert('Feil: '+e.message); }
    setLagrer(false);
  };

  const nyGruppe = async () => {
    const navn = prompt('Navn på ny gruppe:');
    if (!navn?.trim()) return;
    const erTiltak = confirm('Er dette en "Per tiltak"-gruppe?');
    const max = grupper.reduce((m,g) => Math.max(m, g.sortering), 0);
    await window._sb.from('bud_avd_grupper').insert({ navn: navn.trim(), sortering: max+10, er_tiltak: erTiltak });
    await onEndret();
  };

  return (
    <div style={{ maxWidth:720 }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:16 }}>
        <div>
          <div style={{ fontSize:15, fontWeight:700, color:SK2.ink }}>Avdelingsgrupper</div>
          <div style={{ fontSize:12, color:SK2.soft, marginTop:2 }}>
            Velg hvilken gruppe hver avdeling tilhører i avdelingsrapporten
          </div>
        </div>
        <button onClick={nyGruppe}
          style={{ padding:'7px 16px', borderRadius:8, fontSize:12.5, fontWeight:600,
            background:SK2.ink, color:'#fff', border:'none', cursor:'pointer' }}>
          + Ny gruppe
        </button>
      </div>

      <input value={søk} onChange={e=>setSøk(e.target.value)} placeholder="Søk avdeling…"
        style={{ width:'100%', padding:'8px 12px', borderRadius:8, border:'1px solid rgba(17,24,61,.15)',
          fontSize:13, marginBottom:12, boxSizing:'border-box', fontFamily:'inherit' }} />

      <div style={{ background:'#fff', borderRadius:10, border:'1px solid rgba(17,24,61,.08)', overflow:'hidden' }}>
        <table style={{ width:'100%', borderCollapse:'collapse' }}>
          <thead>
            <tr style={{ background:SK2.iceBlueLight, borderBottom:'1px solid rgba(17,24,61,.08)' }}>
              <th style={{ padding:'8px 16px', textAlign:'left', fontSize:11, fontWeight:700,
                color:SK2.soft, textTransform:'uppercase' }}>Avdeling</th>
              <th style={{ padding:'8px 16px', textAlign:'left', fontSize:11, fontWeight:700,
                color:SK2.soft, textTransform:'uppercase' }}>Gruppe (sortering)</th>
              <th style={{ padding:'8px 16px', textAlign:'left', fontSize:11, fontWeight:700,
                color:SK2.soft, textTransform:'uppercase' }}>Tiltak (sammendrag)</th>
            </tr>
          </thead>
          <tbody>
            {enheter.map(e => (
              <tr key={e.id} style={{ borderBottom:'1px solid rgba(17,24,61,.04)' }}>
                <td style={{ padding:'8px 16px' }}>
                  <span style={{ fontSize:11.5, color:SK2.soft, marginRight:8, fontFamily:'monospace' }}>{e.avd_nr}</span>
                  <span style={{ fontSize:13 }}>{e.navn}</span>
                </td>
                <td style={{ padding:'6px 16px' }}>
                  <select
                    value={gruppeForEnhet[e.id]?.gruppe_id || ''}
                    onChange={ev => settGruppe(e.id, ev.target.value)}
                    disabled={lagrer}
                    style={{ padding:'5px 10px', borderRadius:6, border:'1px solid rgba(17,24,61,.15)',
                      fontSize:12.5, fontFamily:'inherit', background:'#fff', cursor:'pointer' }}>
                    <option value="">— Ingen gruppe —</option>
                    {vanligeGrupper.map(g=>(
                      <option key={g.id} value={g.id}>{g.navn}</option>
                    ))}
                  </select>
                </td>
                <td style={{ padding:'6px 16px' }}>
                  <select
                    value={tiltakForEnhet[e.id]?.tiltak_id || ''}
                    onChange={ev => settTiltak(e.id, ev.target.value)}
                    disabled={lagrer}
                    style={{ padding:'5px 10px', borderRadius:6, border:'1px solid rgba(17,24,61,.15)',
                      fontSize:12.5, fontFamily:'inherit', background:'#fff', cursor:'pointer' }}>
                    <option value="">— Ikke tiltak —</option>
                    {tiltakGrupper.map(g=>(
                      <option key={g.id} value={g.id}>{g.navn}</option>
                    ))}
                  </select>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Object.assign(window, { BudAvdRapport, BudAvdGruppeoppsett });