// budsjett-eiendom.jsx — Eiendomsbudsjettering
// Kostnadsposter per lokasjon, arealfordeling, fellesarealer og beregnet fordeling.

const BE_KOSTTYPE = [
  { v:'leie',        l:'Husleie' },
  { v:'felleskost',  l:'Felleskostnader' },
  { v:'strom',       l:'Strøm' },
  { v:'renhold',     l:'Renhold' },
  { v:'forsikring',  l:'Forsikring' },
  { v:'vedlikehold', l:'Vedlikehold/drift' },
  { v:'annet',       l:'Andre kostnader' },
];
const BE_fmt   = n => new Intl.NumberFormat('nb-NO').format(Math.round(n||0));
const BE_fmtKr = n => BE_fmt(n) + ' kr';
const BE_lbl   = { fontSize:11, fontWeight:600, color:SK.soft, textTransform:'uppercase', letterSpacing:0.04, display:'block', marginBottom:4 };
const BE_inp   = { padding:'9px 11px', fontSize:13 };

// ── Beregning: fordel kostnader på avdelinger ─────────────────
// Eksklusivt areal (eget kvm per avd) + andel av fellesarealer.
// Fellesareal fordeles enten på alle avdelinger med kvm, eller
// kun de som IKKE er i ekskluder_avd-listen.
function budEiendomBeregn(eiendom, kostnader, fordeling, fellesarealer) {
  const totKost   = kostnader.reduce((s, k) => s + Number(k.belop_ar||0), 0);
  const paaslag   = 1 + Number(eiendom.paaslag_pct||0) / 100;

  // Bygg effektiv kvm per avdeling (eksklusivt + andel fellesareal)
  const kvmMap = {};
  fordeling.forEach(f => { kvmMap[f.avdeling_id] = Number(f.kvm||0); });
  const avdelinger = Object.keys(kvmMap).filter(a => kvmMap[a] > 0);

  // Legg til fellesareal-andel for hvert fellesareal
  fellesarealer.forEach(fa => {
    const ekskl = new Set(fa.ekskluder_avd || []);
    const mottakere = avdelinger.filter(a => !ekskl.has(a));
    if (mottakere.length === 0) return;
    let sumKvmMottakere;
    if (fa.fordeling === 'total') {
      sumKvmMottakere = mottakere.reduce((s, a) => s + kvmMap[a], 0);
    } else {
      // 'valgte': fordel etter relativ andel av eksklusivt kvm
      sumKvmMottakere = mottakere.reduce((s, a) => s + kvmMap[a], 0);
    }
    if (sumKvmMottakere <= 0) return;
    mottakere.forEach(a => {
      const andel = kvmMap[a] / sumKvmMottakere;
      kvmMap[a] = (kvmMap[a] || 0) + Number(fa.kvm||0) * andel;
    });
  });

  const totEffKvm = Object.values(kvmMap).reduce((s, v) => s + v, 0);
  return Object.entries(kvmMap).filter(([,v])=>v>0).map(([avdId, effKvm]) => ({
    avdeling_id: avdId,
    effKvm,
    andel: totEffKvm > 0 ? effKvm / totEffKvm : 0,
    belop: Math.round(totKost * (totEffKvm > 0 ? effKvm / totEffKvm : 0) * paaslag),
  }));
}

