// budsjett-hjemler.jsx — Hjemmelfordeling (Karriere-inntekter)
// Modellerer tilskudd → ressursbehov → fordeling på avdelinger.
// Beregningslogikk speiler "Hjemler"-arket fra Budsjettmodellen.
// Eksporterer BudHjemler + budHjemlerBeregn til window.

// ── Datahenting ───────────────────────────────────────────────
async function budHentHjemler(versjonId) {
  const [s, h] = await Promise.all([
    window._sb.from('bud_hjemmel_satser').select('*').eq('versjon_id', versjonId).maybeSingle(),
    window._sb.from('bud_hjemler').select('*').eq('versjon_id', versjonId).order('sortering'),
  ]);
  return { satser: s.data, hjemler: h.data || [] };
}

// ── Beregningsmotor (samme logikk som arket) ─────────────────
// Tilskudd fordeles: direkte til avdeling + rest + admin til samleavdelingene
// 571 (AFT) og 561 (VTA). Sum over alle avdelinger = full sats × hjemler × 12.
function budHjemlerBeregn(satser, hjemler) {
  if (!satser) return null;
  const s = satser;
  // Månedspris til fordeling (etter admin-trekk)
  const mpFordAft     = Number(s.manedspris_aft)      * (1 - Number(s.admin_pct_aft) / 100);
  const mpFordVtaStat = Number(s.manedspris_vta_stat) * (1 - Number(s.admin_pct_vta_stat) / 100);
  const mpFordVtaKom  = Number(s.manedspris_vta_stat) * (Number(s.kommunal_pct) / 100); // kommunal = 72% av stat
  // Admin-beløp (holdes sentralt) per hjemmel/mnd
  const adminAft     = Number(s.manedspris_aft)      * (Number(s.admin_pct_aft) / 100);
  const adminVtaStat = Number(s.manedspris_vta_stat) * (Number(s.admin_pct_vta_stat) / 100);

  const restAvdAft = String(s.rest_avd_aft || '571');
  const restAvdVta = String(s.rest_avd_vta || '561');

  const rader = hjemler.map(h => {
    const dAft = Number(h.direkte_pct_aft) / 100;
    const dKom = Number(h.direkte_pct_vta_kom) / 100;
    const dStat= Number(h.direkte_pct_vta_stat) / 100;
    // Direkte tilskudd til avdelingen (12 mnd)
    const tAft  = Number(h.hjemler_aft)      * mpFordAft     * dAft  * 12;
    const tKom  = Number(h.hjemler_vta_kom)  * mpFordVtaKom  * dKom  * 12;
    const tStat = Number(h.hjemler_vta_stat) * mpFordVtaStat * dStat * 12;
    // Ressursbehov (direkte-andel av hjemler / nøkkel)
    const resAft = Number(h.hjemler_aft)      * dAft  / Number(s.hjemler_per_ressurs_aft);
    const resVta = (Number(h.hjemler_vta_kom) * dKom + Number(h.hjemler_vta_stat) * dStat) / Number(s.hjemler_per_ressurs_vta);
    // Rest-ressurser (ikke-direkte andel) → samles på veilederteamene 570/560
    const restResAft = Number(h.hjemler_aft)      * (1 - dAft)  / Number(s.hjemler_per_ressurs_aft);
    const restResVta = (Number(h.hjemler_vta_kom) * (1 - dKom) + Number(h.hjemler_vta_stat) * (1 - dStat)) / Number(s.hjemler_per_ressurs_vta);
    // Rest (ikke-direkte) som går til samleavdeling
    const restAft  = Number(h.hjemler_aft)      * mpFordAft     * (1 - dAft)  * 12;
    const restKom  = Number(h.hjemler_vta_kom)  * mpFordVtaKom  * (1 - dKom)  * 12;
    const restStat = Number(h.hjemler_vta_stat) * mpFordVtaStat * (1 - dStat) * 12;
    // Admin-pott per avdeling (samles på 571/561)
    const admAft  = Number(h.hjemler_aft)      * adminAft     * 12;
    const admVta  = Number(h.hjemler_vta_stat) * adminVtaStat * 12;
    return {
      ...h,
      tilskudd_aft: tAft, tilskudd_kom: tKom, tilskudd_stat: tStat,
      tilskudd_sum: tAft + tKom + tStat,
      ressurs_aft: resAft, ressurs_vta: resVta, ressurs_sum: resAft + resVta,
      rest_aft: restAft, rest_vta: restKom + restStat,
      rest_res_aft: restResAft, rest_res_vta: restResVta,
      admin_aft: admAft, admin_vta: admVta,
    };
  });

  // Samle rest + admin til 571 (AFT) og 561 (VTA)
  const restTilAft  = rader.reduce((a, r) => a + r.rest_aft, 0);
  const restTilVta  = rader.reduce((a, r) => a + r.rest_vta, 0);
  const adminPottAft = rader.reduce((a, r) => a + r.admin_aft, 0);
  const adminPottVta = rader.reduce((a, r) => a + r.admin_vta, 0);
  // Samle rest-ressurser til 570 (AFT) og 560 (VTA)
  const restResTilAft = rader.reduce((a, r) => a + r.rest_res_aft, 0);
  const restResTilVta = rader.reduce((a, r) => a + r.rest_res_vta, 0);
  const ressursAvdAft = String(s.ressurs_avd_aft || '570');
  const ressursAvdVta = String(s.ressurs_avd_vta || '560');

  // Hjelper: finn eller opprett samlepott-rad
  const finnEllerLag = (avdNr, navn) => {
    let rad = rader.find(r => String(r.avd_nr) === avdNr);
    if (!rad) {
      rad = { id: 'virtuell-' + avdNr, avd_nr: avdNr, navn,
        hjemler_aft: 0, hjemler_vta_kom: 0, hjemler_vta_stat: 0,
        tilskudd_aft: 0, tilskudd_kom: 0, tilskudd_stat: 0, tilskudd_sum: 0,
        ressurs_aft: 0, ressurs_vta: 0, ressurs_sum: 0, rest_aft: 0, rest_vta: 0,
        rest_res_aft: 0, rest_res_vta: 0, admin_aft: 0, admin_vta: 0, _samlepott: true };
      rader.push(rad);
    } else { rad._samlepott = true; }
    return rad;
  };

  // Legg admin + rest som INNTEKT på 571/561
  const radAftInnt = finnEllerLag(restAvdAft, 'AFT – samlepott inntekt');
  radAftInnt.inntekt_admin = (radAftInnt.inntekt_admin || 0) + adminPottAft;
  radAftInnt.tilskudd_aft  += restTilAft + adminPottAft;
  radAftInnt.tilskudd_sum  += restTilAft + adminPottAft;
  const radVtaInnt = finnEllerLag(restAvdVta, 'VTA – samlepott inntekt');
  radVtaInnt.inntekt_admin = (radVtaInnt.inntekt_admin || 0) + adminPottVta;
  radVtaInnt.tilskudd_stat += restTilVta + adminPottVta;
  radVtaInnt.tilskudd_sum  += restTilVta + adminPottVta;

  // Legg rest-RESSURSER på veilederteamene 570/560
  const radAftRes = finnEllerLag(ressursAvdAft, 'Veilederteam AFT');
  radAftRes.ressurs_aft += restResTilAft;
  radAftRes.ressurs_sum += restResTilAft;
  const radVtaRes = finnEllerLag(ressursAvdVta, 'Veilederteam VTA');
  radVtaRes.ressurs_vta += restResTilVta;
  radVtaRes.ressurs_sum += restResTilVta;

  // Avstemming: total per type = full sats × hjemler × 12
  const sumHjemlerAft = hjemler.reduce((a, h) => a + Number(h.hjemler_aft), 0);
  const sumHjemlerVtaKom = hjemler.reduce((a, h) => a + Number(h.hjemler_vta_kom), 0);
  const sumHjemlerVtaStat = hjemler.reduce((a, h) => a + Number(h.hjemler_vta_stat), 0);
  const forventetTotal =
      sumHjemlerAft     * Number(s.manedspris_aft)      * 12
    + sumHjemlerVtaKom  * mpFordVtaKom                  * 12   // kommunal har ikke admin-trekk
    + sumHjemlerVtaStat * Number(s.manedspris_vta_stat) * 12;
  const faktiskTotal = rader.reduce((a, r) => a + r.tilskudd_sum, 0);

  // Ressurs-avstemming: sum ressurser = alle hjemler / nøkkel
  const forventetRessurs =
      sumHjemlerAft / Number(s.hjemler_per_ressurs_aft)
    + (sumHjemlerVtaKom + sumHjemlerVtaStat) / Number(s.hjemler_per_ressurs_vta);
  const faktiskRessurs = rader.reduce((a, r) => a + r.ressurs_sum, 0);

  return {
    rader, restTilAft, restTilVta, adminPottAft, adminPottVta,
    restResTilAft, restResTilVta, ressursAvdAft, ressursAvdVta,
    mpFordAft, mpFordVtaKom, mpFordVtaStat,
    sumTilskudd: faktiskTotal,
    forventetTotal,
    avvik: faktiskTotal - forventetTotal,
    sumRessurs: faktiskRessurs,
    forventetRessurs,
    avvikRessurs: faktiskRessurs - forventetRessurs,
  };
}

