// budsjett-bonuslonn.jsx — Bonuslønn for VTA-deltakere
// Eksporterer: BudBonuslonn

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

// Beregn bonuslønn for én avdeling
// rad = avdelingsrad eller null
// globalSatser = globale bonus-satser
// satser = lønnsbudsjett-satser (sos-fallback)
// Returnerer også hvilke felt som er overstyrt
function bbBeregn(rad, antallVta, satser, globalSatser) {
  const gs = globalSatser || BB_DEFAULT;

  const timer      = Number(rad?.timer_per_mnd ?? gs.timer_per_mnd ?? 0);
  const timelonn   = Number(rad?.timelonn      ?? gs.timelonn      ?? 0);
  const inkluder   = (Array.isArray(rad?.mnd_inkluder) ? rad.mnd_inkluder
                   : Array.isArray(gs?.mnd_inkluder)  ? gs.mnd_inkluder
                   : null) || Array(12).fill(true);
  const antallMnd  = inkluder.filter(Boolean).length;

  const effAga     = rad?.aga_pct       != null ? Number(rad.aga_pct)       : Number(gs.aga_pct     ?? satser?.aga_pct     ?? 14.1);
  const effPensjon = rad?.pensjon_pct   != null ? Number(rad.pensjon_pct)   : Number(gs.pensjon_pct ?? satser?.pensjon_pct ?? 2.0);
  const effFerie   = rad?.ferie_pct     != null ? Number(rad.ferie_pct)     : Number(gs.ferie_pct   ?? satser?.ferie_paaslag_pct ?? 12.0);
  const effSos     = rad?.andre_sos_pct != null ? Number(rad.andre_sos_pct) : Number(gs.andre_sos_pct ?? satser?.andre_sos_pct ?? 0);

  // Hvilke felt er overstyrt fra global?
  const overstyrt = rad ? {
    timer:    rad.timer_per_mnd  != null && rad.timer_per_mnd  !== gs.timer_per_mnd,
    timelonn: rad.timelonn       != null && rad.timelonn       !== gs.timelonn,
    aga:      rad.aga_pct        != null,
    pensjon:  rad.pensjon_pct    != null,
    ferie:    rad.ferie_pct      != null,
    sos:      rad.andre_sos_pct  != null,
    mnd:      Array.isArray(rad.mnd_inkluder),
    kontoer:  rad.konto_grunnlonn != null || rad.konto_aga != null || rad.konto_ferie != null || rad.konto_pensjon != null,
  } : {};
  const harOverstyring = Object.values(overstyrt).some(Boolean);

  const mndLonn    = timer * timelonn * antallVta;
  const grunnlonn  = mndLonn * antallMnd * (1 + effFerie / 100);
  const aga        = grunnlonn * effAga / 100;
  const pensjon    = grunnlonn * effPensjon / 100;
  const sosAndr    = grunnlonn * effSos / 100;
  const sosial     = aga + pensjon + sosAndr;
  const total      = grunnlonn + sosial;

  // Månedlig fordeling (kr per mnd)
  const mndBelop = inkluder.map(inc => inc ? Math.round(mndLonn * antallVta / antallMnd * (1 + effFerie/100) * (1 + (effAga+effPensjon+effSos)/100)) : 0);

  return { grunnlonn, aga, pensjon, sosAndr, sosial, total, antallMnd, mndBelop,
           effAga, effPensjon, effFerie, effSos, mndLonn, timer, timelonn,
           overstyrt, harOverstyring };
}

// ── BudBonuslonn ─────────────────────────────────────────────
const BB_DEFAULT = { timer_per_mnd: 100, timelonn: 87.5, aga_pct: 14.1, pensjon_pct: 2.0, ferie_pct: 12.0, andre_sos_pct: 0,
  konto_grunnlonn: null, konto_aga: null, konto_ferie: null, konto_pensjon: null, mnd_inkluder: null };

