// budsjett-avskrivning.jsx — Avskrivningsmodul for budsjett
// Anleggsmidler, avskrivningsplan og planlagte investeringer

// Lokale proxy-komponenter — delegerer til window-eksporterte versjoner
function BudModal(props) { return window.BudModal ? React.createElement(window.BudModal, props) : null; }
function Button(props)   { return window.Button   ? React.createElement(window.Button,   props) : null; }

// ══════════════════════════════════════════════════════════════
// KONSTANTER
// ══════════════════════════════════════════════════════════════

const BAV_KATEGORIER = [
  { v:'driftslosore', l:'Driftsløsøre / maskiner',  ikon:'⚙️', konto:6010 },
  { v:'inventar',     l:'Inventar og innredning',    ikon:'🪑', konto:6010 },
  { v:'it_utstyr',    l:'IT-utstyr og programvare',  ikon:'💻', konto:6020 },
  { v:'bil',          l:'Transportmidler',            ikon:'🚗', konto:6010 },
  { v:'bygg',         l:'Bygninger og anlegg',        ikon:'🏗️', konto:6000 },
  { v:'immateriell',  l:'Immaterielle eiendeler',     ikon:'📄', konto:6020 },
  { v:'annet',        l:'Annet',                      ikon:'📦', konto:6010 },
];

const BAV_METODER = [
  { v:'lineaer', l:'Lineær (likt beløp hvert år)' },
  { v:'saldo',   l:'Saldo (% av gjenstående verdi)' },
  { v:'ingen',   l:'Ingen avskrivning (tomt el.)' },
];

const bav_fmt   = n => new Intl.NumberFormat('nb-NO').format(Math.round(n||0));
const bav_fmtKr = n => bav_fmt(n) + ' kr';
const bav_lbl   = { fontSize:11, fontWeight:600, color:SK.soft,
  textTransform:'uppercase', letterSpacing:0.04, display:'block', marginBottom:4 };
const bav_inp   = { padding:'8px 10px', fontSize:13 };

// ══════════════════════════════════════════════════════════════
// BEREGNING
// Returnerer månedlig avskrivning (array 12 tall) for et anleggsmiddel
// ══════════════════════════════════════════════════════════════

function bavBeregn(middel, ar) {
  if (middel.metode === 'ingen') return Array(12).fill(0);

  const bokfortVedAarStart = Number(middel.bokfort_verdi || 0);
  if (bokfortVedAarStart <= 0) return Array(12).fill(0);

  let aarligAvskriv = 0;

  if (middel.metode === 'lineaer') {
    const levetid = Number(middel.levetid_aar || 5);
    if (levetid <= 0) return Array(12).fill(0);
    aarligAvskriv = Number(middel.anskaffet_belop || bokfortVedAarStart) / levetid;
    // Ikke avskriv mer enn gjenstående bokført verdi
    aarligAvskriv = Math.min(aarligAvskriv, bokfortVedAarStart);
  } else if (middel.metode === 'saldo') {
    const pct = Number(middel.saldo_pct || 20) / 100;
    aarligAvskriv = bokfortVedAarStart * pct;
  }

  if (aarligAvskriv <= 0) return Array(12).fill(0);

  // Månedlig fordeling
  if (middel.fordeling_jan_des && middel.fordeling_jan_des.length === 12) {
    return middel.fordeling_jan_des.map(f => Math.round(f * aarligAvskriv));
  }
  const perMnd = Math.round(aarligAvskriv / 12);
  const rest   = Math.round(aarligAvskriv) - perMnd * 12;
  return Array(12).fill(perMnd).map((v, i) => i === 11 ? v + rest : v);
}

// Beregn avskrivning for en planlagt investering (gjelder fra investerings-mnd)
function bavBeregnInvestering(inv, ar) {
  const metode    = inv.metode || 'lineaer';
  const belop     = Number(inv.belop || 0);
  const startMnd  = Number(inv.investering_mnd || 1); // 1-basert
  const gjenvaerMnd = 12 - startMnd + 1; // måneder igjen i budsjettåret

  if (belop <= 0 || metode === 'ingen') return Array(12).fill(0);

  let aarligAvskriv = 0;
  if (metode === 'lineaer') {
    const levetid = Number(inv.levetid_aar || 5);
    aarligAvskriv = levetid > 0 ? belop / levetid : 0;
  } else if (metode === 'saldo') {
    const pct = Number(inv.saldo_pct || 20) / 100;
    aarligAvskriv = belop * pct;
  }

  // Kun avskriv for gjenværende måneder i året
  const perMnd = aarligAvskriv > 0 ? Math.round((aarligAvskriv / 12)) : 0;
  return Array(12).fill(0).map((_, i) => (i + 1) >= startMnd ? perMnd : 0);
}

// ══════════════════════════════════════════════════════════════
// MODAL — rediger anleggsmiddel
// ══════════════════════════════════════════════════════════════