const BH_fmt = (v) => v == null || isNaN(v) ? '' : new Intl.NumberFormat('nb-NO').format(Math.round(v));
const BH_fmt1 = (v) => v == null || isNaN(v) ? '' : new Intl.NumberFormat('nb-NO', { maximumFractionDigits: 2 }).format(v);

// Bygg oppslag av deltakerantall per avdeling fra deltakermatrisen.
// VTA mater BÅDE vta_kom og vta_stat (samme antall); AFT mater aft.
function budDeltakerPerAvd(data, versjonId) {
  const ut = {};
  if (!data || !data.deltakere) return ut;
  data.deltakere.filter(d => d.versjon_id === versjonId).forEach(d => {
    if (!ut[d.avdeling_id]) ut[d.avdeling_id] = { VTA: 0, AFT: 0 };
    if (d.kategori === 'VTA') ut[d.avdeling_id].VTA += Number(d.antall) || 0;
    if (d.kategori === 'AFT') ut[d.avdeling_id].AFT += Number(d.antall) || 0;
  });
  return ut;
}

// ── Komponent ─────────────────────────────────────────────────
function BudHjemler({ versjonId, laast, data }) {
  const [satser, setSatser]   = React.useState(null);
  const [hjemler, setHjemler] = React.useState([]);
  const [laster, setLaster]   = React.useState(true);
  const [feil, setFeil]       = React.useState(null);
  const [redigerSats, setRedigerSats] = React.useState(false);
  const [redigerRad, setRedigerRad]   = React.useState(null);

  const last = React.useCallback(() => {
    if (!versjonId) return;
    setLaster(true);
    budHentHjemler(versjonId)
      .then(d => { setSatser(d.satser); setHjemler(d.hjemler); })
      .catch(e => setFeil(e.message))
      .finally(() => setLaster(false));
  }, [versjonId]);

  React.useEffect(() => { last(); }, [last]);

  if (laster) return <div style={{ padding: 28, textAlign: 'center', color: SK.soft, fontSize: 13 }}>Laster hjemmelfordeling…</div>;
  if (feil) return <div style={{ background: '#fcddde', borderRadius: 8, padding: '12px 16px', fontSize: 13, color: '#8a1620' }}>
    {feil}<div style={{ marginTop: 6, color: SK.soft }}>Har du kjørt <code>supabase-budsjett-hjemler.sql</code> og <code>-seed.sql</code>?</div></div>;
  if (!satser) return <div style={{ padding: 28, textAlign: 'center', color: SK.soft, fontSize: 13 }}>
    Ingen hjemmel-satser for denne versjonen. Kjør seed-filen, eller legg inn satser.</div>;

  // Antall hjemler HENTES fra deltakermatrisen (VTA → både kom og stat, AFT → aft).
  const deltakerPerAvd = budDeltakerPerAvd(data, versjonId);
  const hjemlerKoblet = hjemler.map(h => {
    const dm = deltakerPerAvd[h.avdeling_id];
    if (!dm) return h; // ingen deltakerdata → behold lagrede tall
    return {
      ...h,
      hjemler_aft:      dm.AFT,
      hjemler_vta_kom:  dm.VTA,
      hjemler_vta_stat: dm.VTA,
      _fraDeltaker: true,
    };
  });

  const ber = budHjemlerBeregn(satser, hjemlerKoblet);

  const lagreSats = async (felt) => {
    await window.budDB.oppdater('bud_hjemmel_satser', satser.id, felt);
    last();
  };
  const lagreRad = async (rad, felt) => {
    await window.budDB.oppdater('bud_hjemler', rad.id, felt);
    setRedigerRad(null); last();
  };

  return (
    <div>
      <div style={{ fontSize: 13, color: SK.soft, lineHeight: 1.6, marginBottom: 16, maxWidth: 720 }}>
        Hjertet i inntektsfordelingen for OsloKollega Karriere. Antall hjemler hentes automatisk fra
        <b> Deltakermatrisen</b> (AFT → AFT-hjemler, VTA → både kommunalt og statlig tilskudd). Ressursbehov
        beregnes som 1 ressurs per {BH_fmt1(satser.hjemler_per_ressurs_aft)} AFT-hjemler og 1 per {BH_fmt1(satser.hjemler_per_ressurs_vta)} VTA-hjemler.
        Rest-tilskudd som ikke går direkte til en avdeling, samles på avdeling {satser.rest_avd_aft} (AFT) og {satser.rest_avd_vta} (VTA).
        Endre antall deltakere i Deltakermatrise-fanen; her justeres kun direkte-andelene.
      </div>

      {/* Satser */}
      <Card padded style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Satser (justeres årlig)</div>
          {!laast && <Button size="sm" variant={redigerSats ? 'primary' : 'ghost'} onClick={() => setRedigerSats(m => !m)}>{redigerSats ? 'Ferdig' : 'Endre satser'}</Button>}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(150px,1fr))', gap: 12 }}>
          {[
            ['Månedspris AFT', 'manedspris_aft', satser.manedspris_aft],
            ['Månedspris VTA-stat', 'manedspris_vta_stat', satser.manedspris_vta_stat],
            ['Kommunal % av stat', 'kommunal_pct', satser.kommunal_pct],
            ['Admin % AFT', 'admin_pct_aft', satser.admin_pct_aft],
            ['Admin % VTA-stat', 'admin_pct_vta_stat', satser.admin_pct_vta_stat],
            ['Hjemler/ressurs AFT', 'hjemler_per_ressurs_aft', satser.hjemler_per_ressurs_aft],
            ['Hjemler/ressurs VTA', 'hjemler_per_ressurs_vta', satser.hjemler_per_ressurs_vta],
          ].map(([l, felt, v]) => (
            <div key={felt} style={{ padding: '9px 11px', borderRadius: 8, background: SK.iceBlueLight }}>
              <div style={{ fontSize: 10, fontWeight: 600, color: SK.soft, textTransform: 'uppercase', letterSpacing: 0.04 }}>{l}</div>
              {redigerSats ? (
                <input className="ok-input" defaultValue={v} style={{ width: '100%', padding: '4px 6px', fontSize: 13, marginTop: 4 }}
                  onBlur={e => lagreSats({ [felt]: parseFloat(e.target.value) || 0 })} />
              ) : (
                <div style={{ fontSize: 14, fontWeight: 600, marginTop: 4 }}>{BH_fmt1(v)}</div>
              )}
            </div>
          ))}
        </div>
        <div style={{ fontSize: 11.5, color: SK.soft, marginTop: 12, display: 'flex', gap: 18, flexWrap: 'wrap' }}>
          <span>Månedspris til fordeling – AFT: <b>{BH_fmt(ber.mpFordAft)}</b></span>
          <span>VTA-kom: <b>{BH_fmt(ber.mpFordVtaKom)}</b></span>
          <span>VTA-stat: <b>{BH_fmt(ber.mpFordVtaStat)}</b></span>
        </div>
      </Card>

      {/* KPI */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12, marginBottom: 12 }}>
        <Card padded><KPI label="Sum tilskudd" value={`kr ${BH_fmt(ber.sumTilskudd)}`} sub="alle avdelinger" /></Card>
        <Card padded><KPI label="Ressursbehov" value={BH_fmt1(ber.sumRessurs)} sub="årsverk direkte" /></Card>
        <Card padded><KPI label={`Til ${satser.rest_avd_aft} (AFT)`} value={`kr ${BH_fmt(ber.restTilAft + ber.adminPottAft)}`} sub={`rest ${BH_fmt(ber.restTilAft)} + adm ${BH_fmt(ber.adminPottAft)}`} /></Card>
        <Card padded><KPI label={`Til ${satser.rest_avd_vta} (VTA)`} value={`kr ${BH_fmt(ber.restTilVta + ber.adminPottVta)}`} sub={`rest ${BH_fmt(ber.restTilVta)} + adm ${BH_fmt(ber.adminPottVta)}`} /></Card>
      </div>

      {/* Avstemming mot satser × antall deltakere */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16, padding: '10px 14px', borderRadius: 10,
        background: Math.abs(ber.avvik) < 1 && Math.abs(ber.avvikRessurs) < 0.01 ? '#e7f4ea' : '#fcefca',
        border: `1px solid ${Math.abs(ber.avvik) < 1 && Math.abs(ber.avvikRessurs) < 0.01 ? '#86c79a' : '#e6c34d'}` }}>
        <span style={{ fontSize: 16 }}>{Math.abs(ber.avvik) < 1 && Math.abs(ber.avvikRessurs) < 0.01 ? '✓' : '⚠'}</span>
        <div style={{ fontSize: 12.5, color: SK.ink }}>
          {Math.abs(ber.avvik) < 1 && Math.abs(ber.avvikRessurs) < 0.01
            ? <span><b>Avstemt.</b> Sum tilskudd (kr {BH_fmt(ber.sumTilskudd)}) og ressursbehov ({BH_fmt1(ber.sumRessurs)} årsverk) er lik satser × antall deltakere.</span>
            : <span><b>Avvik.</b> {Math.abs(ber.avvik) >= 1 && `Tilskudd: kr ${BH_fmt(ber.avvik)}. `}{Math.abs(ber.avvikRessurs) >= 0.01 && `Ressurser: ${BH_fmt1(ber.avvikRessurs)} årsverk.`}</span>}
        </div>
      </div>

      {/* Tabell per avdeling */}
      <Card padded={false}>
        <div style={{ overflowX: 'auto' }}>
          <table className="ok-table" style={{ fontVariantNumeric: 'tabular-nums', minWidth: 820 }}>
            <thead>
              <tr>
                <th style={{ paddingLeft: 18 }}>Avd</th>
                <th>Avdeling</th>
                <th style={{ textAlign: 'right' }}>AFT</th>
                <th style={{ textAlign: 'right' }}>VTA-kom</th>
                <th style={{ textAlign: 'right' }}>VTA-stat</th>
                <th style={{ textAlign: 'right' }}>Sum tilskudd</th>
                <th style={{ textAlign: 'right' }}>Ressurser</th>
                {!laast && <th></th>}
              </tr>
            </thead>
            <tbody>
              {ber.rader.map(r => (
                <tr key={r.id} style={{ background: r._samlepott ? '#fdf6e3' : 'transparent' }}>
                  <td style={{ paddingLeft: 18, fontWeight: 700, color: SK.soft, fontFamily: 'ui-monospace, monospace' }}>{r.avd_nr}</td>
                  <td style={{ fontWeight: 600, fontSize: 12.5 }}>{r.navn}
                    <div style={{ fontSize: 10.5, color: SK.soft }}>
                      {r._samlepott && r.inntekt_admin > 0 && `Inkl. admin + rest fra øvrige avd. `}
                      {r.hjemler_aft > 0 && `${r.hjemler_aft} AFT (${r.direkte_pct_aft}% dir.) `}
                      {r.hjemler_vta_stat > 0 && `${r.hjemler_vta_stat} VTA (${r.direkte_pct_vta_stat}% dir.)`}
                    </div>
                  </td>
                  <td style={{ textAlign: 'right', fontSize: 12 }}>{r.tilskudd_aft ? BH_fmt(r.tilskudd_aft) : '–'}</td>
                  <td style={{ textAlign: 'right', fontSize: 12 }}>{r.tilskudd_kom ? BH_fmt(r.tilskudd_kom) : '–'}</td>
                  <td style={{ textAlign: 'right', fontSize: 12 }}>{r.tilskudd_stat ? BH_fmt(r.tilskudd_stat) : '–'}</td>
                  <td style={{ textAlign: 'right', fontSize: 12, fontWeight: 600 }}>{BH_fmt(r.tilskudd_sum)}</td>
                  <td style={{ textAlign: 'right', fontSize: 12, fontWeight: 600 }}>{BH_fmt1(r.ressurs_sum)}</td>
                  {!laast && <td>{!r._virtuell && r.id && String(r.id).indexOf('virtuell') !== 0
                    ? <button onClick={() => setRedigerRad(r)} style={{ width: 26, height: 26, borderRadius: 6, border: '1px solid rgba(17,24,61,.12)', background: '#fff', cursor: 'pointer', fontFamily: 'inherit' }}>✎</button>
                    : null}</td>}
                </tr>
              ))}
              <tr style={{ background: SK.iceBlueLight, fontWeight: 700 }}>
                <td style={{ paddingLeft: 18 }} colSpan={5}>Sum alle avdelinger</td>
                <td style={{ textAlign: 'right' }}>{BH_fmt(ber.sumTilskudd)}</td>
                <td style={{ textAlign: 'right' }}>{BH_fmt1(ber.sumRessurs)}</td>
                {!laast && <td></td>}
              </tr>
            </tbody>
          </table>
        </div>
      </Card>
      <div style={{ fontSize: 11.5, color: SK.soft, marginTop: 10 }}>
        Tilskudd er beregnet for 12 måneder. Antall hjemler kommer fra Deltakermatrisen; via ✎ justeres direkte-andelene.
        Direkte-andelen styrer både inntekt og ressursbehov. Rest-<b>inntekter</b> samles på {satser.rest_avd_aft} (AFT) og {satser.rest_avd_vta} (VTA);
        rest-<b>ressurser</b> samles på veilederteamene {ber.ressursAvdAft} (AFT) og {ber.ressursAvdVta} (VTA).
      </div>

      {redigerRad && <BudHjemmelModal rad={redigerRad} onLukk={() => setRedigerRad(null)} onLagret={lagreRad} />}
    </div>
  );
}

