// okonomi-prognose.jsx — Prognose-editor med moduler og avvikspanel
// Lastes etter okonomi-fase1-screens.jsx

const PRG_MND = ['Jan','Feb','Mar','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Des'];
const PRG_DRIVER_LABEL = {
  deltakere_vta:   'VTA-deltakere',
  deltakere_aft:   'AFT-deltakere',
  deltakere_total: 'Totalt deltakere',
  kvm:             'Areal (m²)',
  ansatte:         'Ansatte (FTE)',
  omsetning:       'Omsetning (kr)',
  egendefinert:    'Egendefinert',
};

const prgFmt  = n => n == null ? '—' : Math.round(n).toLocaleString('nb-NO');
const prgFmtT = n => n == null ? '—' : Math.round(n/1000).toLocaleString('nb-NO');
const avvikFarge = (a) => !a ? '#888' : a > 0 ? '#1b6a2e' : '#f2545c';

// ══════════════════════════════════════════════════════════════
// DATALAG — driver-overlay
// ══════════════════════════════════════════════════════════════

async function prgHentDrivere(prognoseVersjonId) {
  const { data, error } = await window._sb.from('ok_prognose_driver')
    .select('*, avdeling:enheter!avdeling_id(id,navn,avd_nr)')
    .eq('prognose_versjon_id', prognoseVersjonId)
    .order('driver_type').order('fra_periode');
  if (error) throw error;
  return data || [];
}

async function prgLagreDriver(prognoseVersjonId, felt) {
  const { data: { user } } = await window._sb.auth.getUser();
  const { data, error } = await window._sb.from('ok_prognose_driver')
    .upsert({
      prognose_versjon_id: prognoseVersjonId,
      ...felt,
      endret_av: user?.id,
    }, { onConflict: 'prognose_versjon_id,driver_type,avdeling_id,fra_periode' })
    .select().single();
  if (error) throw error;
  return data;
}

async function prgSlettDriver(id) {
  const { error } = await window._sb.from('ok_prognose_driver').delete().eq('id', id);
  if (error) throw error;
}

// ══════════════════════════════════════════════════════════════
// HOVED-KOMPONENT: OkPrognoseFane (erstatter enklere versjon)
// ══════════════════════════════════════════════════════════════

