// budsjett-versjon-admin.jsx — Kopier og slett budsjettversjoner
// Erstatter BudVersjonMeny med utvidet funksjonalitet.

// Alle tabeller som kan kopieres, med norsk navn og avhengigheter
const BVA_TABELLER = [
  { nokkel:'linjer',          navn:'Budsjettlinjer',           icon:'📊' },
  { nokkel:'lonn',            navn:'Lønnsbudsjett',            icon:'💼' },
  { nokkel:'deltakere',       navn:'Deltakermatrise',          icon:'👥' },
  { nokkel:'nokler',          navn:'Fordelingsnøkler',         icon:'🗝️' },
  { nokkel:'drivere',         navn:'Fordelingsdrivere',        icon:'⚙️' },
  { nokkel:'fordelinger',     navn:'Fordelinger',              icon:'🔀' },
  { nokkel:'kontomapping',    navn:'Kontomapping',             icon:'🗺️' },
  { nokkel:'rapportlinjer',   navn:'Rapportlinjer',            icon:'📋' },
  { nokkel:'hjemler',         navn:'Hjemmelfordeling',         icon:'🏠' },
  { nokkel:'eiendommer',      navn:'Eiendommer',               icon:'🏢' },
  { nokkel:'prosess',         navn:'Prosessteg (status)',      icon:'✅' },
];

const BVA_lbl = { fontSize:11, fontWeight:600, color:SK.soft, textTransform:'uppercase', letterSpacing:0.04, display:'block', marginBottom:4 };
const BVA_inp = { padding:'9px 11px', fontSize:13 };

// ── Hjelpere ──────────────────────────────────────────────────
async function bvaLagBackup(versjonId, versjonNavn, ar, type, backupType) {
  const { data: snap } = await window._sb.rpc('bud_versjon_snapshot', { p_versjon_id: versjonId });
  await window._sb.from('bud_versjon_backup').insert({
    versjon_id: versjonId, versjon_navn: versjonNavn,
    ar, type, backup_type: backupType, snapshot: snap,
  });
}

