// budsjett-screens-2.jsx — Redigeringsfaner for budsjettmodulen
// Eksporterer: BudLinjerRediger, BudNoklerRediger, BudFordelingerRediger,
//              BudKontomapping, BudRapport (alle leses globalt av budsjett-screens.jsx)

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

// ════════════════════════════════════════════════════════════
// BUDSJETTLINJER — opprett/rediger/slett grunnbudsjett
// ════════════════════════════════════════════════════════════
function BudLinjerRediger({ data, versjonId, enhById, selById, laast, onEndret }) {
  const [filterAvd, setFilterAvd] = React.useState('alle');
  const [rediger, setRediger]     = React.useState(null); // linje-objekt eller {ny:true}
  const linjer = data.linjer.filter(l => l.versjon_id === versjonId)
    .filter(l => filterAvd==='alle' || l.avdeling_id===filterAvd);
  const avdMedBud = [...new Set(data.linjer.filter(l=>l.versjon_id===versjonId).map(l=>l.avdeling_id))];

  return (
    <div>
      <div style={{ display:'flex', justifyContent:'space-between', marginBottom:14, gap:12, flexWrap:'wrap' }}>
        <select className="ok-input" value={filterAvd} onChange={e=>setFilterAvd(e.target.value)} style={{ maxWidth:240, padding:'7px 10px', fontSize:13 }}>
          <option value="alle">Alle avdelinger</option>
          {data.enheter.filter(e=>avdMedBud.includes(e.id)).map(e=><option key={e.id} value={e.id}>{e.avd_nr} {e.navn}</option>)}
        </select>
        {!laast && <Button variant="primary" size="sm" icon={I.plus} onClick={()=>setRediger({ ny:true })}>Ny budsjettlinje</Button>}
      </div>
      <Card padded={false}>
        <table className="ok-table" style={{ width:'100%' }}>
          <thead><tr><th style={{ paddingLeft:20 }}>Avdeling</th><th>Konto</th><th>Tekst</th><th style={{ textAlign:'right' }}>Årsbeløp</th>{!laast && <th style={{ width:80 }}></th>}</tr></thead>
          <tbody>
            {linjer.length===0 && <tr><td colSpan={5} style={{ padding:24, textAlign:'center', color:SK.soft }}>Ingen budsjettlinjer ennå.</td></tr>}
            {linjer.map(l => { const ko=data.kontoplan.find(k=>k.konto===l.konto);
              return (<tr key={l.id}>
                <td style={{ paddingLeft:20, fontSize:12.5 }}>{enhById[l.avdeling_id]?.navn}</td>
                <td style={{ color:SK.soft }}>{l.konto} {ko?.navn}</td>
                <td>{l.tekst}</td>
                <td style={{ textAlign:'right', fontWeight:500 }}>{window.budFmtKrFull(l.belop_ar)}</td>
                {!laast && <td><div style={{ display:'flex', gap:4 }}>
                  <button onClick={()=>setRediger(l)} style={budIkonKnapp} title="Rediger">✎</button>
                  <button onClick={async()=>{ if(confirm('Slette linjen?')){ await window.budDB.slett('bud_linjer', l.id); onEndret(); }}} style={budIkonKnapp} title="Slett">🗑</button>
                </div></td>}
              </tr>); })}
          </tbody>
        </table>
      </Card>
      {rediger && <BudLinjeModal linje={rediger} data={data} versjonId={versjonId} onLukk={()=>setRediger(null)} onLagret={()=>{ setRediger(null); onEndret(); }} />}
    </div>
  );
}

