// budsjett-screens.jsx — UI for budsjettmodulen (oversikt + redigering)
// Avhenger av budsjett.jsx + budsjett-screens-2.jsx + prototype-ui.jsx

function BudsjettWorkspace({ go }) {
  const [data, setData]       = React.useState(null);
  const [versjonId, setVersjonId] = React.useState(null);
  const [fane, setFane]       = React.useState('oversikt');
  const [elimNivaa, setElimNivaa] = React.useState('avdeling');
  const [laster, setLaster]   = React.useState(true);
  const [feil, setFeil]       = React.useState(null);

  const lastInn = React.useCallback(() => {
    return window.budHentAlt().then(d => {
      setData(d);
      setVersjonId(prev => prev || (d.versjoner[0] ? d.versjoner[0].id : null));
      setLaster(false);
    }).catch(e => { setFeil(e.message); setLaster(false); });
  }, []);

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

  if (laster) return <div className="ok-content__inner"><div style={{ padding:64, textAlign:'center', color:SK.soft }}>Laster budsjett…</div></div>;
  if (feil) return <div className="ok-content__inner"><div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8, padding:'14px 18px', fontSize:13, color:'#8a1620', margin:'20px 0' }}>
    Kunne ikke laste budsjett: {feil}<div style={{ marginTop:8, color:SK.soft }}>Har du kjørt <code>supabase-budsjett.sql</code>, <code>supabase-budsjett-kontomapping.sql</code> og <code>supabase-budsjett-seed.sql</code>? (Krever økonomi-/lederrolle.)</div></div></div>;

  const versjon = data.versjoner.find(v => v.id === versjonId);
  const post = window.budBeregnPosteringer(data, versjonId);
  const enhById = Object.fromEntries(data.enheter.map(e => [e.id, e]));
  const selById = Object.fromEntries(data.selskaper.map(s => [s.id, s]));
  const laast = versjon && (versjon.status === 'laast' || versjon.status === 'arkivert');

  const faner = [
    { id:'oversikt',     label:'Oversikt' },
    { id:'avdeling',     label:'Per avdeling' },
    { id:'linjer',       label:'Budsjettlinjer' },
    { id:'lonn',         label:'Lønnsbudsjett' },
    { id:'deltakere',    label:'Deltakermatrise' },
    { id:'fordeling',    label:'Fordelingsnøkler' },
    { id:'viderefakt',   label:'Fordelinger' },
    { id:'avtaler',      label:'Avtaler' },
    { id:'oppgaver',     label:'Oppgaver' },
    { id:'eliminering',  label:'Eliminering' },
    { id:'kontomapping', label:'Kontomapping' },
    { id:'rapport',      label:'Rapport' },
  ];

  const props = { data, post, enhById, selById, versjonId, versjon, laast, onEndret: lastInn };

  return (
    <div className="ok-content__inner" style={{ maxWidth: 1240 }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:8 }}>
        <div>
          <div style={{ fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.08, textTransform:'uppercase' }}>Økonomi · Budsjett</div>
          <h1 style={{ fontSize:26, fontWeight:600, margin:'2px 0 0' }}>Budsjettering</h1>
        </div>
        <div style={{ display:'flex', gap:8, alignItems:'center' }}>
          {laast && <span style={{ fontSize:11, fontWeight:600, padding:'4px 10px', borderRadius:99, background:'#fdeac8', color:'#8e5a05' }}>🔒 Låst</span>}
          <select className="ok-input" value={versjonId || ''} onChange={e => setVersjonId(e.target.value)} style={{ padding:'8px 12px', fontSize:13 }}>
            {data.versjoner.map(v => <option key={v.id} value={v.id}>{v.navn} ({v.status})</option>)}
          </select>
          <BudVersjonMeny data={data} versjon={versjon} onEndret={lastInn} setVersjonId={setVersjonId} />
        </div>
      </div>
      <div style={{ fontSize:13, color:SK.soft, marginBottom:20 }}>
        Budsjett på avdelingsnivå med konsernfordeling, viderefakturering og eliminering.
      </div>

      <div style={{ marginBottom:20 }}><Tabs tabs={faner} value={fane} onChange={setFane} /></div>

      {fane === 'oversikt'    && <BudOversikt {...props} elimNivaa={elimNivaa} setElimNivaa={setElimNivaa} />}
      {fane === 'avdeling'    && <BudPerAvdeling {...props} />}
      {fane === 'linjer'      && <BudLinjerRediger {...props} />}
      {fane === 'lonn'        && <BudLonnsbudsjett {...props} />}
      {fane === 'deltakere'   && <BudDeltakerMatrise {...props} />}
      {fane === 'fordeling'   && <BudNoklerRediger {...props} />}
      {fane === 'viderefakt'  && <BudFordelingerRediger {...props} />}
      {fane === 'avtaler'     && <BudAvtaler {...props} />}
      {fane === 'oppgaver'    && <BudOppgaver {...props} />}
      {fane === 'eliminering' && <BudEliminering {...props} />}
      {fane === 'kontomapping'&& <BudKontomapping {...props} />}
      {fane === 'rapport'     && <BudRapport {...props} />}
    </div>
  );
}

