// vvj.jsx — Verdens Viktigste Jobb (Supabase)
// Dashboard (NyBy), deltakere (ansatt + NAV-kvalifisering), mikrolæring
// Erstatter VVJWorkspaceMock fra vvj-screens.jsx

// ── Supabase-kall ─────────────────────────────────────────────

async function VVJ_hentDeltakere() {
  const { data, error } = await window._sb
    .from('vvj_deltakere')
    .select('*, veileder:profiles!veileder_id(id,navn), enhet:enheter!enhet_id(id,navn)')
    .order('navn');
  if (error) throw error;
  return data || [];
}

async function VVJ_hentKurs() {
  const { data } = await window._sb.from('vvj_kurs').select('*').eq('aktiv', true).order('rekkefolge');
  return data || [];
}

async function VVJ_hentModuler(kursId) {
  const { data } = await window._sb.from('vvj_moduler').select('*').eq('kurs_id', kursId).order('rekkefolge');
  return data || [];
}

async function VVJ_hentProgresjon(deltakerId) {
  const { data } = await window._sb.from('vvj_progresjon').select('*').eq('deltaker_id', deltakerId);
  return data || [];
}

async function VVJ_hentOppdrag() {
  const { data } = await window._sb.from('vvj_oppdrag')
    .select('*, deltaker:vvj_deltakere!deltaker_id(id,navn)')
    .order('dato', { ascending: false });
  return data || [];
}

async function VVJ_lagreProgresjon(deltakerId, modulId, kursId, felter) {
  const { data, error } = await window._sb.from('vvj_progresjon')
    .upsert({ deltaker_id: deltakerId, modul_id: modulId, kurs_id: kursId, ...felter },
            { onConflict: 'deltaker_id,modul_id' })
    .select().single();
  if (error) throw error;
  return data;
}

async function VVJ_loggKvalifisering(deltakerId, hendelse, beskrivelse, brukerId) {
  await window._sb.from('vvj_kvalifisering_logg').insert([{
    deltaker_id: deltakerId, hendelse, beskrivelse, dokumentert_av: brukerId,
  }]);
}

async function VVJ_opprettDeltaker(felter) {
  const { veileder, enhet, ...rene } = felter;
  const { data, error } = await window._sb.from('vvj_deltakere').insert([rene]).select().single();
  if (error) throw error;
  return data;
}

async function VVJ_oppdaterDeltaker(id, felter) {
  const { veileder, enhet, ...rene } = felter;
  const { data, error } = await window._sb.from('vvj_deltakere').update(rene).eq('id', id).select().single();
  if (error) throw error;
  return data;
}

// ── Hjelpere ──────────────────────────────────────────────────

const VVJ_FARGER = ['#f2545c','#586ba4','#08605f','#11183d','#f2cc8f','#8e5a05','#3a8fb7','#4a3a7a'];
function vvjIni(navn) {
  if (!navn) return '?';
  return navn.split(' ').filter(Boolean).map(n=>n[0]).slice(0,2).join('').toUpperCase();
}
function vvjFmtKrLokal(n) {
  if (!n) return '0';
  return new Intl.NumberFormat('nb-NO').format(Math.round(n));
}

const VVJ_OPPDRAG_TONE = {
  tilgjengelig: { bg:'#dbeed8', fg:'#1b6a2e', label:'Tilgjengelig' },
  påtatt:       { bg:'#fdeac8', fg:'#8e5a05', label:'Påtatt' },
  fullført:     { bg:'#e9eef7', fg:'#3c4a6b', label:'Fullført' },
  avlyst:       { bg:'#fcddde', fg:'#8a1620', label:'Avlyst' },
};

// ══════════════════════════════════════════════════════════════
// DASHBOARD (NyBy)
// ══════════════════════════════════════════════════════════════