function BudLinjeModal({ linje, data, versjonId, onLukk, onLagret }) {
  const ny = linje.ny;
  const [avdId, setAvdId]   = React.useState(linje.avdeling_id || '');
  const [konto, setKonto]   = React.useState(linje.konto || '');
  const [tekst, setTekst]   = React.useState(linje.tekst || '');
  const [belop, setBelop]   = React.useState(linje.belop_ar || '');
  const [feil, setFeil]     = React.useState(null);
  const [lagrer, setLagrer] = React.useState(false);

  const lagre = async () => {
    if (!avdId || !konto) { setFeil('Avdeling og konto er påkrevd.'); return; }
    setLagrer(true); setFeil(null);
    try {
      const felt = { avdeling_id:avdId, konto:Number(konto), tekst, belop_ar:Math.round(Number(belop)||0) };
      if (ny) await window.budDB.lagre('bud_linjer', { versjon_id:versjonId, ...felt });
      else await window.budDB.oppdater('bud_linjer', linje.id, felt);
      onLagret();
    } catch(e){ setFeil(e.message); setLagrer(false); }
  };
  return (
    <BudModal tittel={ny?'Ny budsjettlinje':'Rediger budsjettlinje'} onLukk={onLukk}>
      {feil && <div style={budFeil}>{feil}</div>}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'14px 16px' }}>
        <div style={{ gridColumn:'1/-1' }}>
          <label style={budLBL}>Avdeling *</label>
          <select className="ok-input" value={avdId} onChange={e=>setAvdId(e.target.value)} style={budINP}>
            <option value="">— Velg —</option>
            {data.enheter.slice().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>
          <label style={budLBL}>Konto *</label>
          <select className="ok-input" value={konto} onChange={e=>setKonto(e.target.value)} style={budINP}>
            <option value="">— Velg —</option>
            {data.kontoplan.map(k=><option key={k.konto} value={k.konto}>{k.konto} {k.navn}</option>)}
          </select>
        </div>
        <div>
          <label style={budLBL}>Årsbeløp (kr)</label>
          <input className="ok-input" type="number" value={belop} onChange={e=>setBelop(e.target.value)} style={budINP} placeholder="Negativt for inntekt" />
        </div>
        <div style={{ gridColumn:'1/-1' }}>
          <label style={budLBL}>Tekst</label>
          <input className="ok-input" value={tekst} onChange={e=>setTekst(e.target.value)} style={budINP} />
        </div>
      </div>
      <div style={{ display:'flex', gap:10, marginTop:20 }}>
        <Button variant="primary" onClick={lagre} disabled={lagrer}>{lagrer?'Lagrer…':'Lagre'}</Button>
        <Button onClick={onLukk}>Avbryt</Button>
      </div>
    </BudModal>
  );
}

// ════════════════════════════════════════════════════════════
// FORDELINGSNØKLER — opprett/rediger
// ════════════════════════════════════════════════════════════
function BudNoklerRediger({ data, versjonId, enhById, laast, onEndret }) {
  const [rediger, setRediger] = React.useState(null);
  const nokler = data.nokler.filter(n => n.versjon_id === versjonId);
  const drivere = data.drivere.filter(d => d.versjon_id === versjonId);
  return (
    <div>
      <div style={{ display:'flex', justifyContent:'space-between', marginBottom:14 }}>
        <div style={{ fontSize:13, color:SK.soft, lineHeight:1.6, maxWidth:600 }}>
          Fordelingsnøkler bestemmer hvordan felleskostnader fordeles — etter en <b>driver</b> (hodetall, areal, omsetning) eller med <b>faste prosenter</b>.
        </div>
        {!laast && <Button variant="primary" size="sm" icon={I.plus} onClick={()=>setRediger({ ny:true })}>Ny nøkkel</Button>}
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        {nokler.map(nk => { const driver=drivere.find(d=>d.id===nk.driver_id); const satser=data.satser.filter(s=>s.nokkel_id===nk.id);
          const sumPct = satser.reduce((s,x)=>s+Number(x.prosent),0);
          return (<Card key={nk.id} padded>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
              <div style={{ fontSize:14, fontWeight:600 }}>{nk.navn}</div>
              <div style={{ display:'flex', gap:8, alignItems:'center' }}>
                <span style={{ fontSize:11, fontWeight:600, padding:'2px 9px', borderRadius:99, background:SK.iceBlueLight, color:SK.ink }}>{nk.grunnlag==='driver'?`Driver: ${driver?.navn||'—'}`:'Fast fordeling'}</span>
                {!laast && <button onClick={()=>setRediger(nk)} style={budIkonKnapp}>✎</button>}
              </div>
            </div>
            {nk.grunnlag==='driver' ? (
              <div style={{ fontSize:12.5, color:SK.soft }}>Fordeles automatisk etter {driver?.navn?.toLowerCase()||'driver'}.</div>
            ) : (
              <div>
                <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
                  {satser.map(s=><span key={s.id} style={{ fontSize:12, padding:'3px 10px', borderRadius:6, background:SK.iceBlueLight }}>{enhById[s.avdeling_id]?.navn}: <b>{window.budPct(s.prosent)}</b></span>)}
                </div>
                {Math.abs(sumPct-100)>0.1 && <div style={{ fontSize:11.5, color:SK.coral, marginTop:8 }}>⚠ Sum er {window.budPct(sumPct)} — bør være 100 %.</div>}
              </div>
            )}
          </Card>); })}
        {nokler.length===0 && <Card padded><div style={{ color:SK.soft, fontSize:13, textAlign:'center', padding:12 }}>Ingen fordelingsnøkler ennå.</div></Card>}
      </div>
      {rediger && <BudNokkelModal nokkel={rediger} data={data} versjonId={versjonId} enhById={enhById} onLukk={()=>setRediger(null)} onLagret={()=>{ setRediger(null); onEndret(); }} />}
    </div>
  );
}

