// okonomi-fase1-screens.jsx
// Nye faner: Regnskap (import + visning), Periodekontroll, Prognose
// Lastes etter okonomi.jsx og okonomi-fase1.jsx

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

// ── Hjelpere ─────────────────────────────────────────────────
const okFmt  = n => n == null ? '—' : Math.round(n).toLocaleString('nb-NO');
const okFmtT = n => n == null ? '—' : Math.round(n/1000).toLocaleString('nb-NO');
const periodeLabel = p => {
  const ar = Math.floor(p/100), mnd = p%100;
  return MND_NAVN[mnd-1] + ' ' + ar;
};
const gjeldendePeriode = () => {
  const d = new Date();
  return d.getFullYear()*100 + (d.getMonth()+1);
};

// ══════════════════════════════════════════════════════════════
// REGNSKAP-FANE
// ══════════════════════════════════════════════════════════════
function OkRegnskapFane({ data, enheter, selskaper, onEndret }) {
  const [ar,         setAr]         = React.useState(new Date().getFullYear());
  const [rader,      setRader]      = React.useState([]);
  const [laster,     setLaster]     = React.useState(false);
  const [visImport,  setVisImport]  = React.useState(false);
  const [periodeSum, setPeriodeSum] = React.useState({});

  const lastInn = async () => {
    setLaster(true);
    try {
      const d = await window.okHentRegnskap(ar);
      setRader(d);
      // Summer per periode
      const sum = {};
      d.forEach(r => {
        sum[r.periode] = (sum[r.periode] || 0) + Number(r.belop);
      });
      setPeriodeSum(sum);
    } catch(e) { alert('Feil: '+e.message); }
    setLaster(false);
  };

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

  const perioder = [...new Set(rader.map(r => r.periode))].sort();
  const totBeløp = rader.reduce((s,r) => s + Number(r.belop), 0);

  return (
    <div>
      {/* Header */}
      <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:16 }}>
        <select value={ar} onChange={e=>setAr(Number(e.target.value))}
          style={{ padding:'6px 10px', borderRadius:7, border:'1px solid rgba(17,24,61,.15)', fontFamily:'inherit', fontSize:13 }}>
          {[2024,2025,2026,2027].map(y=><option key={y} value={y}>{y}</option>)}
        </select>
        <div style={{ fontSize:13, color:SK.soft }}>
          {laster ? 'Laster…' : `${rader.length} rader · ${perioder.length} perioder · ${okFmtT(totBeløp)} TNOK`}
        </div>
        <div style={{ marginLeft:'auto', display:'flex', gap:8 }}>
          <Button size="sm" onClick={()=>setVisImport(true)}>↑ Importer CSV</Button>
          <Button size="sm" onClick={lastInn} disabled={laster}>↺ Oppdater</Button>
        </div>
      </div>

      {/* KPI-rader per periode */}
      {perioder.length > 0 && (
        <div style={{ display:'flex', gap:8, flexWrap:'wrap', marginBottom:16 }}>
          {perioder.map(p => (
            <div key={p} style={{ padding:'6px 12px', borderRadius:8, fontSize:12,
              background:SK.pureWhite, border:'1px solid rgba(17,24,61,.08)' }}>
              <div style={{ fontWeight:600, color:SK.ink }}>{periodeLabel(p)}</div>
              <div style={{ color:SK.soft }}>{okFmtT(periodeSum[p])} TNOK</div>
            </div>
          ))}
        </div>
      )}

      {/* Tabell */}
      <Card padded={false}>
        {rader.length === 0 ? (
          <div style={{ padding:'32px', textAlign:'center', color:SK.soft, fontSize:13 }}>
            Ingen regnskapsdata for {ar}.
            <div style={{ marginTop:8 }}>
              <Button onClick={()=>setVisImport(true)}>↑ Importer CSV</Button>
            </div>
          </div>
        ) : (
          <div style={{ overflowX:'auto' }}>
            <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12.5 }}>
              <thead>
                <tr style={{ background:SK.iceBlueLight, borderBottom:'1px solid rgba(17,24,61,.08)' }}>
                  {['Periode','Konto','Avdeling','Prosjekt','Beløp','Kilde','Bilag'].map(h => (
                    <th key={h} style={{ padding:'8px 12px', textAlign:h==='Beløp'?'right':'left',
                      fontSize:11, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {rader.slice(0,500).map(r => (
                  <tr key={r.id} style={{ borderBottom:'1px solid rgba(17,24,61,.04)' }}>
                    <td style={{ padding:'7px 12px', color:SK.soft }}>{periodeLabel(r.periode)}</td>
                    <td style={{ padding:'7px 12px', fontFamily:'monospace', fontSize:12 }}>{r.konto}</td>
                    <td style={{ padding:'7px 12px' }}>{r.avdeling?.navn || '—'}</td>
                    <td style={{ padding:'7px 12px', fontSize:12, color:SK.soft }}>
                      {r.prosjekt?.navn || '—'}
                    </td>
                    <td style={{ padding:'7px 12px', textAlign:'right', fontWeight:500,
                      color: Number(r.belop) < 0 ? SK.success : SK.ink }}>
                      {okFmt(r.belop)} kr
                    </td>
                    <td style={{ padding:'7px 12px' }}>
                      <span style={{ fontSize:10.5, padding:'2px 6px', borderRadius:4,
                        background:'rgba(88,107,164,.1)', color:'#586ba4' }}>{r.kilde}</span>
                    </td>
                    <td style={{ padding:'7px 12px', color:SK.soft, fontSize:11 }}>
                      {r.bilag_url ? (
                        <a href={r.bilag_url} target="_blank" rel="noreferrer"
                          style={{ color:'#586ba4', textDecoration:'none', display:'inline-flex',
                            alignItems:'center', gap:4 }}>
                          {r.bilag_ref || 'Åpne bilag'}
                          <i className="ti ti-external-link" style={{fontSize:11}} aria-hidden="true"/>
                        </a>
                      ) : r.bilag_ref || '—'}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            {rader.length > 500 && (
              <div style={{ padding:'8px 12px', fontSize:12, color:SK.soft }}>
                Viser 500 av {rader.length} rader.
              </div>
            )}
          </div>
        )}
      </Card>

      {/* Import-modal */}
      {visImport && (
        <OkRegnskapImport ar={ar} enheter={enheter} selskaper={selskaper}
          onLukk={()=>setVisImport(false)}
          onImportert={()=>{ setVisImport(false); lastInn(); onEndret?.(); }} />
      )}
    </div>
  );
}

// ── CSV-import modal — samme mønster som budsjettmodulen ──────
function OkRegnskapImport({ ar, enheter, selskaper, onLukk, onImportert }) {
  const [importTekst, setImportTekst] = React.useState('');
  const [forhVisning, setForhVisning] = React.useState(null);
  const [feil,        setFeil]        = React.useState([]);
  const [kilde,       setKilde]       = React.useState('csv');
  const [importerer,  setImporterer]  = React.useState(false);
  const [importStatus,setImportStatus]= React.useState(null);
  const [prosjekter,  setProsjekter]  = React.useState([]);
  const filRef = React.useRef();

  React.useEffect(() => {
    window._sb.from('prosjekter').select('id,navn').eq('aktiv',true).order('navn')
      .then(({data}) => setProsjekter(data||[]));
    window._sb.from('systeminnstillinger').select('verdi').eq('nokkel','bilag_url_template').maybeSingle()
      .then(({data}) => { if (data?.verdi) window._bilagUrlTemplate = data.verdi; });
  }, []);

  const forhansvis = async (tekst) => {
    if (!tekst.trim()) return;
    setFeil([]); setForhVisning(null); setImportStatus(null);
    try {
      const { rader, feil } = await window.okParseRegnskapCsv(tekst, selskaper, enheter, prosjekter);
      setForhVisning(rader);
      setFeil(feil);
    } catch(e) { setFeil([{ rad:0, melding: e.message }]); }
  };

  const importer = async () => {
    if (!forhVisning?.length) return;
    setImporterer(true); setImportStatus(null);
    try {
      const res = await window.okImporterRegnskap(forhVisning, ar, kilde);
      setImportStatus({ type:'ok', melding:'Importerte ' + res.antall + ' rader for ' + res.perioder.length + ' perioder' });
      setTimeout(onImportert, 1400);
    } catch(e) {
      setImportStatus({ type:'feil', melding: e.message });
      setImporterer(false);
    }
  };

  const perioder = forhVisning ? [...new Set(forhVisning.map(r=>r.periode))].sort() : [];

  return (
    <BudModal tittel={'Importer regnskap ' + ar} onLukk={onLukk} bred>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>

        {/* Format-info */}
        <div style={{ padding:'10px 14px', borderRadius:8, background:SK.iceBlueLight,
          fontSize:12.5, lineHeight:1.7 }}>
          <b>Format:</b>{' '}
          <code style={{ fontSize:11.5 }}>konto, avd_nr, selskap_nr, periode, belop, bilag_ref, bilag_url, prosjekt_nr</code>
          <br/>
          <span style={{ color:SK.soft }}>
            Skilletegn: komma, semikolon eller tab &middot; <b>Påkrevd:</b> konto, periode, belop &middot;
            Positiv = kostnad, negativ = inntekt &middot; Eksisterende rader for samme periode/kilde erstattes
          </span>
        </div>

        {/* Kilde + filvelger */}
        <div style={{ display:'flex', gap:12, alignItems:'flex-end' }}>
          <div style={{ flex:1 }}>
            <label style={budLBL}>Kilde</label>
            <select value={kilde} onChange={e=>setKilde(e.target.value)}
              style={{ width:'100%', padding:'6px 8px', borderRadius:7,
                border:'1px solid rgba(17,24,61,.15)', fontFamily:'inherit', fontSize:13 }}>
              <option value="csv">CSV-eksport (Finago / annet)</option>
              <option value="manuell">Manuell registrering</option>
              <option value="justering">Periodejustering</option>
            </select>
          </div>
          <div>
            <Button size="sm" onClick={()=>filRef.current?.click()}>
              ↑ Velg CSV-fil
            </Button>
            <input ref={filRef} type="file" accept=".csv,.tsv,text/csv"
              style={{ display:'none' }}
              onChange={async e => {
                const fil = e.target.files[0]; if (!fil) return;
                const tekst = await fil.text();
                setImportTekst(tekst);
                forhansvis(tekst);
              }} />
          </div>
        </div>

        {/* Lim inn */}
        <div>
          <label style={budLBL}>— eller lim inn CSV-innhold —</label>
          <textarea value={importTekst}
            onChange={e => { setImportTekst(e.target.value); setForhVisning(null); setFeil([]); setImportStatus(null); }}
            rows={6}
            style={{ width:'100%', padding:'8px', borderRadius:7, fontFamily:'monospace',
              fontSize:12, border:'1px solid rgba(17,24,61,.15)', boxSizing:'border-box', resize:'vertical' }}
            placeholder={"konto,avd_nr,selskap_nr,periode,belop,bilag_ref,prosjekt_nr\n5010,150,okb,202601,-125000,BIL-001,NAV-2026"} />
        </div>

        {/* Feilmeldinger fra parsing */}
        {feil.length > 0 && (
          <div style={{ padding:'10px 14px', borderRadius:8, background:'rgba(242,84,92,.06)',
            border:'1px solid rgba(242,84,92,.2)', maxHeight:100, overflowY:'auto' }}>
            {feil.slice(0,8).map((f,i) => (
              <div key={i} style={{ fontSize:12, color:SK.coral }}>Rad {f.rad}: {f.melding}</div>
            ))}
            {feil.length > 8 && <div style={{ fontSize:11, color:SK.soft }}>+ {feil.length-8} fler</div>}
          </div>
        )}

        {/* Forhåndsvisning */}
        {forhVisning && (
          <div style={{ borderRadius:8, border:'1px solid rgba(17,24,61,.1)', overflow:'hidden' }}>
            {/* Oppsummering */}
            <div style={{ padding:'10px 14px', background:SK.iceBlueLight,
              display:'flex', gap:16, flexWrap:'wrap', fontSize:12.5 }}>
              <b style={{ color:'#1b6a2e' }}>✓ {forhVisning.length} rader klare</b>
              <span style={{ color:SK.soft }}>
                Perioder: {perioder.map(p=>periodeLabel(p)).join(', ')}
              </span>
              {forhVisning.filter(r=>r.prosjekt_id).length > 0 &&
                <span style={{ color:'#586ba4' }}>{forhVisning.filter(r=>r.prosjekt_id).length} med prosjekt</span>}
              {forhVisning.filter(r=>r.bilag_url).length > 0 &&
                <span style={{ color:'#586ba4' }}>{forhVisning.filter(r=>r.bilag_url).length} med bilag-lenke</span>}
              {feil.length > 0 &&
                <span style={{ color:SK.coral }}>{feil.length} rader med feil utelatt</span>}
              {forhVisning.filter(r=>!r.avdeling_id).length > 0 &&
                <span style={{ color:'#e08d3c' }}>⚠ {forhVisning.filter(r=>!r.avdeling_id).length} uten avdeling</span>}
            </div>
            {/* Tabell: første 8 rader */}
            <div style={{ overflowX:'auto' }}>
              <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12 }}>
                <thead>
                  <tr style={{ borderBottom:'1px solid rgba(17,24,61,.08)' }}>
                    {['Konto','Avdeling','Selskap','Periode','Beløp','Bilag','Prosjekt'].map(h=>(
                      <th key={h} style={{ padding:'6px 10px', textAlign:h==='Beløp'?'right':'left',
                        fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {forhVisning.slice(0,8).map((r,i)=>(
                    <tr key={i} style={{ borderBottom:'1px solid rgba(17,24,61,.04)' }}>
                      <td style={{ padding:'5px 10px', fontFamily:'monospace', fontSize:11.5 }}>{r.konto}</td>
                      <td style={{ padding:'5px 10px' }}>
                        {enheter.find(e=>e.id===r.avdeling_id)?.navn ||
                          <span style={{color:SK.coral,fontSize:11}}>Mangler</span>}
                      </td>
                      <td style={{ padding:'5px 10px', fontSize:11, color:SK.soft }}>
                        {selskaper.find(s=>s.id===r.selskap_id)?.navn||'—'}
                      </td>
                      <td style={{ padding:'5px 10px', color:SK.soft }}>{periodeLabel(r.periode)}</td>
                      <td style={{ padding:'5px 10px', textAlign:'right',
                        color:r.belop<0?'#1b6a2e':SK.ink, fontWeight:500 }}>
                        {Math.round(r.belop).toLocaleString('nb-NO')}
                      </td>
                      <td style={{ padding:'5px 10px', fontSize:11 }}>
                        {r.bilag_url
                          ? <a href={r.bilag_url} target="_blank" rel="noreferrer"
                              style={{color:'#586ba4',textDecoration:'none'}}>
                              {r.bilag_ref||'Lenke'} ↗
                            </a>
                          : <span style={{color:SK.soft}}>{r.bilag_ref||'—'}</span>}
                      </td>
                      <td style={{ padding:'5px 10px', fontSize:11, color:'#586ba4' }}>
                        {prosjekter.find(p=>p.id===r.prosjekt_id)?.navn||'—'}
                      </td>
                    </tr>
                  ))}
                  {forhVisning.length > 8 && (
                    <tr><td colSpan={7} style={{ padding:'6px 10px', fontSize:11,
                      color:SK.soft, textAlign:'center' }}>
                      … og {forhVisning.length-8} rader til
                    </td></tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* Import-status */}
        {importStatus && (
          <div style={{ padding:'10px 14px', borderRadius:8, fontSize:13, fontWeight:600,
            background: importStatus.type==='ok'?'rgba(27,106,46,.08)':'rgba(242,84,92,.08)',
            color: importStatus.type==='ok'?'#1b6a2e':SK.coral }}>
            {importStatus.melding}
          </div>
        )}

        {/* Knapper */}
        <div style={{ display:'flex', gap:10 }}>
          {!forhVisning
            ? <Button variant="primary"
                onClick={()=>forhansvis(importTekst)}
                disabled={!importTekst.trim()||importerer}>
                Forhåndsvis
              </Button>
            : <>
                <Button variant="primary" onClick={importer}
                  disabled={importerer||!forhVisning.length}>
                  {importerer ? 'Importerer…' : 'Importer ' + forhVisning.length + ' rader'}
                </Button>
                <Button onClick={()=>{setForhVisning(null);setImportStatus(null);}}>
                  Endre
                </Button>
              </>
          }
          <Button onClick={onLukk}>Avbryt</Button>
        </div>

      </div>
    </BudModal>
  );
}

// ══════════════════════════════════════════════════════════════
// PERIODEKONTROLL-FANE
// ══════════════════════════════════════════════════════════════
function OkPeriodeKontrollFane({ selskaper }) {
  const [ar,       setAr]       = React.useState(new Date().getFullYear());
  const [statuser, setStatuser] = React.useState([]);
  const [laster,   setLaster]   = React.useState(false);

  const lastInn = async () => {
    setLaster(true);
    try {
      const d = await window.okHentPeriodeStatus(ar);
      setStatuser(d);
    } catch(e) { alert('Feil: '+e.message); }
    setLaster(false);
  };

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

  const statusForPeriode = (selskapId, mnd) => {
    const periode = ar*100 + mnd;
    return statuser.find(s => s.selskap_id===selskapId && s.periode===periode);
  };

  const settStatus = async (selskapId, mnd, nyStatus) => {
    const periode = ar*100 + mnd;
    try {
      await window.okSettPeriodeStatus(selskapId, ar, periode, nyStatus);
      await lastInn();
    } catch(e) { alert('Feil: '+e.message); }
  };

  const STATUS_CFG = {
    apen:            { label:'Åpen',           farge:'#1b6a2e', bg:'rgba(27,106,46,.08)' },
    under_revisjon:  { label:'Under revisjon', farge:'#e08d3c', bg:'rgba(224,141,60,.08)' },
    lukket:          { label:'Lukket',         farge:SK.soft,   bg:SK.iceBlueLight },
  };

  const naMnd = new Date().getMonth()+1;

  return (
    <div>
      <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:16 }}>
        <select value={ar} onChange={e=>setAr(Number(e.target.value))}
          style={{ padding:'6px 10px', borderRadius:7, border:'1px solid rgba(17,24,61,.15)',
            fontFamily:'inherit', fontSize:13 }}>
          {[2024,2025,2026,2027].map(y=><option key={y} value={y}>{y}</option>)}
        </select>
        <div style={{ fontSize:12.5, color:SK.soft }}>
          Klikk status for å endre. Lukkede perioder inngår som regnskap i prognosen.
        </div>
      </div>

      <Card padded={false}>
        <div style={{ overflowX:'auto' }}>
          <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12.5 }}>
            <thead>
              <tr style={{ background:SK.iceBlueLight, borderBottom:'1px solid rgba(17,24,61,.08)' }}>
                <th style={{ padding:'8px 16px', textAlign:'left', fontSize:11, fontWeight:700,
                  color:SK.soft, textTransform:'uppercase', minWidth:140 }}>Selskap</th>
                {MND_NAVN.map((m,i) => (
                  <th key={i} style={{ padding:'8px 10px', textAlign:'center', fontSize:11,
                    fontWeight: i+1===naMnd ? 700 : 400,
                    color: i+1===naMnd ? SK.ink : SK.soft,
                    textTransform:'uppercase', minWidth:64 }}>{m}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {(selskaper||[]).map(s => (
                <tr key={s.id} style={{ borderBottom:'1px solid rgba(17,24,61,.05)' }}>
                  <td style={{ padding:'8px 16px', fontWeight:500 }}>{s.navn}</td>
                  {MND_NAVN.map((_,i) => {
                    const mnd = i+1;
                    const st  = statusForPeriode(s.id, mnd);
                    const cfg = STATUS_CFG[st?.status||'apen'];
                    const fremtidig = ar > new Date().getFullYear() ||
                      (ar === new Date().getFullYear() && mnd > naMnd);
                    return (
                      <td key={i} style={{ padding:'6px 8px', textAlign:'center' }}>
                        {fremtidig ? (
                          <span style={{ fontSize:10.5, color:'rgba(17,24,61,.2)' }}>—</span>
                        ) : (
                          <select value={st?.status||'apen'}
                            onChange={e=>settStatus(s.id, mnd, e.target.value)}
                            disabled={laster}
                            style={{ fontSize:10.5, padding:'2px 4px', borderRadius:5,
                              border:`1px solid ${cfg.farge}40`,
                              background:cfg.bg, color:cfg.farge,
                              fontFamily:'inherit', cursor:'pointer', fontWeight:600 }}>
                            <option value="apen">Åpen</option>
                            <option value="under_revisjon">Revisjon</option>
                            <option value="lukket">Lukket</option>
                          </select>
                        )}
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// PROGNOSE-FANE
// ══════════════════════════════════════════════════════════════
function OkPrognoseFane({ budVersjoner, enheter, data }) {
  const [valgtVersjonId, setValgtVersjonId] = React.useState('');
  const [prognoseId,     setPrognoseId]     = React.useState(null);
  const [prognoseRader,  setPrognoseRader]  = React.useState([]);
  const [valgtAvd,       setValgtAvd]       = React.useState('');
  const [laster,         setLaster]         = React.useState(false);
  const [visJuster,      setVisJuster]      = React.useState(null); // {avd,konto,periode}

  const ar = budVersjoner?.find(v=>v.id===valgtVersjonId)?.ar || new Date().getFullYear();

  // Opprett eller hent prognose for valgt versjon
  React.useEffect(() => {
    if (!valgtVersjonId) return;
    setLaster(true);
    window.okHentPrognoser(ar).then(async prognoser => {
      let prog = prognoser.find(p => p.bud_versjon_id === valgtVersjonId);
      if (!prog) {
        prog = await window.okOpprettPrognose(valgtVersjonId, ar);
      }
      setPrognoseId(prog.id);
    }).catch(e => alert('Feil: '+e.message))
    .finally(() => setLaster(false));
  }, [valgtVersjonId]);

  // Hent beregnede prognose-tall
  React.useEffect(() => {
    if (!prognoseId) return;
    setLaster(true);
    window.okBeregnPrognose(prognoseId, valgtAvd||null)
      .then(setPrognoseRader)
      .catch(e => alert('Feil: '+e.message))
      .finally(() => setLaster(false));
  }, [prognoseId, valgtAvd]);

  // Grupper per konto
  const kontoer = [...new Set(prognoseRader.map(r=>r.konto))].sort((a,b)=>a-b);
  const radByKontoPeriode = {};
  prognoseRader.forEach(r => {
    const key = `${r.konto}_${r.avdeling_id}_${r.periode}`;
    radByKontoPeriode[key] = r;
  });

  // Perioder for dette året
  const perioder = Array.from({length:12},(_,i)=>ar*100+i+1);
  const gjeldendeMnd = gjeldendePeriode();

  return (
    <div>
      {/* Kontroller */}
      <div style={{ display:'flex', gap:12, alignItems:'center', marginBottom:16, flexWrap:'wrap' }}>
        <select value={valgtVersjonId} onChange={e=>setValgtVersjonId(e.target.value)}
          style={{ padding:'6px 10px', borderRadius:7, border:'1px solid rgba(17,24,61,.15)',
            fontFamily:'inherit', fontSize:13 }}>
          <option value="">— Velg budsjettversjon —</option>
          {(budVersjoner||[]).map(v=>(
            <option key={v.id} value={v.id}>{v.navn} ({v.ar})</option>
          ))}
        </select>

        <select value={valgtAvd} onChange={e=>setValgtAvd(e.target.value)}
          style={{ padding:'6px 10px', borderRadius:7, border:'1px solid rgba(17,24,61,.15)',
            fontFamily:'inherit', fontSize:13 }}>
          <option value="">Alle avdelinger</option>
          {(enheter||[]).map(e=>(
            <option key={e.id} value={e.id}>{e.avd_nr} {e.navn}</option>
          ))}
        </select>

        {laster && <span style={{ fontSize:12.5, color:SK.soft }}>Beregner…</span>}
      </div>

      {!valgtVersjonId ? (
        <Card padded>
          <div style={{ textAlign:'center', color:SK.soft, fontSize:13, padding:'20px 0' }}>
            Velg en budsjettversjon for å se og redigere prognosen.
          </div>
        </Card>
      ) : (
        <>
          {/* Info */}
          <div style={{ marginBottom:12, padding:'8px 14px', borderRadius:8, fontSize:12.5,
            background:SK.iceBlueLight, color:SK.soft }}>
            <b style={{color:SK.ink}}>Prognose-logikk:</b> Lukkede perioder viser regnskap.
            Fremtidige perioder viser budsjett + justeringer. Klikk en celle for å justere.
          </div>

          {/* Matrise */}
          <Card padded={false}>
            <div style={{ overflowX:'auto' }}>
              <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12 }}>
                <thead>
                  <tr style={{ background:SK.iceBlueLight, borderBottom:'1px solid rgba(17,24,61,.08)' }}>
                    <th style={{ padding:'8px 12px', textAlign:'left', fontSize:11, fontWeight:700,
                      color:SK.soft, textTransform:'uppercase', minWidth:80, position:'sticky',left:0,background:SK.iceBlueLight }}>Konto</th>
                    {perioder.map(p => (
                      <th key={p} style={{ padding:'8px 8px', textAlign:'right', fontSize:10.5,
                        fontWeight: p===gjeldendeMnd ? 700 : 400,
                        color: p===gjeldendeMnd ? SK.ink : SK.soft,
                        minWidth:76, whiteSpace:'nowrap' }}>
                        {MND_NAVN[(p%100)-1]}
                        {p < gjeldendeMnd && <span style={{ fontSize:9, marginLeft:3, color:'#1b6a2e' }}>R</span>}
                        {p > gjeldendeMnd && <span style={{ fontSize:9, marginLeft:3, color:'#e08d3c' }}>P</span>}
                      </th>
                    ))}
                    <th style={{ padding:'8px 12px', textAlign:'right', fontSize:11,
                      fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>Sum</th>
                  </tr>
                </thead>
                <tbody>
                  {kontoer.length === 0 && (
                    <tr><td colSpan={14} style={{ padding:'24px', textAlign:'center', color:SK.soft }}>
                      Ingen data. Synkroniser budsjettmodulene til budsjett først.
                    </td></tr>
                  )}
                  {kontoer.map(konto => {
                    const avdRader = prognoseRader.filter(r=>r.konto===konto);
                    const avdIds = [...new Set(avdRader.map(r=>r.avdeling_id))];
                    return avdIds.map(avdId => {
                      const avdNavn = enheter?.find(e=>e.id===avdId)?.navn || '—';
                      const mndVerdier = perioder.map(p => {
                        const r = prognoseRader.find(x=>x.konto===konto&&x.avdeling_id===avdId&&x.periode===p);
                        return r;
                      });
                      const sum = mndVerdier.reduce((s,r) => s + Number(r?.belop_prognose||0), 0);
                      return (
                        <tr key={`${konto}_${avdId}`}
                          style={{ borderBottom:'1px solid rgba(17,24,61,.04)' }}>
                          <td style={{ padding:'7px 12px', position:'sticky', left:0,
                            background:SK.pureWhite, borderRight:'1px solid rgba(17,24,61,.06)' }}>
                            <div style={{ fontSize:12, fontFamily:'monospace' }}>{konto}</div>
                            <div style={{ fontSize:11, color:SK.soft }}>{avdNavn}</div>
                          </td>
                          {mndVerdier.map((r, i) => {
                            const p    = perioder[i];
                            const lukk = r?.er_lukket;
                            const val  = r?.belop_prognose;
                            const harJust = r?.kilde === 'manuell' || r?.kilde === 'flytt';
                            return (
                              <td key={p}
                                onClick={() => !lukk && setVisJuster({avdId,konto,periode:p,prognoseId,rad:r})}
                                style={{ padding:'7px 8px', textAlign:'right',
                                  cursor: lukk ? 'default' : 'pointer',
                                  background: lukk ? 'rgba(17,24,61,.02)'
                                            : harJust ? 'rgba(224,141,60,.06)'
                                            : 'transparent',
                                  color: lukk ? SK.soft : SK.ink,
                                  fontWeight: harJust ? 600 : 400,
                                }}>
                                {val != null ? okFmtT(val) : '—'}
                              </td>
                            );
                          })}
                          <td style={{ padding:'7px 12px', textAlign:'right', fontWeight:700 }}>
                            {okFmtT(sum)}
                          </td>
                        </tr>
                      );
                    });
                  })}
                </tbody>
              </table>
            </div>
            <div style={{ padding:'8px 12px', fontSize:11, color:SK.soft,
              borderTop:'1px solid rgba(17,24,61,.06)' }}>
              R = Regnskap (lukket) · P = Prognose · Orange bakgrunn = manuelt justert
            </div>
          </Card>
        </>
      )}

      {/* Juster-modal */}
      {visJuster && (
        <OkJusterModal {...visJuster}
          enheter={enheter}
          onLukk={()=>setVisJuster(null)}
          onLagret={async()=>{
            setVisJuster(null);
            const d = await window.okBeregnPrognose(prognoseId, valgtAvd||null);
            setPrognoseRader(d);
          }} />
      )}
    </div>
  );
}

// ── Juster-modal ──────────────────────────────────────────────
function OkJusterModal({ avdId, konto, periode, prognoseId, rad, enheter, onLukk, onLagret }) {
  const [modus,      setModus]      = React.useState('justering'); // 'override' | 'justering' | 'flytt'
  const [verdi,      setVerdi]      = React.useState('');
  const [kommentar,  setKommentar]  = React.useState(rad?.kommentar||'');
  const [tilAvd,     setTilAvd]     = React.useState('');
  const [tilPeriode, setTilPeriode] = React.useState('');
  const [laster,     setLaster]     = React.useState(false);

  const avdNavn = enheter?.find(e=>e.id===avdId)?.navn || avdId;
  const ar = Math.floor(periode/100);

  const lagre = async () => {
    setLaster(true);
    try {
      if (modus === 'flytt') {
        if (!tilAvd && !tilPeriode) throw new Error('Velg destinasjon for flytt');
        await window.okRegistrerFlytt(prognoseId, {
          konto, fraAvdelingId: avdId, tilAvdelingId: tilAvd||avdId,
          fraPeriode: periode, tilPeriode: Number(tilPeriode)||periode,
          belop: Number(verdi), begrunnelse: kommentar,
        });
      } else {
        const felt = {
          kommentar,
          kilde: 'manuell',
          ...(modus === 'override'
            ? { belop_override: verdi !== '' ? Number(verdi) : null, belop_justering: null }
            : { belop_justering: verdi !== '' ? Number(verdi) : null, belop_override: null }),
        };
        await window.okLagrePrognoseLinje(prognoseId, avdId, konto, periode, felt);
      }
      onLagret();
    } catch(e) { alert('Feil: '+e.message); setLaster(false); }
  };

  const periodeLabel2 = (ar, mnd) => MND_NAVN[mnd-1] + ' ' + ar;
  const allePerioder = Array.from({length:12},(_,i)=>ar*100+i+1).filter(p=>p!==periode);

  return (
    <BudModal tittel={`Juster prognose — konto ${konto}`} onLukk={onLukk}>
      <div style={{ fontSize:12.5, color:SK.soft, marginBottom:14 }}>
        {avdNavn} · {periodeLabel(periode)}
        {rad?.belop_budsjett != null && (
          <> · Budsjett: <b style={{color:SK.ink}}>{okFmt(rad.belop_budsjett)} kr</b></>
        )}
        {rad?.belop_regnskap != null && (
          <> · Regnskap: <b style={{color:SK.ink}}>{okFmt(rad.belop_regnskap)} kr</b></>
        )}
      </div>

      {/* Modus-velger */}
      <div style={{ display:'flex', gap:6, marginBottom:14 }}>
        {[
          ['justering', 'Juster (delta)'],
          ['override',  'Sett fast verdi'],
          ['flytt',     'Flytt til annen mnd/avd'],
        ].map(([id, label]) => (
          <button key={id} onClick={()=>setModus(id)}
            style={{ padding:'5px 12px', borderRadius:6, fontSize:12, fontWeight:600,
              border:`1px solid ${modus===id?SK.ink:'rgba(17,24,61,.15)'}`,
              background: modus===id ? SK.ink : 'transparent',
              color: modus===id ? '#fff' : SK.soft,
              cursor:'pointer', fontFamily:'inherit' }}>
            {label}
          </button>
        ))}
      </div>

      <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
        <div>
          <label style={budLBL}>
            {modus==='justering' ? 'Delta (kr) — positiv = øk, negativ = reduser'
            : modus==='override' ? 'Fast verdi (kr)'
            : 'Beløp som flyttes (kr)'}
          </label>
          <input type="number" value={verdi} onChange={e=>setVerdi(e.target.value)}
            style={{ width:'100%', padding:'6px 8px', borderRadius:7, boxSizing:'border-box',
              border:'1px solid rgba(17,24,61,.15)', fontFamily:'inherit', fontSize:13 }}
            placeholder={modus==='justering'?'0':''} />
        </div>

        {modus==='flytt' && (
          <>
            <div>
              <label style={budLBL}>Til avdeling</label>
              <select value={tilAvd} onChange={e=>setTilAvd(e.target.value)}
                style={{ width:'100%', padding:'6px 8px', borderRadius:7,
                  border:'1px solid rgba(17,24,61,.15)', fontFamily:'inherit', fontSize:13 }}>
                <option value="">— Samme avdeling —</option>
                {(enheter||[]).map(e=>(
                  <option key={e.id} value={e.id}>{e.avd_nr} {e.navn}</option>
                ))}
              </select>
            </div>
            <div>
              <label style={budLBL}>Til periode</label>
              <select value={tilPeriode} onChange={e=>setTilPeriode(e.target.value)}
                style={{ width:'100%', padding:'6px 8px', borderRadius:7,
                  border:'1px solid rgba(17,24,61,.15)', fontFamily:'inherit', fontSize:13 }}>
                <option value="">— Samme periode —</option>
                {allePerioder.map(p=>(
                  <option key={p} value={p}>{periodeLabel(p)}</option>
                ))}
              </select>
            </div>
          </>
        )}

        {modus==='override' && (
          <div style={{ fontSize:12, color:SK.soft, padding:'6px 10px', borderRadius:6,
            background:SK.iceBlueLight }}>
            Fast verdi erstatter budsjett helt for denne måneden.
            Sett blank for å gå tilbake til budsjett.
          </div>
        )}

        <div>
          <label style={budLBL}>Kommentar (valgfritt)</label>
          <input value={kommentar} onChange={e=>setKommentar(e.target.value)}
            style={{ width:'100%', padding:'6px 8px', borderRadius:7, boxSizing:'border-box',
              border:'1px solid rgba(17,24,61,.15)', fontFamily:'inherit', fontSize:13 }}
            placeholder="Begrunnelse for endringen…" />
        </div>

        <div style={{ display:'flex', gap:10, marginTop:4 }}>
          <Button variant="primary" onClick={lagre} disabled={laster}>
            {laster?'Lagrer…':'Lagre'}
          </Button>
          {rad?.id && modus!=='flytt' && (
            <Button onClick={async()=>{
              await window.okSlettPrognoseLinje(rad.id); onLagret();
            }}>Tilbakestill til budsjett</Button>
          )}
          <Button onClick={onLukk}>Avbryt</Button>
        </div>
      </div>
    </BudModal>
  );
}

// ══════════════════════════════════════════════════════════════
// KOBLING TIL OkonomiWorkspace
// Legger til faner: Regnskap, Periode, Prognose
// ══════════════════════════════════════════════════════════════

function OkonomiWorkspace({ go }) {
  const [laster,    setLaster]   = React.useState(true);
  const [feil,      setFeil]     = React.useState(null);
  const [tab,       setTab]      = React.useState('oversikt');
  const [enheter,   setEnheter]  = React.useState([]);
  const [selskaper, setSelskaper]= React.useState([]);
  const [budVers,   setBudVers]  = React.useState([]);
  const [flytt,     setFlytt]    = React.useState({ open:false });
  const [rolle,     setRolle]    = React.useState('daglig-leder');
  const [, force]                = React.useState(0);
  const onEndret                 = () => force(n=>n+1);

  React.useEffect(() => {
    Promise.all([
      window._sb.from('enheter').select('id,navn,avd_nr,type').eq('aktiv',true).order('sortering'),
      window._sb.from('selskaper').select('id,navn').order('navn'),
      window._sb.from('bud_versjoner').select('id,navn,ar,status').order('ar',{ascending:false}),
    ]).then(([e,s,b]) => {
      setEnheter(e.data||[]);
      setSelskaper(s.data||[]);
      setBudVers(b.data||[]);
      setLaster(false);
    }).catch(err => { setFeil(err.message); setLaster(false); });
  }, []);

  if (laster) return <div style={{padding:40,textAlign:'center',color:SK.soft}}>Laster…</div>;
  if (feil)   return <div style={{padding:40,color:SK.coral}}>Feil: {feil}</div>;

  const TABS = [
    { id:'oversikt',  label:'Oversikt' },
    { id:'regnskap',  label:'Regnskap' },
    { id:'prognose',  label:'Prognose' },
    { id:'periode',   label:'Periodekontroll' },
    { id:'konsern',   label:'Konsernregnskap' },
    { id:'flytting',  label:'Kostnadsflytting' },
    { id:'rapporter', label:'Rapporter' },
  ];

  return (
    <div className="ok-content__inner">
      <div style={{ display:'flex', gap:0, borderBottom:'1px solid rgba(17,24,61,.08)',
        marginBottom:20, overflowX:'auto' }}>
        {TABS.map(t => (
          <button key={t.id} onClick={()=>setTab(t.id)}
            style={{ padding:'10px 18px', border:'none',
              borderBottom:`2px solid ${tab===t.id?SK.ink:'transparent'}`,
              background:'transparent', color:tab===t.id?SK.ink:SK.soft,
              fontWeight:tab===t.id?600:400, fontSize:13.5,
              cursor:'pointer', fontFamily:'inherit', whiteSpace:'nowrap' }}>
            {t.label}
          </button>
        ))}
      </div>

      {tab==='regnskap'  && <OkRegnskapFane enheter={enheter} selskaper={selskaper} onEndret={onEndret} />}
      {tab==='prognose'  && <OkPrognoseFane budVersjoner={budVers} enheter={enheter} />}
      {tab==='periode'   && <OkPeriodeKontrollFane selskaper={selskaper} />}
      {tab==='oversikt'  && (window.TabOversikt
        ? <window.TabOversikt rolle={rolle} goTab={setTab} />
        : <window.FinagoBanner />)}
      {tab==='konsern'   && (window.TabKonsern
        ? <window.TabKonsern />
        : <div style={{padding:24,color:SK.soft}}>Konsernregnskap — under utvikling</div>)}
      {tab==='flytting'  && (window.TabFlytting
        ? <window.TabFlytting setFlytt={setFlytt} rolle={rolle} />
        : <div style={{padding:24,color:SK.soft}}>Kostnadsflytting — under utvikling</div>)}
      {tab==='rapporter' && (window.TabRapporter
        ? <window.TabRapporter rolle={rolle} />
        : <div style={{padding:24,color:SK.soft}}>Rapporter — under utvikling</div>)}

      {flytt.open && window.NyFlyttingModal &&
        <window.NyFlyttingModal open={flytt.open} onClose={()=>setFlytt({open:false})} prefyll={flytt.prefyll||{}} />}
    </div>
  );
}

Object.assign(window, { OkonomiWorkspace });