// ── Versjonsmeny: ny versjon, lås, kopier ────────────────────
function BudVersjonMeny({ data, versjon, onEndret, setVersjonId }) {
  const [apen, setApen] = React.useState(false);
  const nyVersjon = async () => {
    const navn = prompt('Navn på ny budsjettversjon:', `Budsjett ${new Date().getFullYear()+1}`);
    if (!navn) return;
    const v = await window.budDB.lagre('bud_versjoner', { navn, ar: new Date().getFullYear()+1, type:'budsjett', status:'utkast' });
    await onEndret(); setVersjonId(v.id); setApen(false);
  };
  const toggleLaas = async () => {
    if (!versjon) return;
    const ny = versjon.status === 'laast' ? 'utkast' : 'laast';
    await window.budDB.oppdater('bud_versjoner', versjon.id, { status: ny, laast_at: ny==='laast'?new Date().toISOString():null });
    await onEndret(); setApen(false);
  };
  return (
    <div style={{ position:'relative' }}>
      <Button size="sm" onClick={() => setApen(a=>!a)}>⋯</Button>
      {apen && (
        <div style={{ position:'absolute', right:0, top:'110%', background:'#fff', border:'1px solid rgba(17,24,61,.12)', borderRadius:10, boxShadow:'0 8px 24px rgba(17,24,61,.12)', padding:6, zIndex:20, minWidth:180 }}>
          <button onClick={nyVersjon} style={budMenyKnapp}>+ Ny versjon</button>
          {versjon && <button onClick={toggleLaas} style={budMenyKnapp}>{versjon.status==='laast'?'🔓 Lås opp':'🔒 Lås versjon'}</button>}
        </div>
      )}
    </div>
  );
}
const budMenyKnapp = { display:'block', width:'100%', textAlign:'left', padding:'8px 12px', border:'none', background:'none', cursor:'pointer', fontSize:13, fontFamily:'inherit', borderRadius:6, color:SK.ink };

// ── Oversikt ─────────────────────────────────────────────────
function BudOversikt({ data, post, selById, elimNivaa, setElimNivaa }) {
  const filtrert = window.budAggreger(post, elimNivaa);
  const sumInntekt = filtrert.filter(p => p.belop < 0).reduce((s,p)=>s+p.belop,0);
  const sumKostnad = filtrert.filter(p => p.belop > 0).reduce((s,p)=>s+p.belop,0);
  const resultat = -(sumInntekt) - sumKostnad;
  const perSelskap = {};
  data.selskaper.forEach(s => { perSelskap[s.id] = { inntekt:0, kostnad:0 }; });
  filtrert.forEach(p => { const r = perSelskap[p.selskap_id]; if (!r) return; if (p.belop<0) r.inntekt+=p.belop; else r.kostnad+=p.belop; });
  const nivaaVal = [
    { id:'avdeling', label:'Per avdeling (alt)' },
    { id:'selskap',  label:'Selskapsnivå' },
    { id:'konsern',  label:'Konsern (kun eksternt)' },
  ];
  return (
    <div>
      <div style={{ display:'flex', gap:8, marginBottom:18, flexWrap:'wrap' }}>
        {nivaaVal.map(n => (
          <button key={n.id} onClick={() => setElimNivaa(n.id)} style={{
            padding:'7px 14px', borderRadius:8, fontSize:12.5, fontWeight:600, cursor:'pointer', fontFamily:'inherit',
            border: elimNivaa===n.id?'none':'1px solid rgba(17,24,61,.12)',
            background: elimNivaa===n.id?SK.ink:'#fff', color: elimNivaa===n.id?'#fff':SK.ink }}>{n.label}</button>
        ))}
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14, marginBottom:24 }}>
        <Card padded><KPI label="Sum inntekter" value={window.budFmtKr(-sumInntekt)} sub="kr" /></Card>
        <Card padded><KPI label="Sum kostnader" value={window.budFmtKr(sumKostnad)} sub="kr" /></Card>
        <Card padded><KPI label="Driftsresultat" value={window.budFmtKr(resultat)} sub="kr" accent={resultat<0} /></Card>
      </div>
      <Card padded={false}>
        <div style={{ padding:'14px 20px', borderBottom:'1px solid rgba(17,24,61,.07)', fontSize:14, fontWeight:600 }}>Resultat per selskap</div>
        <table className="ok-table" style={{ width:'100%' }}>
          <thead><tr><th style={{ paddingLeft:20 }}>Selskap</th><th style={{ textAlign:'right' }}>Inntekter</th><th style={{ textAlign:'right' }}>Kostnader</th><th style={{ textAlign:'right', paddingRight:20 }}>Resultat</th></tr></thead>
          <tbody>
            {data.selskaper.map(s => { const r=perSelskap[s.id]; if(!r) return null; const res=-(r.inntekt)-r.kostnad;
              return (<tr key={s.id} style={{ fontWeight: s.type==='morselskap'?600:400 }}>
                <td style={{ paddingLeft:20 }}>{s.navn}</td>
                <td style={{ textAlign:'right' }}>{window.budFmtKr(-r.inntekt)}</td>
                <td style={{ textAlign:'right' }}>{window.budFmtKr(r.kostnad)}</td>
                <td style={{ textAlign:'right', paddingRight:20, color:res<0?SK.coral:SK.success, fontWeight:600 }}>{window.budFmtKr(res)}</td>
              </tr>);
            })}
          </tbody>
        </table>
      </Card>
      {elimNivaa!=='avdeling' && <div style={{ marginTop:12, fontSize:12, color:SK.soft, lineHeight:1.6 }}>
        {elimNivaa==='selskap' && 'Selskapsinterne posteringer er eliminert.'}
        {elimNivaa==='konsern' && 'Alle interne posteringer (konsern + selskap) er eliminert. Kun eksterne inntekter/kostnader vises.'}
      </div>}
    </div>
  );
}

