// budsjett-prosess.jsx — Prosess-struktur for budsjettarbeidet
// Viser stegene, avhengigheter (parallelle vs. suksessive), status, og kobler oppgaver.
// Eksporterer BudProsess til window.

// Definisjon av prosessstegene. avhenger_av = liste av steg-nøkler som må være
// fullført før dette stegets resultat er endelig. fase grupperer parallelle steg.
const BUD_PROSESSTEG = [
  // Fase 1 — Grunnlag (parallelle, uavhengige)
  { nokkel:'deltakere', navn:'Deltakermatrise', fane:'deltakere', fase:1, avhenger_av:[],
    beskrivelse:'Antall deltakere per avdeling (VTA/AFT). Grunnlag for hjemler og fordelingsnøkler.' },
  { nokkel:'lonn', navn:'Lønnsbudsjett', fane:'lonn', fase:1, avhenger_av:[],
    beskrivelse:'Lønnskostnader per ansatt/avdeling.' },
  { nokkel:'linjer', navn:'Budsjettlinjer', fane:'linjer', fase:1, avhenger_av:[],
    beskrivelse:'Øvrige inntekter og kostnader per avdeling og konto.' },
  { nokkel:'avtaler', navn:'Avtaler', fane:'avtaler', fase:1, avhenger_av:[],
    beskrivelse:'Faste avtaler som genererer budsjettlinjer.' },
  // Fase 2 — Inntektsfordeling (avhenger av deltakere)
  { nokkel:'hjemler', navn:'Hjemmelfordeling', fane:'hjemler', fase:2, avhenger_av:['deltakere'],
    beskrivelse:'Tilskudd og ressursbehov for Karriere. Henter antall fra deltakermatrisen.' },
  // Fase 3 — Kostnadsfordeling (avhenger av grunnlag + deltakere)
  { nokkel:'fordeling', navn:'Fordelingsnøkler', fane:'fordeling', fase:3, avhenger_av:['deltakere'],
    beskrivelse:'Nøkler for fordeling av felleskostnader (areal, deltakere m.m.).' },
  { nokkel:'viderefakt', navn:'Fordelinger', fane:'viderefakt', fase:3, avhenger_av:['linjer','lonn','fordeling'],
    beskrivelse:'Fordeling/viderefakturering av kostnader mellom avdelinger.' },
  // Fase 4 — Konsolidering (avhenger av fordelinger)
  { nokkel:'eliminering', navn:'Eliminering', fane:'eliminering', fase:4, avhenger_av:['viderefakt'],
    beskrivelse:'Eliminering av interne transaksjoner i konsernet.' },
  // Fase 5 — Rapportering (avhenger av alt)
  { nokkel:'rapport', navn:'Rapport & styrerapport', fane:'rapport', fase:5,
    avhenger_av:['hjemler','viderefakt','eliminering'],
    beskrivelse:'Endelig budsjettrapport. Korrekt først når alle tidligere steg er fullført.' },
];

async function budHentProsess(versjonId) {
  const { data } = await window._sb.from('bud_prosess_status').select('*').eq('versjon_id', versjonId);
  const map = {};
  (data || []).forEach(r => { map[r.steg] = r; });
  return map;
}

// Automatisk «har data»-indikator per steg (om steget har noe innhold ennå)
function budStegHarData(data, versjonId, steg) {
  const f = (arr) => (data[arr] || []).some(x => x.versjon_id === versjonId);
  switch (steg) {
    case 'deltakere':   return f('deltakere');
    case 'lonn':        return f('lonn');
    case 'linjer':      return f('linjer');
    case 'avtaler':     return (data.avtaler || []).some(x => x.versjon_id === versjonId);
    case 'hjemler':     return (data.hjemler || []).some(x => x.versjon_id === versjonId) || f('deltakere');
    case 'fordeling':   return (data.fordelingsnokler || data.nokler || []).some(x => x.versjon_id === versjonId);
    case 'viderefakt':  return (data.fordelinger || []).some(x => x.versjon_id === versjonId);
    case 'eliminering': return (data.kontomapping || []).some(x => x.versjon_id === versjonId && x.intern_type);
    case 'rapport':     return (data.rapportlinjer || []).some(x => x.versjon_id === versjonId);
    default: return false;
  }
}