// ── Fellesareal-rad ───────────────────────────────────────────
function BudFellesarealModal({ fa, avdelinger, onLukk, onLagret }) {
  const ny = !fa.id;
  const [besk, setBesk]       = React.useState(fa.beskrivelse || '');
  const [kvm,  setKvm]        = React.useState(fa.kvm || '');
  const [ford, setFord]       = React.useState(fa.fordeling || 'total');
  const [ekskl, setEkskl]     = React.useState(new Set(fa.ekskluder_avd || []));
  const toggleEkskl = (id) => setEkskl(prev => { const s=new Set(prev); s.has(id)?s.delete(id):s.add(id); return s; });
  return (
    <div onClick={onLukk} style={{ position:'fixed', inset:0, background:'rgba(17,24,61,.4)', zIndex:200, display:'flex', alignItems:'center', justifyContent:'center', padding:20 }}>
      <div onClick={e=>e.stopPropagation()} style={{ background:'#fff', borderRadius:14, padding:'24px 26px', width:'100%', maxWidth:520, boxShadow:'0 20px 60px rgba(17,24,61,.25)', maxHeight:'90vh', overflowY:'auto' }}>
        <div style={{ fontSize:16, fontWeight:600, marginBottom:4 }}>{ny?'Nytt fellesareal':'Rediger fellesareal'}</div>
        <div style={{ fontSize:12.5, color:SK.soft, marginBottom:16 }}>F.eks. gang, trapperom, toaletter, kantine – areal som deles mellom avdelinger.</div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:14 }}>
          <div style={{ gridColumn:'1/-1' }}><label style={BE_lbl}>Beskrivelse *</label>
            <input className="ok-input" value={besk} onChange={e=>setBesk(e.target.value)} style={BE_inp} placeholder="f.eks. Gang og trapperom" /></div>
          <div><label style={BE_lbl}>Areal (kvm) *</label>
            <input className="ok-input" type="number" value={kvm} onChange={e=>setKvm(e.target.value)} style={BE_inp} placeholder="0" /></div>
          <div><label style={BE_lbl}>Fordeles på</label>
            <select className="ok-input" value={ford} onChange={e=>setFord(e.target.value)} style={BE_inp}>
              <option value="total">Alle avdelinger (etter kvm-andel)</option>
              <option value="valgte">Kun valgte avdelinger</option>
            </select></div>
        </div>
        <div style={{ marginBottom:14 }}>
          <label style={BE_lbl}>Ekskluder avdelinger fra dette fellesarealet</label>
          <div style={{ maxHeight:200, overflowY:'auto', border:'1px solid rgba(17,24,61,.08)', borderRadius:8, padding:8 }}>
            <div style={{ display:'flex', flexWrap:'wrap', gap:6 }}>
              {avdelinger.map(e => {
                const aktiv = ekskl.has(e.id);
                return <button key={e.id} onClick={()=>toggleEkskl(e.id)} style={{ fontSize:12, padding:'4px 10px', borderRadius:7, cursor:'pointer', fontFamily:'inherit',
                  border:'1px solid '+(aktiv?SK.coral:'rgba(17,24,61,.15)'), background:aktiv?'#fef0f0':'#fff', color:aktiv?SK.coral:SK.ink }}>
                  {aktiv?'✕ ':''}{e.avd_nr} {e.navn}
                </button>;
              })}
            </div>
          </div>
          <div style={{ fontSize:11, color:SK.soft, marginTop:5 }}>Avdelinger merket med ✕ får ikke del av dette fellesarealet.</div>
        </div>
        <div style={{ display:'flex', gap:10 }}>
          <Button variant="primary" onClick={()=>{ if(!besk||!kvm){return;} onLagret({ beskrivelse:besk, kvm:Number(kvm), fordeling:ford, ekskluder_avd:Array.from(ekskl) }); }}>Lagre</Button>
          <Button onClick={onLukk}>Avbryt</Button>
        </div>
      </div>
    </div>
  );
}