function BudNokkelModal({ nokkel, data, versjonId, enhById, onLukk, onLagret }) {
  const ny = nokkel.ny;
  const drivere = data.drivere.filter(d=>d.versjon_id===versjonId);
  const [navn, setNavn]         = React.useState(nokkel.navn || '');
  const [grunnlag, setGrunnlag] = React.useState(nokkel.grunnlag || 'driver');
  const [driverId, setDriverId] = React.useState(nokkel.driver_id || (drivere[0]?.id || ''));
  const [satser, setSatser]     = React.useState(() => {
    const init = {}; data.satser.filter(s=>s.nokkel_id===nokkel.id).forEach(s=>{ init[s.avdeling_id]=s.prosent; }); return init;
  });
  const [feil, setFeil]   = React.useState(null);
  const [lagrer, setLagrer] = React.useState(false);
  const driftsAvd = data.enheter.filter(e=>e.type!=='styre').sort((a,b)=>(a.avd_nr||'').localeCompare(b.avd_nr||''));

  const lagre = async () => {
    if (!navn.trim()) { setFeil('Navn er påkrevd.'); return; }
    setLagrer(true); setFeil(null);
    try {
      const felt = { navn, grunnlag, driver_id: grunnlag==='driver'?driverId:null };
      let nokkelId = nokkel.id;
      if (ny) { const n = await window.budDB.lagre('bud_fordelingsnokler', { versjon_id:versjonId, ...felt }); nokkelId = n.id; }
      else await window.budDB.oppdater('bud_fordelingsnokler', nokkel.id, felt);
      if (grunnlag==='fast') {
        // Slett gamle satser, sett nye
        const gamle = data.satser.filter(s=>s.nokkel_id===nokkelId);
        for (const g of gamle) await window.budDB.slett('bud_fordeling_satser', g.id);
        for (const [avd,pct] of Object.entries(satser)) {
          if (Number(pct)>0) await window.budDB.lagre('bud_fordeling_satser', { nokkel_id:nokkelId, avdeling_id:avd, prosent:Number(pct) });
        }
      }
      onLagret();
    } catch(e){ setFeil(e.message); setLagrer(false); }
  };
  const sumPct = Object.values(satser).reduce((s,x)=>s+Number(x||0),0);
  return (
    <BudModal tittel={ny?'Ny fordelingsnøkkel':'Rediger fordelingsnøkkel'} onLukk={onLukk} bred>
      {feil && <div style={budFeil}>{feil}</div>}
      <div style={{ marginBottom:14 }}>
        <label style={budLBL}>Navn *</label>
        <input className="ok-input" value={navn} onChange={e=>setNavn(e.target.value)} style={budINP} />
      </div>
      <div style={{ marginBottom:14 }}>
        <label style={budLBL}>Grunnlag</label>
        <div style={{ display:'flex', gap:8 }}>
          {[['driver','Driver (auto)'],['fast','Faste prosenter']].map(([v,l])=>(
            <button key={v} onClick={()=>setGrunnlag(v)} style={{ flex:1, padding:'9px', borderRadius:8, fontSize:12.5, fontWeight:600, cursor:'pointer', fontFamily:'inherit', border:grunnlag===v?'none':'1px solid rgba(17,24,61,.12)', background:grunnlag===v?SK.ink:'#fff', color:grunnlag===v?'#fff':SK.ink }}>{l}</button>
          ))}
        </div>
      </div>
      {grunnlag==='driver' ? (
        <div>
          <label style={budLBL}>Driver</label>
          <select className="ok-input" value={driverId} onChange={e=>setDriverId(e.target.value)} style={budINP}>
            {drivere.map(d=><option key={d.id} value={d.id}>{d.navn}</option>)}
          </select>
        </div>
      ) : (
        <div>
          <label style={budLBL}>Prosent per avdeling (sum bør være 100 %)</label>
          <div style={{ maxHeight:280, overflowY:'auto', border:'1px solid rgba(17,24,61,.08)', borderRadius:8, padding:8 }}>
            {driftsAvd.map(e=>(
              <div key={e.id} style={{ display:'flex', alignItems:'center', gap:10, padding:'4px 6px' }}>
                <span style={{ flex:1, fontSize:12.5 }}>{e.avd_nr} {e.navn}</span>
                <input type="number" className="ok-input" value={satser[e.id]||''} onChange={ev=>setSatser(s=>({...s,[e.id]:ev.target.value}))} style={{ width:90, padding:'5px 8px', fontSize:12.5 }} placeholder="0" />
                <span style={{ fontSize:12, color:SK.soft }}>%</span>
              </div>
            ))}
          </div>
          <div style={{ fontSize:12, marginTop:8, color:Math.abs(sumPct-100)<0.1?SK.success:SK.coral }}>Sum: {window.budPct(sumPct)}</div>
        </div>
      )}
      <div style={{ display:'flex', gap:10, marginTop:20 }}>
        <Button variant="primary" onClick={lagre} disabled={lagrer}>{lagrer?'Lagrer…':'Lagre'}</Button>
        <Button onClick={onLukk}>Avbryt</Button>
      </div>
    </BudModal>
  );
}

