// budsjett-fjoraar.jsx
// Fjorår-referanse: henter sammenlignbare tall og gir kopier/vurder-funksjonalitet

// ── Hent fjorår-linjer for en versjon ────────────────────────
async function budHentFjoraarLinjer(fjoraarVersjonId) {
  if (!fjoraarVersjonId) return [];
  const { data, error } = await window._sb
    .from('bud_linjer')
    .select('*')
    .eq('versjon_id', fjoraarVersjonId);
  if (error) throw error;
  return data || [];
}

// ── Slå opp fjorår-beløp per konto+avdeling ──────────────────
function budFjoraarOppslagskart(fjoraarLinjer) {
  // { 'konto_avdId': { belop_ar, tekst, linje } }
  const kart = {};
  fjoraarLinjer.forEach(l => {
    const key = `${l.konto}_${l.avdeling_id||''}`;
    if (!kart[key]) kart[key] = { belop_ar:0, linjer:[] };
    kart[key].belop_ar += Number(l.belop_ar||0);
    kart[key].linjer.push(l);
  });
  return kart;
}

// ── Badge: fjorår-referansekolonne ───────────────────────────
function BudFjoraarBadge({ fjoraarBelopAr, aktueltBelopAr }) {
  if (fjoraarBelopAr == null) return <span style={{ color:'rgba(17,24,61,.2)', fontSize:12 }}>—</span>;
  const avvik = aktueltBelopAr != null ? aktueltBelopAr - fjoraarBelopAr : null;
  const pct   = fjoraarBelopAr !== 0 && avvik != null
    ? Math.round((avvik / Math.abs(fjoraarBelopAr)) * 100) : null;
  return (
    <span style={{ fontSize:12 }}>
      <span style={{ color:'rgba(17,24,61,.5)' }}>
        {Math.round(fjoraarBelopAr/1000).toLocaleString('nb-NO')} T
      </span>
      {pct != null && Math.abs(pct) >= 2 && (
        <span style={{
          marginLeft:4, fontSize:10.5, fontWeight:600,
          color: pct > 0 ? '#c0392b' : '#1b6a2e'
        }}>
          {pct > 0 ? '+' : ''}{pct}%
        </span>
      )}
    </span>
  );
}