function BavAnleggModal({ middel, data, versjonId, enhById, onLukk, onLagret }) {
  const ny = !middel.id;
  const versjon = (data.versjoner||[]).find(v => v.id === versjonId);
  const ar = versjon?.ar || new Date().getFullYear();

  const defKat = BAV_KATEGORIER[0];
  const [navn,       setNavn]       = React.useState(middel.navn || '');
  const [kat,        setKat]        = React.useState(middel.kategori || 'driftslosore');
  const [avdId,      setAvdId]      = React.useState(middel.avdeling_id || '');
  const [konto,      setKonto]      = React.useState(middel.konto_avskriv || 6010);
  const [anskDato,   setAnskDato]   = React.useState(middel.anskaffet_dato || '');
  const [anskBelop,  setAnskBelop]  = React.useState(middel.anskaffet_belop || '');
  const [bokVerd,    setBokVerd]    = React.useState(middel.bokfort_verdi || '');
  const [metode,     setMetode]     = React.useState(middel.metode || 'lineaer');
  const [levetid,    setLevetid]    = React.useState(middel.levetid_aar || '');
  const [saldoPct,   setSaldoPct]   = React.useState(middel.saldo_pct || '');
  const [merknad,    setMerknad]    = React.useState(middel.merknad || '');
  const [lagrer,     setLagrer]     = React.useState(false);
  const [feil,       setFeil]       = React.useState(null);

  // Auto-fyll konto basert på kategori
  React.useEffect(() => {
    const k = BAV_KATEGORIER.find(k => k.v === kat);
    if (k && ny) setKonto(k.konto);
  }, [kat]);

  // Beregn estimert årsavskrivning for preview
  const preview = bavBeregn({
    metode, bokfort_verdi: Number(bokVerd)||0,
    anskaffet_belop: Number(anskBelop)||0,
    levetid_aar: Number(levetid)||5,
    saldo_pct: Number(saldoPct)||20,
  }, ar);
  const sumPreview = preview.reduce((s,v)=>s+v,0);

  const lagre = async () => {
    if (!navn.trim()) { setFeil('Navn er påkrevd.'); return; }
    if (!bokVerd || Number(bokVerd) < 0) { setFeil('Bokført verdi er påkrevd.'); return; }
    setLagrer(true); setFeil(null);
    try {
      const felt = {
        versjon_id:    versjonId,
        navn:          navn.trim(),
        kategori:      kat,
        avdeling_id:   avdId || null,
        konto_avskriv: Number(konto) || 6010,
        konto_balanse: 1200,
        anskaffet_dato: anskDato || null,
        anskaffet_belop: Math.round(Number(anskBelop)||0),
        bokfort_verdi:   Math.round(Number(bokVerd)||0),
        metode,
        levetid_aar: metode==='lineaer' ? (Number(levetid)||null) : null,
        saldo_pct:   metode==='saldo'   ? (Number(saldoPct)||null) : null,
        merknad:     merknad || null,
      };
      if (ny) {
        await window._sb.from('bud_anleggsmiddel').insert([felt]);
      } else {
        await window._sb.from('bud_anleggsmiddel').update(felt).eq('id', middel.id);
      }
      onLagret();
    } catch(e) { setFeil(e.message); setLagrer(false); }
  };

  const INP = { className:'ok-input', style:bav_inp };
  const avdListe = Object.values(enhById).filter(e=>e.aktiv!==false).sort((a,b)=>(a.avd_nr||'').localeCompare(b.avd_nr||''));
  const kontoplan = [...(data.kontoplan||[]), ...(data.okKontoplan||[])].filter((k,i,a)=>a.findIndex(x=>x.konto===k.konto)===i).sort((a,b)=>a.konto-b.konto);

  return (
    <BudModal tittel={ny ? 'Nytt anleggsmiddel' : 'Rediger anleggsmiddel'} onLukk={onLukk} bred>
      {feil && <div style={{ padding:'8px 12px', borderRadius:7, background:'rgba(242,84,92,.08)',
        color:SK.coral, fontSize:12.5, marginBottom:12 }}>{feil}</div>}

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'14px 20px' }}>

        <div style={{ gridColumn:'1/-1' }}>
          <label style={bav_lbl}>Navn *</label>
          <input {...INP} value={navn} onChange={e=>setNavn(e.target.value)}
            placeholder="F.eks. «Servicetraktor 2024»" autoFocus style={{...bav_inp,width:'100%',boxSizing:'border-box'}} className="ok-input"/>
        </div>

        <div>
          <label style={bav_lbl}>Kategori</label>
          <select {...INP} value={kat} onChange={e=>setKat(e.target.value)}
            style={{...bav_inp,width:'100%',boxSizing:'border-box'}}>
            {BAV_KATEGORIER.map(k=><option key={k.v} value={k.v}>{k.ikon} {k.l}</option>)}
          </select>
        </div>

        <div>
          <label style={bav_lbl}>Avdeling</label>
          <select {...INP} value={avdId} onChange={e=>setAvdId(e.target.value)}
            style={{...bav_inp,width:'100%',boxSizing:'border-box'}}>
            <option value="">— Alle avdelinger —</option>
            {avdListe.map(e=><option key={e.id} value={e.id}>{e.avd_nr} {e.navn}</option>)}
          </select>
        </div>

        <div>
          <label style={bav_lbl}>Konto avskrivning *</label>
          <select value={konto} onChange={e=>setKonto(e.target.value)}
            style={{...bav_inp,width:'100%',boxSizing:'border-box',padding:'8px 10px',borderRadius:8,border:'1px solid rgba(17,24,61,.18)',fontFamily:'inherit',fontSize:13}}>
            {kontoplan.filter(k=>k.konto>=6000&&k.konto<7000).map(k=>(
              <option key={k.konto} value={k.konto}>{k.konto} {k.navn}</option>
            ))}
            {kontoplan.filter(k=>k.konto>=6000&&k.konto<7000).length===0 && (
              <>
                <option value={6000}>6000 Avskrivning bygninger</option>
                <option value={6010}>6010 Avskrivning maskiner</option>
                <option value={6020}>6020 Avskrivning inventar/IT</option>
              </>
            )}
          </select>
        </div>

        <div>
          <label style={bav_lbl}>Anskaffelsesdato</label>
          <input {...INP} type="date" value={anskDato} onChange={e=>setAnskDato(e.target.value)}
            style={{...bav_inp,width:'100%',boxSizing:'border-box'}} className="ok-input"/>
        </div>

        <div>
          <label style={bav_lbl}>Anskaffelseskost (kr)</label>
          <input {...INP} type="number" value={anskBelop} onChange={e=>setAnskBelop(e.target.value)}
            placeholder="0" style={{...bav_inp,width:'100%',boxSizing:'border-box'}} className="ok-input"/>
        </div>

        <div>
          <label style={bav_lbl}>Bokført verdi pr. 01.01.{ar} (kr) *</label>
          <input {...INP} type="number" value={bokVerd} onChange={e=>setBokVerd(e.target.value)}
            placeholder="0" style={{...bav_inp,width:'100%',boxSizing:'border-box'}} className="ok-input"/>
          <div style={{fontSize:11.5,color:SK.soft,marginTop:3}}>
            Verdien som faktisk avskrives i {ar}
          </div>
        </div>

        <div>
          <label style={bav_lbl}>Avskrivningsmetode</label>
          <select value={metode} onChange={e=>setMetode(e.target.value)}
            style={{...bav_inp,width:'100%',boxSizing:'border-box',padding:'8px 10px',borderRadius:8,border:'1px solid rgba(17,24,61,.18)',fontFamily:'inherit',fontSize:13}}>
            {BAV_METODER.map(m=><option key={m.v} value={m.v}>{m.l}</option>)}
          </select>
        </div>

        {metode==='lineaer' && (
          <div>
            <label style={bav_lbl}>Levetid (år) *</label>
            <input {...INP} type="number" value={levetid} onChange={e=>setLevetid(e.target.value)}
              placeholder="5" min="1" max="40" style={{...bav_inp,width:'100%',boxSizing:'border-box'}} className="ok-input"/>
            <div style={{fontSize:11.5,color:SK.soft,marginTop:3}}>
              F.eks. 3 år (IT), 5 år (maskiner), 20 år (bygg)
            </div>
          </div>
        )}

        {metode==='saldo' && (
          <div>
            <label style={bav_lbl}>Saldoprosent (% per år)</label>
            <input {...INP} type="number" value={saldoPct} onChange={e=>setSaldoPct(e.target.value)}
              placeholder="20" min="1" max="100" style={{...bav_inp,width:'100%',boxSizing:'border-box'}} className="ok-input"/>
          </div>
        )}

        {/* Preview */}
        {sumPreview > 0 && (
          <div style={{ gridColumn:'1/-1', padding:'12px 14px', borderRadius:9,
            background:'rgba(55,138,221,.06)', border:'1px solid rgba(55,138,221,.15)' }}>
            <div style={{ fontSize:12.5, fontWeight:600, marginBottom:8 }}>
              Estimert avskrivning {ar}: <span style={{color:'#185FA5'}}>{bav_fmtKr(sumPreview)}</span>
              <span style={{fontSize:11.5,color:SK.soft,fontWeight:400,marginLeft:8}}>
                ({bav_fmtKr(Math.round(sumPreview/12))}/mnd)
              </span>
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(12,1fr)', gap:3 }}>
              {['J','F','M','A','M','J','J','A','S','O','N','D'].map((m,i)=>(
                <div key={i} style={{ textAlign:'center' }}>
                  <div style={{ fontSize:9.5, color:SK.soft, marginBottom:2 }}>{m}</div>
                  <div style={{ fontSize:11, fontWeight:600, color:'#185FA5' }}>
                    {Math.round(preview[i]/1000)}T
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        <div style={{ gridColumn:'1/-1' }}>
          <label style={bav_lbl}>Merknad</label>
          <input className="ok-input" value={merknad} onChange={e=>setMerknad(e.target.value)}
            placeholder="Valgfri merknad" style={{...bav_inp,width:'100%',boxSizing:'border-box'}}/>
        </div>
      </div>

      <div style={{ display:'flex', gap:10, marginTop:18 }}>
        <Button variant="primary" onClick={lagre} disabled={lagrer||!navn.trim()}>
          {lagrer ? 'Lagrer…' : ny ? 'Legg til' : 'Lagre endringer'}
        </Button>
        <Button onClick={onLukk}>Avbryt</Button>
      </div>
    </BudModal>
  );
}

// ══════════════════════════════════════════════════════════════
// MODAL — planlagt investering
// ══════════════════════════════════════════════════════════════

function BavInvesteringModal({ inv, data, versjonId, enhById, onLukk, onLagret }) {
  const ny = !inv.id;
  const versjon = (data.versjoner||[]).find(v=>v.id===versjonId);
  const ar = versjon?.ar || new Date().getFullYear();
  const MND = ['Januar','Februar','Mars','April','Mai','Juni','Juli','August','September','Oktober','November','Desember'];

  const [navn,     setNavn]     = React.useState(inv.navn||'');
  const [belop,    setBelop]    = React.useState(inv.belop||'');
  const [mnd,      setMnd]      = React.useState(inv.investering_mnd||1);
  const [kat,      setKat]      = React.useState(inv.kategori||'driftslosore');
  const [avdId,    setAvdId]    = React.useState(inv.avdeling_id||'');
  const [konto,    setKonto]    = React.useState(inv.konto_avskriv||6010);
  const [metode,   setMetode]   = React.useState(inv.metode||'lineaer');
  const [levetid,  setLevetid]  = React.useState(inv.levetid_aar||'');
  const [saldoPct, setSaldoPct] = React.useState(inv.saldo_pct||'');
  const [merknad,  setMerknad]  = React.useState(inv.merknad||'');
  const [lagrer,   setLagrer]   = React.useState(false);
  const [feil,     setFeil]     = React.useState(null);

  React.useEffect(() => {
    const k = BAV_KATEGORIER.find(k=>k.v===kat);
    if (k && ny) setKonto(k.konto);
  }, [kat]);

  const preview = bavBeregnInvestering({
    metode, belop: Number(belop)||0, investering_mnd: Number(mnd),
    levetid_aar: Number(levetid)||5, saldo_pct: Number(saldoPct)||20,
  }, ar);
  const sumPreview = preview.reduce((s,v)=>s+v,0);

  const lagre = async () => {
    if (!navn.trim() || !belop) { setFeil('Navn og beløp er påkrevd.'); return; }
    setLagrer(true); setFeil(null);
    try {
      const felt = {
        versjon_id: versjonId,
        navn: navn.trim(),
        belop: Math.round(Number(belop)),
        investering_mnd: Number(mnd),
        kategori: kat,
        avdeling_id: avdId||null,
        konto_avskriv: Number(konto)||6010,
        metode,
        levetid_aar: metode==='lineaer'?(Number(levetid)||null):null,
        saldo_pct:   metode==='saldo'?(Number(saldoPct)||null):null,
        merknad: merknad||null,
      };
      if (ny) await window._sb.from('bud_investering').insert([felt]);
      else    await window._sb.from('bud_investering').update(felt).eq('id', inv.id);
      onLagret();
    } catch(e) { setFeil(e.message); setLagrer(false); }
  };

  const avdListe = Object.values(enhById).filter(e=>e.aktiv!==false).sort((a,b)=>(a.avd_nr||'').localeCompare(b.avd_nr||''));

  return (
    <BudModal tittel={ny?'Ny planlagt investering':'Rediger investering'} onLukk={onLukk} bred>
      {feil && <div style={{padding:'8px 12px',borderRadius:7,background:'rgba(242,84,92,.08)',color:SK.coral,fontSize:12.5,marginBottom:12}}>{feil}</div>}

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'14px 20px' }}>

        <div style={{ gridColumn:'1/-1' }}>
          <label style={bav_lbl}>Beskrivelse *</label>
          <input className="ok-input" value={navn} onChange={e=>setNavn(e.target.value)}
            placeholder="F.eks. «Ny traktor»" autoFocus style={{...bav_inp,width:'100%',boxSizing:'border-box'}}/>
        </div>

        <div>
          <label style={bav_lbl}>Investeringsbeløp (kr) *</label>
          <input className="ok-input" type="number" value={belop} onChange={e=>setBelop(e.target.value)}
            placeholder="0" style={{...bav_inp,width:'100%',boxSizing:'border-box'}}/>
        </div>

        <div>
          <label style={bav_lbl}>Investerings-måned</label>
          <select value={mnd} onChange={e=>setMnd(Number(e.target.value))}
            style={{...bav_inp,width:'100%',boxSizing:'border-box',padding:'8px 10px',borderRadius:8,border:'1px solid rgba(17,24,61,.18)',fontFamily:'inherit',fontSize:13}}>
            {MND.map((m,i)=><option key={i+1} value={i+1}>{m} {ar}</option>)}
          </select>
        </div>

        <div>
          <label style={bav_lbl}>Kategori</label>
          <select value={kat} onChange={e=>setKat(e.target.value)}
            style={{...bav_inp,width:'100%',boxSizing:'border-box',padding:'8px 10px',borderRadius:8,border:'1px solid rgba(17,24,61,.18)',fontFamily:'inherit',fontSize:13}}>
            {BAV_KATEGORIER.map(k=><option key={k.v} value={k.v}>{k.ikon} {k.l}</option>)}
          </select>
        </div>

        <div>
          <label style={bav_lbl}>Avdeling</label>
          <select value={avdId} onChange={e=>setAvdId(e.target.value)}
            style={{...bav_inp,width:'100%',boxSizing:'border-box',padding:'8px 10px',borderRadius:8,border:'1px solid rgba(17,24,61,.18)',fontFamily:'inherit',fontSize:13}}>
            <option value="">— Alle avdelinger —</option>
            {avdListe.map(e=><option key={e.id} value={e.id}>{e.avd_nr} {e.navn}</option>)}
          </select>
        </div>

        <div>
          <label style={bav_lbl}>Konto avskrivning</label>
          <select value={konto} onChange={e=>setKonto(e.target.value)}
            style={{...bav_inp,width:'100%',boxSizing:'border-box',padding:'8px 10px',borderRadius:8,border:'1px solid rgba(17,24,61,.18)',fontFamily:'inherit',fontSize:13}}>
            <option value={6000}>6000 Avskrivning bygninger</option>
            <option value={6010}>6010 Avskrivning maskiner</option>
            <option value={6020}>6020 Avskrivning inventar/IT</option>
          </select>
        </div>

        <div>
          <label style={bav_lbl}>Avskrivningsmetode</label>
          <select value={metode} onChange={e=>setMetode(e.target.value)}
            style={{...bav_inp,width:'100%',boxSizing:'border-box',padding:'8px 10px',borderRadius:8,border:'1px solid rgba(17,24,61,.18)',fontFamily:'inherit',fontSize:13}}>
            {BAV_METODER.map(m=><option key={m.v} value={m.v}>{m.l}</option>)}
          </select>
        </div>

        {metode==='lineaer' && (
          <div>
            <label style={bav_lbl}>Levetid (år)</label>
            <input className="ok-input" type="number" value={levetid} onChange={e=>setLevetid(e.target.value)}
              placeholder="5" style={{...bav_inp,width:'100%',boxSizing:'border-box'}}/>
          </div>
        )}
        {metode==='saldo' && (
          <div>
            <label style={bav_lbl}>Saldoprosent (%)</label>
            <input className="ok-input" type="number" value={saldoPct} onChange={e=>setSaldoPct(e.target.value)}
              placeholder="20" style={{...bav_inp,width:'100%',boxSizing:'border-box'}}/>
          </div>
        )}

        {sumPreview > 0 && (
          <div style={{ gridColumn:'1/-1', padding:'12px 14px', borderRadius:9,
            background:'rgba(55,138,221,.06)', border:'1px solid rgba(55,138,221,.15)' }}>
            <div style={{ fontSize:12.5, fontWeight:600, marginBottom:6 }}>
              Avskrivning i {ar} (fra {MND[Number(mnd)-1]}): <span style={{color:'#185FA5'}}>{bav_fmtKr(sumPreview)}</span>
            </div>
            <div style={{ fontSize:11.5, color:SK.soft }}>
              Full årsavskrivning fra {ar+1}: {bav_fmtKr(
                metode==='lineaer'
                  ? Math.round(Number(belop||0)/(Number(levetid)||5))
                  : Math.round(Number(belop||0)*(Number(saldoPct||20)/100))
              )}
            </div>
          </div>
        )}

        <div style={{ gridColumn:'1/-1' }}>
          <label style={bav_lbl}>Merknad</label>
          <input className="ok-input" value={merknad} onChange={e=>setMerknad(e.target.value)}
            placeholder="Valgfri merknad" style={{...bav_inp,width:'100%',boxSizing:'border-box'}}/>
        </div>
      </div>

      <div style={{ display:'flex', gap:10, marginTop:18 }}>
        <Button variant="primary" onClick={lagre} disabled={lagrer||!navn.trim()||!belop}>
          {lagrer ? 'Lagrer…' : ny ? 'Legg til' : 'Lagre endringer'}
        </Button>
        <Button onClick={onLukk}>Avbryt</Button>
      </div>
    </BudModal>
  );
}

// ══════════════════════════════════════════════════════════════
// HOVED-KOMPONENT
// ══════════════════════════════════════════════════════════════

function BudAvskrivning({ data, versjonId, enhById, laast, onEndret }) {
  const [nyAnlegg,   setNyAnlegg]   = React.useState(false);
  const [redigerAnl, setRedigerAnl] = React.useState(null);
  const [nyInv,      setNyInv]      = React.useState(false);
  const [redigerInv, setRedigerInv] = React.useState(null);
  const [synkStatus, setSynkStatus] = React.useState(null);
  const [visDetalj,  setVisDetalj]  = React.useState(null);

  const versjon    = (data.versjoner||[]).find(v=>v.id===versjonId);
  const ar         = versjon?.ar || new Date().getFullYear();
  const anlegg     = (data.anleggsmidler||[]).filter(a=>a.versjon_id===versjonId);
  const investeringer = (data.investeringer||[]).filter(i=>i.versjon_id===versjonId);

  // Summer avskrivning per konto
  const avskrivPerKonto = {};
  anlegg.forEach(a => {
    const sum = bavBeregn(a, ar).reduce((s,v)=>s+v,0);
    if (sum > 0) {
      if (!avskrivPerKonto[a.konto_avskriv]) avskrivPerKonto[a.konto_avskriv] = 0;
      avskrivPerKonto[a.konto_avskriv] += sum;
    }
  });
  investeringer.forEach(i => {
    const sum = bavBeregnInvestering(i, ar).reduce((s,v)=>s+v,0);
    if (sum > 0) {
      if (!avskrivPerKonto[i.konto_avskriv]) avskrivPerKonto[i.konto_avskriv] = 0;
      avskrivPerKonto[i.konto_avskriv] += sum;
    }
  });

  const totalAvskriv = Object.values(avskrivPerKonto).reduce((s,v)=>s+v,0);

  const synk = async () => {
    setSynkStatus('laster');
    try {
      const linjer = [];

      // Per avdeling per konto — anlegg
      const aggMap = {}; // 'avdId|konto' → {belop, mnd[12]}
      const key = (avdId, konto) => (avdId||'ALLE')+'|'+konto;

      anlegg.forEach(a => {
        const mndVerd = bavBeregn(a, ar);
        const sum = mndVerd.reduce((s,v)=>s+v,0);
        if (sum === 0) return;
        const k = key(a.avdeling_id, a.konto_avskriv);
        if (!aggMap[k]) aggMap[k] = { avdeling_id:a.avdeling_id, konto:a.konto_avskriv, belop:0, mnd:Array(12).fill(0) };
        aggMap[k].belop += sum;
        mndVerd.forEach((v,i) => { aggMap[k].mnd[i] += v; });
      });

      investeringer.forEach(i => {
        const mndVerd = bavBeregnInvestering(i, ar);
        const sum = mndVerd.reduce((s,v)=>s+v,0);
        if (sum === 0) return;
        const k = key(i.avdeling_id, i.konto_avskriv);
        if (!aggMap[k]) aggMap[k] = { avdeling_id:i.avdeling_id, konto:i.konto_avskriv, belop:0, mnd:Array(12).fill(0) };
        aggMap[k].belop += sum;
        mndVerd.forEach((v,i2) => { aggMap[k].mnd[i2] += v; });
      });

      Object.values(aggMap).forEach(a => {
        if (a.belop === 0) return;
        linjer.push({
          avdeling_id:       a.avdeling_id || null,
          konto:             a.konto,
          belop_ar:          Math.round(a.belop),
          tekst:             'Avskrivninger',
          fordeling_jan_des: a.mnd.map(v => a.belop>0 ? v/a.belop : 1/12),
        });
      });

      const res = await window.budSynkTilLinjer(versjonId, 'avskrivning', linjer);
      setSynkStatus({ ok:true, antall:res.antall });
      onEndret();
      setTimeout(()=>setSynkStatus(null), 3500);
    } catch(e) {
      setSynkStatus({ feil:e.message });
    }
  };

  const slettAnlegg = async (id) => {
    if (!confirm('Slette dette anleggsmidlet?')) return;
    await window._sb.from('bud_anleggsmiddel').delete().eq('id', id);
    onEndret();
  };
  const slettInv = async (id) => {
    if (!confirm('Slette denne investeringen?')) return;
    await window._sb.from('bud_investering').delete().eq('id', id);
    onEndret();
  };

  const kontoplan = [...(data.kontoplan||[]),...(data.okKontoplan||[])].filter((k,i,a)=>a.findIndex(x=>x.konto===k.konto)===i);
  const kontoNavn = k => kontoplan.find(c=>c.konto===k)?.navn || k;

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

  return (
    <div>
      {/* ── Intro + synk ── */}
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:20, gap:16, flexWrap:'wrap' }}>
        <div style={{ fontSize:13, color:SK.soft, lineHeight:1.7, maxWidth:600 }}>
          Legg inn eksisterende anleggsmidler med bokført verdi og fremtidige investeringer.
          Avskrivninger beregnes automatisk og synkroniseres til valgt konto (f.eks. 6010, 6020).
        </div>
        {!laast && (anlegg.length>0||investeringer.length>0) && (
          <div style={{ display:'flex', gap:8, alignItems:'center' }}>
            {synkStatus==='laster' && <span style={{fontSize:12,color:SK.soft}}>Synkroniserer…</span>}
            {synkStatus?.ok && <span style={{fontSize:12,color:'#1b6a2e'}}>✓ {synkStatus.antall} linjer synkronisert</span>}
            {synkStatus?.feil && <span style={{fontSize:12,color:SK.coral}}>{synkStatus.feil}</span>}
            <Button size="sm" onClick={synk}>↻ Synk til budsjettlinjer</Button>
          </div>
        )}
      </div>

      {/* ── Oppsummering per konto ── */}
      {totalAvskriv > 0 && (
        <div style={{ display:'flex', gap:10, marginBottom:20, flexWrap:'wrap' }}>
          {Object.entries(avskrivPerKonto).sort(([a],[b])=>a-b).map(([konto,belop])=>(
            <div key={konto} style={{ padding:'10px 16px', borderRadius:10,
              background:'rgba(55,138,221,.06)', border:'1px solid rgba(55,138,221,.15)',
              minWidth:160 }}>
              <div style={{ fontSize:11, color:'#185FA5', fontWeight:700, marginBottom:2 }}>
                {konto} {kontoNavn(Number(konto))}
              </div>
              <div style={{ fontSize:18, fontWeight:700, color:SK.ink }}>
                {bav_fmtKr(belop)}
              </div>
              <div style={{ fontSize:11.5, color:SK.soft }}>
                {bav_fmtKr(Math.round(belop/12))}/mnd
              </div>
            </div>
          ))}
          <div style={{ padding:'10px 16px', borderRadius:10,
            background:'rgba(17,24,61,.04)', border:'1px solid rgba(17,24,61,.08)',
            minWidth:160 }}>
            <div style={{ fontSize:11, color:SK.soft, fontWeight:700, marginBottom:2 }}>Totalt</div>
            <div style={{ fontSize:18, fontWeight:700, color:SK.ink }}>{bav_fmtKr(totalAvskriv)}</div>
            <div style={{ fontSize:11.5, color:SK.soft }}>{bav_fmtKr(Math.round(totalAvskriv/12))}/mnd</div>
          </div>
        </div>
      )}

      {/* ── Eksisterende anleggsmidler ── */}
      <div style={{ marginBottom:24 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
          <div style={{ fontSize:14, fontWeight:700 }}>
            Anleggsmidler
            <span style={{ fontSize:12, color:SK.soft, fontWeight:400, marginLeft:8 }}>
              {anlegg.length} registrert
            </span>
          </div>
          {!laast && (
            <Button size="sm" onClick={()=>setNyAnlegg(true)}>+ Legg til anleggsmiddel</Button>
          )}
        </div>

        {anlegg.length === 0 ? (
          <div style={{ padding:20, textAlign:'center', borderRadius:10,
            background:SK.iceBlueLight, color:SK.soft, fontSize:13 }}>
            Ingen anleggsmidler lagt inn. Klikk "+ Legg til" for å registrere eksisterende midler.
          </div>
        ) : (
          <div style={{ borderRadius:10, border:'1px solid rgba(17,24,61,.08)', overflow:'hidden' }}>
            <table style={{ width:'100%', borderCollapse:'collapse' }}>
              <thead>
                <tr style={{ background:SK.iceBlueLight, borderBottom:'1px solid rgba(17,24,61,.08)' }}>
                  {['Navn','Avdeling','Konto','Bokf. verdi','Metode','Avskriv. i år',''].map(h=>(
                    <th key={h} style={{ padding:'8px 12px', textAlign:
                      h==='Avskriv. i år'||h==='Bokf. verdi'?'right':'left',
                      fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {anlegg.sort((a,b)=>a.sortering-b.sortering||(a.navn||'').localeCompare(b.navn||'')).map(a => {
                  const mndVerd = bavBeregn(a, ar);
                  const sum     = mndVerd.reduce((s,v)=>s+v,0);
                  const kat     = BAV_KATEGORIER.find(k=>k.v===a.kategori);
                  return (
                    <React.Fragment key={a.id}>
                      <tr style={{ borderBottom:'1px solid rgba(17,24,61,.04)',
                        background: visDetalj===a.id?'rgba(55,138,221,.04)':'transparent',
                        cursor:'pointer' }}
                        onClick={()=>setVisDetalj(visDetalj===a.id?null:a.id)}>
                        <td style={{ padding:'10px 12px' }}>
                          <span style={{ marginRight:6 }}>{kat?.ikon||'📦'}</span>
                          <span style={{ fontWeight:500, fontSize:13 }}>{a.navn}</span>
                          {a.merknad && <div style={{ fontSize:11, color:SK.soft }}>{a.merknad}</div>}
                        </td>
                        <td style={{ padding:'10px 12px', fontSize:12.5, color:SK.soft }}>
                          {a.avdeling_id ? enhById[a.avdeling_id]?.navn : '—'}
                        </td>
                        <td style={{ padding:'10px 12px', fontSize:12 }}>
                          <span style={{ fontSize:11, padding:'2px 7px', borderRadius:4,
                            background:'rgba(55,138,221,.1)', color:'#185FA5' }}>
                            {a.konto_avskriv} {kontoNavn(a.konto_avskriv)}
                          </span>
                        </td>
                        <td style={{ padding:'10px 12px', textAlign:'right', fontSize:13 }}>
                          {bav_fmtKr(a.bokfort_verdi)}
                        </td>
                        <td style={{ padding:'10px 12px', fontSize:12, color:SK.soft }}>
                          {a.metode==='lineaer' ? `Lineær ${a.levetid_aar} år`
                            : a.metode==='saldo' ? `Saldo ${a.saldo_pct}%`
                            : 'Ingen'}
                        </td>
                        <td style={{ padding:'10px 12px', textAlign:'right', fontWeight:600,
                          fontSize:13, color:'#185FA5' }}>
                          {sum > 0 ? bav_fmtKr(sum) : '—'}
                        </td>
                        <td style={{ padding:'10px 12px', whiteSpace:'nowrap' }}>
                          {!laast && (
                            <>
                              <button onClick={e=>{e.stopPropagation();setRedigerAnl(a);}}
                                style={{border:'none',background:'none',color:SK.soft,cursor:'pointer',fontSize:14,padding:'2px 5px'}}>✏️</button>
                              <button onClick={e=>{e.stopPropagation();slettAnlegg(a.id);}}
                                style={{border:'none',background:'none',color:SK.coral,cursor:'pointer',fontSize:14,padding:'2px 5px'}}>🗑</button>
                            </>
                          )}
                        </td>
                      </tr>
                      {visDetalj===a.id && (
                        <tr>
                          <td colSpan={7} style={{ padding:'0 12px 12px 44px',
                            background:'rgba(55,138,221,.03)' }}>
                            <div style={{ display:'grid', gridTemplateColumns:'repeat(12,1fr)',
                              gap:4, marginTop:8 }}>
                              {MND_KORT.map((m,i)=>(
                                <div key={i} style={{ textAlign:'center' }}>
                                  <div style={{fontSize:9.5,color:SK.soft,marginBottom:2}}>{m}</div>
                                  <div style={{fontSize:12,fontWeight:600,
                                    color:mndVerd[i]>0?'#185FA5':'rgba(17,24,61,.2)'}}>
                                    {mndVerd[i]>0?Math.round(mndVerd[i]/1000)+'T':'—'}
                                  </div>
                                </div>
                              ))}
                            </div>
                          </td>
                        </tr>
                      )}
                    </React.Fragment>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* ── Planlagte investeringer ── */}
      <div>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
          <div style={{ fontSize:14, fontWeight:700 }}>
            Planlagte investeringer {ar}
            <span style={{ fontSize:12, color:SK.soft, fontWeight:400, marginLeft:8 }}>
              {investeringer.length} registrert
            </span>
          </div>
          {!laast && (
            <Button size="sm" onClick={()=>setNyInv(true)}>+ Legg til investering</Button>
          )}
        </div>

        {investeringer.length === 0 ? (
          <div style={{ padding:20, textAlign:'center', borderRadius:10,
            background:SK.iceBlueLight, color:SK.soft, fontSize:13 }}>
            Ingen planlagte investeringer. Avskrivning starter fra investeringsmåneden.
          </div>
        ) : (
          <div style={{ borderRadius:10, border:'1px solid rgba(17,24,61,.08)', overflow:'hidden' }}>
            <table style={{ width:'100%', borderCollapse:'collapse' }}>
              <thead>
                <tr style={{ background:SK.iceBlueLight, borderBottom:'1px solid rgba(17,24,61,.08)' }}>
                  {['Beskrivelse','Beløp','Tidspunkt','Konto','Avskriv. i år',''].map(h=>(
                    <th key={h} style={{ padding:'8px 12px',
                      textAlign:h==='Beløp'||h==='Avskriv. i år'?'right':'left',
                      fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {investeringer.sort((a,b)=>a.investering_mnd-b.investering_mnd).map(i => {
                  const mndVerd = bavBeregnInvestering(i, ar);
                  const sum     = mndVerd.reduce((s,v)=>s+v,0);
                  const MND_NOR = ['Jan','Feb','Mar','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Des'];
                  return (
                    <tr key={i.id} style={{ borderBottom:'1px solid rgba(17,24,61,.04)' }}>
                      <td style={{ padding:'10px 12px' }}>
                        <span style={{ fontWeight:500, fontSize:13 }}>{i.navn}</span>
                        {i.avdeling_id && <div style={{fontSize:11,color:SK.soft}}>{enhById[i.avdeling_id]?.navn}</div>}
                      </td>
                      <td style={{ padding:'10px 12px', textAlign:'right', fontWeight:600 }}>
                        {bav_fmtKr(i.belop)}
                      </td>
                      <td style={{ padding:'10px 12px', fontSize:12.5, color:SK.soft }}>
                        {MND_NOR[(i.investering_mnd||1)-1]} {ar}
                      </td>
                      <td style={{ padding:'10px 12px', fontSize:12 }}>
                        <span style={{ fontSize:11, padding:'2px 7px', borderRadius:4,
                          background:'rgba(55,138,221,.1)', color:'#185FA5' }}>
                          {i.konto_avskriv}
                        </span>
                      </td>
                      <td style={{ padding:'10px 12px', textAlign:'right',
                        fontWeight:600, fontSize:13, color:'#185FA5' }}>
                        {sum>0?bav_fmtKr(sum):'—'}
                      </td>
                      <td style={{ padding:'10px 12px', whiteSpace:'nowrap' }}>
                        {!laast && (
                          <>
                            <button onClick={()=>setRedigerInv(i)}
                              style={{border:'none',background:'none',color:SK.soft,cursor:'pointer',fontSize:14,padding:'2px 5px'}}>✏️</button>
                            <button onClick={()=>slettInv(i.id)}
                              style={{border:'none',background:'none',color:SK.coral,cursor:'pointer',fontSize:14,padding:'2px 5px'}}>🗑</button>
                          </>
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* Modaler */}
      {nyAnlegg && (
        <BavAnleggModal middel={{}} data={data} versjonId={versjonId} enhById={enhById}
          onLukk={()=>setNyAnlegg(false)} onLagret={()=>{setNyAnlegg(false);onEndret();}} />
      )}
      {redigerAnl && (
        <BavAnleggModal middel={redigerAnl} data={data} versjonId={versjonId} enhById={enhById}
          onLukk={()=>setRedigerAnl(null)} onLagret={()=>{setRedigerAnl(null);onEndret();}} />
      )}
      {nyInv && (
        <BavInvesteringModal inv={{}} data={data} versjonId={versjonId} enhById={enhById}
          onLukk={()=>setNyInv(false)} onLagret={()=>{setNyInv(false);onEndret();}} />
      )}
      {redigerInv && (
        <BavInvesteringModal inv={redigerInv} data={data} versjonId={versjonId} enhById={enhById}
          onLukk={()=>setRedigerInv(null)} onLagret={()=>{setRedigerInv(null);onEndret();}} />
      )}
    </div>
  );
}

Object.assign(window, { BudAvskrivning });