// budsjett-endringsvarsel.jsx
// Oppdager og viser endringer i grunnlagsdata siden versjon ble opprettet.
// Brukes i prosesskart (varsellinje) og datakontroll (full liste).

// ══════════════════════════════════════════════════════════════
// DIFF-MOTOR — sammenligner levende data mot budsjettversjonens data
// ══════════════════════════════════════════════════════════════

async function budSjekEndringer(data, versjonId) {
  const varsler = [];
  const versjon = (data.versjoner||[]).find(v => v.id === versjonId);
  if (!versjon) return [];

  // Hent eksisterende varsler fra DB
  const { data: eksVarsler } = await window._sb
    .from('bud_endringsvarsel')
    .select('*')
    .eq('versjon_id', versjonId)
    .is('haandtert_at', null);

  const eksMap = {};
  (eksVarsler||[]).forEach(v => { eksMap[v.ref_id + '_' + v.type] = v; });

  const ny = [];

  // ── 1. Avdelinger referert i budsjettlinjer som nå er inaktive ──
  const avdIBudsjett = [...new Set(
    (data.linjer||[]).filter(l => l.versjon_id === versjonId && l.avdeling_id)
      .map(l => l.avdeling_id)
  )];

  avdIBudsjett.forEach(avdId => {
    const avd = (data.enheter||[]).find(e => e.id === avdId);
    const allEnheter = data._alleEnheter || data.enheter || [];
    const avdInaktiv = allEnheter.find(e => e.id === avdId && !e.aktiv);

    if (!avd && avdInaktiv) {
      const key = avdId + '_enhet_slettet';
      if (!eksMap[key]) {
        ny.push({
          versjon_id:  versjonId,
          type:        'enhet_slettet',
          alvorlighet: 'kritisk',
          tittel:      `Avdeling "${avdInaktiv.navn || avdId}" er satt inaktiv`,
          detaljer:    'Budsjettlinjer knyttet til denne avdelingen beholdes, men avdelingen vises ikke i nye beregninger. Vurder om linjene skal flyttes eller beholdes.',
          ref_id:      avdId,
          ref_type:    'enheter',
          gammel_verdi: { aktiv: true, navn: avdInaktiv.navn, avd_nr: avdInaktiv.avd_nr },
          ny_verdi:     { aktiv: false },
        });
      }
    }
  });

  // ── 2. Avdelinger der selskaps-tilhørighet har endret seg ──
  const lonnIBudsjett = (data.lonn||[]).filter(l => l.versjon_id === versjonId);
  lonnIBudsjett.forEach(lr => {
    const avd = (data.enheter||[]).find(e => e.id === lr.avdeling_id);
    if (!avd) return;
    // Hvis avdelingen har byttet selskap siden budsjettet ble laget
    // (sjekker mot snapshot om tilgjengelig — ellers kun info)
  });

  // ── 3. Satser endret ──
  // Sammenlign versjonens lønnsatser mot gjeldende standardsatser
  const versSatser = (data.lonnSatser||[]).find(s => s.versjon_id === versjonId);
  if (versSatser) {
    const std = (data.lonnSatser||[]).find(s => !s.versjon_id); // standard
    if (std && versSatser.aga_pct !== std.aga_pct) {
      const key = versjonId + '_sats_aga';
      if (!eksMap[key]) {
        ny.push({
          versjon_id:  versjonId,
          type:        'sats_endret',
          alvorlighet: 'advarsel',
          tittel:      `AGA-sats endret: ${versSatser.aga_pct}% → ${std.aga_pct}%`,
          detaljer:    'Gjeldende standardsats er endret etter at denne versjonen ble opprettet. Lønnsbudsjettet bruker versjonens sats. Velg om ny sats skal tas inn.',
          ref_id:      versjonId,
          ref_type:    'bud_lonn_satser',
          gammel_verdi: { aga_pct: versSatser.aga_pct },
          ny_verdi:     { aga_pct: std.aga_pct },
        });
      }
    }
  }

  // ── 4. Avtaler som er slettet (soft delete) ──
  const koblede = (data.budAvtaler||[]).filter(b => b.versjon_id === versjonId);
  koblede.forEach(b => {
    const avtale = (data.avtaler||[]).find(a => a.id === b.avtale_id);
    if (!avtale || avtale.slettet_at) {
      const key = b.avtale_id + '_avtale_slettet';
      if (!eksMap[key]) {
        ny.push({
          versjon_id:  versjonId,
          type:        'avtale_slettet',
          alvorlighet: 'advarsel',
          tittel:      `Koblet avtale "${b.note || b.avtale_id}" er satt inaktiv`,
          detaljer:    'Avtalen er markert som inaktiv etter at den ble koblet til dette budsjettet. Budsjettet er upåvirket, men vurder om beløpet fortsatt er riktig.',
          ref_id:      b.avtale_id,
          ref_type:    'avtaler',
          gammel_verdi: { status: 'aktiv' },
          ny_verdi:     { slettet_at: avtale?.slettet_at },
        });
      }
    }
  });

  // ── 5. Fordelingsdrivere som er endret ──
  // Sjekker om bud_driververdier for denne versjonen er i sync med bud_drivere
  const versDrivere = (data.driververdier||[]).filter(d => d.versjon_id === versjonId);
  const stdDrivere  = data.drivere || [];
  versDrivere.forEach(vd => {
    const std = stdDrivere.find(d => d.id === vd.driver_id);
    if (std && vd.verdi !== std.standard_verdi && std.standard_verdi != null) {
      const key = vd.driver_id + '_driver_avvik';
      if (!eksMap[key]) {
        ny.push({
          versjon_id:  versjonId,
          type:        'driver_endret',
          alvorlighet: 'info',
          tittel:      `Fordelingsdriver "${std.navn}" avviker fra standard`,
          detaljer:    `Versjon bruker ${vd.verdi}, standardverdien er nå ${std.standard_verdi}. Dette påvirker fordelingsberegninger.`,
          ref_id:      vd.driver_id,
          ref_type:    'bud_drivere',
          gammel_verdi: { verdi: vd.verdi },
          ny_verdi:     { verdi: std.standard_verdi },
        });
      }
    }
  });

  // Skriv nye varsler til DB
  if (ny.length > 0) {
    await window._sb.from('bud_endringsvarsel').insert(ny).then(() => {}).catch(console.warn);
  }

  // Returner alle uhåndterte varsler
  const { data: alleVarsler } = await window._sb
    .from('bud_endringsvarsel')
    .select('*')
    .eq('versjon_id', versjonId)
    .is('haandtert_at', null)
    .order('oppdaget_at', { ascending: false });

  return alleVarsler || [];
}