// ════════════════════════════════════════════════════════════
// FORDELINGER / VIDEREFAKTURERING — opprett/rediger
// ════════════════════════════════════════════════════════════
function BudFordelingerRediger({ data, versjonId, enhById, post, laast, onEndret }) {
  const [rediger, setRediger] = React.useState(null);
  const fordelinger = data.fordelinger.filter(f => f.versjon_id === versjonId);
  const typeLabel = { konsern:'Konsernfordeling', viderefakturering:'Viderefakturering', selskapsintern:'Selskapsintern' };
  const typeFarge = { konsern:'#586ba4', viderefakturering:'#08605f', selskapsintern:'#e08d3c' };
  return (
    <div>
      <div style={{ display:'flex', justifyContent:'flex-end', marginBottom:14 }}>
        {!laast && <Button variant="primary" size="sm" icon={I.plus} onClick={()=>setRediger({ ny:true })}>Ny fordeling</Button>}
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        {fordelinger.map(f => { const linjer=post.filter(p=>p.fordeling_id===f.id && !p.motpost); const total=linjer.reduce((s,p)=>s+p.belop,0);
          return (<Card key={f.id} padded>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:10 }}>
              <div><div style={{ fontSize:14, fontWeight:600 }}>{f.navn}</div>
                <div style={{ fontSize:12, color:SK.soft, marginTop:2 }}>Fra {enhById[f.kilde_avd_id]?.navn} · konto {f.konto}{f.motpart_konto?` → motpost ${f.motpart_konto}`:''}</div></div>
              <div style={{ display:'flex', gap:8, alignItems:'center' }}>
                <span style={{ fontSize:10.5, fontWeight:600, padding:'2px 9px', borderRadius:99, background:typeFarge[f.type]+'22', color:typeFarge[f.type] }}>{typeLabel[f.type]}</span>
                {f.paaslag_pct>0 && <span style={{ fontSize:11, color:'#e08d3c' }}>+{window.budPct(f.paaslag_pct)}</span>}
                {!laast && <button onClick={()=>setRediger(f)} style={budIkonKnapp}>✎</button>}
                {!laast && <button onClick={async()=>{ if(confirm('Slette fordelingen?')){ await window.budDB.slett('bud_fordelinger', f.id); onEndret(); }}} style={budIkonKnapp}>🗑</button>}
              </div>
            </div>
            {f.beskrivelse && <div style={{ fontSize:12.5, color:SK.soft, marginBottom:10 }}>{f.beskrivelse}</div>}
            <table className="ok-table" style={{ width:'100%', fontSize:12.5 }}>
              <thead><tr><th style={{ paddingLeft:0 }}>Mottaker</th><th style={{ textAlign:'right' }}>Beløp</th></tr></thead>
              <tbody>{linjer.map((p,i)=>(<tr key={i}><td>{enhById[p.avd_id]?.navn}</td><td style={{ textAlign:'right' }}>{window.budFmtKrFull(p.belop)}</td></tr>))}
                <tr style={{ fontWeight:600 }}><td>Sum fordelt</td><td style={{ textAlign:'right' }}>{window.budFmtKrFull(total)}</td></tr></tbody>
            </table>
          </Card>); })}
        {fordelinger.length===0 && <Card padded><div style={{ color:SK.soft, fontSize:13, textAlign:'center', padding:12 }}>Ingen fordelinger ennå.</div></Card>}
      </div>
      {rediger && <BudFordelingModal fordeling={rediger} data={data} versjonId={versjonId} enhById={enhById} onLukk={()=>setRediger(null)} onLagret={()=>{ setRediger(null); onEndret(); }} />}
    </div>
  );
}