// ── Per avdeling (med drill-down til kontonivå) ──────────────
function BudPerAvdeling({ data, post, selById, enhById }) {
  const [apen, setApen] = React.useState({});
  const perAvd = {};
  post.forEach(p => { if(!perAvd[p.avd_id]) perAvd[p.avd_id]={egen:0,fordelt:0,sum:0,poster:[]};
    if(p.type==='grunnbudsjett'||p.type==='lonn') perAvd[p.avd_id].egen+=p.belop; else perAvd[p.avd_id].fordelt+=p.belop;
    perAvd[p.avd_id].sum+=p.belop; perAvd[p.avd_id].poster.push(p); });
  const avdListe = data.enheter.filter(e => perAvd[e.id]).sort((a,b)=>(a.avd_nr||'').localeCompare(b.avd_nr||''));
  const kpByKonto = Object.fromEntries(data.kontoplan.map(k=>[k.konto,k]));

  // Drill-down: grupper en avdelings poster per konto
  function kontoLinjer(avdId) {
    const m = {};
    perAvd[avdId].poster.forEach(p => {
      if(!m[p.konto]) m[p.konto] = { konto:p.konto, egen:0, fordelt:0, sum:0, detaljer:[] };
      if(p.type==='grunnbudsjett'||p.type==='lonn') m[p.konto].egen+=p.belop; else m[p.konto].fordelt+=p.belop;
      m[p.konto].sum+=p.belop; m[p.konto].detaljer.push(p);
    });
    return Object.values(m).sort((a,b)=>a.konto-b.konto);
  }

  return (
    <Card padded={false}>
      <table className="ok-table" style={{ width:'100%' }}>
        <thead><tr><th style={{ paddingLeft:20, width:32 }}></th><th>Avd.nr</th><th>Avdeling</th><th>Selskap</th>
          <th style={{ textAlign:'right' }}>Eget budsjett</th><th style={{ textAlign:'right' }}>Fordelt inn/ut</th><th style={{ textAlign:'right', paddingRight:20 }}>Netto</th></tr></thead>
        <tbody>
          {avdListe.map(e => { const r=perAvd[e.id]; const er=apen[e.id]; return (
            <React.Fragment key={e.id}>
              <tr onClick={()=>setApen(a=>({...a,[e.id]:!a[e.id]}))} style={{ cursor:'pointer' }}>
                <td style={{ paddingLeft:20, color:SK.soft }}>{er?'▾':'▸'}</td>
                <td style={{ color:SK.soft }}>{e.avd_nr}</td>
                <td style={{ fontWeight:500 }}>{e.navn}</td>
                <td style={{ fontSize:12, color:SK.soft }}>{selById[e.selskap_id]?.navn?.replace('OsloKollega ','')||'—'}</td>
                <td style={{ textAlign:'right' }}>{window.budFmtKr(r.egen)}</td>
                <td style={{ textAlign:'right', color:r.fordelt<0?SK.success:(r.fordelt>0?'#e08d3c':SK.soft) }}>{r.fordelt?window.budFmtKr(r.fordelt):'—'}</td>
                <td style={{ textAlign:'right', paddingRight:20, fontWeight:600 }}>{window.budFmtKr(r.sum)}</td>
              </tr>
              {er && kontoLinjer(e.id).map(kl => (
                <BudKontoDrill key={e.id+'-'+kl.konto} kl={kl} ko={kpByKonto[kl.konto]} enhById={enhById} />
              ))}
            </React.Fragment>
          ); })}
        </tbody>
      </table>
    </Card>
  );
}

