// prosessutvikling.jsx — Prosessutvikling & forbedringer
// Begrenset tilgang: kun roller daglig-leder/hr/okonomi/styre/kvalitet/admin

// ── Konstanter ─────────────────────────────────────────────────────────
const PU_KAT = {
  hr:       { label:'HR',        farge:'#28589f', bg:'#e3edfb' },
  okonomi:  { label:'Økonomi',   farge:'#08605f', bg:'#d7ebe7' },
  kvalitet: { label:'Kvalitet',  farge:'#586ba4', bg:'#e8ecf6' },
  it:       { label:'IT',        farge:'#8e5a05', bg:'#fdeac8' },
  drift:    { label:'Drift',     farge:'#6f7795', bg:'#f0f4fc' },
  annet:    { label:'Annet',     farge:'#6f7795', bg:'#f0f4fc' },
};
const PU_STATUS = {
  ikke_startet:{ label:'Ikke startet', bg:'#f0f4fc',  fg:'#6f7795' },
  pagar:       { label:'Pågår',        bg:'#fdeac8',  fg:'#8e5a05' },
  venter:      { label:'Venter',       bg:'#dce5f5',  fg:'#2c3e6b' },
  fullfort:    { label:'Fullført',     bg:'#dbeed8',  fg:'#1b6a2e' },
  avbrutt:     { label:'Avbrutt',      bg:'#fcddde',  fg:'#8a1620' },
};
const PU_PRI = {
  lav:     { label:'Lav',     dot:'#dbeed8' },
  normal:  { label:'Normal',  dot:'#dce5f5' },
  middels: { label:'Middels', dot:'#fdeac8' },
  høy:     { label:'Høy',     dot:'#f2545c' },
  kritisk: { label:'Kritisk', dot:'#8a1620' },
};
const PU_KOMM_TYPE = {
  kommentar:  { label:'Kommentar',  emoji:'💬' },
  ide:        { label:'Idé',        emoji:'💡' },
  losning:    { label:'Løsning',    emoji:'✅' },
  blokkering: { label:'Blokkering', emoji:'🚧' },
  beslutning: { label:'Beslutning', emoji:'📌' },
};
const PU_LBL = { fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.04, textTransform:'uppercase', display:'block', marginBottom:5 };
const PU_INP = { padding:'9px 12px', fontSize:13 };

function puFmt(d) { if (!d) return '—'; return new Date(d).toLocaleDateString('nb-NO', { day:'numeric', month:'short', year:'numeric' }); }
function puDager(d) { if (!d) return null; return Math.round((new Date(d) - new Date()) / 86400000); }

// ── Supabase-datalaget ──────────────────────────────────────────────────
async function PU_hentProsesser() {
  const { data, error } = await window._sb.from('pross_prosesser')
    .select('*, ansvarlig:profiles!ansvarlig_id(id,navn,avatar_url)')
    .order('kategori').order('created_at', { ascending: false });
  if (error) { if (error.code === '42P01') return []; throw error; }
  return data || [];
}
async function PU_hentProfiler() {
  const { data } = await window._sb.from('profiles').select('id,navn,epost,avatar_url').order('navn');
  return (data||[]).filter(p=>p.navn||p.epost);
}
async function PU_hentKommentarer(prosessId) {
  const { data, error } = await window._sb.from('pross_kommentarer')
    .select('*, forfatter:profiles!forfatter_id(id,navn,avatar_url)')
    .eq('prosess_id', prosessId).order('created_at');
  if (error) return [];
  return data || [];
}
async function PU_hentMilepaler(prosessId) {
  const { data } = await window._sb.from('pross_milepaler')
    .select('*').eq('prosess_id', prosessId).order('sortering');
  return data || [];
}
async function PU_lagreProsess(id, felter) {
  const { ansvarlig, ...rene } = felter;
  const { data, error } = id
    ? await window._sb.from('pross_prosesser').update(rene).eq('id', id).select('*, ansvarlig:profiles!ansvarlig_id(id,navn,avatar_url)').single()
    : await window._sb.from('pross_prosesser').insert([rene]).select('*, ansvarlig:profiles!ansvarlig_id(id,navn,avatar_url)').single();
  if (error) throw error;
  return data;
}
async function PU_lagreKommentar(prosessId, tekst, type, forfatterid) {
  const { data, error } = await window._sb.from('pross_kommentarer')
    .insert([{ prosess_id:prosessId, tekst, type, forfatter_id:forfatterid }])
    .select('*, forfatter:profiles!forfatter_id(id,navn,avatar_url)').single();
  if (error) throw error;
  return data;
}
async function PU_lagreMilpael(prosessId, tittel, frist, sortering) {
  const { data, error } = await window._sb.from('pross_milepaler')
    .insert([{ prosess_id:prosessId, tittel, frist:frist||null, sortering }])
    .select().single();
  if (error) throw error;
  return data;
}
async function PU_oppdaterMilpael(id, fullfort) {
  await window._sb.from('pross_milepaler').update({ fullfort, fullfort_dato: fullfort ? new Date().toISOString().split('T')[0] : null }).eq('id', id);
}