function BudHjemmelModal({ rad, onLukk, onLagret }) {
  const [v, setV] = React.useState({
    direkte_pct_aft: rad.direkte_pct_aft, direkte_pct_vta_kom: rad.direkte_pct_vta_kom, direkte_pct_vta_stat: rad.direkte_pct_vta_stat,
  });
  const f = (k, val) => setV(p => ({ ...p, [k]: val }));
  const lbl = { fontSize: 11, fontWeight: 600, color: SK.soft, textTransform: 'uppercase', letterSpacing: 0.04, display: 'block', marginBottom: 4 };
  const inp = { padding: '8px 10px', fontSize: 13, width: '100%', boxSizing: 'border-box' };
  const lest = { padding: '8px 10px', fontSize: 13, fontWeight: 600, color: SK.ink, background: SK.iceBlueLight, borderRadius: 8 };
  return (
    <div onClick={onLukk} style={{ position: 'fixed', inset: 0, background: 'rgba(17,24,61,.4)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
      <div onClick={e => e.stopPropagation()} style={{ background: '#fff', borderRadius: 14, padding: '24px 26px', width: '100%', maxWidth: 460, boxShadow: '0 20px 60px rgba(17,24,61,.25)' }}>
        <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 4 }}>{rad.avd_nr} · {rad.navn}</div>
        <div style={{ fontSize: 11.5, color: SK.soft, marginBottom: 16 }}>
          Antall hjemler hentes fra Deltakermatrisen. Her justeres kun direkte-andelene.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 8 }}>
          <div><label style={lbl}>Hjemler AFT (fra deltakere)</label><div style={lest}>{rad.hjemler_aft}</div></div>
          <div><label style={lbl}>Direkte % AFT</label><input className="ok-input" type="number" value={v.direkte_pct_aft} onChange={e => f('direkte_pct_aft', e.target.value)} style={inp} /></div>
          <div><label style={lbl}>Hjemler VTA (fra deltakere)</label><div style={lest}>{rad.hjemler_vta_stat}</div></div>
          <div><label style={lbl}>Direkte % VTA-kom</label><input className="ok-input" type="number" value={v.direkte_pct_vta_kom} onChange={e => f('direkte_pct_vta_kom', e.target.value)} style={inp} /></div>
          <div></div>
          <div><label style={lbl}>Direkte % VTA-stat</label><input className="ok-input" type="number" value={v.direkte_pct_vta_stat} onChange={e => f('direkte_pct_vta_stat', e.target.value)} style={inp} /></div>
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
          <Button variant="primary" onClick={() => onLagret(rad, {
            direkte_pct_aft: parseFloat(v.direkte_pct_aft) || 0, direkte_pct_vta_kom: parseFloat(v.direkte_pct_vta_kom) || 0, direkte_pct_vta_stat: parseFloat(v.direkte_pct_vta_stat) || 0,
          })}>Lagre</Button>
          <Button onClick={onLukk}>Avbryt</Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BudHjemler, budHjemlerBeregn, budHentHjemler });