// Drill-down: én konto-rad som kan utvides til posteringsdetaljer
function BudKontoDrill({ kl, ko, enhById }) {
  const [apen, setApen] = React.useState(false);
  return (
    <React.Fragment>
      <tr onClick={()=>setApen(a=>!a)} style={{ cursor:'pointer', background:SK.iceBlueLight }}>
        <td></td>
        <td style={{ color:SK.soft, fontSize:12 }}>{apen?'▾':'▸'} {kl.konto}</td>
        <td colSpan={2} style={{ fontSize:12.5 }}>{ko?.navn || 'Konto '+kl.konto}</td>
        <td style={{ textAlign:'right', fontSize:12.5 }}>{kl.egen?window.budFmtKr(kl.egen):'—'}</td>
        <td style={{ textAlign:'right', fontSize:12.5, color:kl.fordelt<0?SK.success:(kl.fordelt>0?'#e08d3c':SK.soft) }}>{kl.fordelt?window.budFmtKr(kl.fordelt):'—'}</td>
        <td style={{ textAlign:'right', paddingRight:20, fontSize:12.5, fontWeight:500 }}>{window.budFmtKr(kl.sum)}</td>
      </tr>
      {apen && kl.detaljer.map((p,i)=>(
        <tr key={i} style={{ fontSize:12, color:SK.soft }}>
          <td></td><td></td>
          <td colSpan={3} style={{ paddingLeft:8 }}>{p.tekst || p.kilde || p.type}</td>
          <td colSpan={2} style={{ textAlign:'right', paddingRight:20 }}>{window.budFmtKrFull(p.belop)}</td>
        </tr>
      ))}
    </React.Fragment>
  );
}

// ── Eliminering ──────────────────────────────────────────────
function BudEliminering({ data, post, enhById }) {
  const selskapsInt = post.filter(p => p.eliminer_nivaa==='selskap' && !p.motpost);
  const konsernInt  = post.filter(p => p.eliminer_nivaa==='konsern' && !p.motpost);
  const sumSel = selskapsInt.reduce((s,p)=>s+Math.abs(p.belop),0);
  const sumKon = konsernInt.reduce((s,p)=>s+Math.abs(p.belop),0);
  const Seksjon = ({ tittel, forklaring, poster, sum, farge }) => (
    <Card padded>
      <div style={{ display:'flex', justifyContent:'space-between', marginBottom:8 }}>
        <div style={{ fontSize:14, fontWeight:600 }}>{tittel}</div>
        <div style={{ fontSize:14, fontWeight:700, color:farge }}>{window.budFmtKrFull(sum)}</div>
      </div>
      <div style={{ fontSize:12.5, color:SK.soft, marginBottom:12 }}>{forklaring}</div>
      {poster.length===0 ? <div style={{ fontSize:12.5, color:SK.soft, fontStyle:'italic' }}>Ingen posteringer på dette nivået.</div> : (
      <table className="ok-table" style={{ width:'100%', fontSize:12.5 }}>
        <thead><tr><th style={{ paddingLeft:0 }}>Avdeling</th><th>Konto</th><th>Kilde</th><th style={{ textAlign:'right' }}>Beløp</th></tr></thead>
        <tbody>{poster.map((p,i)=>(<tr key={i}><td>{enhById[p.avd_id]?.navn}</td><td style={{ color:SK.soft }}>{p.konto}</td><td style={{ color:SK.soft }}>{p.kilde}</td><td style={{ textAlign:'right' }}>{window.budFmtKrFull(p.belop)}</td></tr>))}</tbody>
      </table>)}
    </Card>
  );
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
      <div style={{ fontSize:13, color:SK.soft, lineHeight:1.6 }}>
        Interne posteringer elimineres i aggregerte oversikter. Klassifiseringen styres av <b>kontomappingen</b> per selskap.
      </div>
      <Seksjon tittel="Selskapsinterne posteringer" farge="#e08d3c" forklaring="Mellom avdelinger i samme selskap. Elimineres på selskapsnivå og oppover." poster={selskapsInt} sum={sumSel} />
      <Seksjon tittel="Konserninterne posteringer" farge="#586ba4" forklaring="Konsernfordeling og viderefakturering på tvers av selskaper. Elimineres på konsernnivå." poster={konsernInt} sum={sumKon} />
    </div>
  );
}

Object.assign(window, { BudsjettWorkspace });