// ── Kopier fra fjorår modal ───────────────────────────────────
function BudKopierFraFjoraarModal({
  versjonId, fjoraarVersjonId, fjoraarLinjer,
  enheter, data, onLukk, onKopiert
}) {
  const [valgte,    setValgte]    = React.useState(new Set());
  const [kopierte,  setKopierte]  = React.useState(new Set()); // allerede i årets budsjett
  const [laster,    setLaster]    = React.useState(false);
  const [status,    setStatus]    = React.useState(null);
  const [filterAvd, setFilterAvd] = React.useState('');
  const [soek,      setSoek]      = React.useState('');

  // Finn linjer som IKKE allerede finnes i årets versjon
  const aarsLinjer = (data.linjer||[]).filter(l=>l.versjon_id===versjonId);
  const eksisterendeNokler = new Set(aarsLinjer.map(l=>`${l.konto}_${l.avdeling_id||''}`));

  const kandidater = fjoraarLinjer
    .filter(l => !l.modul_kilde) // kun manuelle linjer
    .filter(l => !filterAvd || l.avdeling_id===filterAvd)
    .filter(l => !soek || String(l.konto).includes(soek) ||
      (l.tekst||'').toLowerCase().includes(soek.toLowerCase()) ||
      (enheter.find(e=>e.id===l.avdeling_id)?.navn||'').toLowerCase().includes(soek.toLowerCase()));

  const toggleAll = () => {
    if (valgte.size === kandidater.length) setValgte(new Set());
    else setValgte(new Set(kandidater.map(l=>l.id)));
  };

  const kopier = async () => {
    if (!valgte.size) return;
    setLaster(true);
    let antall = 0;
    const sb = window._sb;
    for (const id of valgte) {
      const l = fjoraarLinjer.find(x=>x.id===id);
      if (!l) continue;
      const { id:_, versjon_id:__, created_at:___, updated_at:____, ...felt } = l;
      await sb.from('bud_linjer').insert({
        ...felt,
        versjon_id: versjonId,
        kilde: 'fjoraar',
        ekstern_ref: `fjoraar:${id}`,
      });
      antall++;
    }
    setStatus(`✓ ${antall} linjer kopiert fra fjorår`);
    setTimeout(() => { onKopiert(); }, 1200);
    setLaster(false);
  };

  const eksIAvaar = (linje) =>
    eksisterendeNokler.has(`${linje.konto}_${linje.avdeling_id||''}`);

  const MND = ['J','F','M','A','M','J','J','A','S','O','N','D'];

  return (
    <BudModal tittel="Kopier fra fjorår" onLukk={onLukk} bred>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        <div style={{ padding:'10px 14px', borderRadius:8, background:'rgba(55,138,221,.06)',
          border:'1px solid rgba(55,138,221,.15)', fontSize:12.5, color:SK.soft, lineHeight:1.6 }}>
          Velg linjer fra fjorårets budsjett/prognose som skal kopieres inn i dette budsjettet.
          Beregningsmoduler (lønn, eiendom osv.) er utelatt — disse beregnes på nytt.
          Linjer som allerede finnes vises i grått.
        </div>

        {/* Filtrering */}
        <div style={{ display:'flex', gap:10 }}>
          <input value={soek} onChange={e=>setSoek(e.target.value)}
            placeholder="Søk konto, tekst, avdeling…"
            style={{ flex:1, padding:'6px 10px', borderRadius:7,
              border:'1px solid rgba(17,24,61,.15)', fontFamily:'inherit', fontSize:13 }} />
          <select value={filterAvd} onChange={e=>setFilterAvd(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>
        </div>

        {/* Tabell */}
        <div style={{ borderRadius:8, border:'1px solid rgba(17,24,61,.1)', overflow:'hidden',
          maxHeight:380, overflowY:'auto' }}>
          <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12 }}>
            <thead style={{ position:'sticky', top:0, zIndex:1 }}>
              <tr style={{ background:SK.iceBlueLight, borderBottom:'1px solid rgba(17,24,61,.08)' }}>
                <th style={{ padding:'7px 10px', width:36 }}>
                  <input type="checkbox"
                    checked={valgte.size===kandidater.filter(l=>!eksIAvaar(l)).length && kandidater.filter(l=>!eksIAvaar(l)).length>0}
                    onChange={toggleAll} />
                </th>
                {['Konto','Avdeling','Tekst','Årsbeløp','Jan–Des'].map(h=>(
                  <th key={h} style={{ padding:'7px 10px', textAlign:h==='Årsbeløp'?'right':'left',
                    fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {kandidater.map(l => {
                const finnes = eksIAvaar(l);
                const valgt  = valgte.has(l.id);
                const avdNavn = enheter.find(e=>e.id===l.avdeling_id)?.navn || '—';
                const mndVerd = l.fordeling_jan_des?.length===12
                  ? l.fordeling_jan_des.map(f=>Math.round(f*l.belop_ar))
                  : Array(12).fill(Math.round(l.belop_ar/12));
                return (
                  <tr key={l.id}
                    onClick={() => !finnes && setValgte(p=>{
                      const n=new Set(p); n.has(l.id)?n.delete(l.id):n.add(l.id); return n;
                    })}
                    style={{ borderBottom:'1px solid rgba(17,24,61,.04)',
                      background: finnes ? 'rgba(17,24,61,.02)' : valgt ? 'rgba(55,138,221,.05)' : 'transparent',
                      cursor: finnes ? 'default' : 'pointer',
                      opacity: finnes ? 0.5 : 1 }}>
                    <td style={{ padding:'6px 10px' }}>
                      {finnes
                        ? <span style={{ fontSize:10, color:SK.soft }}>✓</span>
                        : <input type="checkbox" checked={valgt}
                            onChange={()=>{}} onClick={e=>e.stopPropagation()} />}
                    </td>
                    <td style={{ padding:'6px 10px', fontFamily:'monospace', fontSize:11.5 }}>{l.konto}</td>
                    <td style={{ padding:'6px 10px', fontSize:11.5, color:SK.soft }}>{avdNavn}</td>
                    <td style={{ padding:'6px 10px' }}>{l.tekst||'—'}</td>
                    <td style={{ padding:'6px 10px', textAlign:'right', fontWeight:500 }}>
                      {Math.round(l.belop_ar/1000).toLocaleString('nb-NO')} T
                    </td>
                    <td style={{ padding:'6px 10px', fontSize:10.5, color:SK.soft, letterSpacing:1 }}>
                      {mndVerd.map((v,i)=>(
                        <span key={i} title={`${MND[i]}: ${v.toLocaleString('nb-NO')}`}
                          style={{ display:'inline-block', width:14, height:18, verticalAlign:'bottom',
                            background:`rgba(55,138,221,${Math.min(1,Math.abs(v)/(Math.max(1,...mndVerd.map(Math.abs)))*.8+.1)})`,
                            marginRight:1, borderRadius:2 }} />
                      ))}
                    </td>
                  </tr>
                );
              })}
              {kandidater.length === 0 && (
                <tr><td colSpan={6} style={{ padding:'20px', textAlign:'center', color:SK.soft }}>
                  Ingen linjer å vise.
                </td></tr>
              )}
            </tbody>
          </table>
        </div>

        <div style={{ fontSize:12.5, color:SK.soft }}>
          {valgte.size} valgt · {kandidater.filter(l=>eksIAvaar(l)).length} finnes allerede (grå)
        </div>

        {status && (
          <div style={{ padding:'10px 14px', borderRadius:8, fontWeight:600,
            background:'rgba(27,106,46,.08)', color:'#1b6a2e', fontSize:13 }}>{status}</div>
        )}

        <div style={{ display:'flex', gap:10 }}>
          <Button variant="primary" onClick={kopier}
            disabled={!valgte.size||laster}>
            {laster ? 'Kopierer…' : `Kopier ${valgte.size} linjer`}
          </Button>
          <Button onClick={onLukk}>Avbryt</Button>
        </div>
      </div>
    </BudModal>
  );
}

// ── Fjorår-kontekst: gjøres tilgjengelig for moduler ─────────
// Laster fjorår-linjer basert på fjoraar_versjon_id på gjeldende versjon
function useFjoraarData(versjon, data) {
  const [fjoraarLinjer, setFjoraarLinjer] = React.useState([]);
  const fjoraarVersjonId = versjon?.fjoraar_versjon_id;

  React.useEffect(() => {
    if (!fjoraarVersjonId) { setFjoraarLinjer([]); return; }
    budHentFjoraarLinjer(fjoraarVersjonId).then(setFjoraarLinjer).catch(console.warn);
  }, [fjoraarVersjonId]);

  const oppslagskart = React.useMemo(
    () => budFjoraarOppslagskart(fjoraarLinjer),
    [fjoraarLinjer]
  );

  return { fjoraarLinjer, fjoraarVersjonId, oppslagskart };
}

Object.assign(window, {
  budHentFjoraarLinjer,
  budFjoraarOppslagskart,
  BudFjoraarBadge,
  BudKopierFraFjoraarModal,
  useFjoraarData,
});