function OkPrognoseFane({ budVersjoner, enheter, data: okData }) {
  const [versjonId,    setVersjonId]    = React.useState('');
  const [prognoseId,   setPrognoseId]   = React.useState(null);
  const [ar,           setAr]           = React.useState(null);
  const [aktivModul,   setAktivModul]   = React.useState('oversikt');
  const [budData,      setBudData]      = React.useState(null);  // data fra budsjettmodulen
  const [drivere,      setDrivere]      = React.useState([]);
  const [laster,       setLaster]       = React.useState(false);
  const [avvikData,    setAvvikData]    = React.useState(null);

  // Hent budsjett-data og koble til prognose når versjon velges
  React.useEffect(() => {
    if (!versjonId) return;
    const versjon = (budVersjoner||[]).find(v=>v.id===versjonId);
    if (!versjon) return;
    setAr(versjon.ar);
    setLaster(true);

    Promise.all([
      // Hent full budsjett-data
      window.budHentAlt ? window.budHentAlt(window._sb, versjonId) : Promise.resolve(null),
      // Hent eller opprett prognose
      window.okHentPrognoser(versjon.ar).then(async prognoser => {
        let prog = prognoser.find(p=>p.bud_versjon_id===versjonId);
        if (!prog) prog = await window.okOpprettPrognose(versjonId, versjon.ar);
        return prog;
      }),
    ]).then(([bData, prog]) => {
      setBudData(bData);
      setPrognoseId(prog.id);
      return prgHentDrivere(prog.id);
    }).then(d => setDrivere(d))
    .catch(e => alert('Feil: '+e.message))
    .finally(() => setLaster(false));
  }, [versjonId]);

  const lastDrivere = async () => {
    if (!prognoseId) return;
    const d = await prgHentDrivere(prognoseId);
    setDrivere(d);
  };

  const MODULER = [
    { id:'oversikt',    label:'Oversikt',         ikon:'ti-chart-bar' },
    { id:'lonn',        label:'Lønn',             ikon:'ti-users' },
    { id:'bonuslonn',   label:'Bonuslønn',        ikon:'ti-star' },
    { id:'eiendom',     label:'Eiendommer',       ikon:'ti-building' },
    { id:'fordelinger', label:'Fordelinger',      ikon:'ti-arrows-split-2' },
    { id:'finans',      label:'Finansinntekter',  ikon:'ti-trending-up' },
    { id:'drivere',     label:'Drivere & nøkler', ikon:'ti-settings' },
  ];

  if (!versjonId) return (
    <div>
      <PrgVersjonVelger budVersjoner={budVersjoner} onValgt={setVersjonId} />
    </div>
  );

  return (
    <div>
      {/* Header */}
      <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:20,
        padding:'12px 16px', borderRadius:10, background:'rgba(186,117,23,.06)',
        border:'1px solid rgba(186,117,23,.2)' }}>
        <i className="ti ti-adjustments-horizontal" style={{fontSize:18,color:'#BA7517'}} aria-hidden="true"/>
        <div>
          <div style={{ fontSize:13, fontWeight:600, color:'#633806' }}>
            Prognose-modus — {(budVersjoner||[]).find(v=>v.id===versjonId)?.navn}
          </div>
          <div style={{ fontSize:12, color:'#854F0B', marginTop:2 }}>
            Justeringer lagres separat fra budsjettet. Budsjettdata forblir uendret.
          </div>
        </div>
        <select value={versjonId} onChange={e=>setVersjonId(e.target.value)}
          style={{ marginLeft:'auto', padding:'5px 8px', borderRadius:7, fontSize:12,
            border:'1px solid rgba(186,117,23,.3)', background:'rgba(255,255,255,.8)',
            fontFamily:'inherit' }}>
          {(budVersjoner||[]).map(v=>(<option key={v.id} value={v.id}>{v.navn}</option>))}
        </select>
      </div>

      {/* Modul-nav */}
      <div style={{ display:'flex', gap:4, marginBottom:20, flexWrap:'wrap' }}>
        {MODULER.map(m => (
          <button key={m.id} onClick={()=>setAktivModul(m.id)}
            style={{ display:'flex', alignItems:'center', gap:6, padding:'7px 14px',
              borderRadius:8, border:`1px solid ${aktivModul===m.id?'#BA7517':'rgba(17,24,61,.12)'}`,
              background: aktivModul===m.id ? 'rgba(186,117,23,.1)' : 'transparent',
              color: aktivModul===m.id ? '#633806' : SK.soft,
              fontWeight: aktivModul===m.id ? 600 : 400,
              fontSize:13, cursor:'pointer', fontFamily:'inherit' }}>
            <i className={`ti ${m.ikon}`} style={{fontSize:14}} aria-hidden="true"/>
            {m.label}
          </button>
        ))}
      </div>

      {laster && (
        <div style={{ padding:32, textAlign:'center', color:SK.soft }}>Laster budsjettdata…</div>
      )}

      {!laster && aktivModul==='oversikt' && prognoseId && (
        <PrgOversikt prognoseId={prognoseId} ar={ar} budVersjoner={budVersjoner}
          versjonId={versjonId} enheter={enheter} drivere={drivere} />
      )}

      {!laster && aktivModul==='drivere' && prognoseId && (
        <PrgDriverEditor prognoseId={prognoseId} enheter={enheter}
          drivere={drivere} budData={budData} versjonId={versjonId}
          onEndret={lastDrivere} />
      )}

      {/* Budsjett-moduler i prognose-modus */}
      {!laster && budData && prognoseId && ['lonn','bonuslonn','eiendom','fordelinger','finans'].includes(aktivModul) && (
        <PrgModulWrapper
          modul={aktivModul}
          budData={budData}
          versjonId={versjonId}
          prognoseId={prognoseId}
          enheter={enheter}
          drivere={drivere}
          ar={ar}
          onEndret={lastDrivere}
        />
      )}
    </div>
  );
}

// ── Versjon-velger ────────────────────────────────────────────
function PrgVersjonVelger({ budVersjoner, onValgt }) {
  return (
    <Card padded>
      <div style={{ textAlign:'center', padding:'24px 0' }}>
        <i className="ti ti-adjustments-horizontal"
          style={{ fontSize:32, color:SK.soft, display:'block', marginBottom:12 }} aria-hidden="true"/>
        <div style={{ fontSize:15, fontWeight:600, marginBottom:8 }}>Velg budsjettversjon</div>
        <div style={{ fontSize:13, color:SK.soft, marginBottom:20 }}>
          Prognosen kobles til en budsjettversjon og justeres derfra.
        </div>
        <div style={{ display:'flex', gap:10, justifyContent:'center', flexWrap:'wrap' }}>
          {(budVersjoner||[]).filter(v=>v.status!=='arkivert').map(v => (
            <button key={v.id} onClick={()=>onValgt(v.id)}
              style={{ padding:'12px 20px', borderRadius:10, cursor:'pointer', fontFamily:'inherit',
                border:'1px solid rgba(17,24,61,.15)', background:SK.pureWhite, fontSize:13 }}>
              <div style={{ fontWeight:600 }}>{v.navn}</div>
              <div style={{ fontSize:11, color:SK.soft, marginTop:3 }}>{v.ar} · {v.status}</div>
            </button>
          ))}
        </div>
      </div>
    </Card>
  );
}