function VVJDashboard({ deltakere }) {
  const [dash,     setDash]     = React.useState(null);
  const [oppdrag,  setOppdrag]  = React.useState([]);
  const [laster,   setLaster]   = React.useState(true);
  const [importerer, setImporterer] = React.useState(false);
  const [importMelding, setImportMelding] = React.useState(null);

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

  async function lastInn() {
    setLaster(true);
    try {
      const [d, o] = await Promise.all([window.nybyHentDashboard(), VVJ_hentOppdrag()]);
      setDash(d);
      setOppdrag(o);
    } catch(e) { console.error(e); } finally { setLaster(false); }
  }

  async function importer() {
    setImporterer(true); setImportMelding(null);
    try {
      const res = await window.nybyImporterTilSupabase();
      setImportMelding(`${res.importert} av ${res.totalt} oppdrag importert fra NyBy`);
      await lastInn();
    } catch(e) { setImportMelding('Import feilet: ' + e.message); }
    finally { setImporterer(false); }
  }

  if (laster) return <div style={{ padding:32, textAlign:'center', color:SK.soft }}>Laster NyBy-data…</div>;

  return (
    <div>
      {/* API-status banner */}
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:'10px 14px', borderRadius:10, marginBottom:16,
        background: dash?.api_status === 'prototype' ? '#fdeac8' : '#dbeed8',
        border: `1px solid ${dash?.api_status === 'prototype' ? '#f2b950' : '#9fd49f'}` }}>
        <div style={{ fontSize:12.5, color: dash?.api_status === 'prototype' ? '#8e5a05' : '#1b6a2e' }}>
          {dash?.api_status === 'prototype'
            ? '⚙ NyBy-API i prototypemodus — viser testdata. Ekte integrasjon kobles til senere.'
            : '✓ Tilkoblet NyBy-API'}
        </div>
        <Button size="sm" onClick={importer} disabled={importerer}>
          {importerer ? 'Importerer…' : '↻ Importer fra NyBy'}
        </Button>
      </div>

      {importMelding && (
        <div style={{ padding:'8px 14px', borderRadius:8, marginBottom:16, fontSize:13,
          background:SK.iceBlueLight, color:SK.ink }}>{importMelding}</div>
      )}

      {/* KPI */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:18 }}>
        <Card padded><KPI label="Tilgjengelige" value={dash?.tilgjengelige||0} sub="oppdrag fra NyBy" /></Card>
        <Card padded><KPI label="Påtatte" value={dash?.paatatte||0} sub="pågår" accent={dash?.paatatte>0} /></Card>
        <Card padded><KPI label="Fullførte" value={dash?.fullforte||0} sub={`${dash?.total_timer||0} timer`} /></Card>
        <Card padded><KPI label="Opptjent verdi" value={`kr ${vvjFmtKrLokal(dash?.total_verdi)}`} sub="fullførte oppdrag" /></Card>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1.6fr 1fr', gap:16, alignItems:'flex-start' }}>
        {/* Oppdragsliste */}
        <Card padded={false}>
          <div style={{ padding:'12px 18px', borderBottom:'1px solid rgba(17,24,61,.08)', fontWeight:600, fontSize:13 }}>
            Oppdrag fra NyBy
          </div>
          {oppdrag.length === 0 ? (
            <div style={{ padding:24, textAlign:'center', color:SK.soft, fontSize:13 }}>
              Ingen oppdrag importert ennå. Klikk «Importer fra NyBy».
            </div>
          ) : (
            <table className="ok-table">
              <thead><tr>
                <th style={{ paddingLeft:18 }}>Oppdrag</th>
                <th>Sted</th>
                <th>Dato</th>
                <th>Timer</th>
                <th>Status</th>
              </tr></thead>
              <tbody>
                {oppdrag.map(o => {
                  const tone = VVJ_OPPDRAG_TONE[o.status] || VVJ_OPPDRAG_TONE.tilgjengelig;
                  return (
                    <tr key={o.id}>
                      <td style={{ paddingLeft:18 }}>
                        <div style={{ fontWeight:600, fontSize:12.5 }}>{o.tittel}</div>
                        <div style={{ fontSize:11.5, color:SK.soft, marginTop:2 }}>{o.oppdragsgiver}</div>
                      </td>
                      <td style={{ fontSize:12, color:SK.soft }}>{o.sted}</td>
                      <td style={{ fontSize:12 }}>{o.dato ? new Date(o.dato).toLocaleDateString('nb-NO',{day:'numeric',month:'short'}) : '—'}</td>
                      <td style={{ fontSize:12.5 }}>{o.timer}t · {o.sats}kr</td>
                      <td><span style={{ fontSize:10.5, fontWeight:600, padding:'2px 8px', borderRadius:99, background:tone.bg, color:tone.fg }}>{tone.label}</span></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </Card>

        {/* Oppdragsgivere */}
        <Card padded>
          <div style={{ fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.04, textTransform:'uppercase', marginBottom:12 }}>Oppdragsgivere</div>
          {(dash?.oppdragsgivere||[]).map((g,i) => (
            <div key={i} style={{ display:'flex', justifyContent:'space-between', alignItems:'center',
              padding:'9px 0', borderBottom: i < dash.oppdragsgivere.length-1 ? '1px solid rgba(17,24,61,.06)' : 'none' }}>
              <div>
                <div style={{ fontSize:12.5, fontWeight:500 }}>{g.navn}</div>
                <div style={{ fontSize:11, color:SK.soft }}>{g.type}</div>
              </div>
              <div style={{ textAlign:'right' }}>
                <div style={{ fontSize:13, fontWeight:600 }}>{g.aktive}</div>
                <div style={{ fontSize:10.5, color:SK.soft }}>aktive</div>
              </div>
            </div>
          ))}
          <div style={{ marginTop:10, fontSize:11, color:SK.soft }}>
            Sist synkronisert: {dash?.sist_synk ? new Date(dash.sist_synk).toLocaleTimeString('nb-NO',{hour:'2-digit',minute:'2-digit'}) : '—'}
          </div>
        </Card>
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// DELTAKERE
// ══════════════════════════════════════════════════════════════

function VVJDeltakerListe({ deltakere, onVelg, onNy }) {
  const [filter, setFilter] = React.useState('alle');
  const filtrert = deltakere.filter(d => {
    if (filter === 'ansatt') return d.deltakertype === 'ansatt';
    if (filter === 'nav')    return d.deltakertype === 'nav';
    return true;
  });

  return (
    <div>
      <div style={{ display:'flex', gap:6, marginBottom:14 }}>
        {[['alle','Alle'],['ansatt','Ansatte (lønnet)'],['nav','NAV-kvalifisering']].map(([k,l]) => (
          <button key={k} onClick={()=>setFilter(k)} className="ok-btn ok-btn--sm" style={{
            background: filter===k ? SK.ink : 'transparent',
            color: filter===k ? '#fff' : SK.ink,
            borderColor: filter===k ? SK.ink : 'rgba(17,24,61,.15)',
          }}>{l} ({k==='alle'?deltakere.length:deltakere.filter(d=>d.deltakertype===k).length})</button>
        ))}
        <Button size="sm" variant="primary" icon={I.plus} onClick={onNy} style={{ marginLeft:'auto' }}>Ny deltaker</Button>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))', gap:12 }}>
        {filtrert.map(d => {
          const erNav = d.deltakertype === 'nav';
          return (
            <div key={d.id} onClick={()=>onVelg(d)} style={{
              cursor:'pointer', padding:'14px 16px', borderRadius:10, background:SK.pureWhite,
              border:'1px solid rgba(17,24,61,.08)', borderLeft:`4px solid ${d.farge||'#586ba4'}`,
            }}>
              <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:8 }}>
                <div style={{ width:38, height:38, borderRadius:'50%', background:d.farge||'#586ba4', color:'#fff',
                  display:'flex', alignItems:'center', justifyContent:'center', fontSize:13, fontWeight:700, flexShrink:0 }}>
                  {d.initialer || vvjIni(d.navn)}
                </div>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:13.5, fontWeight:600 }}>{d.navn}</div>
                  <div style={{ fontSize:11.5, color:SK.soft }}>{d.rolle || d.avdeling || '—'}</div>
                </div>
              </div>
              <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
                <span style={{ fontSize:10.5, fontWeight:600, padding:'2px 8px', borderRadius:99,
                  background: erNav ? '#e6e1f3' : '#dbeed8', color: erNav ? '#4a3a7a' : '#1b6a2e' }}>
                  {erNav ? 'NAV-kvalifisering' : 'Ansatt (lønnet)'}
                </span>
                {erNav && d.nav_sak && (
                  <span style={{ fontSize:10.5, color:SK.soft, padding:'2px 0' }}>Sak {d.nav_sak}</span>
                )}
                {!erNav && d.timesats && (
                  <span style={{ fontSize:10.5, color:SK.soft, padding:'2px 0' }}>{d.timesats} kr/t</span>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ── Deltaker-detalj med kvalifiseringsløp ─────────────────────

function VVJDeltakerDetalj({ deltaker, kurs, brukerId, onBack, onOppdatert }) {
  const [progresjon, setProgresjon] = React.useState([]);
  const [logg,       setLogg]       = React.useState([]);
  const [laster,     setLaster]     = React.useState(true);
  const [aktivKurs,  setAktivKurs]  = React.useState(null);

  const erNav = deltaker.deltakertype === 'nav';

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

  async function lastInn() {
    setLaster(true);
    const [p, l] = await Promise.all([
      VVJ_hentProgresjon(deltaker.id),
      window._sb.from('vvj_kvalifisering_logg').select('*').eq('deltaker_id', deltaker.id).order('created_at',{ascending:false}),
    ]);
    setProgresjon(p);
    setLogg(l.data || []);
    setLaster(false);
  }

  // Beregn fremdrift i kvalifiseringsløpet
  const fullforteKurs = kurs.filter(k => {
    const kursProg = progresjon.filter(p => p.kurs_id === k.id);
    return kursProg.length > 0 && kursProg.every(p => p.status === 'fullført' || p.status === 'bestått');
  });
  const fremdriftPct = kurs.length ? Math.round((fullforteKurs.length / kurs.length) * 100) : 0;

  if (aktivKurs) {
    return <VVJKursVisning kurs={aktivKurs} deltaker={deltaker} brukerId={brukerId}
      onFerdig={() => { setAktivKurs(null); lastInn(); }} onAvbryt={() => setAktivKurs(null)} />;
  }

  return (
    <div>
      <button onClick={onBack} style={{ background:'none', border:'none', cursor:'pointer', color:SK.soft, fontSize:12, fontFamily:'inherit', padding:0, marginBottom:12 }}>
        ← Alle deltakere
      </button>

      <div style={{ display:'flex', alignItems:'flex-start', gap:14, marginBottom:18 }}>
        <div style={{ width:52, height:52, borderRadius:'50%', background:deltaker.farge||'#586ba4', color:'#fff',
          display:'flex', alignItems:'center', justifyContent:'center', fontSize:18, fontWeight:700, flexShrink:0 }}>
          {deltaker.initialer || vvjIni(deltaker.navn)}
        </div>
        <div style={{ flex:1 }}>
          <div style={{ display:'flex', gap:8, alignItems:'center', marginBottom:4 }}>
            <span style={{ fontSize:10.5, fontWeight:600, padding:'2px 8px', borderRadius:99,
              background: erNav ? '#e6e1f3' : '#dbeed8', color: erNav ? '#4a3a7a' : '#1b6a2e' }}>
              {erNav ? 'NAV-kvalifisering · ingen lønn' : 'Ansatt · lønnet'}
            </span>
            {deltaker.veileder?.navn && <span style={{ fontSize:11.5, color:SK.soft }}>Veileder: {deltaker.veileder.navn}</span>}
          </div>
          <h2 style={{ margin:0, fontSize:22, fontWeight:600 }}>{deltaker.navn}</h2>
          <div style={{ fontSize:13, color:SK.soft, marginTop:2 }}>{deltaker.rolle} {deltaker.avdeling && `· ${deltaker.avdeling}`}</div>
        </div>
      </div>

      {/* NAV-deltaker: kvalifiseringsløp */}
      {erNav && (
        <Card padded style={{ marginBottom:16 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
            <div style={{ fontSize:13, fontWeight:600 }}>Kvalifiseringsløp</div>
            <span style={{ fontSize:12, color:SK.soft }}>{fullforteKurs.length} av {kurs.length} kurs fullført</span>
          </div>
          <div style={{ height:8, borderRadius:99, background:'rgba(17,24,61,.08)', overflow:'hidden', marginBottom:14 }}>
            <div style={{ width:`${fremdriftPct}%`, height:'100%', background:'#2f9e44', borderRadius:99, transition:'width .3s' }} />
          </div>
          <div style={{ fontSize:12, color:SK.soft, lineHeight:1.5, marginBottom:14,
            padding:'10px 12px', background:SK.iceBlueLight, borderRadius:8 }}>
            NAV krever dokumentert kvalifisering. All fremgang logges automatisk og kan eksporteres som rapport.
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
            {kurs.map(k => {
              const kursProg = progresjon.filter(p => p.kurs_id === k.id);
              const fullfort = kursProg.length > 0 && kursProg.every(p => p.status==='fullført'||p.status==='bestått');
              const pågår    = kursProg.some(p => p.status==='pågår');
              return (
                <div key={k.id} onClick={()=>setAktivKurs(k)} style={{
                  cursor:'pointer', display:'flex', alignItems:'center', gap:12, padding:'11px 14px',
                  borderRadius:8, border:'1px solid rgba(17,24,61,.08)',
                  background: fullfort ? '#f3faf3' : SK.pureWhite }}>
                  <div style={{ width:26, height:26, borderRadius:'50%', flexShrink:0,
                    background: fullfort ? '#2f9e44' : pågår ? '#f2cc8f' : 'rgba(17,24,61,.1)',
                    color: fullfort ? '#fff' : SK.soft,
                    display:'flex', alignItems:'center', justifyContent:'center', fontSize:12, fontWeight:700 }}>
                    {fullfort ? '✓' : k.rekkefolge}
                  </div>
                  <div style={{ flex:1 }}>
                    <div style={{ fontSize:13, fontWeight:600 }}>{k.tittel}</div>
                    <div style={{ fontSize:11.5, color:SK.soft }}>{k.varighet_min} min · {k.kategori}{k.obligatorisk && ' · obligatorisk'}</div>
                  </div>
                  <span style={{ fontSize:11, fontWeight:600, color: fullfort ? '#1b6a2e' : pågår ? '#8e5a05' : SK.soft }}>
                    {fullfort ? 'Fullført' : pågår ? 'Pågår' : 'Start →'}
                  </span>
                </div>
              );
            })}
          </div>
        </Card>
      )}

      {/* Ansatt: vanlig info */}
      {!erNav && (
        <Card padded style={{ marginBottom:16 }}>
          <div style={{ fontSize:13, fontWeight:600, marginBottom:12 }}>Ansettelsesinfo</div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:12 }}>
            {[
              ['Timesats', deltaker.timesats ? `${deltaker.timesats} kr` : '—'],
              ['Uketimer', deltaker.uketimer || '—'],
              ['Kontrakt', deltaker.kontrakt_type || '—'],
            ].map(([l,v]) => (
              <div key={l} style={{ padding:'10px 12px', background:SK.iceBlueLight, borderRadius:8 }}>
                <div style={{ fontSize:10, fontWeight:600, color:SK.soft, textTransform:'uppercase', letterSpacing:0.04 }}>{l}</div>
                <div style={{ fontSize:14, fontWeight:600, marginTop:5 }}>{v}</div>
              </div>
            ))}
          </div>
          {/* Også ansatte kan ta mikrolæring */}
          <div style={{ marginTop:14 }}>
            <div style={{ fontSize:12, fontWeight:600, marginBottom:8 }}>Tilgjengelige kurs</div>
            <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
              {kurs.map(k => (
                <button key={k.id} onClick={()=>setAktivKurs(k)} className="ok-btn ok-btn--sm">{k.tittel}</button>
              ))}
            </div>
          </div>
        </Card>
      )}

      {/* Dokumentasjonslogg */}
      <Card padded>
        <div style={{ fontSize:13, fontWeight:600, marginBottom:12 }}>Dokumentasjonslogg {erNav && '(NAV)'}</div>
        {logg.length === 0 ? (
          <div style={{ fontSize:12.5, color:SK.soft }}>Ingen hendelser dokumentert ennå.</div>
        ) : (
          <div style={{ display:'flex', flexDirection:'column', gap:0 }}>
            {logg.map((l,i) => (
              <div key={l.id} style={{ display:'flex', gap:12, padding:'10px 0',
                borderBottom: i < logg.length-1 ? '1px solid rgba(17,24,61,.06)' : 'none' }}>
                <div style={{ width:8, height:8, borderRadius:'50%', background:'#586ba4', marginTop:5, flexShrink:0 }} />
                <div style={{ flex:1 }}>
                  <div style={{ fontSize:12.5, fontWeight:500 }}>{l.beskrivelse || l.hendelse}</div>
                  <div style={{ fontSize:11, color:SK.soft, marginTop:2 }}>
                    {new Date(l.created_at).toLocaleDateString('nb-NO',{day:'numeric',month:'short',year:'numeric',hour:'2-digit',minute:'2-digit'})}
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </Card>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// KURS-VISNING (mikrolæring: lesestoff, quiz, refleksjon)
// ══════════════════════════════════════════════════════════════

function VVJKursVisning({ kurs, deltaker, brukerId, onFerdig, onAvbryt }) {
  const [moduler,   setModuler]   = React.useState([]);
  const [aktivIdx,  setAktivIdx]  = React.useState(0);
  const [laster,    setLaster]    = React.useState(true);
  const [svar,      setSvar]      = React.useState({});
  const [resultat,  setResultat]  = React.useState(null);
  const [refleksjon,setRefleksjon]= React.useState('');

  React.useEffect(() => {
    VVJ_hentModuler(kurs.id).then(m => { setModuler(m); setLaster(false); });
  }, [kurs.id]);

  if (laster) return <div style={{ padding:32, textAlign:'center', color:SK.soft }}>Laster kurs…</div>;
  if (moduler.length === 0) return (
    <div style={{ padding:32, textAlign:'center', color:SK.soft }}>
      Ingen moduler i dette kurset ennå.
      <div style={{ marginTop:12 }}><Button onClick={onAvbryt}>Tilbake</Button></div>
    </div>
  );

  const modul = moduler[aktivIdx];
  const erSiste = aktivIdx === moduler.length - 1;

  const fullforModul = async (status, poeng, svarData) => {
    await VVJ_lagreProgresjon(deltaker.id, modul.id, kurs.id, {
      status, poeng_oppnadd: poeng||0, poeng_mulig: modul.poeng,
      svar: svarData || null,
      startet_at: new Date().toISOString(),
      fullfort_at: new Date().toISOString(),
    });
    await VVJ_loggKvalifisering(deltaker.id, 'modul_fullført',
      `Fullførte «${modul.tittel}» i kurset «${kurs.tittel}»`, brukerId);

    if (erSiste) {
      await VVJ_loggKvalifisering(deltaker.id, 'kurs_fullført',
        `Fullførte kurset «${kurs.tittel}»`, brukerId);
      onFerdig();
    } else {
      setAktivIdx(i => i+1);
      setSvar({}); setResultat(null); setRefleksjon('');
    }
  };

  // Quiz-logikk
  const sjekkQuiz = () => {
    const sp = modul.innhold?.sporsmal || [];
    let riktige = 0;
    sp.forEach((s,i) => { if (svar[i] === s.fasit) riktige++; });
    const poeng = sp.length ? Math.round((riktige/sp.length) * modul.poeng) : 0;
    const bestatt = riktige === sp.length;
    setResultat({ riktige, totalt: sp.length, poeng, bestatt });
  };

  return (
    <div className="ok-content__inner" style={{ maxWidth:720 }}>
      {/* Progresjon */}
      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:18 }}>
        <button onClick={onAvbryt} style={{ background:'none', border:'none', cursor:'pointer', color:SK.soft, fontSize:12, fontFamily:'inherit', padding:0 }}>← Avbryt</button>
        <div style={{ flex:1, display:'flex', gap:4 }}>
          {moduler.map((m,i) => (
            <div key={m.id} style={{ flex:1, height:5, borderRadius:99,
              background: i < aktivIdx ? '#2f9e44' : i === aktivIdx ? '#586ba4' : 'rgba(17,24,61,.1)' }} />
          ))}
        </div>
        <span style={{ fontSize:12, color:SK.soft }}>{aktivIdx+1}/{moduler.length}</span>
      </div>

      <Card padded>
        <div style={{ fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.04, textTransform:'uppercase', marginBottom:6 }}>
          {kurs.tittel}
        </div>
        <h2 style={{ margin:'0 0 16px', fontSize:20, fontWeight:600 }}>{modul.tittel}</h2>

        {/* LESESTOFF */}
        {modul.type === 'lesestoff' && (
          <div>
            <div style={{ fontSize:14, lineHeight:1.7, color:SK.ink, marginBottom:20 }}>
              {modul.innhold?.tekst}
            </div>
            <Button variant="primary" onClick={() => fullforModul('fullført', modul.poeng)}>
              {erSiste ? 'Fullfør kurs' : 'Neste →'}
            </Button>
          </div>
        )}

        {/* QUIZ */}
        {modul.type === 'quiz' && (
          <div>
            {(modul.innhold?.sporsmal || []).map((s,i) => (
              <div key={i} style={{ marginBottom:20 }}>
                <div style={{ fontSize:14, fontWeight:600, marginBottom:10 }}>{i+1}. {s.q}</div>
                <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                  {s.alternativer.map((alt,j) => {
                    const valgt = svar[i] === j;
                    const visFasit = resultat !== null;
                    const erRiktig = j === s.fasit;
                    return (
                      <button key={j} disabled={resultat!==null}
                        onClick={() => setSvar(prev => ({ ...prev, [i]: j }))}
                        style={{
                          textAlign:'left', padding:'10px 14px', borderRadius:8, fontSize:13, cursor: resultat!==null?'default':'pointer',
                          fontFamily:'inherit',
                          border:`1.5px solid ${visFasit && erRiktig ? '#2f9e44' : visFasit && valgt && !erRiktig ? '#f2545c' : valgt ? '#586ba4' : 'rgba(17,24,61,.15)'}`,
                          background: visFasit && erRiktig ? '#f3faf3' : visFasit && valgt && !erRiktig ? '#fcddde' : valgt ? SK.iceBlueLight : SK.pureWhite,
                          color:SK.ink,
                        }}>
                        {alt}
                        {visFasit && erRiktig && ' ✓'}
                        {visFasit && valgt && !erRiktig && ' ✗'}
                      </button>
                    );
                  })}
                </div>
              </div>
            ))}
            {resultat === null ? (
              <Button variant="primary" onClick={sjekkQuiz}
                disabled={Object.keys(svar).length < (modul.innhold?.sporsmal||[]).length}>
                Sjekk svar
              </Button>
            ) : (
              <div>
                <div style={{ padding:'12px 16px', borderRadius:8, marginBottom:14,
                  background: resultat.bestatt ? '#f3faf3' : '#fdeac8',
                  border:`1px solid ${resultat.bestatt ? '#9fd49f' : '#f2b950'}` }}>
                  <div style={{ fontSize:14, fontWeight:600, color: resultat.bestatt ? '#1b6a2e' : '#8e5a05' }}>
                    {resultat.bestatt ? '🎉 Bestått!' : 'Nesten der!'} {resultat.riktige} av {resultat.totalt} riktige
                  </div>
                  <div style={{ fontSize:12.5, color:SK.soft, marginTop:4 }}>{resultat.poeng} poeng oppnådd</div>
                </div>
                {resultat.bestatt ? (
                  <Button variant="primary" onClick={() => fullforModul('bestått', resultat.poeng, svar)}>
                    {erSiste ? 'Fullfør kurs' : 'Neste →'}
                  </Button>
                ) : (
                  <Button onClick={() => { setSvar({}); setResultat(null); }}>Prøv på nytt</Button>
                )}
              </div>
            )}
          </div>
        )}

        {/* REFLEKSJON */}
        {modul.type === 'refleksjon' && (
          <div>
            <div style={{ fontSize:14, lineHeight:1.6, marginBottom:14 }}>{modul.innhold?.sporsmal}</div>
            <textarea className="ok-input" value={refleksjon} onChange={e=>setRefleksjon(e.target.value)}
              rows={5} placeholder="Skriv dine tanker her…"
              style={{ padding:'10px 12px', fontSize:13, resize:'vertical', fontFamily:'inherit', width:'100%', boxSizing:'border-box', marginBottom:14 }} />
            <Button variant="primary" disabled={refleksjon.trim().length < 5}
              onClick={() => fullforModul('fullført', modul.poeng, { refleksjon })}>
              {erSiste ? 'Fullfør kurs' : 'Lagre og fortsett →'}
            </Button>
          </div>
        )}

        {/* OPPGAVE / SPILL / VIDEO – enkel fullføring */}
        {['oppgave','spill','video'].includes(modul.type) && (
          <div>
            <div style={{ fontSize:14, lineHeight:1.6, marginBottom:16, color:SK.soft }}>
              {modul.innhold?.tekst || `Denne ${modul.type}-modulen åpnes i eget vindu.`}
            </div>
            <Button variant="primary" onClick={() => fullforModul('fullført', modul.poeng)}>
              Marker som fullført {erSiste ? '· fullfør kurs' : '→'}
            </Button>
          </div>
        )}
      </Card>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// NY DELTAKER-SKJEMA
// ══════════════════════════════════════════════════════════════

function VVJNyDeltaker({ profiler, enheter, brukerId, onLagret, onAvbryt }) {
  const [type,     setType]     = React.useState('nav');
  const [navn,     setNavn]     = React.useState('');
  const [rolle,    setRolle]    = React.useState('');
  const [avdeling, setAvdeling] = React.useState('');
  const [veilederId, setVeilederId] = React.useState('');
  const [navSak,   setNavSak]   = React.useState('');
  const [navVeil,  setNavVeil]  = React.useState('');
  const [timesats, setTimesats] = React.useState('');
  const [uketimer, setUketimer] = React.useState('');
  const [laster,   setLaster]   = React.useState(false);
  const [feil,     setFeil]     = React.useState(null);

  const lagre = async () => {
    if (!navn.trim()) { setFeil('Navn er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    const felter = {
      navn, initialer: vvjIni(navn), deltakertype: type, rolle, avdeling,
      veileder_id: veilederId || null,
      farge: VVJ_FARGER[Math.floor(Math.random()*VVJ_FARGER.length)],
      opprettet_av: brukerId,
      ...(type === 'nav'
        ? { nav_sak: navSak||null, nav_veileder: navVeil||null, kvalifisering_start: new Date().toISOString().split('T')[0] }
        : { timesats: parseInt(timesats)||null, uketimer: parseInt(uketimer)||null }),
    };
    try {
      const res = await VVJ_opprettDeltaker(felter);
      onLagret(res);
    } catch(e) { setFeil(e.message); } finally { setLaster(false); }
  };

  const lbl = { fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.04, textTransform:'uppercase', display:'block', marginBottom:5 };
  const inp = { padding:'10px 12px', fontSize:13 };

  return (
    <div className="ok-content__inner" style={{ maxWidth:680 }}>
      <Card padded={false}>
        <div style={{ padding:'20px 22px' }}>
          <div style={{ fontSize:14, fontWeight:600, marginBottom:16 }}>Ny deltaker</div>
          {feil && <div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8, padding:'9px 13px', fontSize:13, color:'#8a1620', marginBottom:14 }}>{feil}</div>}

          {/* Type-velger */}
          <div style={{ display:'flex', gap:10, marginBottom:18 }}>
            {[['nav','NAV-kvalifisering','Ingen lønn · dokumentert løp'],['ansatt','Ansatt','Lønnet · tilkalling']].map(([k,l,sub]) => (
              <button key={k} onClick={()=>setType(k)} style={{
                flex:1, textAlign:'left', padding:'12px 14px', borderRadius:10, cursor:'pointer', fontFamily:'inherit',
                border:`1.5px solid ${type===k ? SK.coral : 'rgba(17,24,61,.15)'}`,
                background: type===k ? SK.iceBlueLight : SK.pureWhite }}>
                <div style={{ fontSize:13, fontWeight:600 }}>{l}</div>
                <div style={{ fontSize:11.5, color:SK.soft, marginTop:2 }}>{sub}</div>
              </button>
            ))}
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'14px 20px', marginBottom:20 }}>
            <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
              <label style={lbl}>Navn *</label>
              <input className="ok-input" value={navn} onChange={e=>setNavn(e.target.value)} autoFocus style={inp} />
            </div>
            <div style={{ display:'flex', flexDirection:'column' }}>
              <label style={lbl}>Rolle / oppgave</label>
              <input className="ok-input" value={rolle} onChange={e=>setRolle(e.target.value)} placeholder="f.eks. Bistro-medarbeider" style={inp} />
            </div>
            <div style={{ display:'flex', flexDirection:'column' }}>
              <label style={lbl}>Avdeling</label>
              <input className="ok-input" value={avdeling} onChange={e=>setAvdeling(e.target.value)} placeholder="f.eks. OK:bistro" style={inp} />
            </div>
            <div style={{ display:'flex', flexDirection:'column' }}>
              <label style={lbl}>Veileder</label>
              <select className="ok-input" value={veilederId} onChange={e=>setVeilederId(e.target.value)} style={inp}>
                <option value="">— Ikke satt —</option>
                {(profiler||[]).map(p => <option key={p.id} value={p.id}>{p.navn||p.epost}</option>)}
              </select>
            </div>

            {type === 'nav' ? (
              <>
                <div style={{ display:'flex', flexDirection:'column' }}>
                  <label style={lbl}>NAV-saksnummer</label>
                  <input className="ok-input" value={navSak} onChange={e=>setNavSak(e.target.value)} placeholder="f.eks. 2026-04521" style={inp} />
                </div>
                <div style={{ display:'flex', flexDirection:'column' }}>
                  <label style={lbl}>NAV-veileder</label>
                  <input className="ok-input" value={navVeil} onChange={e=>setNavVeil(e.target.value)} style={inp} />
                </div>
              </>
            ) : (
              <>
                <div style={{ display:'flex', flexDirection:'column' }}>
                  <label style={lbl}>Timesats (kr)</label>
                  <input className="ok-input" type="number" value={timesats} onChange={e=>setTimesats(e.target.value)} style={inp} />
                </div>
                <div style={{ display:'flex', flexDirection:'column' }}>
                  <label style={lbl}>Uketimer</label>
                  <input className="ok-input" type="number" value={uketimer} onChange={e=>setUketimer(e.target.value)} style={inp} />
                </div>
              </>
            )}
          </div>

          {type === 'nav' && (
            <div style={{ fontSize:12, color:SK.soft, lineHeight:1.5, marginBottom:18,
              padding:'10px 12px', background:SK.iceBlueLight, borderRadius:8 }}>
              NAV-deltakere får ikke utbetalt lønn, men gjennomgår et dokumentert kvalifiseringsløp
              (mikrolæring + oppdrag). All progresjon logges for NAV-rapportering.
            </div>
          )}

          <div style={{ display:'flex', gap:8 }}>
            <Button variant="primary" onClick={lagre} disabled={laster}>{laster?'Oppretter…':'Opprett deltaker'}</Button>
            <Button onClick={onAvbryt}>Avbryt</Button>
          </div>
        </div>
      </Card>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// HOVEDKOMPONENT
// ══════════════════════════════════════════════════════════════

function VVJWorkspace({ go, deeplink }) {
  const [tab,        setTab]        = React.useState(deeplink || 'dashboard');
  const [deltakere,  setDeltakere]  = React.useState([]);
  const [kurs,       setKurs]       = React.useState([]);
  const [profiler,   setProfiler]   = React.useState([]);
  const [enheter,    setEnheter]    = React.useState([]);
  const [laster,     setLaster]     = React.useState(true);
  const [feil,       setFeil]       = React.useState(null);
  const [valgtDeltaker, setValgtDeltaker] = React.useState(null);
  const [visNy,      setVisNy]      = React.useState(false);
  const [brukerId,   setBrukerId]   = React.useState(null);

  React.useEffect(() => {
    window._sb.auth.getUser().then(({data:{user}}) => setBrukerId(user?.id));
    lastInn();
  }, []);

  async function lastInn() {
    setLaster(true); setFeil(null);
    try {
      const [d, k, pRes, eRes] = await Promise.all([
        VVJ_hentDeltakere(), VVJ_hentKurs(),
        window._sb.from('profiles').select('id,navn,epost').order('navn'),
        window._sb.from('enheter').select('id,navn').eq('aktiv',true).order('sortering'),
      ]);
      setDeltakere(d); setKurs(k);
      setProfiler(pRes.data||[]); setEnheter(eRes.data||[]);
    } catch(e) { setFeil(e.message); } finally { setLaster(false); }
  }

  const navAntall    = deltakere.filter(d => d.deltakertype === 'nav').length;
  const ansattAntall = deltakere.filter(d => d.deltakertype === 'ansatt').length;

  const tabs = [
    { id:'dashboard', label:'NyBy-dashboard' },
    { id:'deltakere', label:`Deltakere (${deltakere.length})` },
    { id:'laering',   label:`Mikrolæring (${kurs.length})` },
  ];

  // Ny deltaker
  if (visNy) return (
    <VVJNyDeltaker profiler={profiler} enheter={enheter} brukerId={brukerId}
      onLagret={d => { setDeltakere(prev => [...prev, d]); setVisNy(false); setValgtDeltaker(d); setTab('deltakere'); }}
      onAvbryt={() => setVisNy(false)} />
  );

  // Deltaker-detalj
  if (valgtDeltaker) return (
    <div className="ok-content__inner" style={{ maxWidth:900 }}>
      <VVJDeltakerDetalj deltaker={valgtDeltaker} kurs={kurs} brukerId={brukerId}
        onBack={() => setValgtDeltaker(null)}
        onOppdatert={d => setDeltakere(prev => prev.map(x => x.id===d.id?d:x))} />
    </div>
  );

  return (
    <div className="ok-content__inner" style={{ maxWidth:1280 }}>
      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:22 }}>
        <div>
          <div style={{ fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.08, textTransform:'uppercase' }}>Arbeidsinkludering</div>
          <h1 style={{ margin:'6px 0 0', fontSize:28, fontWeight:600, letterSpacing:-0.02 }}>Verdens Viktigste Jobb</h1>
          <div style={{ marginTop:4, color:SK.soft, fontSize:13 }}>
            {ansattAntall} ansatte · {navAntall} i NAV-kvalifisering
          </div>
        </div>
        <Button size="sm" onClick={lastInn}>Oppdater</Button>
      </div>

      {feil && <div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8, padding:'10px 14px', fontSize:13, color:'#8a1620', marginBottom:16 }}>{feil}</div>}

      <Tabs tabs={tabs} value={tab} onChange={setTab} />

      {laster ? (
        <Card padded><div style={{ padding:32, textAlign:'center', color:SK.soft }}>Laster…</div></Card>
      ) : (
        <>
          {tab === 'dashboard' && <VVJDashboard deltakere={deltakere} />}
          {tab === 'deltakere' && (
            <VVJDeltakerListe deltakere={deltakere}
              onVelg={d => setValgtDeltaker(d)}
              onNy={() => setVisNy(true)} />
          )}
          {tab === 'laering' && (
            <VVJMikrolaering kurs={kurs} deltakere={deltakere} onVelgDeltaker={d => setValgtDeltaker(d)} />
          )}
        </>
      )}
    </div>
  );
}

// ── Mikrolæring-oversikt ──────────────────────────────────────

function VVJMikrolaering({ kurs, deltakere, onVelgDeltaker }) {
  const navDeltakere = deltakere.filter(d => d.deltakertype === 'nav');
  return (
    <div>
      <div style={{ fontSize:12.5, color:SK.soft, lineHeight:1.5, marginBottom:16,
        padding:'12px 14px', background:SK.iceBlueLight, borderRadius:10 }}>
        Mikrolæringskursene utgjør kvalifiseringsløpet for NAV-deltakere. Kursene består av lesestoff,
        quiz og refleksjonsoppgaver. All progresjon dokumenteres automatisk for NAV-rapportering.
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))', gap:12, marginBottom:24 }}>
        {kurs.map(k => (
          <Card key={k.id} padded>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:8 }}>
              <span style={{ fontSize:10.5, fontWeight:600, padding:'2px 8px', borderRadius:99, background:SK.iceBlue, color:SK.ink }}>
                {k.kategori}
              </span>
              {k.obligatorisk && <span style={{ fontSize:10.5, fontWeight:600, color:SK.coral }}>Obligatorisk</span>}
            </div>
            <div style={{ fontSize:14, fontWeight:600, marginBottom:4 }}>{k.tittel}</div>
            <div style={{ fontSize:12.5, color:SK.soft, lineHeight:1.5, marginBottom:8 }}>{k.beskrivelse}</div>
            <div style={{ fontSize:11.5, color:SK.soft }}>{k.varighet_min} min</div>
          </Card>
        ))}
      </div>

      <div style={{ fontSize:13, fontWeight:600, marginBottom:10 }}>NAV-deltakere i kvalifisering</div>
      {navDeltakere.length === 0 ? (
        <Card padded><div style={{ color:SK.soft, fontSize:13 }}>Ingen NAV-deltakere registrert ennå.</div></Card>
      ) : (
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(240px,1fr))', gap:10 }}>
          {navDeltakere.map(d => (
            <div key={d.id} onClick={()=>onVelgDeltaker(d)} style={{
              cursor:'pointer', display:'flex', alignItems:'center', gap:10, padding:'10px 14px',
              borderRadius:10, border:'1px solid rgba(17,24,61,.08)', background:SK.pureWhite }}>
              <div style={{ width:34, height:34, borderRadius:'50%', background:d.farge||'#586ba4', color:'#fff',
                display:'flex', alignItems:'center', justifyContent:'center', fontSize:11, fontWeight:700, flexShrink:0 }}>
                {d.initialer || vvjIni(d.navn)}
              </div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:12.5, fontWeight:600 }}>{d.navn}</div>
                <div style={{ fontSize:11, color:SK.soft }}>Se kvalifiseringsløp →</div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { VVJWorkspace });