// Kopier én tabell fra kildeversjon til målversjon, med id-mapping
async function bvaKopierTabell(kilde_id, mal_id, nokkel, idMap) {
  const sb = window._sb;
  switch (nokkel) {
    case 'linjer': {
      const { data } = await sb.from('bud_linjer').select('*').eq('versjon_id', kilde_id);
      for (const r of (data||[])) {
        const { id, versjon_id, created_at, updated_at, ...felt } = r;
        await sb.from('bud_linjer').insert({ ...felt, versjon_id: mal_id });
      }
      break;
    }
    case 'lonn': {
      const { data } = await sb.from('bud_lonn').select('*').eq('versjon_id', kilde_id);
      for (const r of (data||[])) {
        const { id, versjon_id, created_at, updated_at, ...felt } = r;
        await sb.from('bud_lonn').insert({ ...felt, versjon_id: mal_id });
      }
      break;
    }
    case 'deltakere': {
      const { data } = await sb.from('bud_deltaker_matrise').select('*').eq('versjon_id', kilde_id);
      for (const r of (data||[])) {
        const { id, versjon_id, ...felt } = r;
        await sb.from('bud_deltaker_matrise').upsert({ ...felt, versjon_id: mal_id }, { onConflict: 'versjon_id,avdeling_id,kategori' });
      }
      break;
    }
    case 'nokler': {
      const { data: nokler } = await sb.from('bud_fordelingsnokler').select('*').eq('versjon_id', kilde_id);
      const { data: satser } = await sb.from('bud_fordeling_satser').select('*');
      const { data: nokkelDrv } = await sb.from('bud_nokkel_drivere').select('*');
      const nokkelIdMap = {};
      for (const n of (nokler||[])) {
        const { id, versjon_id, ...felt } = n;
        const { data: ny } = await sb.from('bud_fordelingsnokler').insert({ ...felt, versjon_id: mal_id, driver_id: idMap.drivere?.[n.driver_id] ?? n.driver_id }).select().single();
        if (ny) nokkelIdMap[n.id] = ny.id;
      }
      for (const s of (satser||[]).filter(s => nokkelIdMap[s.nokkel_id])) {
        const { id, nokkel_id, ...felt } = s;
        await sb.from('bud_fordeling_satser').insert({ ...felt, nokkel_id: nokkelIdMap[s.nokkel_id] });
      }
      for (const k of (nokkelDrv||[]).filter(k => nokkelIdMap[k.nokkel_id])) {
        const { id, nokkel_id, driver_id, ...felt } = k;
        await sb.from('bud_nokkel_drivere').insert({ ...felt, nokkel_id: nokkelIdMap[k.nokkel_id], driver_id: idMap.drivere?.[driver_id] ?? driver_id });
      }
      idMap.nokler = nokkelIdMap;
      break;
    }
    case 'drivere': {
      const { data: drv } = await sb.from('bud_drivere').select('*').eq('versjon_id', kilde_id);
      const { data: drvv } = await sb.from('bud_driververdier').select('*');
      const drvIdMap = {};
      for (const d of (drv||[])) {
        const { id, versjon_id, created_at, ...felt } = d;
        const slug = felt.nokkel;
        // Generer unik slug om den kolliderer
        const { data: eks } = await sb.from('bud_drivere').select('nokkel').eq('versjon_id', mal_id).eq('nokkel', slug);
        const nySlug = eks?.length ? slug + '-kopi' : slug;
        const { data: ny } = await sb.from('bud_drivere').insert({ ...felt, nokkel: nySlug, versjon_id: mal_id }).select().single();
        if (ny) drvIdMap[d.id] = ny.id;
      }
      for (const v of (drvv||[]).filter(v => drvIdMap[v.driver_id])) {
        const { id, driver_id, ...felt } = v;
        await sb.from('bud_driververdier').insert({ ...felt, driver_id: drvIdMap[v.driver_id] });
      }
      idMap.drivere = drvIdMap;
      break;
    }
    case 'fordelinger': {
      const { data: ford } = await sb.from('bud_fordelinger').select('*').eq('versjon_id', kilde_id);
      const { data: mott } = await sb.from('bud_fordeling_mottakere').select('*');
      for (const f of (ford||[])) {
        const { id, versjon_id, created_at, ...felt } = f;
        const nokkelNyId = idMap.nokler?.[f.nokkel_id] ?? f.nokkel_id;
        const { data: ny } = await sb.from('bud_fordelinger').insert({ ...felt, nokkel_id: nokkelNyId, versjon_id: mal_id }).select().single();
        if (ny) for (const m of (mott||[]).filter(m => m.fordeling_id === id)) {
          const { id: mid, fordeling_id, ...mf } = m;
          await sb.from('bud_fordeling_mottakere').insert({ ...mf, fordeling_id: ny.id });
        }
      }
      break;
    }
    case 'kontomapping': {
      const { data } = await sb.from('bud_kontomapping').select('*').eq('versjon_id', kilde_id);
      for (const r of (data||[])) {
        const { id, versjon_id, ...felt } = r;
        await sb.from('bud_kontomapping').upsert({ ...felt, versjon_id: mal_id }, { onConflict: 'versjon_id,konto,selskap_id' });
      }
      break;
    }
    case 'rapportlinjer': {
      const { data } = await sb.from('bud_rapportlinjer').select('*').eq('versjon_id', kilde_id);
      for (const r of (data||[])) {
        const { id, versjon_id, ...felt } = r;
        await sb.from('bud_rapportlinjer').insert({ ...felt, versjon_id: mal_id });
      }
      break;
    }
    case 'hjemler': {
      const { data: sat } = await sb.from('bud_hjemmel_satser').select('*').eq('versjon_id', kilde_id);
      const { data: hj }  = await sb.from('bud_hjemler').select('*').eq('versjon_id', kilde_id);
      if (sat?.[0]) { const { id, versjon_id, ...f } = sat[0]; await sb.from('bud_hjemmel_satser').upsert({ ...f, versjon_id: mal_id }, { onConflict: 'versjon_id' }); }
      for (const r of (hj||[])) { const { id, versjon_id, ...f } = r; await sb.from('bud_hjemler').upsert({ ...f, versjon_id: mal_id }, { onConflict: 'versjon_id,avdeling_id' }); }
      break;
    }
    case 'eiendommer': {
      const { data: ei }  = await sb.from('bud_eiendom').select('*').eq('versjon_id', kilde_id);
      const { data: ek }  = await sb.from('bud_eiendom_kostnader').select('*');
      const { data: ef }  = await sb.from('bud_eiendom_fordeling').select('*');
      const { data: efa } = await sb.from('bud_eiendom_fellesareal').select('*');
      for (const e of (ei||[])) {
        const { id, versjon_id, created_at, updated_at, ...felt } = e;
        const { data: ny } = await sb.from('bud_eiendom').insert({ ...felt, versjon_id: mal_id }).select().single();
        if (!ny) continue;
        for (const k of (ek||[]).filter(k=>k.eiendom_id===id)) { const { id:kid, eiendom_id, ...kf } = k; await sb.from('bud_eiendom_kostnader').insert({ ...kf, eiendom_id: ny.id }); }
        for (const f of (ef||[]).filter(f=>f.eiendom_id===id)) { const { id:fid, eiendom_id, ...ff } = f; await sb.from('bud_eiendom_fordeling').insert({ ...ff, eiendom_id: ny.id }); }
        for (const f of (efa||[]).filter(f=>f.eiendom_id===id)) { const { id:fid, eiendom_id, ...ff } = f; await sb.from('bud_eiendom_fellesareal').insert({ ...ff, eiendom_id: ny.id }); }
      }
      break;
    }
    case 'prosess': {
      // Kopier som 'ikke_startet' — nye versjoner starter fra null
      const { data } = await sb.from('bud_prosess_status').select('*').eq('versjon_id', kilde_id);
      for (const r of (data||[])) {
        await sb.from('bud_prosess_status').upsert({ versjon_id: mal_id, steg: r.steg, status: 'ikke_startet' }, { onConflict: 'versjon_id,steg' });
      }
      break;
    }
  }
}