async function budHaandterVarsel(id, handling, notat = '') {
  const { data: { user } } = await window._sb.auth.getUser();
  const { error } = await window._sb.from('bud_endringsvarsel').update({
    haandtert_av:     user?.id,
    haandtert_at:     new Date().toISOString(),
    haandtering:      handling,
    haandtering_notat: notat || null,
  }).eq('id', id);
  if (error) throw error;
}

// ══════════════════════════════════════════════════════════════
// VARSEL-LINJE — kompakt, brukes på Oversikt/Prosesskart
// ══════════════════════════════════════════════════════════════

function BudVarsellinje({ versjonId, data, laast, onClick }) {
  const [varsler, setVarsler] = React.useState([]);
  const [sjekker, setSjekker] = React.useState(true);

  React.useEffect(() => {
    if (!versjonId) return;
    setSjekker(true);
    budSjekEndringer(data, versjonId)
      .then(setVarsler)
      .catch(console.warn)
      .finally(() => setSjekker(false));
  }, [versjonId]);

  if (sjekker || varsler.length === 0) return null;

  const kritiske  = varsler.filter(v => v.alvorlighet === 'kritisk').length;
  const advarsler = varsler.filter(v => v.alvorlighet === 'advarsel').length;
  const info      = varsler.filter(v => v.alvorlighet === 'info').length;

  const farge = kritiske > 0 ? SK.coral : advarsler > 0 ? '#e08d3c' : SK.soft;
  const bg    = kritiske > 0 ? 'rgba(242,84,92,.07)' : advarsler > 0 ? 'rgba(224,141,60,.07)' : SK.iceBlueLight;
  const ikon  = kritiske > 0 ? '🔴' : advarsler > 0 ? '🟡' : 'ℹ️';

  const oppsummering = [
    kritiske  > 0 && `${kritiske} kritisk${kritiske>1?'e':''}`,
    advarsler > 0 && `${advarsler} advarsel${advarsler>1?'er':''}`,
    info      > 0 && `${info} info`,
  ].filter(Boolean).join(' · ');

  return (
    <div onClick={onClick}
      style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 16px',
        borderRadius:10, background:bg, border:`1px solid ${farge}30`,
        cursor:'pointer', marginBottom:16 }}>
      <span style={{ fontSize:15 }}>{ikon}</span>
      <div style={{ flex:1 }}>
        <span style={{ fontSize:13, fontWeight:600, color:farge }}>
          {varsler.length} endring{varsler.length!==1?'er':''} oppdaget i grunnlagsdata
        </span>
        <span style={{ fontSize:12, color:SK.soft, marginLeft:8 }}>
          {oppsummering}
        </span>
      </div>
      <span style={{ fontSize:12, color:SK.soft }}>
        Se i Datakontroll →
      </span>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// ENDRINGS-PANEL — full liste, brukes i Datakontroll