function BudProsess({ data, versjonId, laast, onEndret, gåTilFane }) {
  const [status, setStatus] = React.useState({});
  const [laster, setLaster] = React.useState(true);

  const last = React.useCallback(() => {
    if (!versjonId) return;
    setLaster(true);
    budHentProsess(versjonId).then(setStatus).finally(() => setLaster(false));
  }, [versjonId]);
  React.useEffect(() => { last(); }, [last]);

  // Effektiv status per steg: lagret status, eller utledet fra data
  const stegStatus = (steg) => {
    const lagret = status[steg.nokkel];
    if (lagret && lagret.status !== 'ikke_startet') return lagret.status;
    return budStegHarData(data, versjonId, steg.nokkel) ? 'pagar' : 'ikke_startet';
  };

  // Et steg er "blokkert" (tentativt) hvis noen det avhenger av ikke er fullført
  const erFullfort = (nokkel) => stegStatus(BUD_PROSESSTEG.find(s => s.nokkel === nokkel)) === 'fullfort';
  const venterPa = (steg) => steg.avhenger_av.filter(dep => !erFullfort(dep));

  const settStatus = async (steg, nyStatus) => {
    const eksisterende = status[steg.nokkel];
    const felt = { versjon_id: versjonId, steg: steg.nokkel, status: nyStatus,
      fullfort_at: nyStatus === 'fullfort' ? new Date().toISOString() : null, updated_at: new Date().toISOString() };
    if (eksisterende) await window.budDB.oppdater('bud_prosess_status', eksisterende.id, felt);
    else await window.budDB.lagre('bud_prosess_status', felt);
    last();
  };

  if (laster) return <div style={{ padding:28, textAlign:'center', color:SK.soft, fontSize:13 }}>Laster prosess…</div>;

  const faser = [...new Set(BUD_PROSESSTEG.map(s => s.fase))].sort();
  const faseNavn = { 1:'Grunnlag (parallelle steg)', 2:'Inntektsfordeling', 3:'Kostnadsfordeling', 4:'Konsolidering', 5:'Rapportering' };

  // Antall ikke-fullførte steg → budsjettet er tentativt
  const ikkeFullfort = BUD_PROSESSTEG.filter(s => stegStatus(s) !== 'fullfort');
  const oppgaverForSteg = (nokkel) => (data.oppgaver || []).filter(o => o.versjon_id === versjonId && o.steg === nokkel);

  const statusFarge = { ikke_startet:SK.soft, pagar:'#e08d3c', fullfort:'#1b6a2e' };
  const statusLabel = { ikke_startet:'Ikke startet', pagar:'Pågår', fullfort:'Fullført' };

  return (
    <div>
      <div style={{ fontSize:13, color:SK.soft, lineHeight:1.6, marginBottom:16, maxWidth:760 }}>
        Budsjettprosessen har <b>parallelle</b> steg (kan fylles ut samtidig) og <b>suksessive</b> steg
        (avhenger av tidligere). Takket være direkte flyt kan du jobbe på alle steg samtidig — men resultatet
        i et avhengig steg blir <b>tentativt</b> til stegene det bygger på er markert fullført.
      </div>

      {/* Tentativt-varsel */}
      {ikkeFullfort.length > 0 && (
        <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:16, padding:'10px 14px', borderRadius:10,
          background:'#fcefca', border:'1px solid #e6c34d' }}>
          <span style={{ fontSize:16 }}>⚠</span>
          <div style={{ fontSize:12.5, color:SK.ink }}>
            <b>Budsjettet er tentativt.</b> {ikkeFullfort.length} av {BUD_PROSESSTEG.length} steg er ikke fullført.
            Rapporter og avhengige beregninger kan endre seg når gjenstående steg ferdigstilles.
          </div>
        </div>
      )}
      {ikkeFullfort.length === 0 && (
        <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:16, padding:'10px 14px', borderRadius:10,
          background:'#e7f4ea', border:'1px solid #86c79a' }}>
          <span style={{ fontSize:16 }}>✓</span>
          <div style={{ fontSize:12.5, color:SK.ink }}><b>Alle steg fullført.</b> Budsjettet er ferdigstilt og rapportene er endelige.</div>
        </div>
      )}

      {/* Faser med steg */}
      {faser.map(fase => {
        const steg = BUD_PROSESSTEG.filter(s => s.fase === fase);
        return (
          <div key={fase} style={{ marginBottom:18 }}>
            <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:0.06, textTransform:'uppercase', color:SK.soft, marginBottom:8 }}>
              Fase {fase} · {faseNavn[fase]}{steg.length > 1 && ' — kan gjøres parallelt'}
            </div>
            <div style={{ display:'grid', gridTemplateColumns:`repeat(auto-fill,minmax(280px,1fr))`, gap:12 }}>
              {steg.map(s => {
                const st = stegStatus(s);
                const venter = venterPa(s);
                const tentativ = venter.length > 0 && st !== 'ikke_startet';
                const oppg = oppgaverForSteg(s.nokkel);
                return (
                  <div key={s.nokkel} style={{ border:`1px solid ${tentativ ? '#e6c34d' : 'rgba(17,24,61,.1)'}`,
                    borderRadius:12, background:'#fff', overflow:'hidden' }}>
                    <div style={{ padding:'10px 14px', borderBottom:'1px solid rgba(17,24,61,.06)',
                      display:'flex', alignItems:'center', justifyContent:'space-between', gap:8 }}>
                      <span style={{ fontSize:13, fontWeight:600 }}>{s.navn}</span>
                      <span style={{ fontSize:10.5, fontWeight:600, padding:'2px 9px', borderRadius:99,
                        background:statusFarge[st]+'22', color:statusFarge[st] }}>{statusLabel[st]}</span>
                    </div>
                    <div style={{ padding:'10px 14px' }}>
                      <div style={{ fontSize:11.5, color:SK.soft, lineHeight:1.5, marginBottom:10 }}>{s.beskrivelse}</div>
                      {venter.length > 0 && (
                        <div style={{ fontSize:11, color:'#8e5a05', marginBottom:8 }}>
                          ⏳ Venter på: {venter.map(d => BUD_PROSESSTEG.find(x=>x.nokkel===d)?.navn).join(', ')}
                        </div>
                      )}
                      {s.avhenger_av.length === 0 && (
                        <div style={{ fontSize:11, color:'#1b6a2e', marginBottom:8 }}>↔ Uavhengig — kan fylles ut når som helst</div>
                      )}
                      {oppg.length > 0 && (
                        <div style={{ fontSize:11, color:SK.soft, marginBottom:8 }}>
                          {oppg.length} oppgave{oppg.length>1?'r':''} · {oppg.filter(o=>o.status==='godkjent').length} godkjent
                        </div>
                      )}
                      <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
                        <Button size="sm" onClick={() => gåTilFane && gåTilFane(s.fane)}>Åpne</Button>
                        {!laast && st !== 'fullfort' && <Button size="sm" variant="primary" onClick={() => settStatus(s, 'fullfort')}>Marker fullført</Button>}
                        {!laast && st === 'fullfort' && <Button size="sm" onClick={() => settStatus(s, 'pagar')}>Gjenåpne</Button>}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { BudProsess, BUD_PROSESSTEG });