function BudBonuslonn({ data, versjonId, enhById, laast, onEndret }) {
  const [rediger, setRediger]     = React.useState(null);
  const [visGlobal, setVisGlobal]   = React.useState(false);
  const [synkStatus, setSynkStatus] = React.useState(null);

  const synkBonusTilLinjer = async () => {
    setSynkStatus('laster');
    try {
      const linjer = [];
      avdMedVta.forEach(e => {
        const rad    = bonusByAvd[e.id] || null;
        const antall = vtaPerAvd[e.id];
        const ber    = bbBeregn(rad, antall, satser, globalSatser);
        if (!ber.total) return;
        const inkl   = (Array.isArray(rad?.mnd_inkluder) ? rad.mnd_inkluder
                       : Array.isArray(globalSatser.mnd_inkluder) ? globalSatser.mnd_inkluder
                       : null) || Array(12).fill(true);
        const n = inkl.filter(Boolean).length || 1;
        const fordeling = inkl.map(inc => inc ? 1/n : 0);
        const kontoGrunn = Number(rad?.konto_grunnlonn ?? globalSatser.konto_grunnlonn ?? 5010);
        // Grunnlønn
        linjer.push({ avdeling_id:e.id, konto:kontoGrunn,
          belop_ar:Math.round(ber.grunnlonn), tekst:'Bonuslønn VTA', fordeling_jan_des:fordeling });
        // AGA
        const kontoAga = Number(rad?.konto_aga ?? globalSatser.konto_aga ?? kontoGrunn);
        if (Math.round(ber.aga) && kontoAga)
          linjer.push({ avdeling_id:e.id, konto:kontoAga,
            belop_ar:Math.round(ber.aga), tekst:'Bonuslønn VTA – AGA', fordeling_jan_des:fordeling });
        // Pensjon
        const kontoPensjon = Number(rad?.konto_pensjon ?? globalSatser.konto_pensjon ?? 0);
        if (Math.round(ber.pensjon) && kontoPensjon)
          linjer.push({ avdeling_id:e.id, konto:kontoPensjon,
            belop_ar:Math.round(ber.pensjon), tekst:'Bonuslønn VTA – Pensjon', fordeling_jan_des:fordeling });
      });
      const res = await window.budSynkTilLinjer(versjonId, 'bonuslonn', linjer);
      setSynkStatus({ ok:true, antall:res.antall });
      onEndret();
      setTimeout(()=>setSynkStatus(null), 4000);
    } catch(e) { setSynkStatus({ feil:e.message }); }
  };

  const satser = (data.lonnSatser||[]).find(s => s.versjon_id === versjonId) || {};

  // Globale bonus-satser lagres i bud_bonuslonn med avdeling_id = null
  const bonuslonn = data.bonuslonn || [];
  const globalRad = bonuslonn.find(b => b.versjon_id === versjonId && !b.avdeling_id);

  // Effektive globale verdier (global rad → lønnsbudsjett-satser → hardkodet default)
  const globalSatser = {
    timer_per_mnd: globalRad?.timer_per_mnd ?? BB_DEFAULT.timer_per_mnd,
    timelonn:      globalRad?.timelonn      ?? BB_DEFAULT.timelonn,
    aga_pct:       globalRad?.aga_pct       ?? satser.aga_pct       ?? BB_DEFAULT.aga_pct,
    pensjon_pct:   globalRad?.pensjon_pct   ?? satser.pensjon_pct   ?? BB_DEFAULT.pensjon_pct,
    ferie_pct:     globalRad?.ferie_pct     ?? satser.ferie_paaslag_pct ?? BB_DEFAULT.ferie_pct,
    andre_sos_pct: globalRad?.andre_sos_pct ?? satser.andre_sos_pct ?? BB_DEFAULT.andre_sos_pct,
    mnd_inkluder:  globalRad?.mnd_inkluder  ?? Array(12).fill(true),
    konto_grunnlonn: globalRad?.konto_grunnlonn ?? null,
    konto_aga:       globalRad?.konto_aga       ?? null,
    konto_ferie:     globalRad?.konto_ferie      ?? null,
    konto_pensjon:   globalRad?.konto_pensjon    ?? null,
  };

  // VTA-deltakere per avdeling fra deltakermatrisen
  const vtaPerAvd = {};
  (data.deltakere||[]).filter(d => d.versjon_id === versjonId && d.kategori === 'VTA').forEach(d => {
    vtaPerAvd[d.avdeling_id] = (vtaPerAvd[d.avdeling_id] || 0) + Number(d.antall || 0);
  });

  // Avdelinger med VTA-deltakere
  const avdMedVta = (data.enheter||[])
    .filter(e => vtaPerAvd[e.id] > 0)
    .sort((a,b) => (a.avd_nr||'').localeCompare(b.avd_nr||''));

  // Bonuslønn-rader for denne versjonen
  const bonusRader = bonuslonn.filter(b => b.versjon_id === versjonId);
  const bonusByAvd = Object.fromEntries(bonusRader.map(b => [b.avdeling_id, b]));

  // Summer
  let totGrunn=0, totSos=0, totTotal=0;
  avdMedVta.forEach(e => {
    const rad = bonusByAvd[e.id] || null;
    const b = bbBeregn(rad, vtaPerAvd[e.id], satser, globalSatser);
    totGrunn += b.grunnlonn; totSos += b.sosial; totTotal += b.total;
  });

  const BE_fmt = n => n == null ? '—' : Math.round(n/1000).toLocaleString('nb-NO') + ' TNOK';
  const BE_kr  = n => Math.round(n||0).toLocaleString('nb-NO') + ' kr';

  return (
    <div>
      {/* Info-banner */}
      <div style={{ marginBottom:16, padding:'10px 14px', borderRadius:10,
        background:'rgba(88,107,164,.08)', border:'1px solid rgba(88,107,164,.2)',
        fontSize:12.5, color:SK.ink, lineHeight:1.6 }}>
        <b>Bonuslønn VTA-deltakere</b> — Antall deltakere hentes automatisk fra{' '}
        <b>Ledergruppen → Deltakermatrise</b> (kategori VTA). Lønnskostnader beregnes som
        timer × timelønn × antall deltakere, med påslag for feriepenger og sosiale kostnader.
      </div>

      {/* Globale satser */}
      <Card padded style={{ marginBottom:16 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div>
            <div style={{ fontSize:13, fontWeight:700, color:SK.ink }}>Globale satser</div>
            <div style={{ fontSize:11.5, color:SK.soft, marginTop:2 }}>
              Gjelder alle avdelinger · Kan overstyres per avdeling ved å klikke ✎
            </div>
          </div>
          {!laast && (
            <Button size="sm" variant={visGlobal?'primary':'ghost'} onClick={()=>setVisGlobal(v=>!v)}>
              {visGlobal ? 'Lukk' : 'Endre globale satser'}
            </Button>
          )}
        </div>
        {!visGlobal && (
          <div style={{ display:'flex', gap:20, flexWrap:'wrap', marginTop:10, fontSize:12.5, color:SK.soft }}>
            <span>Timer/mnd: <b style={{ color:SK.ink }}>{globalSatser.timer_per_mnd}</b></span>
            <span>Timelønn: <b style={{ color:SK.ink }}>{globalSatser.timelonn} kr</b></span>
            <span>AGA: <b style={{ color:SK.ink }}>{globalSatser.aga_pct} %</b></span>
            <span>Pensjon: <b style={{ color:SK.ink }}>{globalSatser.pensjon_pct} %</b></span>
            <span>Ferie: <b style={{ color:SK.ink }}>{globalSatser.ferie_pct} %</b></span>
            <span>Inkl. mnd: <b style={{ color:SK.ink }}>{(Array.isArray(globalSatser.mnd_inkluder)?globalSatser.mnd_inkluder:Array(12).fill(true)).filter(Boolean).length} av 12</b></span>
          </div>
        )}
        {visGlobal && !laast && (
          <div style={{ marginTop:12, borderTop:'1px solid rgba(17,24,61,.07)', paddingTop:12 }}>
            <BudBonusRad
              avdeling={null}
              antallVta={avdMedVta.reduce((s,e)=>s+(vtaPerAvd[e.id]||0),0)}
              rad={globalRad}
              satser={satser}
              globalSatser={null}
              versjonId={versjonId}
              data={data}
              erGlobal={true}
              onLukk={()=>setVisGlobal(false)}
              onLagret={()=>{ setVisGlobal(false); onEndret(); }}
            />
          </div>
        )}
      </Card>

      {/* KPI-rad */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12, marginBottom:20 }}>
        <Card padded><KPI label="Avdelinger med VTA" value={avdMedVta.length} sub="fra deltakermatrisen" /></Card>
        <Card padded><KPI label="Grunnlønn" value={BE_fmt(totGrunn)} sub="inkl. feriepenger" /></Card>
        <Card padded><KPI label="Sosiale kostnader" value={BE_fmt(totSos)} sub="AGA + pensjon + andre" /></Card>
        <Card padded>
          <KPI label="Total lønnskostnad" value={BE_fmt(totTotal)} sub="alle avdelinger" />
          {!laast && avdMedVta.length > 0 && (
            <div style={{ marginTop:10, borderTop:'1px solid rgba(17,24,61,.07)', paddingTop:10 }}>
              <button onClick={synkBonusTilLinjer} disabled={synkStatus==='laster'}
                style={{ width:'100%', padding:'7px 12px', borderRadius:7, fontSize:12, fontWeight:600,
                  cursor:'pointer', fontFamily:'inherit',
                  background: synkStatus?.ok?'#e7f4ea':synkStatus?.feil?'#fcddde':'#11183d',
                  color: synkStatus?.ok?'#1b6a2e':synkStatus?.feil?'#8a1620':'#fff', border:'none' }}>
                {synkStatus==='laster' ? '⏳ Synkroniserer…'
                 : synkStatus?.ok   ? `✓ ${synkStatus.antall} linjer`
                 : synkStatus?.feil ? '⚠ Feil'
                 : '↓ Synkroniser til budsjett'}
              </button>
            </div>
          )}
        </Card>
      </div>

      {avdMedVta.length === 0 && (
        <Card padded>
          <div style={{ textAlign:'center', padding:'24px 0', color:SK.soft, fontSize:13 }}>
            Ingen avdelinger med VTA-deltakere i deltakermatrisen for denne versjonen.
          </div>
        </Card>
      )}

      {/* Matrise */}
      {avdMedVta.length > 0 && (
        <Card padded={false}>
          <div style={{ overflowX:'auto' }}>
            <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12.5 }}>
              <thead>
                <tr style={{ background:SK.iceBlueLight, borderBottom:'1px solid rgba(17,24,61,.08)' }}>
                  <th style={{ padding:'9px 16px', textAlign:'left', fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase', whiteSpace:'nowrap' }}>Avdeling</th>
                  <th style={{ padding:'9px 12px', textAlign:'right', fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>Ant. VTA</th>
                  <th style={{ padding:'9px 12px', textAlign:'right', fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>Timer/mnd</th>
                  <th style={{ padding:'9px 12px', textAlign:'right', fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>Timelønn</th>
                  <th style={{ padding:'9px 12px', textAlign:'right', fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>Mnd.lønn</th>
                  <th style={{ padding:'9px 12px', textAlign:'right', fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>Mnd.</th>
                  <th style={{ padding:'9px 12px', textAlign:'right', fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>Grunnlønn</th>
                  <th style={{ padding:'9px 12px', textAlign:'right', fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>AGA</th>
                  <th style={{ padding:'9px 12px', textAlign:'right', fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>Pensjon</th>
                  <th style={{ padding:'9px 12px', textAlign:'right', fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>Sos.kost</th>
                  <th style={{ padding:'9px 16px', textAlign:'right', fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>Total</th>
                  {!laast && <th style={{ width:40 }}></th>}
                </tr>
              </thead>
              <tbody>
                {avdMedVta.map(e => {
                  const rad    = bonusByAvd[e.id];
                  const antall = vtaPerAvd[e.id];
                  // Beregn alltid — arver globalSatser om ingen rad finnes
                  const ber    = bbBeregn(rad||null, antall, satser, globalSatser);
                  const erRed  = rediger === e.id;

                  return (
                    <React.Fragment key={e.id}>
                      <tr style={{ borderBottom:'1px solid rgba(17,24,61,.05)',
                        background: erRed ? SK.iceBlueLight : 'transparent' }}>
                        <td style={{ padding:'10px 16px' }}>
                          <div style={{ fontSize:13, fontWeight:500 }}>{e.navn}</div>
                          <div style={{ fontSize:11, color:SK.soft, display:'flex', alignItems:'center', gap:6 }}>
                            {e.avd_nr}
                            {ber.harOverstyring && (
                              <span style={{ fontSize:10, padding:'1px 6px', borderRadius:4,
                                background:'rgba(242,84,92,.1)', color:SK.coral, fontWeight:600 }}>
                                Overstyrt
                              </span>
                            )}
                          </div>
                        </td>
                        <td style={{ padding:'10px 12px', textAlign:'right', fontWeight:600 }}>{antall}</td>
                        <td style={{ padding:'10px 12px', textAlign:'right',
                          color: ber.overstyrt?.timer ? SK.coral : SK.soft }}>
                          {ber.timer}
                        </td>
                        <td style={{ padding:'10px 12px', textAlign:'right',
                          color: ber.overstyrt?.timelonn ? SK.coral : SK.soft }}>
                          {ber.timelonn} kr
                        </td>
                        <td style={{ padding:'10px 12px', textAlign:'right', color:SK.soft }}>
                          {BE_kr(ber.mndLonn)}
                        </td>
                        <td style={{ padding:'10px 12px', textAlign:'right', color:SK.soft }}>
                          {ber.antallMnd}
                        </td>
                        <td style={{ padding:'10px 12px', textAlign:'right' }}>
                          {BE_kr(ber.grunnlonn)}
                        </td>
                        <td style={{ padding:'10px 12px', textAlign:'right', color:SK.soft }}>
                          {BE_kr(ber.aga)}
                        </td>
                        <td style={{ padding:'10px 12px', textAlign:'right', color:SK.soft }}>
                          {BE_kr(ber.pensjon)}
                        </td>
                        <td style={{ padding:'10px 12px', textAlign:'right', color:SK.soft }}>
                          {BE_kr(ber.sosAndr)}
                        </td>
                        <td style={{ padding:'10px 16px', textAlign:'right', fontWeight:700, color:SK.ink }}>
                          {BE_kr(ber.total)}
                        </td>
                        {!laast && (
                          <td style={{ padding:'10px 8px', whiteSpace:'nowrap' }}>
                            {ber.harOverstyring && !erRed && (
                              <button title="Tilbakestill til globale satser"
                                onClick={async () => {
                                  if (!confirm('Fjern alle overstyringer for ' + e.navn + '?')) return;
                                  if (rad?.id) {
                                    await window._sb.from('bud_bonuslonn').delete().eq('id', rad.id);
                                    onEndret();
                                  }
                                }}
                                style={{ ...budIkonKnapp, marginRight:4, color:SK.coral }}>↺</button>
                            )}
                            <button onClick={() => setRediger(erRed ? null : e.id)} style={budIkonKnapp}>
                              {erRed ? '✕' : '✎'}
                            </button>
                          </td>
                        )}
                      </tr>

                      {/* Redigeringspanel */}
                      {erRed && (
                        <tr>
                          <td colSpan={12} style={{ padding:0, borderBottom:'2px solid rgba(17,24,61,.1)' }}>
                            <BudBonusRad avdeling={e} antallVta={antall} rad={rad}
                              satser={satser} globalSatser={globalSatser} versjonId={versjonId} data={data}
                              onLukk={() => setRediger(null)}
                              onLagret={() => { setRediger(null); onEndret(); }} />
                          </td>
                        </tr>
                      )}
                    </React.Fragment>
                  );
                })}

                {/* Totalrad */}
                {totTotal > 0 && (
                  <tr style={{ borderTop:'2px solid rgba(17,24,61,.1)', background:SK.iceBlueLight }}>
                    <td colSpan={6} style={{ padding:'10px 16px', fontSize:13, fontWeight:700 }}>Sum alle avdelinger</td>
                    <td style={{ padding:'10px 12px', textAlign:'right', fontWeight:700 }}>{BE_kr(totGrunn)}</td>
                    <td colSpan={2} style={{ padding:'10px 12px', textAlign:'right', color:SK.soft, fontWeight:600 }}>{BE_kr(totSos)}</td>
                    <td></td>
                    <td style={{ padding:'10px 16px', textAlign:'right', fontWeight:800, fontSize:14 }}>{BE_kr(totTotal)}</td>
                    {!laast && <td></td>}
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </Card>
      )}

      {/* Månedlig visning */}
      {totTotal > 0 && (
        <div style={{ marginTop:20 }}>
          <div style={{ fontSize:13, fontWeight:600, marginBottom:10 }}>Månedlig fordeling per avdeling</div>
          <Card padded={false}>
            <div style={{ overflowX:'auto' }}>
              <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12 }}>
                <thead>
                  <tr style={{ background:SK.iceBlueLight, borderBottom:'1px solid rgba(17,24,61,.08)' }}>
                    <th style={{ padding:'8px 16px', textAlign:'left', fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>Avdeling</th>
                    {BB_MND.map(m => (
                      <th key={m} style={{ padding:'8px 10px', textAlign:'right', fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>{m}</th>
                    ))}
                    <th style={{ padding:'8px 16px', textAlign:'right', fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>Sum år</th>
                  </tr>
                </thead>
                <tbody>
                  {avdMedVta.map(e => {
                    const rad = bonusByAvd[e.id];
                    if (!rad) return null;
                    const ber = bbBeregn(rad, vtaPerAvd[e.id], satser, globalSatser);
                    return (
                      <tr key={e.id} style={{ borderBottom:'1px solid rgba(17,24,61,.04)' }}>
                        <td style={{ padding:'7px 16px', fontWeight:500 }}>{e.navn}</td>
                        {ber.mndBelop.map((b,i) => (
                          <td key={i} style={{ padding:'7px 10px', textAlign:'right',
                            color: b > 0 ? SK.ink : SK.soft }}>
                            {b > 0 ? Math.round(b/1000).toLocaleString('nb-NO') : '—'}
                          </td>
                        ))}
                        <td style={{ padding:'7px 16px', textAlign:'right', fontWeight:700 }}>
                          {Math.round(ber.total/1000).toLocaleString('nb-NO')}
                        </td>
                      </tr>
                    );
                  }).filter(Boolean)}
                </tbody>
              </table>
            </div>
          </Card>
        </div>
      )}
    </div>
  );
}

// ── Redigeringspanel (inline i tabellen) ──────────────────────
function BudBonusRad({ avdeling, antallVta, rad, satser, globalSatser, versjonId, data, erGlobal, onLukk, onLagret }) {
  const gs = globalSatser || BB_DEFAULT;

  // Tomstreng = ikke overstyrt (arver fra globalt via placeholder og bbBeregn)
  // Kun eksplisitt lagrede per-avd-verdier vises som fylte felt
  const [timer,       setTimer]       = React.useState(rad?.timer_per_mnd   != null ? String(rad.timer_per_mnd)  : erGlobal ? String(gs.timer_per_mnd??'') : '');
  const [timelonn,    setTimelonn]    = React.useState(rad?.timelonn        != null ? String(rad.timelonn)       : erGlobal ? String(gs.timelonn??'')      : '');
  const [agaPct,      setAgaPct]      = React.useState(rad?.aga_pct         != null ? String(rad.aga_pct)        : erGlobal ? String(gs.aga_pct??'')       : '');
  const [pensjonPct,  setPensjonPct]  = React.useState(rad?.pensjon_pct     != null ? String(rad.pensjon_pct)    : erGlobal ? String(gs.pensjon_pct??'')   : '');
  const [feriePct,    setFeriePct]    = React.useState(rad?.ferie_pct       != null ? String(rad.ferie_pct)      : erGlobal ? String(gs.ferie_pct??'')     : '');
  const [sosPct,      setSosPct]      = React.useState(rad?.andre_sos_pct   != null ? String(rad.andre_sos_pct)  : erGlobal ? String(gs.andre_sos_pct??'') : '');
  // Kontoer: bare last inn lagret per-avd-verdi, ikke arv fra gs (arv vises som placeholder)
  const [kontoGrunn,  setKontoGrunn]  = React.useState(rad?.konto_grunnlonn ?? '');
  const [kontoAga,    setKontoAga]    = React.useState(rad?.konto_aga       ?? '');
  const [kontoFerie,  setKontoFerie]  = React.useState(rad?.konto_ferie     ?? '');
  const [kontoPensjon,setKontoPensjon]= React.useState(rad?.konto_pensjon   ?? '');
  // Måneder: bare last inn lagret per-avd-verdi, ikke arv (arv skjer i bbBeregn)
  const [inkluder,    setInkluder]    = React.useState(
    Array.isArray(rad?.mnd_inkluder) ? rad.mnd_inkluder : null  // null = arver fra gs
  );
  // Effektive måneder for visning
  const effInkluder = inkluder ?? (Array.isArray(gs.mnd_inkluder) ? gs.mnd_inkluder : Array(12).fill(true)) ?? Array(12).fill(true);
  const [lagrer, setLagrer] = React.useState(false);

  // Forhåndsvisning
  // Bygg et midlertidig rad-objekt med kun eksplisitt satte verdier
  const previewRad = {
    timer_per_mnd:  timer      !== '' ? Number(timer)      : null,
    timelonn:       timelonn   !== '' ? Number(timelonn)   : null,
    aga_pct:        agaPct     !== '' ? Number(agaPct)     : null,
    pensjon_pct:    pensjonPct !== '' ? Number(pensjonPct) : null,
    ferie_pct:      feriePct   !== '' ? Number(feriePct)   : null,
    andre_sos_pct:  sosPct     !== '' ? Number(sosPct)     : null,
    mnd_inkluder:   inkluder,  // null = arver fra gs i bbBeregn
  };
  const preview = bbBeregn(previewRad, antallVta, satser, gs);

  const lagre = async () => {
    setLagrer(true);
    try {
      const felt = {
        timer_per_mnd:   Number(timer)||0,
        timelonn:        Number(timelonn)||0,
        aga_pct:         agaPct !== '' ? Number(agaPct) : null,
        pensjon_pct:     pensjonPct !== '' ? Number(pensjonPct) : null,
        ferie_pct:       feriePct !== '' ? Number(feriePct) : null,
        andre_sos_pct:   sosPct !== '' ? Number(sosPct) : null,
        konto_grunnlonn: kontoGrunn ? Number(kontoGrunn) : null,
        konto_aga:       kontoAga   ? Number(kontoAga)   : null,
        konto_ferie:     kontoFerie  ? Number(kontoFerie) : null,
        konto_pensjon:   kontoPensjon? Number(kontoPensjon):null,
        mnd_inkluder:    inkluder ?? effInkluder,  // lagre effektiv verdi om ikke overstyrt
      };
      if (rad?.id) {
        await window.budDB.oppdater('bud_bonuslonn', rad.id, felt);
      } else if (erGlobal) {
        // Global rad: avdeling_id = null (bruker upsert via avdeling_id IS NULL)
        await window._sb.from('bud_bonuslonn')
          .upsert({ versjon_id:versjonId, avdeling_id:null, ...felt },
                  { onConflict: 'versjon_id,avdeling_id', ignoreDuplicates: false });
      } else {
        await window.budDB.lagre('bud_bonuslonn', { versjon_id:versjonId, avdeling_id:avdeling.id, ...felt });
      }
      onLagret();
    } catch(e) { alert('Feil: '+e.message); }
    setLagrer(false);
  };

  const inp = { padding:'5px 8px', borderRadius:6, border:'1px solid rgba(17,24,61,.15)',
    fontSize:12.5, fontFamily:'inherit', width:'100%', boxSizing:'border-box' };

  const kontoplan = (data.kontoplan||[]);

  return (
    <div style={{ padding:'16px 20px', background:'#f8f9ff', borderTop:'1px solid rgba(17,24,61,.07)' }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:'12px 16px' }}>

        {/* Lønnsparametere */}
        <div style={{ gridColumn:'1/-1' }}>
          <div style={{ fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.08, marginBottom:8 }}>
            {erGlobal ? 'Globale satser — arves av alle avdelinger' : `Lønnsparametere · ${antallVta} VTA-deltakere · Overstyr globale satser`}
          </div>
        </div>
        <div>
          <label style={budLBL}>
            Timer per deltaker/mnd
            {!erGlobal && timer !== '' && String(timer) !== String(gs.timer_per_mnd) && <span style={{ marginLeft:6, fontSize:10, color:SK.coral, fontWeight:600 }}>Overstyrt</span>}
          </label>
          <input type="number" value={timer} onChange={e=>setTimer(e.target.value)} style={{...inp, borderColor: !erGlobal && timer !== '' && String(timer) !== String(gs.timer_per_mnd) ? SK.coral : undefined }}
            placeholder={erGlobal ? '0' : String(gs.timer_per_mnd ?? '—')} />
        </div>
        <div>
          <label style={budLBL}>
            Timelønn (kr)
            {!erGlobal && timelonn !== '' && String(timelonn) !== String(gs.timelonn) && <span style={{ marginLeft:6, fontSize:10, color:SK.coral, fontWeight:600 }}>Overstyrt</span>}
          </label>
          <input type="number" value={timelonn} onChange={e=>setTimelonn(e.target.value)} style={{...inp, borderColor: !erGlobal && timelonn !== '' && String(timelonn) !== String(gs.timelonn) ? SK.coral : undefined }}
            placeholder={erGlobal ? '0' : String(gs.timelonn ?? '—')} />
        </div>
        <div>
          <label style={budLBL}>Månedlig grunnkostnad</label>
          <div style={{ padding:'6px 8px', borderRadius:6, background:'#fff', border:'1px solid rgba(17,24,61,.1)',
            fontSize:12.5, fontWeight:600, color:SK.ink }}>
            {preview.mndLonn > 0 ? Math.round(preview.mndLonn).toLocaleString('nb-NO')+' kr' : '—'}
          </div>
        </div>
        <div>
          <label style={budLBL}>Forhåndsvisning total år</label>
          <div style={{ padding:'6px 8px', borderRadius:6, background:'rgba(17,24,61,.04)', border:'1px solid rgba(17,24,61,.1)',
            fontSize:13, fontWeight:700, color:SK.ink }}>
            {preview.total > 0 ? Math.round(preview.total).toLocaleString('nb-NO')+' kr' : '—'}
          </div>
        </div>

        {/* Sosiale satser */}
        <div style={{ gridColumn:'1/-1', marginTop:4 }}>
          <div style={{ fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.08, marginBottom:8 }}>
            Sosiale satser <span style={{ fontWeight:400, textTransform:'none' }}>(blank = bruk global sats: AGA {satser.aga_pct??14.1}%, Pensjon {satser.pensjon_pct??2.0}%, Ferie {satser.ferie_paaslag_pct??12.0}%)</span>
          </div>
        </div>
        <div>
          <label style={budLBL}>AGA %</label>
          <input type="number" step="0.1" value={agaPct} onChange={e=>setAgaPct(e.target.value)} style={inp} placeholder={String(gs.aga_pct ?? satser.aga_pct ?? 14.1)} />
        </div>
        <div>
          <label style={budLBL}>Pensjon %</label>
          <input type="number" step="0.1" value={pensjonPct} onChange={e=>setPensjonPct(e.target.value)} style={inp} placeholder={String(gs.pensjon_pct ?? satser.pensjon_pct ?? 2.0)} />
        </div>
        <div>
          <label style={budLBL}>Feriepenger %</label>
          <input type="number" step="0.1" value={feriePct} onChange={e=>setFeriePct(e.target.value)} style={inp} placeholder={String(gs.ferie_pct ?? satser.ferie_paaslag_pct ?? 12.0)} />
        </div>
        <div>
          <label style={budLBL}>Andre sos. %</label>
          <input type="number" step="0.1" value={sosPct} onChange={e=>setSosPct(e.target.value)} style={inp} placeholder={String(gs.andre_sos_pct ?? satser.andre_sos_pct ?? 0)} />
        </div>

        {/* Kontoer */}
        <div style={{ gridColumn:'1/-1', marginTop:4 }}>
          <div style={{ fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.08, marginBottom:8 }}>Kontoer</div>
        </div>
        {[
          ['Grunnlønn/feriepenger', kontoGrunn, setKontoGrunn, gs.konto_grunnlonn ?? null],
          ['AGA',                   kontoAga,   setKontoAga,   gs.konto_aga],
          ['Feriepenger',           kontoFerie, setKontoFerie, gs.konto_ferie],
          ['Pensjon',               kontoPensjon, setKontoPensjon, gs.konto_pensjon],
        ].map(([label, val, setter, gsKonto]) => {
          const gsnavn = gsKonto ? kontoplan.find(k=>k.konto===Number(gsKonto||0))?.navn : null;
          const overstyrtKonto = val !== '' && String(val) !== String(gsKonto??'');
          return (
            <div key={label}>
              <label style={budLBL}>
                {label}
                {!erGlobal && overstyrtKonto && <span style={{ marginLeft:6, fontSize:10, color:SK.coral, fontWeight:600 }}>Overstyrt</span>}
              </label>
              <select value={val} onChange={e=>setter(e.target.value)}
                style={{ ...inp, borderColor: !erGlobal && overstyrtKonto ? SK.coral : undefined }}>
                <option value="">{gsnavn ? `↑ ${gsKonto} ${gsnavn} (globalt)` : '— Ingen —'}</option>
                {kontoplan.filter(k=>k.konto>=5000&&k.konto<8000).map(k=>(
                  <option key={k.konto} value={k.konto}>{k.konto} {k.navn}</option>
                ))}
              </select>
            </div>
          );
        })}

        {/* Måneder */}
        <div style={{ gridColumn:'1/-1', marginTop:4 }}>
          <div style={{ fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.08, marginBottom:8 }}>
            Inkluder måneder ({effInkluder.filter(Boolean).length} av 12)
            {!erGlobal && inkluder === null && <span style={{ marginLeft:6, fontWeight:400, textTransform:'none', color:SK.soft }}>(arvet fra globalt)</span>}
          </div>
          <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
            {BB_MND.map((m,i) => (
              <button key={i} onClick={() => {
                const n=[...effInkluder]; n[i]=!n[i]; setInkluder(n);
              }} style={{ padding:'4px 12px', borderRadius:6, fontSize:12, fontWeight:600,
                background: effInkluder[i] ? SK.ink : 'transparent',
                color: effInkluder[i] ? '#fff' : SK.soft,
                border:`1px solid ${effInkluder[i] ? SK.ink : 'rgba(17,24,61,.15)'}`,
                cursor:'pointer', fontFamily:'inherit' }}>
                {m}
              </button>
            ))}
          </div>
          {!erGlobal && inkluder !== null && (
            <button onClick={() => setInkluder(null)}
              style={{ marginTop:6, fontSize:11, color:SK.soft, background:'transparent',
                border:'none', cursor:'pointer', fontFamily:'inherit', textDecoration:'underline' }}>
              ↺ Tilbakestill måneder til globalt
            </button>
          )}
        </div>

      </div>

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

Object.assign(window, { BudBonuslonn });