// ── Oversikt-panel ────────────────────────────────────────────
function PrgOversikt({ prognoseId, ar, versjonId, enheter, drivere }) {
  const [rader,   setRader]   = React.useState([]);
  const [laster,  setLaster]  = React.useState(true);
  const [valgtAvd,setValgtAvd]= React.useState('');

  React.useEffect(() => {
    if (!prognoseId) return;
    window.okBeregnPrognose(prognoseId, valgtAvd||null)
      .then(setRader).catch(e=>alert(e.message))
      .finally(()=>setLaster(false));
  }, [prognoseId, valgtAvd]);

  const perioder = Array.from({length:12},(_,i)=>ar*100+i+1);
  const naMnd = new Date().getFullYear()===ar ? new Date().getMonth()+1 : 12;

  // Summér per periode: regnskap, budsjett, prognose
  const summer = perioder.map(p => ({
    periode: p,
    regnskap: rader.reduce((s,r)=>r.periode===p?s+Number(r.belop_regnskap||0):s,0),
    budsjett: rader.reduce((s,r)=>r.periode===p?s+Number(r.belop_budsjett||0):s,0),
    prognose: rader.reduce((s,r)=>r.periode===p?s+Number(r.belop_prognose||0):s,0),
  }));

  const totBud  = summer.reduce((s,m)=>s+m.budsjett,0);
  const totProg = summer.reduce((s,m)=>s+m.prognose,0);
  const totAvvik = totProg - totBud;

  // Driver-endringer oppsummert
  const driverOppsummering = Object.entries(
    drivere.reduce((acc,d)=>{
      const k = d.driver_type;
      if (!acc[k]) acc[k] = { type:k, antall:0, avdelinger:new Set() };
      acc[k].antall++;
      if (d.avdeling_id) acc[k].avdelinger.add(d.avdeling?.navn||d.avdeling_id);
      return acc;
    }, {})
  );

  return (
    <div>
      {/* KPI */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12, marginBottom:20 }}>
        <Card padded>
          <div style={{ fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase', marginBottom:6 }}>Budsjett helår</div>
          <div style={{ fontSize:22, fontWeight:700 }}>{prgFmtT(totBud)} TNOK</div>
        </Card>
        <Card padded>
          <div style={{ fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase', marginBottom:6 }}>Prognose helår</div>
          <div style={{ fontSize:22, fontWeight:700 }}>{prgFmtT(totProg)} TNOK</div>
        </Card>
        <Card padded>
          <div style={{ fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase', marginBottom:6 }}>Avvik vs. budsjett</div>
          <div style={{ fontSize:22, fontWeight:700, color:avvikFarge(totAvvik) }}>
            {totAvvik>0?'+':''}{prgFmtT(totAvvik)} TNOK
          </div>
        </Card>
        <Card padded>
          <div style={{ fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase', marginBottom:6 }}>Driver-endringer</div>
          <div style={{ fontSize:22, fontWeight:700 }}>{drivere.length}</div>
          <div style={{ fontSize:11, color:SK.soft }}>{driverOppsummering.length} typer</div>
        </Card>
      </div>

      {/* Driver-endringer */}
      {drivere.length > 0 && (
        <Card padded style={{ marginBottom:16 }}>
          <div style={{ fontSize:13, fontWeight:600, marginBottom:10 }}>Aktive driver-endringer</div>
          <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
            {drivere.map(d => (
              <div key={d.id} style={{ padding:'6px 12px', borderRadius:8, fontSize:12,
                background:'rgba(186,117,23,.08)', border:'1px solid rgba(186,117,23,.2)' }}>
                <span style={{ fontWeight:600, color:'#633806' }}>
                  {PRG_DRIVER_LABEL[d.driver_type]||d.driver_type}
                </span>
                {d.avdeling && <span style={{ color:SK.soft }}> · {d.avdeling.navn}</span>}
                <span style={{ color:SK.soft }}> fra {PRG_MND[(d.fra_periode%100)-1]}</span>
                <span style={{ fontWeight:600, marginLeft:6 }}>
                  {d.budsjett_verdi!=null && <>{d.budsjett_verdi} → </>}
                  {d.verdi}
                </span>
              </div>
            ))}
          </div>
        </Card>
      )}

      {/* Månedstabell */}
      <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 14px', textAlign:'left', fontSize:11, fontWeight:700,
                  color:SK.soft, textTransform:'uppercase' }}>Periode</th>
                <th style={{ padding:'8px 10px', textAlign:'right', fontSize:11, fontWeight:700,
                  color:'#378ADD', textTransform:'uppercase' }}>Budsjett</th>
                <th style={{ padding:'8px 10px', textAlign:'right', fontSize:11, fontWeight:700,
                  color:'#BA7517', textTransform:'uppercase' }}>Prognose</th>
                <th style={{ padding:'8px 10px', textAlign:'right', fontSize:11, fontWeight:700,
                  color:SK.soft, textTransform:'uppercase' }}>Avvik</th>
                <th style={{ padding:'8px 14px', textAlign:'right', fontSize:11, fontWeight:700,
                  color:SK.soft, textTransform:'uppercase' }}>%</th>
              </tr>
            </thead>
            <tbody>
              {summer.map((m,i) => {
                const avvik = m.prognose - m.budsjett;
                const pct   = m.budsjett ? (avvik/Math.abs(m.budsjett))*100 : null;
                const lukket = i+1 < naMnd;
                return (
                  <tr key={m.periode} style={{ borderBottom:'1px solid rgba(17,24,61,.04)',
                    background: i+1===naMnd ? 'rgba(186,117,23,.04)' : 'transparent' }}>
                    <td style={{ padding:'7px 14px', fontWeight: i+1===naMnd?600:400 }}>
                      {PRG_MND[i]} {ar}
                      {lukket && <span style={{ fontSize:10, marginLeft:6, color:'#1b6a2e' }}>R</span>}
                      {!lukket && i+1>naMnd && <span style={{ fontSize:10, marginLeft:6, color:'#BA7517' }}>P</span>}
                    </td>
                    <td style={{ padding:'7px 10px', textAlign:'right', color:'#378ADD' }}>
                      {prgFmtT(m.budsjett)}
                    </td>
                    <td style={{ padding:'7px 10px', textAlign:'right', color:'#BA7517', fontWeight:600 }}>
                      {prgFmtT(m.prognose)}
                    </td>
                    <td style={{ padding:'7px 10px', textAlign:'right',
                      color:avvik===0?SK.soft:avvik>0?'#1b6a2e':'#f2545c', fontWeight: avvik!==0?600:400 }}>
                      {avvik!==0?(avvik>0?'+':'')+prgFmtT(avvik):'—'}
                    </td>
                    <td style={{ padding:'7px 14px', textAlign:'right', color:SK.soft, fontSize:11 }}>
                      {pct!=null ? (pct>0?'+':'')+pct.toFixed(1)+'%' : '—'}
                    </td>
                  </tr>
                );
              })}
              <tr style={{ borderTop:'2px solid rgba(17,24,61,.1)', background:SK.iceBlueLight }}>
                <td style={{ padding:'8px 14px', fontWeight:700 }}>Sum helår</td>
                <td style={{ padding:'8px 10px', textAlign:'right', fontWeight:700, color:'#378ADD' }}>
                  {prgFmtT(totBud)}
                </td>
                <td style={{ padding:'8px 10px', textAlign:'right', fontWeight:700, color:'#BA7517' }}>
                  {prgFmtT(totProg)}
                </td>
                <td style={{ padding:'8px 10px', textAlign:'right', fontWeight:700,
                  color:totAvvik===0?SK.soft:totAvvik>0?'#1b6a2e':'#f2545c' }}>
                  {totAvvik!==0?(totAvvik>0?'+':'')+prgFmtT(totAvvik):'—'}
                </td>
                <td style={{ padding:'8px 14px', textAlign:'right', fontWeight:700, color:SK.soft, fontSize:11 }}>
                  {totBud ? ((totAvvik/Math.abs(totBud))*100).toFixed(1)+'%' : '—'}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div style={{ padding:'8px 14px', fontSize:11, color:SK.soft,
          borderTop:'1px solid rgba(17,24,61,.06)' }}>
          R = Regnskap (lukket periode) · P = Prognose (fremtidig)
        </div>
      </Card>
    </div>
  );
}

// ── Driver-editor ─────────────────────────────────────────────
function PrgDriverEditor({ prognoseId, enheter, drivere, budData, versjonId, onEndret }) {
  const [visNy, setVisNy] = React.useState(false);
  const [laster, setLaster] = React.useState(false);
  const ar = budData ? null : new Date().getFullYear();

  const groupedDrivere = drivere.reduce((acc, d) => {
    const k = d.driver_type;
    if (!acc[k]) acc[k] = [];
    acc[k].push(d);
    return acc;
  }, {});

  const slett = async (id) => {
    if (!confirm('Slett denne driver-endringen?')) return;
    setLaster(true);
    try { await prgSlettDriver(id); await onEndret(); }
    catch(e) { alert('Feil: '+e.message); }
    setLaster(false);
  };

  return (
    <div>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16 }}>
        <div>
          <div style={{ fontSize:14, fontWeight:600 }}>Drivere & fordelingsnøkler</div>
          <div style={{ fontSize:12.5, color:SK.soft, marginTop:2 }}>
            Endre verdier som driver fordelingen fremover i prognoseperioden.
            Endringer gjelder fra valgt måned til årets slutt (eller neste endring).
          </div>
        </div>
        {!laster && (
          <Button variant="primary" size="sm" onClick={()=>setVisNy(true)}>
            + Ny driver-endring
          </Button>
        )}
      </div>

      {Object.keys(groupedDrivere).length === 0 ? (
        <Card padded>
          <div style={{ textAlign:'center', padding:'24px 0', color:SK.soft, fontSize:13 }}>
            <i className="ti ti-arrows-split-2" style={{fontSize:28,display:'block',marginBottom:10}} aria-hidden="true"/>
            Ingen driver-endringer registrert.
            <div style={{ marginTop:8 }}>
              Legg til når f.eks. antall VTA-deltakere eller areal endrer seg i løpet av året.
            </div>
          </div>
        </Card>
      ) : (
        Object.entries(groupedDrivere).map(([type, rader]) => (
          <Card padded={false} key={type} style={{ marginBottom:12 }}>
            <div style={{ padding:'12px 16px', borderBottom:'1px solid rgba(17,24,61,.06)',
              fontWeight:600, fontSize:13 }}>
              {PRG_DRIVER_LABEL[type]||type}
            </div>
            <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12.5 }}>
              <thead>
                <tr style={{ background:SK.iceBlueLight }}>
                  {['Avdeling','Fra periode','Budsjett-verdi','Ny verdi','Endring','Begrunnelse',''].map(h => (
                    <th key={h} style={{ padding:'7px 12px', textAlign:h==='Ny verdi'||h==='Endring'?'right':'left',
                      fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {rader.map(d => {
                  const avvik = d.budsjett_verdi!=null ? d.verdi - d.budsjett_verdi : null;
                  return (
                    <tr key={d.id} style={{ borderBottom:'1px solid rgba(17,24,61,.04)' }}>
                      <td style={{ padding:'8px 12px' }}>{d.avdeling?.navn||'Alle'}</td>
                      <td style={{ padding:'8px 12px', color:SK.soft }}>
                        {PRG_MND[(d.fra_periode%100)-1]} {Math.floor(d.fra_periode/100)}
                      </td>
                      <td style={{ padding:'8px 12px', color:SK.soft }}>
                        {d.budsjett_verdi!=null ? prgFmt(d.budsjett_verdi) : '—'}
                      </td>
                      <td style={{ padding:'8px 12px', textAlign:'right', fontWeight:600 }}>
                        {prgFmt(d.verdi)}
                      </td>
                      <td style={{ padding:'8px 12px', textAlign:'right',
                        color: avvik==null?SK.soft:avvik>0?'#1b6a2e':'#f2545c', fontWeight: avvik?600:400 }}>
                        {avvik!=null?(avvik>0?'+':'')+prgFmt(avvik):'—'}
                      </td>
                      <td style={{ padding:'8px 12px', color:SK.soft, fontSize:12 }}>
                        {d.begrunnelse||'—'}
                      </td>
                      <td style={{ padding:'8px 8px' }}>
                        <button onClick={()=>slett(d.id)}
                          style={{ border:'none', background:'none', color:SK.coral,
                            cursor:'pointer', fontSize:14, fontFamily:'inherit' }}>
                          <i className="ti ti-trash" aria-label="Slett"/>
                        </button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </Card>
        ))
      )}

      {visNy && (
        <PrgNyDriverModal prognoseId={prognoseId} enheter={enheter} budData={budData}
          onLukk={()=>setVisNy(false)}
          onLagret={()=>{ setVisNy(false); onEndret(); }} />
      )}
    </div>
  );
}

// ── Ny driver-modal ───────────────────────────────────────────
function PrgNyDriverModal({ prognoseId, enheter, budData, onLukk, onLagret }) {
  const [type,       setType]       = React.useState('deltakere_vta');
  const [avdId,      setAvdId]      = React.useState('');
  const [fraMnd,     setFraMnd]     = React.useState(new Date().getMonth()+1);
  const [ar,         setAr]         = React.useState(new Date().getFullYear());
  const [verdi,      setVerdi]      = React.useState('');
  const [budVerdi,   setBudVerdi]   = React.useState('');
  const [begrunnelse,setBegrunnelse]= React.useState('');
  const [laster,     setLaster]     = React.useState(false);

  // Auto-fyll budsjett-verdi fra deltakermatrisen hvis tilgjengelig
  React.useEffect(() => {
    if (type==='deltakere_vta' && avdId && budData) {
      const ant = (budData.deltakere||[])
        .filter(d=>d.versjon_id===budData.versjonId&&d.avdeling_id===avdId&&d.kategori==='VTA')
        .reduce((s,d)=>s+Number(d.antall||0),0);
      if (ant) setBudVerdi(String(ant));
    }
  }, [type, avdId, budData]);

  const lagre = async () => {
    if (!verdi) return;
    setLaster(true);
    try {
      await prgLagreDriver(prognoseId, {
        driver_type:    type,
        avdeling_id:    avdId||null,
        fra_periode:    ar*100+fraMnd,
        verdi:          Number(verdi),
        budsjett_verdi: budVerdi!==''?Number(budVerdi):null,
        begrunnelse:    begrunnelse||null,
      });
      onLagret();
    } catch(e) { alert('Feil: '+e.message); setLaster(false); }
  };

  return (
    <BudModal tittel="Ny driver-endring" onLukk={onLukk}>
      <div style={{ display:'flex', flexDirection:'column', gap:13 }}>
        <div style={{ padding:'8px 12px', borderRadius:8, background:SK.iceBlueLight,
          fontSize:12.5, color:SK.soft, lineHeight:1.6 }}>
          Driver-endringen gjelder fra valgt måned til neste endring eller årets slutt.
          Fordelingsnøkler som bruker denne driveren beregnes automatisk på nytt.
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
          <div>
            <label style={budLBL}>Driver-type</label>
            <select value={type} onChange={e=>setType(e.target.value)}
              style={{ width:'100%', padding:'6px 8px', borderRadius:7,
                border:'1px solid rgba(17,24,61,.15)', fontFamily:'inherit', fontSize:13 }}>
              {Object.entries(PRG_DRIVER_LABEL).map(([k,v])=>(
                <option key={k} value={k}>{v}</option>
              ))}
            </select>
          </div>
          <div>
            <label style={budLBL}>Avdeling</label>
            <select value={avdId} onChange={e=>setAvdId(e.target.value)}
              style={{ width:'100%', padding:'6px 8px', borderRadius:7,
                border:'1px solid rgba(17,24,61,.15)', fontFamily:'inherit', fontSize:13 }}>
              <option value="">— Alle avdelinger —</option>
              {(enheter||[]).map(e=>(
                <option key={e.id} value={e.id}>{e.avd_nr} {e.navn}</option>
              ))}
            </select>
          </div>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
          <div>
            <label style={budLBL}>Fra måned</label>
            <div style={{ display:'flex', gap:6 }}>
              <select value={fraMnd} onChange={e=>setFraMnd(Number(e.target.value))}
                style={{ flex:2, padding:'6px 8px', borderRadius:7,
                  border:'1px solid rgba(17,24,61,.15)', fontFamily:'inherit', fontSize:13 }}>
                {PRG_MND.map((m,i)=><option key={i+1} value={i+1}>{m}</option>)}
              </select>
              <select value={ar} onChange={e=>setAr(Number(e.target.value))}
                style={{ flex:1, padding:'6px 8px', borderRadius:7,
                  border:'1px solid rgba(17,24,61,.15)', fontFamily:'inherit', fontSize:13 }}>
                {[2024,2025,2026,2027].map(y=><option key={y} value={y}>{y}</option>)}
              </select>
            </div>
          </div>
          <div>
            <label style={budLBL}>Budsjettverdi (valgfritt)</label>
            <input type="number" value={budVerdi} onChange={e=>setBudVerdi(e.target.value)}
              style={{ width:'100%', padding:'6px 8px', borderRadius:7, boxSizing:'border-box',
                border:'1px solid rgba(17,24,61,.15)', fontFamily:'inherit', fontSize:13 }}
              placeholder="Auto fra budsjett" />
          </div>
        </div>

        <div>
          <label style={budLBL}>Ny verdi</label>
          <input type="number" value={verdi} onChange={e=>setVerdi(e.target.value)}
            style={{ width:'100%', padding:'6px 8px', borderRadius:7, boxSizing:'border-box',
              border:'1px solid rgba(186,117,23,.4)', fontFamily:'inherit', fontSize:14,
              fontWeight:600 }}
            placeholder="Ny verdi fra og med valgt måned" />
        </div>

        <div>
          <label style={budLBL}>Begrunnelse</label>
          <input value={begrunnelse} onChange={e=>setBegrunnelse(e.target.value)}
            style={{ width:'100%', padding:'6px 8px', borderRadius:7, boxSizing:'border-box',
              border:'1px solid rgba(17,24,61,.15)', fontFamily:'inherit', fontSize:13 }}
            placeholder="F.eks. 3 nye VTA-deltakere fra august" />
        </div>

        <div style={{ display:'flex', gap:10, marginTop:4 }}>
          <Button variant="primary" onClick={lagre} disabled={!verdi||laster}>
            {laster?'Lagrer…':'Lagre endring'}
          </Button>
          <Button onClick={onLukk}>Avbryt</Button>
        </div>
      </div>
    </BudModal>
  );
}

// ── Modul-wrapper: budsjettmodul i prognose-modus ─────────────
function PrgModulWrapper({ modul, budData, versjonId, prognoseId, enheter, drivere, ar, onEndret }) {
  const [prognoseRader, setPrognoseRader] = React.useState([]);
  const [lasterProg,    setLasterProg]    = React.useState(true);

  React.useEffect(() => {
    window.okBeregnPrognose(prognoseId)
      .then(setPrognoseRader)
      .finally(()=>setLasterProg(false));
  }, [prognoseId]);

  // Beregn budsjett-posteringer for denne modulen
  const budPost = React.useMemo(() => {
    if (!budData || !window.budBeregnPosteringer) return [];
    return window.budBeregnPosteringer(budData, versjonId)
      .filter(p => p.type === modul || p.type === (modul==='lonn'?'lonn':modul));
  }, [budData, versjonId, modul]);

  // Avviks-panel per avdeling og måned
  const avvikPerAvd = React.useMemo(() => {
    const perioder = Array.from({length:12},(_,i)=>ar*100+i+1);
    const avdIds   = [...new Set([
      ...budPost.map(p=>p.avd_id),
      ...prognoseRader.map(r=>r.avdeling_id),
    ])].filter(Boolean);

    return avdIds.map(avdId => {
      const avdNavn = enheter?.find(e=>e.id===avdId)?.navn || avdId;
      const mnd = perioder.map(p => {
        const bud  = budPost.filter(x=>x.avd_id===avdId)
                     .reduce((s,x)=>s+Number(x.belop||0),0) / 12;
        const prog = prognoseRader.find(r=>r.avdeling_id===avdId&&r.periode===p);
        const progBelop = prog?.belop_prognose ?? bud;
        return { periode:p, budsjett:bud, prognose:progBelop, avvik:progBelop-bud };
      });
      const totBud  = mnd.reduce((s,m)=>s+m.budsjett,0);
      const totProg = mnd.reduce((s,m)=>s+m.prognose,0);
      return { avdId, avdNavn, mnd, totBud, totProg, totAvvik:totProg-totBud };
    }).filter(a=>a.totBud!==0||a.totProg!==0);
  }, [budPost, prognoseRader, enheter, ar]);

  const MODUL_LABEL = {
    lonn:'Lønnsbudsjett', bonuslonn:'Bonuslønn', eiendom:'Eiendommer',
    fordelinger:'Fordelinger', finans:'Finansinntekter',
  };

  return (
    <div>
      {/* Info-banner */}
      <div style={{ marginBottom:16, padding:'10px 14px', borderRadius:10,
        background:'rgba(186,117,23,.06)', border:'1px solid rgba(186,117,23,.15)',
        fontSize:12.5, color:'#854F0B', lineHeight:1.6 }}>
        <b>Prognose-modus:</b> {MODUL_LABEL[modul]} — tallene vises med avvik mot budsjett.
        Bruk driver-fanen for å justere grunnlaget (f.eks. antall deltakere eller kvm).
        Manuelle justeringer kan gjøres i Oversikt-fanen.
      </div>

      {/* Avvikspanel per avdeling */}
      {avvikPerAvd.length > 0 && (
        <Card padded={false} style={{ marginBottom:16 }}>
          <div style={{ padding:'10px 14px', borderBottom:'1px solid rgba(17,24,61,.06)',
            fontSize:13, fontWeight:600 }}>
            Avvik prognose vs. budsjett — {MODUL_LABEL[modul]}
          </div>
          <div style={{ overflowX:'auto' }}>
            <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12 }}>
              <thead>
                <tr style={{ background:SK.iceBlueLight }}>
                  <th style={{ padding:'7px 14px', textAlign:'left', fontSize:11,
                    fontWeight:700, color:SK.soft, textTransform:'uppercase', minWidth:140 }}>Avdeling</th>
                  {PRG_MND.map(m=>(
                    <th key={m} style={{ padding:'7px 8px', textAlign:'right', fontSize:10.5,
                      fontWeight:400, color:SK.soft, minWidth:58 }}>{m}</th>
                  ))}
                  <th style={{ padding:'7px 14px', textAlign:'right', fontSize:11,
                    fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>Sum avvik</th>
                </tr>
              </thead>
              <tbody>
                {avvikPerAvd.map(a => (
                  <tr key={a.avdId} style={{ borderBottom:'1px solid rgba(17,24,61,.04)' }}>
                    <td style={{ padding:'7px 14px', fontWeight:500 }}>{a.avdNavn}</td>
                    {a.mnd.map(m => (
                      <td key={m.periode} style={{ padding:'7px 8px', textAlign:'right',
                        color: m.avvik===0?SK.soft:m.avvik>0?'#1b6a2e':'#f2545c',
                        fontWeight: Math.abs(m.avvik)>1000?600:400,
                        background: Math.abs(m.avvik)>10000?'rgba(242,84,92,.04)':'transparent' }}>
                        {Math.abs(m.avvik)<100?'—':(m.avvik>0?'+':'')+prgFmtT(m.avvik)}
                      </td>
                    ))}
                    <td style={{ padding:'7px 14px', textAlign:'right', fontWeight:700,
                      color:a.totAvvik===0?SK.soft:a.totAvvik>0?'#1b6a2e':'#f2545c' }}>
                      {a.totAvvik===0?'—':(a.totAvvik>0?'+':'')+prgFmtT(a.totAvvik)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div style={{ padding:'6px 14px', fontSize:11, color:SK.soft,
            borderTop:'1px solid rgba(17,24,61,.06)' }}>
            Tall i TNOK · Positiv avvik = høyere prognose enn budsjett
          </div>
        </Card>
      )}

      {/* Drivere som påvirker denne modulen */}
      {drivere.length > 0 && (
        <div style={{ marginBottom:12, display:'flex', gap:8, flexWrap:'wrap' }}>
          {drivere.filter(d =>
            (modul==='lonn'||modul==='bonuslonn') && d.driver_type.startsWith('deltakere') ||
            modul==='eiendom' && d.driver_type==='kvm' ||
            modul==='fordelinger'
          ).map(d => (
            <div key={d.id} style={{ padding:'4px 10px', borderRadius:6, fontSize:11.5,
              background:'rgba(186,117,23,.1)', color:'#633806', border:'1px solid rgba(186,117,23,.2)' }}>
              <b>{PRG_DRIVER_LABEL[d.driver_type]}</b>
              {d.avdeling&&<> · {d.avdeling.navn}</>}: {d.budsjett_verdi}→{d.verdi}
              {' '}fra {PRG_MND[(d.fra_periode%100)-1]}
            </div>
          ))}
        </div>
      )}

      {/* Placeholder: her kan budsjettmodulens komponent embeddes */}
      <Card padded>
        <div style={{ color:SK.soft, fontSize:13, textAlign:'center', padding:'20px 0' }}>
          <i className="ti ti-arrow-up-right" style={{fontSize:20,display:'block',marginBottom:8}} aria-hidden="true"/>
          For detaljert redigering av {MODUL_LABEL[modul].toLowerCase()},
          gå til <b>Budsjett → {MODUL_LABEL[modul]}</b> og bruk "Synkroniser til budsjett"
          etter endringer. Prognose-oversikten oppdateres automatisk.
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { OkPrognoseFane, PrgDriverEditor, PrgOversikt });