// ── Eiendom-kort ──────────────────────────────────────────────
function BudEiendomKort({ eiendom, data, versjonId, enhById, onEndret, laast }) {
  const kostnader   = data.eiendomKostnader.filter(k => k.eiendom_id === eiendom.id);
  const fordeling   = data.eiendomFordeling.filter(f => f.eiendom_id === eiendom.id);
  const fellesareal = (data.eiendomFellesareal||[]).filter(f => f.eiendom_id === eiendom.id);
  const lokasjon    = data.lokasjoner.find(l => l.id === eiendom.lokasjon_id);
  const tilknyttetAvtale = eiendom.avtale_id ? (data.avtaler||[]).find(a => a.id === eiendom.avtale_id) : null;
  const [ekspandert, setEkspandert] = React.useState(false);
  const [redigerKost, setRedigerKost] = React.useState(null);
  const [redigerEiendom, setRedigerEiendom] = React.useState(false);
  const [redigerFelles, setRedigerFelles] = React.useState(null);

  const totKost = kostnader.reduce((s, k) => s + Number(k.belop_ar||0), 0);
  const eksKvm  = fordeling.reduce((s, f) => s + Number(f.kvm||0), 0);
  const fellKvm = fellesareal.reduce((s, f) => s + Number(f.kvm||0), 0);
  const totKvm  = Number(eiendom.total_kvm||0);
  const ufordeltKvm = Math.max(0, totKvm - eksKvm - fellKvm);
  const fordelt = budEiendomBeregn(eiendom, kostnader, fordeling, fellesareal);
  const modellFarge = eiendom.fordelingsmodell==='direkte' ? '#1b6a2e' : '#586ba4';
  const modellLabel = eiendom.fordelingsmodell==='direkte' ? 'Direkte' : 'Viderefakturering';
  const driftsAvd = data.enheter.filter(e=>e.type!=='styre').sort((a,b)=>(a.avd_nr||'').localeCompare(b.avd_nr||''));

  const lagreKost = async (felt) => {
    if (redigerKost?.id) await window.budDB.oppdater('bud_eiendom_kostnader', redigerKost.id, felt);
    else await window.budDB.lagre('bud_eiendom_kostnader', { eiendom_id: eiendom.id, ...felt });
    setRedigerKost(null); onEndret();
  };
  const slettKost = async (id) => { if(confirm('Slette kostnadspost?')) { await window.budDB.slett('bud_eiendom_kostnader', id); onEndret(); }};

  // Kvm-input per avdeling – ukontrollert for ytelse
  const lagreFordeling = async (avdId, verdi) => {
    const kvm = parseFloat(String(verdi).replace(',','.')) || 0;
    const eks = fordeling.find(f => f.avdeling_id === avdId);
    if (eks) {
      if (kvm <= 0) await window.budDB.slett('bud_eiendom_fordeling', eks.id);
      else await window.budDB.oppdater('bud_eiendom_fordeling', eks.id, { kvm });
    } else if (kvm > 0) {
      await window.budDB.lagre('bud_eiendom_fordeling', { eiendom_id: eiendom.id, avdeling_id: avdId, kvm });
    }
    onEndret();
  };

  const lagreEiendomFelt = async (felt) => {
    await window.budDB.oppdater('bud_eiendom', eiendom.id, felt); onEndret();
  };

  const lagreFellesareal = async (felt) => {
    if (redigerFelles?.id) await window.budDB.oppdater('bud_eiendom_fellesareal', redigerFelles.id, felt);
    else await window.budDB.lagre('bud_eiendom_fellesareal', { eiendom_id: eiendom.id, ...felt });
    setRedigerFelles(null); onEndret();
  };
  const slettFellesareal = async (id) => { if(confirm('Slette fellesareal?')) { await window.budDB.slett('bud_eiendom_fellesareal', id); onEndret(); }};

  return (
    <Card padded={false} style={{ overflow:'hidden' }}>
      {/* Header */}
      <div style={{ padding:'14px 18px', display:'flex', justifyContent:'space-between', alignItems:'center', cursor:'pointer' }}
        onClick={() => setEkspandert(e => !e)}>
        <div style={{ flex:1 }}>
          <div style={{ display:'flex', alignItems:'center', gap:10, flexWrap:'wrap' }}>
            <span style={{ fontSize:15, fontWeight:600 }}>{eiendom.navn}</span>
            <span style={{ fontSize:10.5, fontWeight:600, padding:'2px 9px', borderRadius:99, background:modellFarge+'18', color:modellFarge }}>{modellLabel}</span>
            {eiendom.paaslag_pct > 0 && <span style={{ fontSize:11, color:'#e08d3c' }}>+{eiendom.paaslag_pct}% påslag</span>}
            {tilknyttetAvtale && (
              <span style={{ fontSize:10.5, fontWeight:600, padding:'2px 9px', borderRadius:99, background:'rgba(91,130,167,.15)', color:'#3d6494' }}>
                📄 {tilknyttetAvtale.name}
              </span>
            )}
          </div>
          {lokasjon?.adresse && <div style={{ fontSize:11.5, color:SK.soft, marginTop:2 }}>{lokasjon.adresse}</div>}
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:16 }}>
          <div style={{ textAlign:'right' }}>
            <div style={{ fontSize:14, fontWeight:700 }}>{BE_fmtKr(totKost)}</div>
            <div style={{ fontSize:11, color: ufordeltKvm>0?SK.coral:SK.soft }}>
              {eksKvm}+{fellKvm} kvm
              {totKvm>0 && <span style={{ marginLeft:4 }}>av {totKvm} ({ufordeltKvm > 0 ? `${ufordeltKvm} ufordelt` : '✓ fullfordelt'})</span>}
            </div>
          </div>
          {!laast && <button onClick={e=>{e.stopPropagation(); setRedigerEiendom(true);}} style={{ width:28, height:28, borderRadius:6, border:'1px solid rgba(17,24,61,.12)', background:'#fff', cursor:'pointer', fontSize:13 }}>✎</button>}
          <span style={{ fontSize:14, color:SK.soft, transform:ekspandert?'rotate(90deg)':'', transition:'.15s' }}>›</span>
        </div>
      </div>

      {ekspandert && (
        <div style={{ borderTop:'1px solid rgba(17,24,61,.07)', padding:'16px 18px 18px' }}>

          {/* Avtalekontroll */}
          {tilknyttetAvtale && (() => {
            const avtalem2 = Number(tilknyttetAvtale.areal_m2||0);
            const budsjettm2 = Number(eiendom.total_kvm||0) || (eksKvm + fellKvm);
            const avvik = avtalem2 > 0 ? budsjettm2 - avtalem2 : null;
            const ok = avvik !== null && Math.abs(avvik) < 1;
            const ingenAvtalem2 = avtalem2 === 0;
            return (
              <div style={{ marginBottom:16, padding:'10px 14px', borderRadius:10,
                background: ingenAvtalem2 ? SK.iceBlueLight : ok ? '#e7f4ea' : '#fcefca',
                border: `1px solid ${ingenAvtalem2 ? 'rgba(17,24,61,.1)' : ok ? '#86c79a' : '#e6c34d'}`,
                display:'flex', alignItems:'flex-start', gap:10 }}>
                <span style={{ fontSize:16, marginTop:1 }}>{ingenAvtalem2 ? 'ℹ' : ok ? '✓' : '⚠'}</span>
                <div style={{ fontSize:12.5 }}>
                  <b>Avtale:</b> {tilknyttetAvtale.name} · {tilknyttetAvtale.motpart}
                  {ingenAvtalem2
                    ? <span style={{ color:SK.soft }}> — areal ikke registrert i avtalen. Legg inn areal_m2 i avtaleregisteret for automatisk kontrollsjekk.</span>
                    : ok
                      ? <span style={{ color:'#1b6a2e' }}> — budsjettert {budsjettm2} m² stemmer med avtalen ({avtalem2} m²).</span>
                      : <span style={{ color:'#8e5a05' }}> — budsjettert <b>{budsjettm2} m²</b>, avtalt <b>{avtalem2} m²</b>. Avvik: <b>{avvik > 0 ? '+':''}{avvik} m²</b>.
                          {' '}Kontroller total kvm-feltet eller areal_m2 i avtaleregisteret.</span>
                  }
                  <div style={{ fontSize:11, color:SK.soft, marginTop:2 }}>
                    Utløper: {tilknyttetAvtale.slutt_dato}
                    {tilknyttetAvtale.status === 'utløper' && <span style={{ color:SK.coral, marginLeft:8, fontWeight:600 }}>⚠ Avtalen utløper snart</span>}
                  </div>
                </div>
              </div>
            );
          })()}

          {/* Totalt kvm */}
          <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:16, padding:'10px 14px', borderRadius:10, background:SK.iceBlueLight }}>
            <div style={{ fontSize:12.5, fontWeight:600 }}>Totalt areal i bygningen</div>
            <div style={{ flex:1 }} />
            {laast
              ? <span style={{ fontWeight:700 }}>{totKvm} kvm</span>
              : <div style={{ display:'flex', alignItems:'center', gap:6 }}>
                  <input type="number" className="ok-input" defaultValue={totKvm||''} placeholder="0"
                    onBlur={e=>lagreEiendomFelt({ total_kvm: parseFloat(e.target.value)||0 })}
                    style={{ width:90, padding:'6px 8px', fontSize:13, textAlign:'right' }} />
                  <span style={{ fontSize:12.5, color:SK.soft }}>kvm</span>
                </div>}
            <div style={{ fontSize:12, color:SK.soft, marginLeft:8 }}>
              Eksklusivt: <b>{eksKvm}</b> · Felles: <b>{fellKvm}</b>
              {totKvm > 0 && <> · Ufordelt: <b style={{ color: ufordeltKvm>0?SK.coral:SK.soft }}>{ufordeltKvm}</b></>}
            </div>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:18 }}>
            {/* Kostnadsposter */}
            <div>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:8 }}>
                <div style={{ fontSize:12, fontWeight:700, textTransform:'uppercase', letterSpacing:0.05, color:SK.soft }}>Kostnadsposter</div>
                {!laast && <button onClick={()=>setRedigerKost({})} style={{ fontSize:11.5, padding:'3px 8px', borderRadius:6, border:`1px solid ${SK.coral}`, background:'#fff', color:SK.coral, cursor:'pointer', fontFamily:'inherit' }}>+ Legg til</button>}
              </div>
              {kostnader.length===0 && <div style={{ fontSize:12.5, color:SK.soft }}>Ingen kostnader ennå.</div>}
              {kostnader.map(k=>(
                <div key={k.id} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'5px 0', borderBottom:'1px solid rgba(17,24,61,.06)' }}>
                  <div>
                    <div style={{ fontSize:12.5, fontWeight:500 }}>{BE_KOSTTYPE.find(t=>t.v===k.type)?.l||k.type}</div>
                    {k.beskrivelse && <div style={{ fontSize:11, color:SK.soft }}>{k.beskrivelse}</div>}
                  </div>
                  <div style={{ display:'flex', alignItems:'center', gap:6 }}>
                    <span style={{ fontWeight:600, fontSize:12.5 }}>{BE_fmtKr(k.belop_ar)}</span>
                    {!laast && <>
                      <button onClick={()=>setRedigerKost(k)} style={{ width:22, height:22, borderRadius:4, border:'1px solid rgba(17,24,61,.12)', background:'#fff', cursor:'pointer', fontSize:11 }}>✎</button>
                      <button onClick={()=>slettKost(k.id)} style={{ width:22, height:22, borderRadius:4, border:'1px solid rgba(17,24,61,.12)', background:'#fff', cursor:'pointer', fontSize:11 }}>✕</button>
                    </>}
                  </div>
                </div>
              ))}
              {kostnader.length > 0 && <div style={{ display:'flex', justifyContent:'space-between', paddingTop:6, fontWeight:700, fontSize:13 }}><span>Sum</span><span>{BE_fmtKr(totKost)}</span></div>}
            </div>

            {/* Eksklusivt areal per avdeling */}
            <div>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:8 }}>
                <div style={{ fontSize:12, fontWeight:700, textTransform:'uppercase', letterSpacing:0.05, color:SK.soft }}>Eksklusivt areal</div>
                <div style={{ fontSize:11, color:SK.soft }}>Sum: {eksKvm} kvm</div>
              </div>
              <div style={{ maxHeight:280, overflowY:'auto' }}>
                {driftsAvd.map(e => {
                  const f = fordeling.find(x=>x.avdeling_id===e.id);
                  const kvm = f?.kvm||0;
                  const andel = eksKvm>0&&kvm>0 ? (kvm/eksKvm*100).toFixed(1) : null;
                  return (
                    <div key={e.id} style={{ display:'flex', alignItems:'center', gap:6, padding:'3px 0' }}>
                      <span style={{ flex:1, fontSize:12, color:kvm>0?SK.ink:SK.soft+'99' }}>{e.avd_nr} {e.navn}</span>
                      {andel && <span style={{ fontSize:10.5, color:SK.soft }}>{andel}%</span>}
                      {laast
                        ? <span style={{ fontWeight:500, fontSize:12, minWidth:36, textAlign:'right' }}>{kvm||'–'}</span>
                        : <input key={e.id+'-'+kvm} type="number" className="ok-input"
                            defaultValue={kvm||''} placeholder="0"
                            onBlur={ev => lagreFordeling(e.id, ev.target.value)}
                            style={{ width:72, padding:'4px 6px', fontSize:12, textAlign:'right' }} />
                      }
                      <span style={{ fontSize:11, color:SK.soft }}>kvm</span>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>

          {/* Fellesarealer */}
          <div style={{ marginTop:16, borderTop:'1px solid rgba(17,24,61,.07)', paddingTop:14 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
              <div style={{ fontSize:12, fontWeight:700, textTransform:'uppercase', letterSpacing:0.05, color:SK.soft }}>
                Fellesarealer <span style={{ color:SK.ink, fontSize:12, fontWeight:600, textTransform:'none' }}>({fellKvm} kvm)</span>
              </div>
              {!laast && <button onClick={()=>setRedigerFelles({})} style={{ fontSize:11.5, padding:'3px 8px', borderRadius:6, border:`1px solid ${SK.coral}`, background:'#fff', color:SK.coral, cursor:'pointer', fontFamily:'inherit' }}>+ Legg til</button>}
            </div>
            {fellesareal.length===0 && <div style={{ fontSize:12.5, color:SK.soft }}>Ingen fellesarealer. Legg til gang, toaletter, kantine e.l. som skal fordeles.</div>}
            {fellesareal.map(fa=>{
              const ekskl = fa.ekskluder_avd||[];
              return (
                <div key={fa.id} style={{ display:'flex', alignItems:'flex-start', gap:10, padding:'7px 10px', borderRadius:8, background:SK.iceBlueLight, marginBottom:6 }}>
                  <div style={{ flex:1 }}>
                    <div style={{ fontSize:12.5, fontWeight:600 }}>{fa.beskrivelse} · <b>{fa.kvm} kvm</b></div>
                    <div style={{ fontSize:11, color:SK.soft, marginTop:2 }}>
                      {fa.fordeling==='total' ? 'Fordeles på alle avdelinger' : 'Fordeles på valgte avdelinger'}
                      {ekskl.length>0 && ` · Ekskludert: ${ekskl.map(id=>enhById[id]?.navn||id).join(', ')}`}
                    </div>
                  </div>
                  {!laast && <>
                    <button onClick={()=>setRedigerFelles(fa)} style={{ width:22, height:22, borderRadius:4, border:'1px solid rgba(17,24,61,.12)', background:'#fff', cursor:'pointer', fontSize:11 }}>✎</button>
                    <button onClick={()=>slettFellesareal(fa.id)} style={{ width:22, height:22, borderRadius:4, border:'1px solid rgba(17,24,61,.12)', background:'#fff', cursor:'pointer', fontSize:11 }}>✕</button>
                  </>}
                </div>
              );
            })}
          </div>

          {/* Fordelingsresultat */}
          {fordelt.length > 0 && (
            <div style={{ marginTop:14, borderTop:'1px solid rgba(17,24,61,.07)', paddingTop:12 }}>
              <div style={{ fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:0.05, color:SK.soft, marginBottom:8 }}>
                Beregnet fordeling{eiendom.paaslag_pct>0 ? ` (inkl. ${eiendom.paaslag_pct}% påslag)` : ''}
                {eiendom.fordelingsmodell==='viderefakturering' && enhById[eiendom.kilde_avdeling_id] && <span style={{ marginLeft:8, color:'#586ba4', fontWeight:400, fontSize:11, textTransform:'none' }}>via {enhById[eiendom.kilde_avdeling_id]?.navn}</span>}
                {eiendom.fordelingsmodell==='direkte' && <span style={{ marginLeft:8, color:'#1b6a2e', fontWeight:400, fontSize:11, textTransform:'none' }}>direkte til avdeling</span>}
              </div>
              <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
                {fordelt.sort((a,b)=>b.belop-a.belop).map(f=>(
                  <div key={f.avdeling_id} style={{ padding:'6px 12px', borderRadius:8, background:SK.iceBlueLight, fontSize:12 }}>
                    <b>{enhById[f.avdeling_id]?.navn}</b>
                    <div style={{ fontSize:11.5, color:SK.soft }}>{(f.andel*100).toFixed(1)}% · {BE_fmtKr(f.belop)}</div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

      {redigerKost!==null && !laast && <BudKostnadModal kost={redigerKost} kontoplan={data.kontoplan} onLukk={()=>setRedigerKost(null)} onLagret={lagreKost} />}
      {redigerEiendom && !laast && <BudEiendomModal eiendom={eiendom} data={data} versjonId={versjonId} enhById={enhById} onLukk={()=>setRedigerEiendom(false)} onLagret={()=>{setRedigerEiendom(false);onEndret();}} />}
      {redigerFelles!==null && !laast && <BudFellesarealModal fa={redigerFelles} avdelinger={driftsAvd} onLukk={()=>setRedigerFelles(null)} onLagret={lagreFellesareal} />}
    </Card>
  );
}

// ── Kostnad-modal ─────────────────────────────────────────────
function BudKostnadModal({ kost, kontoplan, onLukk, onLagret }) {
  const [type, setType]       = React.useState(kost.type||'leie');
  const [besk, setBesk]       = React.useState(kost.beskrivelse||'');
  const [belop, setBelop]     = React.useState(kost.belop_ar||'');
  const [konto, setKonto]     = React.useState(kost.konto||'');
  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:420, boxShadow:'0 20px 60px rgba(17,24,61,.25)' }}>
        <div style={{ fontSize:16, fontWeight:600, marginBottom:16 }}>{kost.id?'Rediger kostnad':'Ny kostnad'}</div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
          <div style={{ gridColumn:'1/-1' }}><label style={BE_lbl}>Type</label>
            <select className="ok-input" value={type} onChange={e=>setType(e.target.value)} style={BE_inp}>{BE_KOSTTYPE.map(t=><option key={t.v} value={t.v}>{t.l}</option>)}</select></div>
          <div style={{ gridColumn:'1/-1' }}><label style={BE_lbl}>Beskrivelse</label>
            <input className="ok-input" value={besk} onChange={e=>setBesk(e.target.value)} style={BE_inp} placeholder="f.eks. Leie jan–des 2026" /></div>
          <div><label style={BE_lbl}>Årsbeløp (kr) *</label>
            <input className="ok-input" type="number" value={belop} onChange={e=>setBelop(e.target.value)} style={BE_inp} placeholder="0" /></div>
          <div><label style={BE_lbl}>Konto</label>
            <select className="ok-input" value={konto} onChange={e=>setKonto(e.target.value)} style={BE_inp}>
              <option value="">— Ingen —</option>
              {kontoplan.map(k=><option key={k.konto} value={k.konto}>{k.konto} {k.navn}</option>)}
            </select></div>
        </div>
        <div style={{ display:'flex', gap:10, marginTop:18 }}>
          <Button variant="primary" onClick={()=>{ if(!belop)return; onLagret({ type, beskrivelse:besk, belop_ar:Math.round(Number(belop)||0), konto:konto?Number(konto):null }); }}>Lagre</Button>
          <Button onClick={onLukk}>Avbryt</Button>
        </div>
      </div>
    </div>
  );
}

// ── Eiendom-innstillinger-modal ───────────────────────────────
function BudEiendomModal({ eiendom, data, versjonId, enhById, onLukk, onLagret }) {
  const ny = !eiendom.id;
  const [navn,      setNavn]      = React.useState(eiendom.navn||'');
  const [lokId,     setLokId]     = React.useState(eiendom.lokasjon_id||'');
  const [avtaleId,  setAvtaleId]  = React.useState(eiendom.avtale_id||'');
  const [modell,    setModell]    = React.useState(eiendom.fordelingsmodell||'direkte');
  const [kildeAvd,  setKildeAvd]  = React.useState(eiendom.kilde_avdeling_id||'');
  const [paaslag,   setPaaslag]   = React.useState(eiendom.paaslag_pct||0);
  const [merknad,   setMerknad]   = React.useState(eiendom.merknad||'');
  const [feil,      setFeil]      = React.useState(null);
  const [lagrer,    setLagrer]    = React.useState(false);

  // Filtrer til leie-avtaler (relevant type for eiendom)
  const leieAvtaler = (data.avtaler||[]).filter(a => ['leie','leverandør'].includes(a.type) && a.status !== 'utløpt')
    .sort((a,b) => a.name.localeCompare(b.name, 'nb'));
  const valgtAvtale = leieAvtaler.find(a => a.id === avtaleId);

  const lagre = async () => {
    if (!navn.trim()) { setFeil('Navn er påkrevd.'); return; }
    setLagrer(true); setFeil(null);
    try {
      const felt = { navn, lokasjon_id:lokId||null, avtale_id:avtaleId||null,
        fordelingsmodell:modell,
        kilde_avdeling_id:modell==='viderefakturering'?(kildeAvd||null):null,
        paaslag_pct:Number(paaslag)||0, merknad };
      if (ny) await window.budDB.lagre('bud_eiendom', { versjon_id:versjonId, ...felt });
      else await window.budDB.oppdater('bud_eiendom', eiendom.id, felt);
      onLagret();
    } catch(e){ setFeil(e.message); setLagrer(false); }
  };
  const slett = async () => { if(!confirm('Slette eiendommen og all tilknyttet data?'))return; await window.budDB.slett('bud_eiendom', eiendom.id); onLagret(); };
  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:500, boxShadow:'0 20px 60px rgba(17,24,61,.25)' }}>
        <div style={{ fontSize:16, fontWeight:600, marginBottom:14 }}>{ny?'Ny eiendom':'Rediger eiendom'}</div>
        {feil && <div style={{ background:'#fcddde', borderRadius:8, padding:'10px 13px', fontSize:13, color:'#8a1620', marginBottom:14 }}>{feil}</div>}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
          <div style={{ gridColumn:'1/-1' }}><label style={BE_lbl}>Navn *</label>
            <input className="ok-input" value={navn} onChange={e=>setNavn(e.target.value)} style={BE_inp} placeholder="f.eks. Cecilie Thoresens vei 11" /></div>
          <div><label style={BE_lbl}>Lokasjon (kobling)</label>
            <select className="ok-input" value={lokId} onChange={e=>setLokId(e.target.value)} style={BE_inp}>
              <option value="">— Ingen —</option>
              {data.lokasjoner.map(l=><option key={l.id} value={l.id}>{l.navn}</option>)}
            </select></div>
          <div><label style={BE_lbl}>Påslag (%)</label>
            <input className="ok-input" type="number" min="0" max="20" step="0.5" value={paaslag} onChange={e=>setPaaslag(e.target.value)} style={BE_inp} /></div>

          {/* Avtaleknutepunkt */}
          <div style={{ gridColumn:'1/-1' }}>
            <label style={BE_lbl}>Tilknyttet leieavtale</label>
            <select className="ok-input" value={avtaleId} onChange={e=>setAvtaleId(e.target.value)} style={BE_inp}>
              <option value="">— Ingen —</option>
              {leieAvtaler.map(a=>(
                <option key={a.id} value={a.id}>
                  {a.name} · {a.motpart}{a.areal_m2 ? ` · ${a.areal_m2} m²` : ''}
                </option>
              ))}
            </select>
            {valgtAvtale && (
              <div style={{ marginTop:6, padding:'8px 11px', borderRadius:8, background:SK.iceBlueLight, fontSize:12, display:'flex', gap:16, flexWrap:'wrap' }}>
                <span><b>Motpart:</b> {valgtAvtale.motpart}</span>
                {valgtAvtale.areal_m2 && <span><b>Areal i avtale:</b> {valgtAvtale.areal_m2} m²</span>}
                <span><b>Utløper:</b> {valgtAvtale.slutt_dato}</span>
                <span style={{ color:valgtAvtale.status==='utløper'?SK.coral:SK.soft }}>{valgtAvtale.status}</span>
              </div>
            )}
          </div>

          <div style={{ gridColumn:'1/-1' }}>
            <label style={BE_lbl}>Fordelingsmodell</label>
            <div style={{ display:'flex', gap:8 }}>
              {[['direkte','Direkte til avdeling'],['viderefakturering','Via Gruppen (viderefakturering)']].map(([v,l])=>(
                <button key={v} onClick={()=>setModell(v)} style={{ flex:1, padding:'9px', borderRadius:8, fontSize:12.5, fontWeight:600, cursor:'pointer', fontFamily:'inherit',
                  border:modell===v?'none':'1px solid rgba(17,24,61,.12)', background:modell===v?SK.ink:'#fff', color:modell===v?'#fff':SK.ink }}>{l}</button>
              ))}
            </div>
            <div style={{ fontSize:11.5, color:SK.soft, marginTop:6 }}>
              {modell==='direkte'?'Kostnader fordeles direkte på avdelingene (Skullerud park).':'Kostnader bokføres mot Gruppen-avdeling, som viderefakturerer (CTV11, Prinsens gate 2).'}
            </div>
          </div>
          {modell==='viderefakturering' && <div style={{ gridColumn:'1/-1' }}><label style={BE_lbl}>Kilde-avdeling (Gruppen AS)</label>
            <select className="ok-input" value={kildeAvd} onChange={e=>setKildeAvd(e.target.value)} style={BE_inp}>
              <option value="">— Velg —</option>
              {data.enheter.filter(e=>data.selskaper.find(s=>s.id===e.selskap_id&&(s.navn||'').includes('Gruppen'))).sort((a,b)=>(a.avd_nr||'').localeCompare(b.avd_nr||'')).map(e=>(
                <option key={e.id} value={e.id}>{e.avd_nr} {e.navn}</option>
              ))}
            </select></div>}
          <div style={{ gridColumn:'1/-1' }}><label style={BE_lbl}>Merknad</label>
            <input className="ok-input" value={merknad} onChange={e=>setMerknad(e.target.value)} style={BE_inp} /></div>
        </div>
        <div style={{ display:'flex', gap:10, marginTop:18, justifyContent:'space-between' }}>
          <div style={{ display:'flex', gap:10 }}>
            <Button variant="primary" onClick={lagre} disabled={lagrer}>{lagrer?'Lagrer…':'Lagre'}</Button>
            <Button onClick={onLukk}>Avbryt</Button>
          </div>
          {!ny && <Button onClick={slett} style={{ color:SK.coral }}>Slett</Button>}
        </div>
      </div>
    </div>
  );
}

// ── Hoved-komponent ───────────────────────────────────────────
function BudEiendommer({ data, versjonId, enhById, laast, onEndret }) {
  const [nyModal, setNyModal] = React.useState(false);
  const eiendommer = (data.eiendommer||[]).filter(e => e.versjon_id===versjonId);
  const totKost = (data.eiendomKostnader||[]).filter(k=>eiendommer.some(e=>e.id===k.eiendom_id)).reduce((s,k)=>s+Number(k.belop_ar||0),0);
  return (
    <div>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:16 }}>
        <div style={{ fontSize:13, color:SK.soft, lineHeight:1.7, maxWidth:680 }}>
          Budsjettering av eiendommer og lokasjoner. Kostnader fordeles på avdelinger etter kvm-andel.
          Velg <b>Direkte fordeling</b> (f.eks. Skullerud park) eller <b>Viderefakturering via Gruppen</b>
          (f.eks. Cecilie Thoresens vei 11, Prinsens gate 2) per eiendom.
        </div>
        {!laast && <Button variant="primary" size="sm" icon={I.plus} onClick={()=>setNyModal(true)}>Ny eiendom</Button>}
      </div>
      {eiendommer.length>0 && (
        <div style={{ display:'flex', gap:12, marginBottom:16, flexWrap:'wrap' }}>
          <Card padded><KPI label="Eiendommer" value={eiendommer.length} sub="lokasjoner" /></Card>
          <Card padded><KPI label="Sum kostnader" value={`kr ${BE_fmt(totKost)}`} sub="alle eiendommer" /></Card>
          <Card padded><KPI label="Direkte" value={eiendommer.filter(e=>e.fordelingsmodell==='direkte').length} sub="uten konserntransaksjon" /></Card>
          <Card padded><KPI label="Viderefakturering" value={eiendommer.filter(e=>e.fordelingsmodell==='viderefakturering').length} sub="via Gruppen" /></Card>
        </div>
      )}
      <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
        {eiendommer.map(e=>(
          <BudEiendomKort key={e.id} eiendom={e} data={data} versjonId={versjonId} enhById={enhById} onEndret={onEndret} laast={laast} />
        ))}
        {eiendommer.length===0 && <Card padded><div style={{ textAlign:'center', padding:'24px 0', color:SK.soft, fontSize:13 }}>Ingen eiendommer ennå. Klikk «Ny eiendom» for å starte.</div></Card>}
      </div>
      {nyModal && !laast && <BudEiendomModal eiendom={{ ny:true }} data={data} versjonId={versjonId} enhById={enhById} onLukk={()=>setNyModal(false)} onLagret={()=>{setNyModal(false);onEndret();}} />}
    </div>
  );
}

Object.assign(window, { BudEiendommer });