// styrerapport.jsx — Konfigurerbar styrerapport (resultatregnskap)
// Henter mal + linjer + verdier fra Supabase, rendrer i styrerapport-format.
// Eksporterer Styrerapport til window (brukes i økonomi-modulens Rapporter-fane).

async function SR_hentMal() {
  const { data: maler } = await window._sb.from('ok_rapportmaler')
    .select('*').eq('er_standard', true).limit(1);
  const mal = maler && maler[0];
  if (!mal) return null;
  const [{ data: linjer }, { data: verdier }] = await Promise.all([
    window._sb.from('ok_rapportlinjer').select('*').eq('mal_id', mal.id).order('rekkefolge'),
    window._sb.from('ok_rapportverdier').select('*'),
  ]);
  // Knytt verdier til linjer
  const verdiMap = {};
  (verdier || []).forEach(v => {
    if (!verdiMap[v.linje_id]) verdiMap[v.linje_id] = {};
    verdiMap[v.linje_id][v.kolonne] = Number(v.verdi);
  });
  return {
    mal,
    linjer: (linjer || []).map(l => ({ ...l, verdier: verdiMap[l.id] || {} })),
  };
}

async function SR_lagreVerdi(linjeId, kolonne, verdi, periode) {
  await window._sb.from('ok_rapportverdier').upsert(
    { linje_id: linjeId, kolonne, verdi, periode: periode || '2026-01' },
    { onConflict: 'linje_id,kolonne,periode' }
  );
}

async function SR_lagreKolonner(malId, kolonner) {
  await window._sb.from('ok_rapportmaler').update({ kolonner, updated_at: new Date().toISOString() }).eq('id', malId);
}

// Format: tall i hele tusen
const SR_fmt = (v) => {
  if (v === null || v === undefined) return '';
  const n = Math.round(v);
  const s = new Intl.NumberFormat('nb-NO').format(Math.abs(n));
  return n < 0 ? `(${s})` : s;
};