function BudFordelingModal({ fordeling, data, versjonId, enhById, onLukk, onLagret }) {
  const ny = fordeling.ny;
  const [navn, setNavn]       = React.useState(fordeling.navn || '');
  const [type, setType]       = React.useState(fordeling.type || 'konsern');
  const [kildeAvd, setKildeAvd] = React.useState(fordeling.kilde_avd_id || '');
  const [konto, setKonto]     = React.useState(fordeling.konto || '');
  const [motpartKonto, setMotpartKonto] = React.useState(fordeling.motpart_konto || '');
  const [nokkelId, setNokkelId] = React.useState(fordeling.nokkel_id || '');
  const [grunnlagBelop, setGrunnlagBelop] = React.useState(fordeling.grunnlag_belop || '');
  const [paaslag, setPaaslag] = React.useState(fordeling.paaslag_pct || 0);
  const [beskrivelse, setBeskrivelse] = React.useState(fordeling.beskrivelse || '');
  const [feil, setFeil] = React.useState(null);
  const [lagrer, setLagrer] = React.useState(false);
  const nokler = data.nokler.filter(n=>n.versjon_id===versjonId);
  const elimForType = { konsern:'konsern', viderefakturering:'konsern', selskapsintern:'selskap' };

  const lagre = async () => {
    if (!navn.trim() || !kildeAvd) { setFeil('Navn og kilde-avdeling er påkrevd.'); return; }
    if (Number(paaslag)<0 || Number(paaslag)>5) { setFeil('Påslag må være mellom 0 og 5 %.'); return; }
    setLagrer(true); setFeil(null);
    try {
      const felt = {
        navn, type, kilde_avd_id:kildeAvd, konto:konto?Number(konto):null,
        motpart_konto:motpartKonto?Number(motpartKonto):null,
        nokkel_id:nokkelId||null, grunnlag_belop:grunnlagBelop?Math.round(Number(grunnlagBelop)):0,
        paaslag_pct:Number(paaslag)||0, eliminer_nivaa:elimForType[type], beskrivelse, aktiv:true,
      };
      if (ny) await window.budDB.lagre('bud_fordelinger', { versjon_id:versjonId, ...felt });
      else await window.budDB.oppdater('bud_fordelinger', fordeling.id, felt);
      onLagret();
    } catch(e){ setFeil(e.message); setLagrer(false); }
  };
  return (
    <BudModal tittel={ny?'Ny fordeling':'Rediger fordeling'} onLukk={onLukk} bred>
      {feil && <div style={budFeil}>{feil}</div>}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'14px 16px' }}>
        <div style={{ gridColumn:'1/-1' }}><label style={budLBL}>Navn *</label><input className="ok-input" value={navn} onChange={e=>setNavn(e.target.value)} style={budINP} /></div>
        <div><label style={budLBL}>Type</label>
          <select className="ok-input" value={type} onChange={e=>setType(e.target.value)} style={budINP}>
            <option value="konsern">Konsernfordeling (Gruppen → avd.)</option>
            <option value="viderefakturering">Viderefakturering (på tvers)</option>
            <option value="selskapsintern">Selskapsintern</option>
          </select></div>
        <div><label style={budLBL}>Kilde-avdeling *</label>
          <select className="ok-input" value={kildeAvd} onChange={e=>setKildeAvd(e.target.value)} style={budINP}>
            <option value="">— Velg —</option>
            {data.enheter.slice().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><label style={budLBL}>Konto</label>
          <select className="ok-input" value={konto} onChange={e=>setKonto(e.target.value)} style={budINP}>
            <option value="">— Velg —</option>{data.kontoplan.map(k=><option key={k.konto} value={k.konto}>{k.konto} {k.navn}</option>)}
          </select></div>
        <div><label style={budLBL}>Motpost-konto (internt salg)</label>
          <select className="ok-input" value={motpartKonto} onChange={e=>setMotpartKonto(e.target.value)} style={budINP}>
            <option value="">— Ingen —</option>{data.kontoplan.map(k=><option key={k.konto} value={k.konto}>{k.konto} {k.navn}</option>)}
          </select></div>
        <div><label style={budLBL}>Fordelingsnøkkel</label>
          <select className="ok-input" value={nokkelId} onChange={e=>setNokkelId(e.target.value)} style={budINP}>
            <option value="">— Eksplisitte mottakere —</option>{nokler.map(n=><option key={n.id} value={n.id}>{n.navn}</option>)}
          </select></div>
        <div><label style={budLBL}>Grunnbeløp (tomt = sum fra kilde)</label><input className="ok-input" type="number" value={grunnlagBelop} onChange={e=>setGrunnlagBelop(e.target.value)} style={budINP} placeholder="Auto fra budsjettlinjer" /></div>
        <div><label style={budLBL}>Påslag (0–5 %)</label><input className="ok-input" type="number" min="0" max="5" step="0.5" value={paaslag} onChange={e=>setPaaslag(e.target.value)} style={budINP} /></div>
        <div style={{ gridColumn:'1/-1' }}><label style={budLBL}>Beskrivelse</label><input className="ok-input" value={beskrivelse} onChange={e=>setBeskrivelse(e.target.value)} style={budINP} /></div>
      </div>
      <div style={{ fontSize:11.5, color:SK.soft, marginTop:10, lineHeight:1.5 }}>
        Elimineres på <b>{elimForType[type]==='selskap'?'selskapsnivå':'konsernnivå'}</b>. Uten fordelingsnøkkel legges mottakere til etter lagring.
      </div>
      <div style={{ display:'flex', gap:10, marginTop:18 }}>
        <Button variant="primary" onClick={lagre} disabled={lagrer}>{lagrer?'Lagrer…':'Lagre'}</Button>
        <Button onClick={onLukk}>Avbryt</Button>
      </div>
    </BudModal>
  );
}