// ── Kopierings-modal ─────────────────────────────────────────
function BudKopierModal({ data, tilVersjonId, onLukk, onKopiert }) {
  const [fraId,   setFraId]   = React.useState(data.versjoner.find(v=>v.id!==tilVersjonId)?.id || '');
  const [valgte,  setValgte]  = React.useState(new Set(BVA_TABELLER.map(t=>t.nokkel)));
  const [laster,  setLaster]  = React.useState(false);
  const [feil,    setFeil]    = React.useState(null);
  const [status,  setStatus]  = React.useState(null); // steg-for-steg-status

  const tilVersjon  = data.versjoner.find(v=>v.id===tilVersjonId);
  const fraVersjon  = data.versjoner.find(v=>v.id===fraId);
  const toggleTab   = (k) => setValgte(prev => { const s=new Set(prev); s.has(k)?s.delete(k):s.add(k); return s; });

  const kopier = async () => {
    if (!fraId || valgte.size===0) { setFeil('Velg kilde og minst én datakategori.'); return; }
    setLaster(true); setFeil(null); setStatus('Forbereder…');
    try {
      const idMap = {};
      const rekkefølge = BVA_TABELLER.map(t=>t.nokkel).filter(k=>valgte.has(k));
      // drivere alltid før nokler og fordelinger
      const sortert = ['drivere','nokler','fordelinger','linjer','lonn','deltakere',
        'kontomapping','rapportlinjer','hjemler','eiendommer','prosess'].filter(k=>valgte.has(k));
      for (const nokkel of sortert) {
        const navn = BVA_TABELLER.find(t=>t.nokkel===nokkel)?.navn || nokkel;
        setStatus(`Kopierer ${navn}…`);
        await bvaKopierTabell(fraId, tilVersjonId, nokkel, idMap);
      }
      setStatus('Ferdig!');
      await new Promise(r => setTimeout(r, 800));
      onKopiert();
    } catch(e) { setFeil(e.message); setLaster(false); setStatus(null); }
  };

  return (
    <div onClick={onLukk} style={{ position:'fixed', inset:0, background:'rgba(17,24,61,.45)', zIndex:200, display:'flex', alignItems:'center', justifyContent:'center', padding:20 }}>
      <div onClick={e=>e.stopPropagation()} style={{ background:'#fff', borderRadius:16, padding:'28px 30px', width:'100%', maxWidth:560, boxShadow:'0 24px 64px rgba(17,24,61,.28)' }}>
        <div style={{ fontSize:17, fontWeight:700, marginBottom:4 }}>Kopier data fra en annen versjon</div>
        <div style={{ fontSize:12.5, color:SK.soft, marginBottom:20 }}>
          Data kopieres <b>inn i</b> <span style={{ color:SK.ink, fontWeight:600 }}>{tilVersjon?.navn}</span>. Eksisterende data i målversjonen beholdes der det ikke er konflikter.
        </div>
        {feil && <div style={{ background:'#fcddde', borderRadius:8, padding:'10px 13px', fontSize:13, color:'#8a1620', marginBottom:14 }}>{feil}</div>}

        <div style={{ marginBottom:18 }}>
          <label style={BVA_lbl}>Kopier fra versjon</label>
          <select className="ok-input" value={fraId} onChange={e=>setFraId(e.target.value)} style={BVA_inp}>
            <option value="">— Velg —</option>
            {data.versjoner.filter(v=>v.id!==tilVersjonId).map(v=>(
              <option key={v.id} value={v.id}>{v.navn} ({v.ar}, {v.type}, {v.status})</option>
            ))}
          </select>
        </div>

        <div style={{ marginBottom:20 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:8 }}>
            <label style={BVA_lbl}>Hva skal kopieres?</label>
            <div style={{ display:'flex', gap:8 }}>
              <button onClick={()=>setValgte(new Set(BVA_TABELLER.map(t=>t.nokkel)))} style={{ fontSize:11, padding:'3px 8px', borderRadius:5, border:'1px solid rgba(17,24,61,.15)', background:'#fff', cursor:'pointer', fontFamily:'inherit' }}>Velg alle</button>
              <button onClick={()=>setValgte(new Set())} style={{ fontSize:11, padding:'3px 8px', borderRadius:5, border:'1px solid rgba(17,24,61,.15)', background:'#fff', cursor:'pointer', fontFamily:'inherit' }}>Fjern alle</button>
            </div>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:6 }}>
            {BVA_TABELLER.map(t => {
              const aktiv = valgte.has(t.nokkel);
              return (
                <button key={t.nokkel} onClick={()=>toggleTab(t.nokkel)} style={{ display:'flex', alignItems:'center', gap:8, padding:'9px 12px', borderRadius:9, cursor:'pointer', fontFamily:'inherit', textAlign:'left',
                  border:`1px solid ${aktiv?SK.ink:'rgba(17,24,61,.12)'}`, background:aktiv?SK.ink+'0d':'#fff', color:aktiv?SK.ink:SK.soft, fontSize:12.5, fontWeight:aktiv?600:400 }}>
                  <span style={{ width:18, height:18, borderRadius:4, border:`1.5px solid ${aktiv?SK.ink:'rgba(17,24,61,.2)'}`, background:aktiv?SK.ink:'#fff', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                    {aktiv && <span style={{ color:'#fff', fontSize:11, lineHeight:1 }}>✓</span>}
                  </span>
                  <span>{t.icon} {t.navn}</span>
                </button>
              );
            })}
          </div>
        </div>

        {status && laster && (
          <div style={{ padding:'10px 14px', borderRadius:9, background:SK.iceBlueLight, fontSize:12.5, marginBottom:16, color:SK.ink }}>
            ⏳ {status}
          </div>
        )}

        <div style={{ display:'flex', gap:10, justifyContent:'space-between', alignItems:'center' }}>
          <div style={{ fontSize:11.5, color:SK.soft }}>
            {valgte.size} av {BVA_TABELLER.length} kategorier valgt
          </div>
          <div style={{ display:'flex', gap:10 }}>
            <Button variant="primary" onClick={kopier} disabled={laster||!fraId||valgte.size===0}>
              {laster ? status||'Kopierer…' : `Kopier ${valgte.size} kategorier →`}
            </Button>
            <Button onClick={onLukk} disabled={laster}>Avbryt</Button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Slett-modal (med backup og tofase-bekreftelse) ────────────
function BudSlettModal({ data, versjon, onLukk, onSlettet }) {
  const [fase,    setFase]    = React.useState(1); // 1=info, 2=bekreft, 3=backup, 4=slettet
  const [input,   setInput]   = React.useState('');
  const [laster,  setLaster]  = React.useState(false);
  const [feil,    setFeil]    = React.useState(null);
  const backuper = (data.backuper||[]).filter(b=>b.versjon_id===versjon.id);

  const slett = async () => {
    if (input.trim() !== versjon.navn.trim()) { setFeil('Navn stemmer ikke.'); return; }
    setLaster(true); setFeil(null); setFase(3);
    try {
      // Opprett backup automatisk før sletting
      await bvaLagBackup(versjon.id, versjon.navn, versjon.ar, versjon.type, 'pre_slett');
      // Slett versjonen (kaskade sletter alle tilknyttede data pga. ON DELETE CASCADE)
      await window.budDB.slett('bud_versjoner', versjon.id);
      setFase(4); setLaster(false);
    } catch(e) { setFeil(e.message); setLaster(false); setFase(2); }
  };

  return (
    <div onClick={fase===4?onSlettet:onLukk} style={{ position:'fixed', inset:0, background:'rgba(17,24,61,.5)', zIndex:200, display:'flex', alignItems:'center', justifyContent:'center', padding:20 }}>
      <div onClick={e=>e.stopPropagation()} style={{ background:'#fff', borderRadius:16, padding:'28px 30px', width:'100%', maxWidth:500, boxShadow:'0 24px 64px rgba(17,24,61,.28)' }}>

        {fase===4 ? (
          <>
            <div style={{ fontSize:17, fontWeight:700, marginBottom:8, color:'#1b6a2e' }}>✓ Versjon slettet og sikkerhetskopiert</div>
            <div style={{ fontSize:13, color:SK.soft, lineHeight:1.6, marginBottom:20 }}>
              <b>{versjon.navn}</b> er slettet. En komplett backup er lagret og kan gjenopprettes fra «Backuper» i versjonmenyen.
            </div>
            <Button variant="primary" onClick={onSlettet}>Lukk</Button>
          </>
        ) : fase===3 ? (
          <>
            <div style={{ fontSize:17, fontWeight:700, marginBottom:8 }}>⏳ Sikkerhetskopier og sletter…</div>
            <div style={{ fontSize:13, color:SK.soft }}>Vennligst vent mens backup opprettes og versjon slettes.</div>
          </>
        ) : (
          <>
            <div style={{ fontSize:17, fontWeight:700, marginBottom:4, color:SK.coral }}>
              {fase===1 ? '⚠ Slette budsjettversjon?' : '🔐 Bekreft sletting'}
            </div>
            <div style={{ fontSize:13, color:SK.soft, lineHeight:1.6, marginBottom:16 }}>
              {fase===1 ? <>
                Du er i ferd med å slette <b>{versjon.navn}</b>. Alle budsjettlinjer, lønnsdata, deltakere,
                fordelingsnøkler, eiendommer og prosesssteg for denne versjonen slettes permanent.
                <br/><br/>
                <span style={{ color:'#1b6a2e', fontWeight:500 }}>✓ En komplett backup opprettes automatisk før sletting, og kan gjenopprettes.</span>
                {backuper.length > 0 && <span style={{ color:SK.soft, display:'block', marginTop:8, fontSize:12 }}>Det finnes allerede {backuper.length} backup(er) av denne versjonen.</span>}
              </> : <>
                Skriv inn versjonsnavnet nøyaktig for å bekrefte sletting:
                <b style={{ display:'block', marginTop:8, padding:'6px 10px', borderRadius:6, background:SK.iceBlueLight }}>{versjon.navn}</b>
              </>}
            </div>
            {feil && <div style={{ background:'#fcddde', borderRadius:8, padding:'10px 13px', fontSize:13, color:'#8a1620', marginBottom:14 }}>{feil}</div>}
            {fase===2 && (
              <div style={{ marginBottom:16 }}>
                <input className="ok-input" value={input} onChange={e=>setInput(e.target.value)} style={{ ...BVA_inp, width:'100%', boxSizing:'border-box',
                  borderColor: input && input!==versjon.navn ? SK.coral : undefined }}
                  placeholder={`Skriv: ${versjon.navn}`} autoFocus />
              </div>
            )}
            <div style={{ display:'flex', gap:10 }}>
              {fase===1
                ? <Button onClick={()=>setFase(2)} style={{ background:'#fcddde', color:'#8a1620', border:'none' }}>Fortsett til bekreftelse →</Button>
                : <Button onClick={slett} disabled={laster||input.trim()!==versjon.navn.trim()} style={{ background:SK.coral, color:'#fff', border:'none' }}>
                    {laster ? 'Sikkerhetskopierer…' : 'Slett permanent'}
                  </Button>}
              <Button onClick={onLukk}>Avbryt</Button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// ── Backup-oversikt-modal ─────────────────────────────────────
function BudBackuperModal({ data, onLukk }) {
  const backuper = data.backuper || [];
  const [gjenoppretter, setGjenoppretter] = React.useState(null);
  const [feil, setFeil] = React.useState(null);

  const gjenopprett = async (backup) => {
    setGjenoppretter(backup.id);
    setFeil(null);
    try {
      const snap = backup.snapshot;
      // Opprett ny versjon basert på backupen
      const { data: nyV } = await window._sb.from('bud_versjoner').insert({
        navn: backup.versjon_navn + ' (gjenopprettet)',
        ar: backup.ar || new Date().getFullYear(),
        type: backup.type || 'budsjett', status: 'utkast',
      }).select().single();
      if (!nyV) throw new Error('Kunne ikke opprette versjon');
      // TODO: Gjenopprett data fra snapshot – komplett re-import vil kreve backend-funksjon.
      // For nå: versjon er opprettet, bruker kan kopiere fra backup manuelt eller via Supabase.
      alert(`Versjon "${backup.versjon_navn} (gjenopprettet)" er opprettet som utkast.\n\nFullstendig gjenoppretting av alle data fra snapshot krever manuell import via Supabase-editor eller kontakt med administrator. Snapshot er bevart i bud_versjon_backup.`);
      onLukk();
    } catch(e) { setFeil(e.message); }
    setGjenoppretter(null);
  };

  return (
    <div onClick={onLukk} style={{ position:'fixed', inset:0, background:'rgba(17,24,61,.45)', zIndex:200, display:'flex', alignItems:'center', justifyContent:'center', padding:20 }}>
      <div onClick={e=>e.stopPropagation()} style={{ background:'#fff', borderRadius:16, padding:'28px 30px', width:'100%', maxWidth:580, boxShadow:'0 24px 64px rgba(17,24,61,.28)', maxHeight:'90vh', overflowY:'auto' }}>
        <div style={{ fontSize:17, fontWeight:700, marginBottom:4 }}>Sikkerhetskopier</div>
        <div style={{ fontSize:12.5, color:SK.soft, marginBottom:20 }}>Automatisk lagret før sletting og manuelt opprettede backuper av budsjettversjoner.</div>
        {feil && <div style={{ background:'#fcddde', borderRadius:8, padding:'10px 13px', fontSize:13, color:'#8a1620', marginBottom:14 }}>{feil}</div>}
        {backuper.length===0 && <div style={{ fontSize:13, color:SK.soft, padding:'20px 0', textAlign:'center' }}>Ingen backuper ennå. Backuper opprettes automatisk ved sletting.</div>}
        {backuper.map(b=>(
          <div key={b.id} style={{ padding:'14px 16px', borderRadius:10, border:'1px solid rgba(17,24,61,.1)', marginBottom:10 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
              <div>
                <div style={{ fontSize:13, fontWeight:600 }}>{b.versjon_navn}</div>
                <div style={{ fontSize:11.5, color:SK.soft, marginTop:2 }}>
                  {b.ar} · {b.type} · {b.backup_type==='pre_slett' ? '🗑 Tatt før sletting' : '💾 Manuell backup'}
                  {' · '}{new Date(b.created_at).toLocaleDateString('nb-NO', { day:'2-digit', month:'short', year:'numeric', hour:'2-digit', minute:'2-digit' })}
                </div>
              </div>
              <Button size="sm" disabled={gjenoppretter===b.id} onClick={()=>gjenopprett(b)}>
                {gjenoppretter===b.id ? 'Gjenoppretter…' : '↩ Gjenopprett'}
              </Button>
            </div>
          </div>
        ))}
        <div style={{ display:'flex', gap:10, marginTop:16 }}>
          <Button onClick={onLukk}>Lukk</Button>
        </div>
      </div>
    </div>
  );
}

// ── Utvidet versjonmeny ───────────────────────────────────────
function BudVersjonMeny({ data, versjon, onEndret, setVersjonId }) {
  const [apen,       setApen]       = React.useState(false);
  const [kopierOpen, setKopierOpen] = React.useState(false);
  const [slettOpen,  setSlettOpen]  = React.useState(false);
  const [backupOpen, setBackupOpen] = React.useState(false);

  const nyVersjon = async () => {
    const navn = prompt('Navn på ny budsjettversjon:', `Budsjett ${new Date().getFullYear()+1}`);
    if (!navn) return;
    const v = await window.budDB.lagre('bud_versjoner', { navn, ar: new Date().getFullYear()+1, type:'budsjett', status:'utkast' });
    await onEndret(); setVersjonId(v.id); setApen(false);
  };
  const toggleLaas = async () => {
    if (!versjon) return;
    const ny = versjon.status === 'laast' ? 'utkast' : 'laast';
    await window.budDB.oppdater('bud_versjoner', versjon.id, { status: ny, laast_at: ny==='laast'?new Date().toISOString():null });
    await onEndret(); setApen(false);
  };
  const lagBackupManuelt = async () => {
    if (!versjon) return;
    setApen(false);
    try { await bvaLagBackup(versjon.id, versjon.navn, versjon.ar, versjon.type, 'manuell'); await onEndret(); alert('Backup opprettet.'); }
    catch(e) { alert('Feil: '+e.message); }
  };
  const antallBackuper = (data.backuper||[]).filter(b=>b.versjon_id===versjon?.id).length;

  return (
    <div style={{ position:'relative' }}>
      <Button size="sm" onClick={() => setApen(a=>!a)}>⋯</Button>
      {apen && (
        <div onClick={()=>setApen(false)} style={{ position:'fixed', inset:0, zIndex:10 }} />
      )}
      {apen && (
        <div style={{ position:'absolute', right:0, top:'110%', background:'#fff', border:'1px solid rgba(17,24,61,.12)', borderRadius:10, boxShadow:'0 8px 24px rgba(17,24,61,.12)', padding:6, zIndex:20, minWidth:220 }}>
          <button onClick={nyVersjon} style={budMenyKnapp}>+ Ny tom versjon</button>
          {versjon && <button onClick={()=>{setKopierOpen(true); setApen(false);}} style={budMenyKnapp}>📋 Kopier data fra annen versjon</button>}
          <div style={{ height:1, background:'rgba(17,24,61,.07)', margin:'4px 8px' }} />
          {versjon && <button onClick={toggleLaas} style={budMenyKnapp}>{versjon.status==='laast'?'🔓 Lås opp':'🔒 Lås versjon'}</button>}
          {versjon && <button onClick={lagBackupManuelt} style={budMenyKnapp}>💾 Ta backup nå</button>}
          <button onClick={()=>{setBackupOpen(true); setApen(false);}} style={budMenyKnapp}>
            📂 Vis backuper{antallBackuper>0 ? ` (${antallBackuper})` : ''}
          </button>
          {versjon && versjon.status !== 'laast' && (
            <>
              <div style={{ height:1, background:'rgba(17,24,61,.07)', margin:'4px 8px' }} />
              <button onClick={()=>{setSlettOpen(true); setApen(false);}} style={{ ...budMenyKnapp, color:SK.coral }}>🗑 Slett versjon…</button>
            </>
          )}
        </div>
      )}
      {kopierOpen && versjon && <BudKopierModal data={data} tilVersjonId={versjon.id} onLukk={()=>setKopierOpen(false)} onKopiert={()=>{setKopierOpen(false); onEndret();}} />}
      {slettOpen  && versjon && <BudSlettModal  data={data} versjon={versjon} onLukk={()=>setSlettOpen(false)} onSlettet={()=>{setSlettOpen(false); onEndret(); setVersjonId(data.versjoner[0]?.id||null);}} />}
      {backupOpen && <BudBackuperModal data={data} onLukk={()=>setBackupOpen(false)} />}
    </div>
  );
}

Object.assign(window, { BudVersjonMeny });