function Styrerapport() {
  const [data,    setData]    = React.useState(null);
  const [laster,  setLaster]  = React.useState(true);
  const [feil,    setFeil]    = React.useState(null);
  const [redigerMode, setRedigerMode] = React.useState(false);
  const [synligeKol, setSynligeKol]   = React.useState(null);
  const [redigerVerdi, setRedigerVerdi] = React.useState(null); // {linjeId, kolonne}

  React.useEffect(() => {
    SR_hentMal()
      .then(d => {
        setData(d);
        if (d) setSynligeKol(d.mal.kolonner.map(k => k.nokkel));
      })
      .catch(e => setFeil(e.message))
      .finally(() => setLaster(false));
  }, []);

  if (laster) return <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Laster styrerapport…</div>;
  if (feil)   return <div style={{ background:'#fcddde', borderRadius:8, padding:'12px 16px', fontSize:13, color:'#8a1620' }}>
    Kunne ikke laste rapporten: {feil}<div style={{ marginTop:6, color:SK.soft }}>Har du kjørt <code>supabase-styrerapport.sql</code> og <code>supabase-styrerapport-seed.sql</code>?</div>
  </div>;
  if (!data) return <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>
    Ingen rapportmal funnet. Kjør <code>supabase-styrerapport.sql</code>.
  </div>;

  const { mal, linjer } = data;
  const kolonner = mal.kolonner.filter(k => !synligeKol || synligeKol.includes(k.nokkel));

  const toggleKol = (nokkel) => {
    setSynligeKol(prev => prev.includes(nokkel) ? prev.filter(k => k !== nokkel) : [...prev, nokkel]);
  };

  const lagreVerdi = async (linjeId, kolonne, raw) => {
    const verdi = parseFloat(String(raw).replace(/\s/g,'').replace(',','.')) || 0;
    await SR_lagreVerdi(linjeId, kolonne, verdi, '2026-01');
    setData(prev => ({
      ...prev,
      linjer: prev.linjer.map(l => l.id === linjeId ? { ...l, verdier: { ...l.verdier, [kolonne]: verdi } } : l),
    }));
    setRedigerVerdi(null);
  };

  const seksjoner = [...new Set(linjer.map(l => l.seksjon))];
  const seksjonNavn = { drift: 'Resultatregnskap', spesifikasjon: 'Spesifikasjon resultat (per avdeling)' };

  return (
    <div>
      {/* Verktøylinje */}
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:16, flexWrap:'wrap', gap:10 }}>
        <div>
          <div style={{ fontSize:16, fontWeight:600 }}>{mal.navn}</div>
          <div style={{ fontSize:12, color:SK.soft }}>Tall i hele tusen · periode januar 2026</div>
        </div>
        <div style={{ display:'flex', gap:8 }}>
          <Button size="sm" variant={redigerMode?'primary':'ghost'} onClick={() => setRedigerMode(m => !m)}>
            {redigerMode ? 'Ferdig' : 'Endre oppsett'}
          </Button>
        </div>
      </div>

      {/* Kolonne-velger (vis/skjul) når i redigeringsmodus */}
      {redigerMode && (
        <div style={{ background:SK.iceBlueLight, borderRadius:10, padding:'12px 14px', marginBottom:16 }}>
          <div style={{ fontSize:12, fontWeight:600, marginBottom:8 }}>Vis kolonner</div>
          <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
            {mal.kolonner.map(k => (
              <button key={k.nokkel} onClick={() => toggleKol(k.nokkel)} className="ok-btn ok-btn--sm" style={{
                background: synligeKol.includes(k.nokkel) ? SK.ink : 'transparent',
                color: synligeKol.includes(k.nokkel) ? '#fff' : SK.ink,
                borderColor: synligeKol.includes(k.nokkel) ? SK.ink : 'rgba(17,24,61,.15)',
              }}>{k.label}</button>
            ))}
          </div>
          <div style={{ fontSize:11.5, color:SK.soft, marginTop:10 }}>
            Klikk en tallcelle i tabellen for å redigere verdien. Endringer lagres automatisk.
          </div>
        </div>
      )}

      {/* Rapporttabell per seksjon */}
      {seksjoner.map(seksjon => (
        <div key={seksjon} style={{ marginBottom:24 }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:0.06, textTransform:'uppercase', color:SK.soft, marginBottom:8 }}>
            {seksjonNavn[seksjon] || seksjon}
          </div>
          <Card padded={false}>
            <div style={{ overflowX:'auto' }}>
              <table className="ok-table" style={{ fontVariantNumeric:'tabular-nums', minWidth:680 }}>
                <thead>
                  <tr>
                    <th style={{ paddingLeft:18, position:'sticky', left:0, background:'#fff', minWidth:200 }}>Linje</th>
                    {kolonner.map(k => (
                      <th key={k.nokkel} style={{ textAlign:'right', whiteSpace:'nowrap', fontSize:11 }}>{k.kort || k.label}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {linjer.filter(l => l.seksjon === seksjon).map(l => {
                    const erSum = l.type === 'sum';
                    return (
                      <tr key={l.id} style={{ background: erSum ? SK.iceBlueLight+'55' : 'transparent' }}>
                        <td style={{ paddingLeft:18 + (l.innrykk||0)*14, position:'sticky', left:0,
                          background: erSum ? '#eef2fa' : '#fff',
                          fontSize:12.5, fontWeight: erSum||l.uthevet ? 600 : 400,
                          color: l.label.startsWith('Resultat OsloKollega') || l.label.startsWith('Totalt') ? SK.ink : (erSum ? SK.ink : SK.ink) }}>
                          {l.label}
                        </td>
                        {kolonner.map(k => {
                          const v = l.verdier[k.nokkel];
                          const negativ = v < 0;
                          const erRediger = redigerVerdi && redigerVerdi.linjeId === l.id && redigerVerdi.kolonne === k.nokkel;
                          return (
                            <td key={k.nokkel} style={{ textAlign:'right', fontSize:12,
                              fontWeight: erSum ? 600 : 400, whiteSpace:'nowrap',
                              color: negativ ? SK.coral : (erSum ? SK.ink : SK.soft),
                              cursor: redigerMode ? 'pointer' : 'default' }}
                              onClick={() => { if (redigerMode && l.type !== 'sum') setRedigerVerdi({ linjeId: l.id, kolonne: k.nokkel }); }}>
                              {erRediger ? (
                                <input autoFocus defaultValue={v ?? 0}
                                  onBlur={e => lagreVerdi(l.id, k.nokkel, e.target.value)}
                                  onKeyDown={e => { if (e.key === 'Enter') lagreVerdi(l.id, k.nokkel, e.target.value); if (e.key === 'Escape') setRedigerVerdi(null); }}
                                  style={{ width:70, textAlign:'right', fontSize:12, padding:'2px 4px', border:`1px solid ${SK.coral}`, borderRadius:4, fontFamily:'inherit' }} />
                              ) : (v !== undefined ? SR_fmt(v) : '–')}
                            </td>
                          );
                        })}
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </Card>
        </div>
      ))}

      <div style={{ fontSize:11, color:SK.soft }}>
        Negative tall vises i parentes og rødt. Oppsettet (kolonner og verdier) kan endres via «Endre oppsett».
      </div>
    </div>
  );
}

Object.assign(window, { Styrerapport, SR_hentMal });