// ── Delte UI-hjelpere ───────────────────────────────────────────────────
function PuAvatar({ navn, avatarUrl, size }) {
  const sz = size || 28;
  if (avatarUrl) return <img src={avatarUrl} style={{ width:sz,height:sz,borderRadius:'50%',objectFit:'cover',flexShrink:0 }} />;
  const init = (navn||'?').split(' ').slice(0,2).map(w=>w[0]||'').join('').toUpperCase();
  const bg = ['#28589f','#08605f','#586ba4','#f2545c','#8e5a05'][init.charCodeAt(0)%5];
  return <div style={{ width:sz,height:sz,borderRadius:'50%',background:bg,display:'flex',alignItems:'center',justifyContent:'center',fontSize:sz*0.38,fontWeight:700,color:'#fff',flexShrink:0 }}>{init||'?'}</div>;
}
function PuStatusPill({ status }) {
  const t = PU_STATUS[status]||PU_STATUS.ikke_startet;
  return <span style={{ fontSize:10.5,fontWeight:700,padding:'2px 8px',borderRadius:99,background:t.bg,color:t.fg,whiteSpace:'nowrap' }}>{t.label}</span>;
}
function PuKatPill({ kategori }) {
  const t = PU_KAT[kategori]||PU_KAT.annet;
  return <span style={{ fontSize:10,fontWeight:700,padding:'1px 7px',borderRadius:4,background:t.bg,color:t.farge }}>{t.label}</span>;
}
function PuFremdriftBar({ pct, fullfort }) {
  const farge = fullfort ? '#1b6a2e' : pct>=75 ? '#08605f' : pct>=50 ? '#8e5a05' : '#586ba4';
  return (
    <div style={{ display:'flex',alignItems:'center',gap:8 }}>
      <div style={{ flex:1,height:6,background:'rgba(17,24,61,.08)',borderRadius:3,overflow:'hidden' }}>
        <div style={{ width:`${pct||0}%`,height:'100%',background:farge,borderRadius:3,transition:'width .3s' }} />
      </div>
      <span style={{ fontSize:11,fontWeight:700,color:farge,minWidth:28 }}>{pct||0}%</span>
    </div>
  );
}