// ══════════════════════════════════════════════════════════════

function BudEndringspanel({ versjonId, data, laast, gåTilFane }) {
  const [varsler,   setVarsler]   = React.useState([]);
  const [laster,    setLaster]    = React.useState(true);
  const [ekspander, setEkspander] = React.useState(null);
  const [notat,     setNotat]     = React.useState('');

  const last = async () => {
    setLaster(true);
    try {
      const v = await budSjekEndringer(data, versjonId);
      setVarsler(v);
    } catch(e) { console.warn(e); }
    setLaster(false);
  };

  React.useEffect(() => { if (versjonId) last(); }, [versjonId]);

  const haandter = async (id, handling) => {
    try {
      await budHaandterVarsel(id, handling, notat);
      setEkspander(null); setNotat('');
      await last();
    } catch(e) { alert('Feil: ' + e.message); }
  };

  const ALV_CFG = {
    kritisk:  { farge: SK.coral,    bg: 'rgba(242,84,92,.06)',  ikon: '🔴', label: 'Kritisk' },
    advarsel: { farge: '#e08d3c',   bg: 'rgba(224,141,60,.06)', ikon: '🟡', label: 'Advarsel' },
    info:     { farge: SK.soft,     bg: SK.iceBlueLight,        ikon: 'ℹ️', label: 'Info' },
  };

  const HANDLING_CFG = {
    ta_inn:   { label: 'Ta inn endringen', farge: '#1b6a2e', bg: 'rgba(27,106,46,.08)' },
    ignorer:  { label: 'Ignorer',          farge: SK.coral,  bg: 'rgba(242,84,92,.06)' },
    vurdert:  { label: 'Merk som vurdert', farge: SK.soft,   bg: SK.iceBlueLight },
  };

  if (laster) return (
    <div style={{ padding:'24px', textAlign:'center', color:SK.soft, fontSize:13 }}>
      Sjekker endringer…
    </div>
  );

  return (
    <div>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
        <div>
          <div style={{ fontSize:14, fontWeight:700 }}>Endringsvarsler</div>
          <div style={{ fontSize:12.5, color:SK.soft, marginTop:2 }}>
            Endringer i grunnlagsdata siden denne budsjettversjonen ble aktiv.
            Ta stilling til om endringene skal tas inn i budsjettet.
          </div>
        </div>
        <button onClick={last}
          style={{ padding:'5px 12px', borderRadius:7, border:'1px solid rgba(17,24,61,.15)',
            background:'transparent', color:SK.soft, fontSize:12, cursor:'pointer',
            fontFamily:'inherit' }}>
          ↺ Sjekk på nytt
        </button>
      </div>

      {varsler.length === 0 ? (
        <div style={{ padding:'24px', textAlign:'center', borderRadius:10,
          background:SK.iceBlueLight, color:SK.soft, fontSize:13 }}>
          ✓ Ingen aktive endringsvarsler. Grunnlagsdata er i sync med budsjettet.
        </div>
      ) : (
        <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
          {varsler.map(v => {
            const cfg = ALV_CFG[v.alvorlighet] || ALV_CFG.info;
            const erEksp = ekspander === v.id;
            return (
              <div key={v.id} style={{ borderRadius:10, border:`1px solid ${cfg.farge}30`,
                background: cfg.bg, overflow:'hidden' }}>
                {/* Kompakt header */}
                <div style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 14px',
                  cursor:'pointer' }}
                  onClick={() => setEkspander(erEksp ? null : v.id)}>
                  <span style={{ fontSize:14 }}>{cfg.ikon}</span>
                  <div style={{ flex:1 }}>
                    <span style={{ fontSize:13, fontWeight:600, color:SK.ink }}>{v.tittel}</span>
                    <span style={{ fontSize:11, color:SK.soft, marginLeft:8 }}>
                      {new Date(v.oppdaget_at).toLocaleDateString('nb-NO',
                        { day:'2-digit', month:'short', hour:'2-digit', minute:'2-digit' })}
                    </span>
                  </div>
                  <span style={{ fontSize:11, fontWeight:600, color:cfg.farge,
                    padding:'2px 8px', borderRadius:4, background:`${cfg.farge}15` }}>
                    {cfg.label}
                  </span>
                  <span style={{ fontSize:12, color:SK.soft }}>{erEksp ? '▲' : '▼'}</span>
                </div>

                {/* Ekspandert detalj + handlinger */}
                {erEksp && (
                  <div style={{ borderTop:`1px solid ${cfg.farge}20`, padding:'12px 14px' }}>
                    {v.detaljer && (
                      <div style={{ fontSize:12.5, color:SK.soft, marginBottom:10,
                        lineHeight:1.6 }}>
                        {v.detaljer}
                      </div>
                    )}

                    {/* Gammel → ny verdi */}
                    {v.gammel_verdi && v.ny_verdi && (
                      <div style={{ display:'flex', gap:8, marginBottom:12, fontSize:12 }}>
                        <div style={{ flex:1, padding:'6px 10px', borderRadius:7,
                          background:'rgba(17,24,61,.04)', border:'1px solid rgba(17,24,61,.08)' }}>
                          <div style={{ fontWeight:600, color:SK.soft, marginBottom:3, fontSize:10.5 }}>
                            TIDLIGERE
                          </div>
                          {Object.entries(v.gammel_verdi).map(([k,val]) => (
                            <div key={k}><span style={{ color:SK.soft }}>{k}:</span> {String(val)}</div>
                          ))}
                        </div>
                        <div style={{ alignSelf:'center', color:SK.soft }}>→</div>
                        <div style={{ flex:1, padding:'6px 10px', borderRadius:7,
                          background:'rgba(242,84,92,.04)', border:'1px solid rgba(242,84,92,.12)' }}>
                          <div style={{ fontWeight:600, color:SK.coral, marginBottom:3, fontSize:10.5 }}>
                            NÅ
                          </div>
                          {Object.entries(v.ny_verdi).map(([k,val]) => (
                            <div key={k}><span style={{ color:SK.soft }}>{k}:</span> {String(val)}</div>
                          ))}
                        </div>
                      </div>
                    )}

                    {/* Notat-felt */}
                    <input value={notat} onChange={e=>setNotat(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:12.5,
                        marginBottom:10 }}
                      placeholder="Valgfritt notat om beslutningen…" />

                    {/* Handlingsknapper */}
                    {laast ? (
                      <div style={{ fontSize:12, color:SK.soft, fontStyle:'italic' }}>
                        Budsjettet er låst — endringer kan ikke tas inn.
                        <button onClick={() => haandter(v.id, 'vurdert')}
                          style={{ marginLeft:8, padding:'3px 10px', borderRadius:5,
                            border:'1px solid rgba(17,24,61,.15)', background:'transparent',
                            color:SK.soft, fontSize:11.5, cursor:'pointer', fontFamily:'inherit' }}>
                          Merk som vurdert
                        </button>
                      </div>
                    ) : (
                      <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
                        {Object.entries(HANDLING_CFG).map(([handling, hcfg]) => (
                          <button key={handling} onClick={() => haandter(v.id, handling)}
                            style={{ padding:'6px 14px', borderRadius:7, cursor:'pointer',
                              fontFamily:'inherit', fontSize:12.5, fontWeight:600,
                              border:`1px solid ${hcfg.farge}40`,
                              background: hcfg.bg, color: hcfg.farge }}>
                            {hcfg.label}
                          </button>
                        ))}
                      </div>
                    )}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { BudVarsellinje, BudEndringspanel, budSjekEndringer });