// ════════════════════════════════════════════════════════════
// KONTOMAPPING — per selskap: intern-type + rapportlinje
// ════════════════════════════════════════════════════════════
function BudKontomapping({ data, versjonId, selById, laast, onEndret }) {
  const [valgtSelskap, setValgtSelskap] = React.useState(data.selskaper[0]?.id || '');
  const [lagrer, setLagrer] = React.useState(null);
  const rapportlinjer = data.rapportlinjer.filter(r => r.versjon_id===versjonId && (r.selskap_id==null || r.selskap_id===valgtSelskap));

  // Gjeldende mapping for valgt selskap (selskaps-spesifikk overstyrer felles null)
  function gjeldende(konto) {
    return data.kontomapping.find(m => m.versjon_id===versjonId && m.konto===konto && m.selskap_id===valgtSelskap)
        || data.kontomapping.find(m => m.versjon_id===versjonId && m.konto===konto && m.selskap_id==null);
  }

  const settMapping = async (konto, felt) => {
    setLagrer(konto);
    try {
      const eksisterende = data.kontomapping.find(m => m.versjon_id===versjonId && m.konto===konto && m.selskap_id===valgtSelskap);
      const base = eksisterende || gjeldende(konto) || {};
      await window.budDB.lagreMapping({
        versjon_id: versjonId, selskap_id: valgtSelskap, konto,
        intern_type: felt.intern_type ?? base.intern_type ?? 'ekstern',
        rapportlinje_id: felt.rapportlinje_id !== undefined ? felt.rapportlinje_id : (base.rapportlinje_id ?? null),
      });
      await onEndret();
    } catch(e){ alert('Feil: '+e.message); }
    setLagrer(null);
  };

  const filInput = React.useRef(null);
  const [importStatus, setImportStatus] = React.useState(null);

  const eksporterCSV = () => {
    const csv = window.budMappingTilCSV(data, versjonId);
    const blob = new Blob(['\ufeff'+csv], { type:'text/csv;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = `kontomapping_${versjon?.navn||'budsjett'}.csv`.replace(/\s+/g,'_');
    a.click(); URL.revokeObjectURL(url);
  };

  const importerCSV = async (e) => {
    const fil = e.target.files?.[0]; if (!fil) return;
    setImportStatus('Importerer…');
    try {
      const tekst = await fil.text();
      const rader = window.budParseCSV(tekst);
      if (!rader.length) { setImportStatus('Fant ingen rader i filen.'); return; }
      const res = await window.budImporterMapping(data, versjonId, rader);
      setImportStatus(`${res.ok} rader importert.` + (res.feil.length ? ` ${res.feil.length} feil: ${res.feil.slice(0,3).join('; ')}${res.feil.length>3?'…':''}` : ''));
      await onEndret();
    } catch(err){ setImportStatus('Feil ved import: '+err.message); }
    e.target.value = '';
  };

  const internFarge = { ekstern:SK.soft, konsern:'#586ba4', selskap:'#e08d3c' };
  const internLabel = { ekstern:'Ekstern', konsern:'Konsern-intern', selskap:'Selskaps-intern' };

  return (
    <div>
      <div style={{ background:SK.iceBlueLight, borderRadius:10, padding:'14px 18px', marginBottom:16, fontSize:12.5, color:SK.ink, lineHeight:1.6 }}>
        <b>Kontomapping per selskap.</b> For hvert selskap velger du om en konto er ekstern, konsern-intern eller selskaps-intern —
        dette styrer automatisk hva som elimineres. Du kobler også kontoen til en rapportlinje.
        Mapping uten selskap (felles) brukes som standard når et selskap ikke har egen mapping.
        CSV-format: <code>konto;kontonavn;selskap_nokkel;intern_type;rapportlinje_nr</code> (tom selskap_nokkel = felles).
      </div>
      {importStatus && <div style={{ background:SK.iceBlueLight, borderRadius:8, padding:'10px 14px', marginBottom:14, fontSize:12.5 }}>{importStatus}</div>}
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16, gap:12, flexWrap:'wrap' }}>
        <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
          {data.selskaper.map(s=>(
            <button key={s.id} onClick={()=>setValgtSelskap(s.id)} style={{
              padding:'7px 14px', borderRadius:8, fontSize:12.5, fontWeight:600, cursor:'pointer', fontFamily:'inherit',
              border:valgtSelskap===s.id?'none':'1px solid rgba(17,24,61,.12)', background:valgtSelskap===s.id?SK.ink:'#fff', color:valgtSelskap===s.id?'#fff':SK.ink }}>
              {s.navn.replace('OsloKollega ','')}</button>
          ))}
        </div>
        <div style={{ display:'flex', gap:8 }}>
          <Button size="sm" onClick={eksporterCSV}>↓ Eksporter CSV</Button>
          {!laast && <Button size="sm" onClick={()=>filInput.current?.click()}>↑ Importer CSV</Button>}
          <input ref={filInput} type="file" accept=".csv,text/csv" style={{ display:'none' }} onChange={importerCSV} />
        </div>
      </div>
      <Card padded={false}>
        <table className="ok-table" style={{ width:'100%' }}>
          <thead><tr><th style={{ paddingLeft:20 }}>Konto</th><th>Navn</th><th>Klassifisering</th><th>Rapportlinje</th></tr></thead>
          <tbody>
            {data.kontoplan.map(k => { const m=gjeldende(k.konto); const erFelles = m && m.selskap_id==null;
              const internType = m?.intern_type || k.standard_intern || 'ekstern';
              return (<tr key={k.konto}>
                <td style={{ paddingLeft:20, color:SK.soft }}>{k.konto}</td>
                <td style={{ fontWeight:500 }}>{k.navn}{erFelles && <span style={{ fontSize:10, color:SK.soft, marginLeft:6 }}>(felles)</span>}</td>
                <td>
                  <select disabled={laast || lagrer===k.konto} value={internType} onChange={e=>settMapping(k.konto, { intern_type:e.target.value })}
                    style={{ ...budINP, padding:'5px 8px', fontSize:12, border:`1px solid ${internFarge[internType]}55`, color:internFarge[internType], fontWeight:600, borderRadius:6 }}>
                    <option value="ekstern">Ekstern</option>
                    <option value="konsern">Konsern-intern</option>
                    <option value="selskap">Selskaps-intern</option>
                  </select>
                </td>
                <td>
                  <select disabled={laast || lagrer===k.konto} value={m?.rapportlinje_id || ''} onChange={e=>settMapping(k.konto, { rapportlinje_id:e.target.value||null })}
                    style={{ ...budINP, padding:'5px 8px', fontSize:12, borderRadius:6 }}>
                    <option value="">— Ikke mappet —</option>
                    {rapportlinjer.map(r=><option key={r.id} value={r.id}>{r.linjenr} · {r.navn}</option>)}
                  </select>
                </td>
              </tr>); })}
          </tbody>
        </table>
      </Card>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// RAPPORT — linjer med justering, beregnet fra mapping per selskap
// ════════════════════════════════════════════════════════════
function BudRapport({ data, post, versjonId, selById, laast, onEndret }) {
  const [valgtSelskap, setValgtSelskap] = React.useState('alle');
  const [redigerLinje, setRedigerLinje] = React.useState(null);
  const linjer = data.rapportlinjer.filter(r => r.versjon_id===versjonId && (r.selskap_id==null || r.selskap_id===valgtSelskap || valgtSelskap==='alle'));

  // Mapping: konto → rapportlinje for valgt selskap (selskaps-spesifikk overstyrer felles)
  function mappingFor(konto) {
    if (valgtSelskap==='alle') return data.kontomapping.find(m=>m.versjon_id===versjonId && m.konto===konto);
    return data.kontomapping.find(m=>m.versjon_id===versjonId && m.konto===konto && m.selskap_id===valgtSelskap)
        || data.kontomapping.find(m=>m.versjon_id===versjonId && m.konto===konto && m.selskap_id==null);
  }
  const beløpPerLinje = {};
  linjer.forEach(l => { beløpPerLinje[l.id]=0; });
  post.filter(p => valgtSelskap==='alle' || p.selskap_id===valgtSelskap).forEach(p => {
    const m = mappingFor(p.konto);
    if (m && m.rapportlinje_id && beløpPerLinje[m.rapportlinje_id]!=null) beløpPerLinje[m.rapportlinje_id]+=p.belop;
  });

  return (
    <div>
      <div style={{ display:'flex', justifyContent:'space-between', marginBottom:14, gap:12, flexWrap:'wrap' }}>
        <div style={{ fontSize:13, color:SK.soft, lineHeight:1.6, maxWidth:560 }}>
          Rapporten grupperer kontoer i linjer via kontomappingen. Velg selskap for å se selskapets rapport.
          Hver linje kan justeres manuelt. <i>Live data kobles på senere.</i>
        </div>
        <select className="ok-input" value={valgtSelskap} onChange={e=>setValgtSelskap(e.target.value)} style={{ maxWidth:220, padding:'7px 10px', fontSize:13 }}>
          <option value="alle">Hele konsernet</option>
          {data.selskaper.map(s=><option key={s.id} value={s.id}>{s.navn}</option>)}
        </select>
      </div>
      <Card padded={false}>
        <table className="ok-table" style={{ width:'100%' }}>
          <thead><tr><th style={{ paddingLeft:20 }}>#</th><th>Linje</th><th>Type</th><th style={{ textAlign:'right' }}>Budsjett</th><th style={{ textAlign:'right' }}>Justering</th><th style={{ textAlign:'right', paddingRight:laast?20:8 }}>Justert</th>{!laast && <th style={{ width:48 }}></th>}</tr></thead>
          <tbody>
            {linjer.map(l => { const b=(beløpPerLinje[l.id]||0)*(l.fortegn||1); const justert=b+Number(l.justering||0);
              return (<tr key={l.id} style={{ fontWeight: l.type==='sum'||l.type==='subtotal'?600:400 }}>
                <td style={{ paddingLeft:20, color:SK.soft }}>{l.linjenr}</td>
                <td>{l.navn}{l.justering_note && <span style={{ fontSize:11, color:SK.soft, marginLeft:6 }}>({l.justering_note})</span>}</td>
                <td style={{ fontSize:12, color:SK.soft }}>{l.type}</td>
                <td style={{ textAlign:'right' }}>{window.budFmtKr(b)}</td>
                <td style={{ textAlign:'right', color:l.justering?'#e08d3c':SK.soft }}>{l.justering?window.budFmtKr(l.justering):'—'}</td>
                <td style={{ textAlign:'right', paddingRight:laast?20:8, fontWeight:600 }}>{window.budFmtKr(justert)}</td>
                {!laast && <td><button onClick={()=>setRedigerLinje(l)} style={budIkonKnapp}>✎</button></td>}
              </tr>); })}
          </tbody>
        </table>
      </Card>
      {redigerLinje && <BudJusteringModal linje={redigerLinje} onLukk={()=>setRedigerLinje(null)} onLagret={()=>{ setRedigerLinje(null); onEndret(); }} />}
    </div>
  );
}

function BudJusteringModal({ linje, onLukk, onLagret }) {
  const [belop, setBelop] = React.useState(linje.justering || 0);
  const [note, setNote]   = React.useState(linje.justering_note || '');
  const [lagrer, setLagrer] = React.useState(false);
  const lagre = async () => {
    setLagrer(true);
    try { await window.budDB.oppdater('bud_rapportlinjer', linje.id, { justering:Math.round(Number(belop)||0), justering_note:note }); onLagret(); }
    catch(e){ alert(e.message); setLagrer(false); }
  };
  return (
    <BudModal tittel={`Juster: ${linje.navn}`} onLukk={onLukk}>
      <div style={{ marginBottom:14 }}><label style={budLBL}>Justeringsbeløp (kr)</label>
        <input className="ok-input" type="number" value={belop} onChange={e=>setBelop(e.target.value)} style={budINP} autoFocus /></div>
      <div><label style={budLBL}>Notat</label><input className="ok-input" value={note} onChange={e=>setNote(e.target.value)} style={budINP} placeholder="Hvorfor justeres linjen?" /></div>
      <div style={{ display:'flex', gap:10, marginTop:20 }}>
        <Button variant="primary" onClick={lagre} disabled={lagrer}>{lagrer?'Lagrer…':'Lagre'}</Button>
        <Button onClick={onLukk}>Avbryt</Button>
      </div>
    </BudModal>
  );
}

// ── Felles modal-skall + stiler ──────────────────────────────
function BudModal({ tittel, onLukk, bred, children }) {
  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:bred?620:460, maxHeight:'88vh', overflowY:'auto', boxShadow:'0 20px 60px rgba(17,24,61,.25)' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18 }}>
          <div style={{ fontSize:16, fontWeight:600 }}>{tittel}</div>
          <button onClick={onLukk} style={{ ...budIkonKnapp, fontSize:18 }}>×</button>
        </div>
        {children}
      </div>
    </div>
  );
}
const budIkonKnapp = { width:28, height:28, borderRadius:6, border:'1px solid rgba(17,24,61,.12)', background:'#fff', cursor:'pointer', fontSize:13, display:'inline-flex', alignItems:'center', justifyContent:'center', color:SK.ink, fontFamily:'inherit' };
const budFeil = { background:'#fcddde', border:'1px solid #f2545c', borderRadius:8, padding:'9px 13px', fontSize:13, color:'#8a1620', marginBottom:14 };

Object.assign(window, { BudLinjerRediger, BudNoklerRediger, BudFordelingerRediger, BudKontomapping, BudRapport });