// ── PROSESS-SKJEMA ──────────────────────────────────────────────────────
function PuProsessSkjema({ prosess, profiler, onLagret, onAvbryt }) {
  const t0 = prosess || {};
  const [tittel,sT]    = React.useState(t0.tittel||'');
  const [besk,sB]      = React.useState(t0.beskrivelse||'');
  const [kat,sK]       = React.useState(t0.kategori||'annet');
  const [pri,sP]       = React.useState(t0.prioritet||'normal');
  const [status,sSt]   = React.useState(t0.status||'ikke_startet');
  const [frmd,sFr]     = React.useState(t0.fremdrift||0);
  const [verdi,sV]     = React.useState(t0.verdi_score||3);
  const [innsats,sI]   = React.useState(t0.innsats_score||3);
  const [ansId,sAn]    = React.useState(t0.ansvarlig_id||'');
  const [ansNavn,sAN]  = React.useState(t0.ansvarlig_navn||'');
  const [start,sSd]    = React.useState(t0.start_dato||'');
  const [frist,sFl]    = React.useState(t0.forfall_dato||'');
  const [timer,sTime]  = React.useState(t0.estimert_timer_mnd||'');
  const [bespar,sBes]  = React.useState(t0.besparelse_timer_mnd||'');
  const [tilgang,sTil] = React.useState(t0.tilgangsniva||'begrenset');
  const [laster,sL]    = React.useState(false);
  const [feil,sF]      = React.useState(null);

  const lagre = async () => {
    if (!tittel.trim()) { sF('Tittel er påkrevd.'); return; }
    sL(true); sF(null);
    try {
      const r = await PU_lagreProsess(prosess?.id||null, {
        tittel, beskrivelse:besk||null, kategori:kat, prioritet:pri, status,
        fremdrift:parseInt(frmd)||0, ferdig: status==='fullfort',
        verdi_score:parseInt(verdi), innsats_score:parseInt(innsats),
        ansvarlig_id:ansId||null, ansvarlig_navn:ansNavn||null,
        start_dato:start||null, forfall_dato:frist||null,
        estimert_timer_mnd:timer!==''?parseFloat(timer):null,
        besparelse_timer_mnd:bespar!==''?parseFloat(bespar):null,
        tilgangsniva:tilgang,
      });
      onLagret(r);
    } catch(e) { sF(e.message); } finally { sL(false); }
  };

  return (
    <div style={{ padding:'20px 22px' }}>
      <div style={{ fontSize:15,fontWeight:700,marginBottom:18 }}>{prosess?'Rediger prosess':'Ny prosess'}</div>
      {feil && <div style={{ background:'#fcddde',border:'1px solid #f2545c',borderRadius:8,padding:'9px 13px',fontSize:13,color:'#8a1620',marginBottom:14 }}>{feil}</div>}
      <div style={{ display:'grid',gridTemplateColumns:'1fr 1fr',gap:13 }}>
        <div style={{ gridColumn:'1/-1' }}><label style={PU_LBL}>Tittel *</label><input className="ok-input" value={tittel} onChange={e=>sT(e.target.value)} style={PU_INP} /></div>
        <div><label style={PU_LBL}>Kategori</label><select className="ok-input" value={kat} onChange={e=>sK(e.target.value)} style={PU_INP}>{Object.entries(PU_KAT).map(([k,v])=><option key={k} value={k}>{v.label}</option>)}</select></div>
        <div><label style={PU_LBL}>Prioritet</label><select className="ok-input" value={pri} onChange={e=>sP(e.target.value)} style={PU_INP}>{Object.entries(PU_PRI).map(([k,v])=><option key={k} value={k}>{v.label}</option>)}</select></div>
        <div><label style={PU_LBL}>Status</label><select className="ok-input" value={status} onChange={e=>sSt(e.target.value)} style={PU_INP}>{Object.entries(PU_STATUS).map(([k,v])=><option key={k} value={k}>{v.label}</option>)}</select></div>
        <div><label style={PU_LBL}>Fremdrift ({frmd}%)</label><input type="range" min={0} max={100} step={5} value={frmd} onChange={e=>sFr(e.target.value)} style={{ width:'100%',marginTop:8 }} /></div>
        <div>
          <label style={PU_LBL}>Forventet verdi (1–5): {verdi}</label>
          <div style={{ display:'flex',gap:4 }}>
            {[1,2,3,4,5].map(n=><button key={n} onClick={()=>sV(n)} style={{ flex:1,padding:'7px 0',border:'1px solid',borderColor:verdi>=n?'#1b6a2e':'rgba(17,24,61,.15)',borderRadius:6,background:verdi>=n?'#dbeed8':'#fff',fontWeight:verdi===n?700:400,cursor:'pointer',fontSize:13 }}>{n}</button>)}
          </div>
        </div>
        <div>
          <label style={PU_LBL}>Estimert innsats (1–5): {innsats}</label>
          <div style={{ display:'flex',gap:4 }}>
            {[1,2,3,4,5].map(n=><button key={n} onClick={()=>sI(n)} style={{ flex:1,padding:'7px 0',border:'1px solid',borderColor:innsats>=n?'#f2545c':'rgba(17,24,61,.15)',borderRadius:6,background:innsats>=n?'#fcddde':'#fff',fontWeight:innsats===n?700:400,cursor:'pointer',fontSize:13 }}>{n}</button>)}
          </div>
        </div>
        <div><label style={PU_LBL}>Ansvarlig (intern)</label><select className="ok-input" value={ansId} onChange={e=>sAn(e.target.value)} style={PU_INP}><option value="">— Velg person —</option>{profiler.map(p=><option key={p.id} value={p.id}>{p.navn||p.epost}</option>)}</select></div>
        <div><label style={PU_LBL}>Ansvarlig (fritekst)</label><input className="ok-input" value={ansNavn} onChange={e=>sAN(e.target.value)} placeholder="Navn på ansvarlig" style={PU_INP} /></div>
        <div><label style={PU_LBL}>Startdato</label><input type="date" className="ok-input" value={start} onChange={e=>sSd(e.target.value)} style={PU_INP} /></div>
        <div><label style={PU_LBL}>Forfallsdato</label><input type="date" className="ok-input" value={frist} onChange={e=>sFl(e.target.value)} style={PU_INP} /></div>
        <div><label style={PU_LBL}>Est. timer/mnd</label><input type="number" min={0} step={0.5} className="ok-input" value={timer} onChange={e=>sTime(e.target.value)} placeholder="f.eks. 3" style={PU_INP} /></div>
        <div><label style={PU_LBL}>Besparelse timer/mnd</label><input type="number" min={0} step={0.5} className="ok-input" value={bespar} onChange={e=>sBes(e.target.value)} placeholder="f.eks. 2.5" style={PU_INP} /></div>
        <div><label style={PU_LBL}>Tilgangsnivå</label><select className="ok-input" value={tilgang} onChange={e=>sTil(e.target.value)} style={PU_INP}><option value="alle">Alle kan se</option><option value="begrenset">Begrenset (leder/admin)</option><option value="kun_ansvarlig">Kun ansvarlig</option></select></div>
        <div style={{ gridColumn:'1/-1' }}><label style={PU_LBL}>Beskrivelse</label><textarea className="ok-input" value={besk} onChange={e=>sB(e.target.value)} rows={3} style={{ ...PU_INP,resize:'vertical',fontFamily:'inherit' }} /></div>
      </div>
      <div style={{ display:'flex',gap:8,marginTop:16 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>{laster?'Lagrer…':prosess?'Lagre endringer':'Opprett prosess'}</Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

// ── PROSESS-PANEL (detaljvisning med kommentarer + milepæler) ───────────
function PuProsessPanel({ prosess, profiler, brukerNavn, brukerId, onOppdatert, onLukk }) {
  const [kommentarer, setKomm] = React.useState(null);
  const [milepaler, setMil]    = React.useState(null);
  const [nyKomm, setNyKomm]    = React.useState('');
  const [kommType, setKommType]= React.useState('kommentar');
  const [nyMilTittel, setNMT]  = React.useState('');
  const [nyMilFrist, setNMF]   = React.useState('');
  const [visSkjema, setVis]    = React.useState(false);
  const [sendL, setSendL]      = React.useState(false);

  React.useEffect(() => {
    PU_hentKommentarer(prosess.id).then(setKomm);
    PU_hentMilepaler(prosess.id).then(setMil);
  }, [prosess.id]);

  const sendKomm = async () => {
    if (!nyKomm.trim()) return;
    setSendL(true);
    try {
      const r = await PU_lagreKommentar(prosess.id, nyKomm.trim(), kommType, brukerId);
      setKomm(prev=>[...(prev||[]), r]); setNyKomm('');
    } finally { setSendL(false); }
  };
  const leggTilMil = async () => {
    if (!nyMilTittel.trim()) return;
    const r = await PU_lagreMilpael(prosess.id, nyMilTittel.trim(), nyMilFrist, (milepaler||[]).length);
    setMil(prev=>[...(prev||[]),r]); setNMT(''); setNMF('');
  };
  const toggleMil = async (m) => {
    await PU_oppdaterMilpael(m.id, !m.fullfort);
    setMil(prev=>prev.map(x=>x.id===m.id?{...x,fullfort:!x.fullfort}:x));
  };

  const kat = PU_KAT[prosess.kategori]||PU_KAT.annet;
  const d = kvDager(prosess.forfall_dato);
  const forfalt = d!=null && d < 0 && !prosess.ferdig;

  return (
    <div style={{ position:'fixed',inset:0,background:'rgba(17,24,61,.45)',display:'flex',alignItems:'flex-start',justifyContent:'flex-end',zIndex:1000,padding:0 }}>
      <div style={{ width:Math.min(680,window.innerWidth),height:'100vh',background:'#fff',overflowY:'auto',display:'flex',flexDirection:'column',boxShadow:'-4px 0 24px rgba(17,24,61,.15)' }}>
        {/* Hode */}
        <div style={{ padding:'20px 24px',borderBottom:'1px solid rgba(17,24,61,.08)',position:'sticky',top:0,background:'#fff',zIndex:2 }}>
          <div style={{ display:'flex',alignItems:'flex-start',justifyContent:'space-between',gap:12 }}>
            <div style={{ flex:1 }}>
              <div style={{ display:'flex',gap:6,flexWrap:'wrap',marginBottom:8 }}>
                <PuKatPill kategori={prosess.kategori} />
                <PuStatusPill status={prosess.status} />
                {prosess.prioritet==='høy'||prosess.prioritet==='kritisk'?<span style={{ fontSize:10,fontWeight:700,padding:'1px 7px',borderRadius:99,background:'#fcddde',color:'#8a1620' }}>{PU_PRI[prosess.prioritet]?.label}</span>:null}
              </div>
              <div style={{ fontSize:16,fontWeight:700,lineHeight:1.3 }}>{prosess.tittel}</div>
            </div>
            <button onClick={onLukk} style={{ border:'none',background:'none',fontSize:22,cursor:'pointer',color:SK.soft,padding:'2px 6px',lineHeight:1 }}>×</button>
          </div>
          <PuFremdriftBar pct={prosess.fremdrift} fullfort={prosess.ferdig} />
        </div>

        <div style={{ flex:1,padding:'20px 24px',display:'flex',flexDirection:'column',gap:18 }}>
          {/* Metadata-grid */}
          <div style={{ display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,background:SK.iceBlueLight,borderRadius:10,padding:'14px 16px',fontSize:12.5 }}>
            <div><span style={{ color:SK.soft }}>Ansvarlig: </span><b>{prosess.ansvarlig?.navn||prosess.ansvarlig_navn||'—'}</b></div>
            <div><span style={{ color:SK.soft }}>Forfallsdato: </span><b style={{ color:forfalt?'#f2545c':'inherit' }}>{puFmt(prosess.forfall_dato)}{forfalt?<span style={{ fontSize:10,color:'#f2545c' }}> (forfalt)</span>:null}</b></div>
            <div><span style={{ color:SK.soft }}>Startdato: </span>{puFmt(prosess.start_dato)}</div>
            <div><span style={{ color:SK.soft }}>Est. timer/mnd: </span>{prosess.estimert_timer_mnd||'—'}{prosess.besparelse_timer_mnd?<span style={{ color:'#1b6a2e' }}> → {prosess.besparelse_timer_mnd} spart</span>:null}</div>
            <div>
              <span style={{ color:SK.soft }}>Verdi: </span>
              {Array.from({length:5}).map((_,i)=><span key={i} style={{ color:i<prosess.verdi_score?'#1b6a2e':'rgba(17,24,61,.15)',fontSize:14 }}>●</span>)}
            </div>
            <div>
              <span style={{ color:SK.soft }}>Innsats: </span>
              {Array.from({length:5}).map((_,i)=><span key={i} style={{ color:i<prosess.innsats_score?'#f2545c':'rgba(17,24,61,.15)',fontSize:14 }}>●</span>)}
            </div>
          </div>

          {prosess.beskrivelse && <div style={{ fontSize:13.5,lineHeight:1.6,color:SK.ink }}>{prosess.beskrivelse}</div>}

          {/* Rediger-knapp */}
          <div>
            <Button size="sm" onClick={()=>setVis(v=>!v)}>{visSkjema?'Avbryt redigering':'Rediger prosess'}</Button>
          </div>
          {visSkjema && (
            <div style={{ border:'1px solid rgba(17,24,61,.1)',borderRadius:10,overflow:'hidden' }}>
              <PuProsessSkjema prosess={prosess} profiler={profiler}
                onLagret={r=>{ onOppdatert(r); setVis(false); }}
                onAvbryt={()=>setVis(false)} />
            </div>
          )}

          {/* Milepæler */}
          <div>
            <div style={{ fontWeight:700,fontSize:13,marginBottom:8,display:'flex',alignItems:'center',gap:8 }}>
              Milepæler
              {milepaler&&<span style={{ fontSize:11,color:SK.soft,fontWeight:400 }}>{milepaler.filter(m=>m.fullfort).length}/{milepaler.length} fullført</span>}
            </div>
            {(milepaler||[]).map(m=>(
              <div key={m.id} style={{ display:'flex',alignItems:'center',gap:10,padding:'6px 0',borderBottom:'1px solid rgba(17,24,61,.05)' }}>
                <input type="checkbox" checked={m.fullfort} onChange={()=>toggleMil(m)} style={{ width:16,height:16,cursor:'pointer',accentColor:'#1b6a2e' }} />
                <span style={{ flex:1,fontSize:13,textDecoration:m.fullfort?'line-through':'none',color:m.fullfort?SK.soft:SK.ink }}>{m.tittel}</span>
                {m.frist&&<span style={{ fontSize:11,color:SK.soft }}>{puFmt(m.frist)}</span>}
              </div>
            ))}
            {!milepaler&&<div style={{ fontSize:12,color:SK.soft }}>Laster…</div>}
            <div style={{ display:'flex',gap:8,marginTop:8 }}>
              <input className="ok-input" value={nyMilTittel} onChange={e=>setNMT(e.target.value)} placeholder="Ny milepæl…" style={{ flex:1,padding:'7px 10px',fontSize:12.5 }} onKeyDown={e=>e.key==='Enter'&&leggTilMil()} />
              <input type="date" className="ok-input" value={nyMilFrist} onChange={e=>setNMF(e.target.value)} style={{ padding:'7px 10px',fontSize:12.5,maxWidth:160 }} />
              <Button size="sm" onClick={leggTilMil}>+</Button>
            </div>
          </div>

          {/* Kommentartråd */}
          <div style={{ flex:1 }}>
            <div style={{ fontWeight:700,fontSize:13,marginBottom:12 }}>Kommentarer & kommunikasjon</div>
            {!kommentarer && <div style={{ fontSize:12,color:SK.soft }}>Laster…</div>}
            {(kommentarer||[]).length===0 && kommentarer && <div style={{ fontSize:12.5,color:SK.soft,fontStyle:'italic',marginBottom:12 }}>Ingen kommentarer ennå. Del tanker, ideer eller løsninger.</div>}
            <div style={{ display:'flex',flexDirection:'column',gap:10,marginBottom:16 }}>
              {(kommentarer||[]).map(k=>{
                const kt = PU_KOMM_TYPE[k.type]||PU_KOMM_TYPE.kommentar;
                return (
                  <div key={k.id} style={{ display:'flex',gap:10,alignItems:'flex-start' }}>
                    <PuAvatar navn={k.forfatter?.navn||'?'} avatarUrl={k.forfatter?.avatar_url} size={32} />
                    <div style={{ flex:1 }}>
                      <div style={{ display:'flex',alignItems:'center',gap:8,marginBottom:4 }}>
                        <span style={{ fontSize:12,fontWeight:700 }}>{k.forfatter?.navn||'Ukjent'}</span>
                        <span style={{ fontSize:11.5,padding:'1px 7px',borderRadius:99,background:SK.iceBlueLight,color:SK.soft }}>{kt.emoji} {kt.label}</span>
                        <span style={{ fontSize:11,color:SK.soft,marginLeft:'auto' }}>{new Date(k.created_at).toLocaleDateString('nb-NO',{day:'numeric',month:'short'})} {new Date(k.created_at).toLocaleTimeString('nb-NO',{hour:'2-digit',minute:'2-digit'})}</span>
                      </div>
                      <div style={{ fontSize:13,lineHeight:1.5,whiteSpace:'pre-wrap',background:SK.iceBlueLight,borderRadius:'0 10px 10px 10px',padding:'10px 14px' }}>{k.tekst}</div>
                    </div>
                  </div>
                );
              })}
            </div>
            {/* Ny kommentar */}
            <div style={{ border:'1px solid rgba(17,24,61,.12)',borderRadius:10,padding:12,background:'#fafbff' }}>
              <div style={{ display:'flex',gap:6,marginBottom:8,flexWrap:'wrap' }}>
                {Object.entries(PU_KOMM_TYPE).map(([k,v])=>(
                  <button key={k} onClick={()=>setKommType(k)} style={{ padding:'4px 10px',borderRadius:99,fontSize:11.5,cursor:'pointer',fontFamily:'inherit',border:'1px solid rgba(17,24,61,.15)',background:kommType===k?SK.ink:'transparent',color:kommType===k?'#fff':SK.ink }}>
                    {v.emoji} {v.label}
                  </button>
                ))}
              </div>
              <textarea className="ok-input" value={nyKomm} onChange={e=>setNyKomm(e.target.value)} placeholder={`Legg til ${PU_KOMM_TYPE[kommType]?.label.toLowerCase()}…`} rows={2} style={{ ...PU_INP,width:'100%',resize:'vertical',fontFamily:'inherit',marginBottom:8,boxSizing:'border-box' }} onKeyDown={e=>e.key==='Enter'&&e.ctrlKey&&sendKomm()} />
              <div style={{ display:'flex',alignItems:'center',justifyContent:'space-between' }}>
                <span style={{ fontSize:11,color:SK.soft }}>Ctrl+Enter for å sende</span>
                <Button variant="primary" size="sm" onClick={sendKomm} disabled={sendL||!nyKomm.trim()}>{sendL?'Sender…':'Send'}</Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── KANBAN-VISNING ──────────────────────────────────────────────────────
function PuKanban({ prosesser, onClick }) {
  const kolonner = ['ikke_startet','pagar','venter','fullfort'];
  return (
    <div style={{ display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12,alignItems:'start' }}>
      {kolonner.map(k=>{
        const t=PU_STATUS[k]; const rader=prosesser.filter(p=>p.status===k);
        return (
          <div key={k}>
            <div style={{ display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:8 }}>
              <span style={{ fontSize:11,fontWeight:700,color:t.fg,textTransform:'uppercase',letterSpacing:0.1 }}>{t.label}</span>
              <span style={{ fontSize:11,color:SK.soft,background:SK.iceBlueLight,padding:'1px 7px',borderRadius:99 }}>{rader.length}</span>
            </div>
            <div style={{ display:'flex',flexDirection:'column',gap:8 }}>
              {rader.map(p=>{
                const kat=PU_KAT[p.kategori]||PU_KAT.annet; const d=puDager(p.forfall_dato); const forfalt=d!=null&&d<0&&!p.ferdig;
                return (
                  <div key={p.id} onClick={()=>onClick(p)} style={{ background:'#fff',border:`1px solid rgba(17,24,61,.1)`,borderLeft:`4px solid ${kat.farge}`,borderRadius:8,padding:'10px 12px',cursor:'pointer',transition:'box-shadow .15s' }}
                    onMouseEnter={e=>e.currentTarget.style.boxShadow='0 2px 12px rgba(17,24,61,.1)'}
                    onMouseLeave={e=>e.currentTarget.style.boxShadow=''}>
                    <div style={{ fontSize:12.5,fontWeight:600,marginBottom:6,lineHeight:1.3 }}>{p.tittel}</div>
                    <PuFremdriftBar pct={p.fremdrift} fullfort={p.ferdig} />
                    <div style={{ display:'flex',alignItems:'center',justifyContent:'space-between',marginTop:8 }}>
                      <PuKatPill kategori={p.kategori} />
                      {(p.ansvarlig?.navn||p.ansvarlig_navn)&&<span style={{ fontSize:11,color:SK.soft }}>{(p.ansvarlig?.navn||p.ansvarlig_navn).split(' ')[0]}</span>}
                    </div>
                    {p.forfall_dato&&<div style={{ fontSize:10.5,marginTop:4,color:forfalt?'#f2545c':SK.soft }}>{forfalt?'⚠ Forfalt: ':'Frist: '}{puFmt(p.forfall_dato)}</div>}
                  </div>
                );
              })}
              {rader.length===0&&<div style={{ border:'1px dashed rgba(17,24,61,.15)',borderRadius:8,padding:'20px 12px',textAlign:'center',color:SK.soft,fontSize:12 }}>Tom</div>}
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ── PRIORITERINGSMATRISE (verdi × innsats) ──────────────────────────────
function PuMatrise({ prosesser, onClick }) {
  const kvadranter = [
    { id:'kjappe_gevinster', label:'🚀 Kjappe gevinster', sub:'Høy verdi, lav innsats', verdi:'høy', innsats:'lav', bg:'#dbeed8', border:'#1b6a2e' },
    { id:'store_prosjekter', label:'🎯 Store prosjekter', sub:'Høy verdi, høy innsats', verdi:'høy', innsats:'høy', bg:'#e3edfb', border:'#28589f' },
    { id:'fyll_inn',         label:'📥 Fyll inn tid',    sub:'Lav verdi, lav innsats', verdi:'lav', innsats:'lav', bg:'#fdeac8', border:'#8e5a05' },
    { id:'unnga',            label:'⏭ Unngå/utsett',    sub:'Lav verdi, høy innsats', verdi:'lav', innsats:'høy', bg:'#f0f4fc', border:'#6f7795' },
  ];
  const kategoriser = (p) => {
    const høyVerdi = p.verdi_score >= 4; const lavInnsats = p.innsats_score <= 2;
    if (høyVerdi && lavInnsats)  return 'kjappe_gevinster';
    if (høyVerdi && !lavInnsats) return 'store_prosjekter';
    if (!høyVerdi && lavInnsats) return 'fyll_inn';
    return 'unnga';
  };
  const aktive = prosesser.filter(p=>p.status!=='fullfort'&&p.status!=='avbrutt');
  return (
    <div>
      <div style={{ fontSize:12.5,color:SK.soft,marginBottom:16 }}>
        Aktive prosesser plassert etter forventet <b>verdi</b> (1–5) og estimert <b>innsats</b> (1–5). Klikk for å åpne.
      </div>
      <div style={{ display:'grid',gridTemplateColumns:'1fr 1fr',gap:14 }}>
        {kvadranter.map(kv=>{
          const rader=aktive.filter(p=>kategoriser(p)===kv.id);
          return (
            <div key={kv.id} style={{ background:kv.bg,borderRadius:12,border:`2px solid ${kv.border}22`,padding:'14px 16px' }}>
              <div style={{ fontWeight:700,fontSize:13,marginBottom:2 }}>{kv.label}</div>
              <div style={{ fontSize:11.5,color:SK.soft,marginBottom:12 }}>{kv.sub}</div>
              {rader.length===0&&<div style={{ fontSize:12.5,color:SK.soft,fontStyle:'italic' }}>Ingen her ennå</div>}
              <div style={{ display:'flex',flexDirection:'column',gap:6 }}>
                {rader.sort((a,b)=>b.verdi_score-a.verdi_score).map(p=>{
                  const kat=PU_KAT[p.kategori]||PU_KAT.annet;
                  return (
                    <div key={p.id} onClick={()=>onClick(p)} style={{ background:'rgba(255,255,255,.8)',borderRadius:8,padding:'8px 10px',cursor:'pointer',border:`1px solid ${kat.farge}33`,display:'flex',alignItems:'center',gap:8 }}>
                      <div style={{ flex:1,minWidth:0 }}>
                        <div style={{ fontSize:12.5,fontWeight:600,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap' }}>{p.tittel}</div>
                        <div style={{ display:'flex',gap:6,marginTop:3 }}>
                          <PuKatPill kategori={p.kategori} />
                          <span style={{ fontSize:10.5,color:SK.soft }}>{p.ansvarlig?.navn||p.ansvarlig_navn||''}</span>
                        </div>
                      </div>
                      <div style={{ textAlign:'right',flexShrink:0 }}>
                        <div style={{ fontSize:10,color:SK.soft }}>V:{p.verdi_score} I:{p.innsats_score}</div>
                        <PuFremdriftBar pct={p.fremdrift} fullfort={p.ferdig} />
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ── LISTE-VISNING ────────────────────────────────────────────────────────
function PuListe({ prosesser, onClick }) {
  return (
    <Card padded={false}>
      {prosesser.length===0
        ? <div style={{ padding:32,textAlign:'center',color:SK.soft,fontSize:13 }}>Ingen prosesser funnet.</div>
        : <table className="ok-table">
            <thead><tr>
              <th style={{ paddingLeft:18 }}>Prosess</th>
              <th>Status</th><th>Prioritet</th><th>Fremdrift</th>
              <th>Ansvarlig</th><th>Frist</th><th>V/I</th>
            </tr></thead>
            <tbody>
              {prosesser.map(p=>{
                const kat=PU_KAT[p.kategori]||PU_KAT.annet; const d=puDager(p.forfall_dato); const forfalt=d!=null&&d<0&&!p.ferdig;
                return (
                  <tr key={p.id} onClick={()=>onClick(p)} style={{ cursor:'pointer',borderLeft:`3px solid ${kat.farge}` }}>
                    <td style={{ paddingLeft:18 }}>
                      <div style={{ fontWeight:600,fontSize:12.5 }}>{p.tittel}</div>
                      <PuKatPill kategori={p.kategori} />
                    </td>
                    <td><PuStatusPill status={p.status} /></td>
                    <td>
                      <div style={{ display:'flex',alignItems:'center',gap:5,fontSize:12 }}>
                        <span style={{ width:8,height:8,borderRadius:'50%',background:PU_PRI[p.prioritet]?.dot,display:'inline-block' }} />
                        {PU_PRI[p.prioritet]?.label||p.prioritet}
                      </div>
                    </td>
                    <td style={{ minWidth:120 }}><PuFremdriftBar pct={p.fremdrift} fullfort={p.ferdig} /></td>
                    <td style={{ fontSize:12,color:SK.soft }}>{p.ansvarlig?.navn||p.ansvarlig_navn||'—'}</td>
                    <td style={{ fontSize:12,whiteSpace:'nowrap',color:forfalt?'#f2545c':'inherit' }}>{puFmt(p.forfall_dato)}</td>
                    <td style={{ fontSize:11,color:SK.soft,textAlign:'center' }}>{p.verdi_score}/{p.innsats_score}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>}
    </Card>
  );
}

// ── HOVED-WORKSPACE ─────────────────────────────────────────────────────
function ProsessutviklingWorkspace({ go }) {
  const [prosesser, setProsesser] = React.useState([]);
  const [profiler,  setProfiler]  = React.useState([]);
  const [laster,    setLaster]    = React.useState(true);
  const [feil,      setFeil]      = React.useState(null);
  const [visning,   setVisning]   = React.useState('kanban');  // kanban | liste | matrise
  const [valgt,     setValgt]     = React.useState(null);
  const [nyForm,    setNyForm]    = React.useState(false);
  const [katFilter, setKatF]      = React.useState('alle');
  const [statusFil, setStatF]     = React.useState('aktive');
  const [sokTekst,  setSok]       = React.useState('');
  const [brukerId,  setBId]       = React.useState(null);
  const [brukerNavn,setBNavn]     = React.useState('');

  React.useEffect(() => {
    window._sb.auth.getUser().then(({ data:{ user } }) => {
      if (user) {
        setBId(user.id);
        window._sb.from('profiles').select('navn,epost').eq('id',user.id).single().then(({data})=>setBNavn(data?.navn||data?.epost||''));
      }
    });
    lastInn();
  }, []);

  async function lastInn() {
    setLaster(true); setFeil(null);
    try {
      const [p, pr] = await Promise.all([PU_hentProsesser(), PU_hentProfiler()]);
      setProsesser(p); setProfiler(pr);
    } catch(e) { setFeil(e.message); } finally { setLaster(false); }
  }

  const filtrerte = React.useMemo(() => {
    let h = prosesser;
    if (katFilter !== 'alle') h = h.filter(p => p.kategori === katFilter);
    if (statusFil === 'aktive')   h = h.filter(p => p.status !== 'fullfort' && p.status !== 'avbrutt');
    if (statusFil === 'fullfort') h = h.filter(p => p.status === 'fullfort');
    if (sokTekst) { const q=sokTekst.toLowerCase(); h = h.filter(p=>(p.tittel||'').toLowerCase().includes(q)||(p.beskrivelse||'').toLowerCase().includes(q)||(p.ansvarlig_navn||'').toLowerCase().includes(q)||(p.ansvarlig?.navn||'').toLowerCase().includes(q)); }
    return h;
  }, [prosesser, katFilter, statusFil, sokTekst]);

  // KPI
  const aktive   = prosesser.filter(p=>p.status==='pagar').length;
  const fullfort = prosesser.filter(p=>p.ferdig).length;
  const ikkeStart= prosesser.filter(p=>p.status==='ikke_startet').length;
  const forfalt  = prosesser.filter(p=>{ const d=puDager(p.forfall_dato); return d!=null&&d<0&&!p.ferdig; }).length;

  return (
    <div className="ok-content__inner" style={{ maxWidth:1320 }}>
      {/* Topp */}
      <div style={{ display:'flex',alignItems:'flex-end',justifyContent:'space-between',marginBottom:20,flexWrap:'wrap',gap:12 }}>
        <div>
          <div style={{ fontSize:11,fontWeight:600,color:SK.soft,letterSpacing:0.08,textTransform:'uppercase',marginBottom:4 }}>Drift</div>
          <h1 style={{ margin:0,fontSize:28,fontWeight:700 }}>Prosessutvikling</h1>
          <div style={{ marginTop:4,color:SK.soft,fontSize:13 }}>Kartlegging og forbedring av interne prosesser</div>
        </div>
        <div style={{ display:'flex',gap:8 }}>
          <Button size="sm" onClick={lastInn}>Oppdater</Button>
          <Button variant="primary" icon={I.plus} onClick={()=>setNyForm(true)}>Ny prosess</Button>
        </div>
      </div>

      {/* KPI-strip */}
      <div style={{ display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12,marginBottom:22 }}>
        <Card padded><KPI label="Totalt" value={prosesser.length} sub="prosesser" /></Card>
        <Card padded><KPI label="Pågår" value={aktive} sub="i arbeid" accent={aktive>0} /></Card>
        <Card padded><KPI label="Fullført" value={fullfort} sub={`av ${prosesser.length}`} /></Card>
        <Card padded><KPI label="Forfalt" value={forfalt} sub="etter frist" accent={forfalt>0} /></Card>
      </div>

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

      {/* Ny prosess-form */}
      {nyForm && (
        <Card padded={false} style={{ marginBottom:16 }}>
          <PuProsessSkjema profiler={profiler}
            onLagret={r=>{ setProsesser(prev=>[r,...prev]); setNyForm(false); }}
            onAvbryt={()=>setNyForm(false)} />
        </Card>
      )}

      {/* Filter-rad */}
      <div style={{ display:'flex',gap:8,marginBottom:16,flexWrap:'wrap',alignItems:'center' }}>
        <input className="ok-input" placeholder="Søk prosess…" value={sokTekst} onChange={e=>setSok(e.target.value)} style={{ padding:'7px 12px',fontSize:13,maxWidth:240 }} />
        <span style={{ width:1,height:22,background:'rgba(17,24,61,.12)' }} />
        {[['alle','Alle kategorier'],...Object.entries(PU_KAT).map(([k,v])=>[k,v.label])].map(([k,l])=>(
          <button key={k} onClick={()=>setKatF(k)} style={{ padding:'5px 12px',borderRadius:99,fontSize:12,cursor:'pointer',fontFamily:'inherit',border:'1px solid rgba(17,24,61,.15)',background:katFilter===k?SK.ink:'transparent',color:katFilter===k?'#fff':SK.ink }}>{l}</button>
        ))}
        <span style={{ width:1,height:22,background:'rgba(17,24,61,.12)' }} />
        {[['aktive','Aktive'],['alle','Alle'],['fullfort','Fullførte']].map(([k,l])=>(
          <button key={k} onClick={()=>setStatF(k)} style={{ padding:'5px 12px',borderRadius:99,fontSize:12,cursor:'pointer',fontFamily:'inherit',border:'1px solid rgba(17,24,61,.15)',background:statusFil===k?SK.soft:'transparent',color:statusFil===k?'#fff':SK.ink }}>{l}</button>
        ))}
        <span style={{ marginLeft:'auto',fontSize:12,color:SK.soft }}>{filtrerte.length} prosesser</span>
        {/* Visningsvelger */}
        <div style={{ display:'flex',border:'1px solid rgba(17,24,61,.15)',borderRadius:8,overflow:'hidden' }}>
          {[['kanban','≡≡'],['liste','☰'],['matrise','⊞']].map(([k,ico])=>(
            <button key={k} onClick={()=>setVisning(k)} title={k} style={{ padding:'6px 12px',border:'none',borderRight:'1px solid rgba(17,24,61,.1)',background:visning===k?SK.ink:'transparent',color:visning===k?'#fff':SK.soft,cursor:'pointer',fontSize:14,fontFamily:'inherit' }}>{ico}</button>
          ))}
        </div>
      </div>

      {/* Innhold */}
      {laster ? <div style={{ padding:48,textAlign:'center',color:SK.soft }}>Laster prosesser…</div> : (
        <>
          {visning==='kanban'  && <PuKanban   prosesser={filtrerte} onClick={setValgt} />}
          {visning==='liste'   && <PuListe    prosesser={filtrerte} onClick={setValgt} />}
          {visning==='matrise' && <PuMatrise  prosesser={filtrerte} onClick={setValgt} />}
        </>
      )}

      {/* Detaljpanel */}
      {valgt && (
        <PuProsessPanel
          prosess={valgt}
          profiler={profiler}
          brukerId={brukerId}
          brukerNavn={brukerNavn}
          onOppdatert={r=>{ setProsesser(prev=>prev.map(p=>p.id===r.id?r:p)); setValgt(r); }}
          onLukk={()=>setValgt(null)} />
      )}
    </div>
  );
}

Object.assign(window, { ProsessutviklingWorkspace });