// systemer.jsx — Systemer & leverandører
// Global scope, prefiks SYS_ for alle navn

// ── Konstanter ───────────────────────────────────────────────
const SYS_KAT_LABEL = { fagsystem:'Fagsystem', hr:'HR', okonomi:'Økonomi', kommunikasjon:'Kommunikasjon', sikkerhet:'Sikkerhet', drift:'Drift', ai:'AI', annet:'Annet' };
const SYS_LEV_KAT   = { it:'IT', kontor:'Kontor', renhold:'Renhold', mat:'Mat & kantine', transport:'Transport', kompetanse:'Kompetanse', bygg:'Bygg & vedlikehold', annet:'Annet' };
const SYS_TILGANG_NIVA = { admin:'Admin', standard:'Standard', lesetilgang:'Lesetilgang', spesiell:'Spesiell' };
const SYS_TRIGGER_LABEL = { sykemeldt:'Sykemelding', ferie:'Ferie', permisjon:'Permisjon', avsluttet:'Avslutning/offboarding', vikar_inn:'Vikar trer inn', vikar_ut:'Vikar slutter', bytte_rolle:'Rollebytte' };
const SYS_STATUS_TONE = { aktiv:{ bg:'#dbeed8', fg:'#1b6a2e', lbl:'Aktiv' }, under_utfasing:{ bg:'#fdeac8', fg:'#8e5a05', lbl:'Under utfasing' }, utfaset:{ bg:'#f0f4fc', fg:'#6f7795', lbl:'Utfaset' }, pilot:{ bg:'#dce5f5', fg:'#11183d', lbl:'Pilot' } };
const SYS_LBL = { fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.04, textTransform:'uppercase', display:'block', marginBottom:5 };
const SYS_INP = { padding:'10px 12px', fontSize:13 };

// ── Datalag ──────────────────────────────────────────────────
async function SYS_hentSystemer() {
  const { data, error } = await window._sb.from('sys_systemer')
    .select('*, eier:profiles!eier_id(id,navn,avatar_url), leverandor_obj:sys_leverandorer!leverandor_id(id,navn), avtale:avtaler!avtale_id(id,name)')
    .order('navn');
  if (error) { if (error.code === '42P01') return []; throw error; }
  return data || [];
}
async function SYS_hentTilganger(systemId) {
  const { data, error } = await window._sb.from('sys_tilganger')
    .select('*, profil:profiles!profil_id(id,navn,epost,avatar_url,enhet:enheter!enhet_id(id,navn))')
    .eq('system_id', systemId).order('status').order('created_at', { ascending: true });
  if (error) return [];
  return data || [];
}
async function SYS_hentMaler(systemId) {
  const { data } = await window._sb.from('sys_tiltak_maler').select('*').eq('system_id', systemId).order('sortering');
  return data || [];
}
async function SYS_hentLeverandorer() {
  const { data, error } = await window._sb.from('sys_leverandorer')
    .select('*, avtale:avtaler!avtale_id(id,name)')
    .order('navn');
  if (error) { if (error.code === '42P01') return []; throw error; }
  return data || [];
}
async function SYS_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 SYS_lagreSystem(id, felter) {
  const { leverandor_obj, eier, avtale, ...rene } = felter;
  const { data, error } = id
    ? await window._sb.from('sys_systemer').update(rene).eq('id', id).select().single()
    : await window._sb.from('sys_systemer').insert([rene]).select().single();
  if (error) throw error;
  return data;
}
async function SYS_lagreTilgang(id, felter) {
  const { profil, ...rene } = felter;
  const JOIN = '*, profil:profiles!profil_id(id,navn,epost,avatar_url,enhet:enheter!enhet_id(id,navn))';

  if (id) {
    // Oppdater eksisterende
    const { data, error } = await window._sb.from('sys_tilganger')
      .update(rene).eq('id', id).select(JOIN).single();
    if (error) throw error;
    return data;
  } else {
    // Sett inn ny — gjør det i to steg slik at insert-feil ikke skjules av JOIN-feil
    const { data: insertData, error: insertError } = await window._sb
      .from('sys_tilganger').insert([rene]).select('id').single();
    if (insertError) throw insertError;
    if (!insertData?.id) throw new Error('Tilgang ble ikke opprettet – ukjent feil.');
    // Hent komplett rad med JOIN
    const { data, error } = await window._sb.from('sys_tilganger')
      .select(JOIN).eq('id', insertData.id).single();
    if (error) throw error;
    return data;
  }
}
async function SYS_slettTilgang(id) {
  const { error } = await window._sb.from('sys_tilganger').delete().eq('id', id);
  if (error) throw error;
}

async function SYS_lagreLeverandor(id, felter) {
  const { avtale, ...rene } = felter;
  const { data, error } = id
    ? await window._sb.from('sys_leverandorer').update(rene).eq('id', id).select().single()
    : await window._sb.from('sys_leverandorer').insert([rene]).select().single();
  if (error) throw error;
  return data;
}
async function SYS_lagreMal(id, felter) {
  const { data, error } = id
    ? await window._sb.from('sys_tiltak_maler').update(felter).eq('id', id).select().single()
    : await window._sb.from('sys_tiltak_maler').insert([felter]).select().single();
  if (error) throw error;
  return data;
}
async function SYS_slettMal(id) {
  const { error } = await window._sb.from('sys_tiltak_maler').delete().eq('id', id);
  if (error) throw error;
}
// Generer tiltak basert på maler for en bruker + trigger
async function SYS_genererTiltak(systemId, tilgangerId, triggerStatus, ansvarligId, fradag) {
  const { data: maler } = await window._sb.from('sys_tiltak_maler')
    .select('*').eq('system_id', systemId).eq('trigger_status', triggerStatus).order('sortering');
  if (!maler?.length) return [];
  const base = fradag ? new Date(fradag) : new Date();
  const oppgaver = maler.map(m => {
    const frist = new Date(base); frist.setDate(frist.getDate() + (m.frist_dager || 3));
    return { mal_id: m.id, system_id: systemId, tilganger_id: tilgangerId, trigger_status: triggerStatus,
             tittel: m.tiltak_tittel, beskrivelse: m.tiltak_beskr,
             ansvarlig_id: ansvarligId || null, frist: frist.toISOString().slice(0,10), status: 'apen' };
  });
  const { data, error } = await window._sb.from('sys_genererte_tiltak').insert(oppgaver).select();
  if (error) throw error;
  return data || [];
}



async function SYS_hentGlobaleMaler() {
  const { data } = await window._sb.from('sys_tiltak_maler')
    .select('*').is('system_id', null).order('sortering');
  return data || [];
}

async function SYS_lagreGlobalMal(id, felter) {
  const { data, error } = id
    ? await window._sb.from('sys_tiltak_maler').update(felter).eq('id', id).select().single()
    : await window._sb.from('sys_tiltak_maler').insert([{ ...felter, system_id: null }]).select().single();
  if (error) throw error;
  return data;
}

async function SYS_slettGlobalMal(id) {
  const { error } = await window._sb.from('sys_tiltak_maler').delete().eq('id', id);
  if (error) throw error;
}

// Kopierer globale maler til et nyoprettet system (kalles etter opprettelse)
async function SYS_arvGlobaleMaler(systemId) {
  const globale = await SYS_hentGlobaleMaler();
  if (!globale.length) return;
  const kopier = globale.map((m, i) => ({
    system_id:       systemId,
    trigger_status:  m.trigger_status,
    tiltak_tittel:   m.tiltak_tittel,
    tiltak_beskr:    m.tiltak_beskr,
    ansvarlig_rolle: m.ansvarlig_rolle,
    frist_dager:     m.frist_dager,
    sortering:       m.sortering ?? i,
    arvet_fra_global: true,
    global_mal_id:   m.id,
  }));
  await window._sb.from('sys_tiltak_maler').insert(kopier);
}

async function SYS_hentLokasjoner() {
  // Gjenbruker global hentLokasjoner() fra varsler-og-sok.jsx
  if (typeof window.hentLokasjoner === 'function') return window.hentLokasjoner();
  const { data } = await window._sb.from('lokasjoner').select('id,navn,adresse').eq('aktiv',true).order('navn');
  return data || [];
}

async function SYS_hentLevNotater(leverandorId) {
  const { data, error } = await window._sb.from('sys_leverandor_notater')
    .select('*, forfatter:profiles!forfatter_id(id,navn,avatar_url)')
    .eq('leverandor_id', leverandorId)
    .order('created_at', { ascending: false });
  if (error) return [];
  return data || [];
}

async function SYS_lagreLevNotat(leverandorId, tekst, forfatterid) {
  const { data, error } = await window._sb.from('sys_leverandor_notater')
    .insert([{ leverandor_id: leverandorId, tekst, forfatter_id: forfatterid }])
    .select('*, forfatter:profiles!forfatter_id(id,navn,avatar_url)').single();
  if (error) throw error;
  return data;
}

async function SYS_slettLevNotat(id) {
  const { error } = await window._sb.from('sys_leverandor_notater').delete().eq('id', id);
  if (error) throw error;
}

// ── Hjelpefunksjon ───────────────────────────────────────────
function SysAvatar({ 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 = ['#f2545c','#08605f','#586ba4','#f2cc8f','#5bc0be'][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 SysStatusPill({ status }) {
  const t = SYS_STATUS_TONE[status] || SYS_STATUS_TONE.aktiv;
  return <span style={{ fontSize:10.5,fontWeight:700,padding:'2px 8px',borderRadius:99,background:t.bg,color:t.fg }}>{t.lbl}</span>;
}
function SysRevVarsel({ dato }) {
  if (!dato) return null;
  const dager = Math.round((new Date(dato) - new Date()) / 86400000);
  if (dager > 30) return null;
  const farge = dager < 0 ? SK.coral : dager < 7 ? '#e08d3c' : '#586ba4';
  return <span style={{ fontSize:10.5,background:'#fdeac8',color:farge,padding:'2px 8px',borderRadius:99,fontWeight:600 }}>
    {dager < 0 ? `${Math.abs(dager)} dgr overskredet` : `Revisjon om ${dager} dgr`}
  </span>;
}

// ── SYSTEMSKJEMA ─────────────────────────────────────────────
function SYS_SystemSkjema({ system, profiler, leverandorer, onLagret, onAvbryt }) {
  const tom = { navn:'', kategori:'annet', beskrivelse:'', leverandor:'', leverandor_id:'', avtale_id:'', eier_id:'', url:'', status:'aktiv', revidering_dato:'', revidering_ansvarlig_id:'', note:'' };
  const [felt, setFelt] = React.useState(system ? { ...tom, ...system, revidering_dato: system.revidering_dato||'', eier_id: system.eier_id||'', leverandor_id: system.leverandor_id||'', avtale_id: system.avtale_id||'' } : tom);
  const [laster, setLaster] = React.useState(false);
  const [feil, setFeil] = React.useState(null);
  const opd = (k,v) => setFelt(f=>({...f,[k]:v}));
  const lagre = async () => {
    if (!felt.navn.trim()) { setFeil('Navn er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    try { const r = await SYS_lagreSystem(system?.id||null, { ...felt, eier_id: felt.eier_id||null, leverandor_id: felt.leverandor_id||null, avtale_id: felt.avtale_id||null, revidering_dato: felt.revidering_dato||null, revidering_ansvarlig_id: felt.revidering_ansvarlig_id||null }); onLagret(r); }
    catch(e) { setFeil(e.message); setLaster(false); }
  };
  return (
    <div style={{ padding:'18px 20px' }}>
      <h2 style={{ fontSize:16,fontWeight:700,margin:'0 0 16px' }}>{system?'Rediger system':'Nytt system'}</h2>
      {feil && <div style={{ background:'#fcddde',border:'1px solid '+SK.coral,borderRadius:8,padding:'9px 13px',fontSize:13,color:'#8a1620',marginBottom:12 }}>{feil}</div>}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
        <div style={{ gridColumn:'1/-1' }}>
          <label style={SYS_LBL}>Systemnavn *</label>
          <input className="ok-input" value={felt.navn} onChange={e=>opd('navn',e.target.value)} placeholder="f.eks. Microsoft 365, Visma HRM" style={SYS_INP} />
        </div>
        <div>
          <label style={SYS_LBL}>Kategori</label>
          <select className="ok-input" value={felt.kategori} onChange={e=>opd('kategori',e.target.value)} style={SYS_INP}>
            {Object.entries(SYS_KAT_LABEL).map(([k,v])=><option key={k} value={k}>{v}</option>)}
          </select>
        </div>
        <div>
          <label style={SYS_LBL}>Status</label>
          <select className="ok-input" value={felt.status} onChange={e=>opd('status',e.target.value)} style={SYS_INP}>
            {Object.entries(SYS_STATUS_TONE).map(([k,t])=><option key={k} value={k}>{t.lbl}</option>)}
          </select>
        </div>
        <div>
          <label style={SYS_LBL}>Leverandør</label>
          <select className="ok-input" value={felt.leverandor_id} onChange={e=>opd('leverandor_id',e.target.value)} style={SYS_INP}>
            <option value="">— Ingen koblet leverandør —</option>
            {leverandorer.map(l=><option key={l.id} value={l.id}>{l.navn}</option>)}
          </select>
        </div>
        <div>
          <label style={SYS_LBL}>Fritekst leverandørnavn</label>
          <input className="ok-input" value={felt.leverandor} onChange={e=>opd('leverandor',e.target.value)} placeholder="f.eks. Microsoft Ireland Ops" style={SYS_INP} />
        </div>
        <div>
          <label style={SYS_LBL}>Systemeier</label>
          <select className="ok-input" value={felt.eier_id} onChange={e=>opd('eier_id',e.target.value)} style={SYS_INP}>
            <option value="">— Ingen satt —</option>
            {profiler.map(p=><option key={p.id} value={p.id}>{p.navn||p.epost}</option>)}
          </select>
        </div>
        <div>
          <label style={SYS_LBL}>Revisjonsdato</label>
          <input type="date" className="ok-input" value={felt.revidering_dato} onChange={e=>opd('revidering_dato',e.target.value)} style={SYS_INP} />
        </div>
        <div>
          <label style={SYS_LBL}>Revisjonsansvarlig</label>
          <select className="ok-input" value={felt.revidering_ansvarlig_id} onChange={e=>opd('revidering_ansvarlig_id',e.target.value)} style={SYS_INP}>
            <option value="">— Ingen satt —</option>
            {profiler.map(p=><option key={p.id} value={p.id}>{p.navn||p.epost}</option>)}
          </select>
        </div>
        <div style={{ gridColumn:'1/-1' }}>
          <label style={SYS_LBL}>URL / administrasjonslenke</label>
          <input className="ok-input" value={felt.url} onChange={e=>opd('url',e.target.value)} placeholder="https://..." style={SYS_INP} />
        </div>
        <div style={{ gridColumn:'1/-1' }}>
          <label style={SYS_LBL}>Beskrivelse</label>
          <textarea className="ok-input" value={felt.beskrivelse} onChange={e=>opd('beskrivelse',e.target.value)} rows={2} style={{ ...SYS_INP, resize:'vertical', fontFamily:'inherit' }} />
        </div>
      </div>
      <div style={{ display:'flex',gap:8,marginTop:16 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>{laster?'Lagrer…':'Lagre'}</Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

// ── TILGANGSSKJEMA ────────────────────────────────────────────
function SYS_TilgangSkjema({ tilgang, systemId, profiler, onLagret, onAvbryt }) {
  const tom = { profil_id:'', ekstern_navn:'', ekstern_epost:'', rolle:'', tilgang_niva:'standard', gitt_dato: new Date().toISOString().slice(0,10), utloper_dato:'', status:'aktiv', note:'' };
  const [felt, setFelt] = React.useState(tilgang ? { ...tom, ...tilgang, utloper_dato: tilgang.utloper_dato||'', profil_id: tilgang.profil_id||'' } : tom);
  const [laster, setLaster] = React.useState(false);
  const opd = (k,v) => setFelt(f=>({...f,[k]:v}));
  const lagre = async () => {
    setLaster(true);
    try {
      const r = await SYS_lagreTilgang(tilgang?.id||null, {
        ...felt, system_id: systemId,
        profil_id: felt.profil_id||null,
        utloper_dato: felt.utloper_dato||null,
      });
      if (!r) throw new Error('Ingen data returnert fra databasen.');
      onLagret(r);
    } catch(e) {
      alert('Feil ved lagring av tilgang: ' + e.message);
      setLaster(false);
    }
  };
  return (
    <div style={{ background:SK.iceBlueLight, borderRadius:10, padding:'14px 16px', marginTop:8 }}>
      <div style={{ fontWeight:600, fontSize:13, marginBottom:12 }}>{tilgang?'Rediger tilgang':'Legg til tilgang'}</div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
        <div>
          <label style={SYS_LBL}>Bruker (intern)</label>
          <select className="ok-input" value={felt.profil_id} onChange={e=>opd('profil_id',e.target.value)} style={SYS_INP}>
            <option value="">— Ekstern / velg ikke —</option>
            {profiler.map(p=><option key={p.id} value={p.id}>{p.navn||p.epost}</option>)}
          </select>
        </div>
        <div>
          <label style={SYS_LBL}>Tilgangsnivå</label>
          <select className="ok-input" value={felt.tilgang_niva} onChange={e=>opd('tilgang_niva',e.target.value)} style={SYS_INP}>
            {Object.entries(SYS_TILGANG_NIVA).map(([k,v])=><option key={k} value={k}>{v}</option>)}
          </select>
        </div>
        <div>
          <label style={SYS_LBL}>Rolle i systemet</label>
          <input className="ok-input" value={felt.rolle} onChange={e=>opd('rolle',e.target.value)} placeholder="f.eks. administrator, redaktør" style={SYS_INP} />
        </div>
        <div>
          <label style={SYS_LBL}>Status</label>
          <select className="ok-input" value={felt.status} onChange={e=>opd('status',e.target.value)} style={SYS_INP}>
            {[['aktiv','Aktiv'],['sperret','Sperret'],['slettet','Slettet'],['vikar','Vikar']].map(([k,v])=><option key={k} value={k}>{v}</option>)}
          </select>
        </div>
        <div>
          <label style={SYS_LBL}>Ekstern navn (om ikke intern)</label>
          <input className="ok-input" value={felt.ekstern_navn} onChange={e=>opd('ekstern_navn',e.target.value)} placeholder="Navn på ekstern bruker" style={SYS_INP} />
        </div>
        <div>
          <label style={SYS_LBL}>Utløpsdato tilgang</label>
          <input type="date" className="ok-input" value={felt.utloper_dato} onChange={e=>opd('utloper_dato',e.target.value)} style={SYS_INP} />
        </div>
      </div>
      <div style={{ display:'flex',gap:8,marginTop:10 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>{laster?'Lagrer…':'Lagre'}</Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

// ── TILTAKSMAL-PANEL ──────────────────────────────────────────
function SYS_TiltaksMalPanel({ systemId, onLukk }) {
  const [maler, setMaler] = React.useState([]);
  const [nyMal, setNyMal] = React.useState(null);
  const [laster, setLaster] = React.useState(true);
  React.useEffect(() => { SYS_hentMaler(systemId).then(d=>{ setMaler(d); setLaster(false); }); }, [systemId]);
  const tomMal = { trigger_status:'avsluttet', tiltak_tittel:'', tiltak_beskr:'', ansvarlig_rolle:'hr', frist_dager:3, sortering: maler.length };
  const lagreMal = async (felter) => {
    const r = await SYS_lagreMal(felter.id||null, { ...felter, system_id: systemId });
    setMaler(prev => felter.id ? prev.map(m=>m.id===r.id?r:m) : [...prev,r]);
    setNyMal(null);
  };
  const slettMal = async (id) => { await SYS_slettMal(id); setMaler(prev=>prev.filter(m=>m.id!==id)); };
  return (
    <div style={{ background:'#fff',border:'1px solid '+SK.iceBlue,borderRadius:12,padding:'16px 18px',marginTop:8 }}>
      <div style={{ display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:12 }}>
        <span style={{ fontWeight:700,fontSize:13 }}>Tiltaksmaler ved statusendring</span>
        <Button onClick={onLukk} size="sm">Lukk</Button>
      </div>
      <div style={{ fontSize:12,color:SK.soft,marginBottom:12 }}>Disse tiltakene opprettes automatisk i tiltaksplanen når en brukers systemtilgang endrer status.</div>
      {laster ? <div style={{ color:SK.soft,fontSize:13 }}>Laster…</div> : (
        <>
          {maler.length===0 && <div style={{ color:SK.soft,fontSize:13,marginBottom:8 }}>Ingen maler ennå.</div>}
          {maler.map(m=>(
            <div key={m.id} style={{ display:'flex',alignItems:'flex-start',gap:10,padding:'8px 0',borderBottom:'1px solid rgba(17,24,61,.06)',
              opacity: m.arvet_fra_global ? 0.75 : 1 }}>
              <div style={{ flex:1 }}>
                <span style={{ fontSize:11.5,background:SK.iceBlueLight,padding:'1px 8px',borderRadius:99,marginRight:6,color:SK.ink,fontWeight:600 }}>{SYS_TRIGGER_LABEL[m.trigger_status]||m.trigger_status}</span>
                <span style={{ fontSize:13,fontWeight:600 }}>{m.tiltak_tittel}</span>
                {m.arvet_fra_global && <span style={{ fontSize:10,background:'#f0f4fc',color:SK.soft,padding:'1px 7px',borderRadius:99,marginLeft:6,fontStyle:'italic' }}>Arvet fra standard</span>}
                {m.tiltak_beskr && <div style={{ fontSize:11.5,color:SK.soft,marginTop:2 }}>{m.tiltak_beskr}</div>}
                <span style={{ fontSize:11,color:SK.soft }}> Frist: {m.frist_dager} dgr · Ansvarlig: {m.ansvarlig_rolle||'—'}</span>
              </div>
              <div style={{ display:'flex',gap:4,flexShrink:0 }}>
                {m.arvet_fra_global && <button onClick={()=>setNyMal({...m,id:m.id,arvet_fra_global:false})} title="Overstyr denne malen" style={{ border:'1px solid rgba(17,24,61,.15)',background:'none',color:SK.soft,cursor:'pointer',fontSize:11,borderRadius:4,padding:'2px 6px' }}>Overstyr</button>}
                <button onClick={()=>slettMal(m.id)} style={{ border:'none',background:'none',color:SK.coral,cursor:'pointer',fontSize:16 }}>×</button>
              </div>
            </div>
          ))}
          {nyMal ? (
            <SYS_MalSkjema mal={nyMal} systemId={systemId} onLagret={lagreMal} onAvbryt={()=>setNyMal(null)} />
          ) : (
            <Button size="sm" icon={I.plus} onClick={()=>setNyMal({...tomMal})} style={{ marginTop:10 }}>Ny mal</Button>
          )}
        </>
      )}
    </div>
  );
}

function SYS_MalSkjema({ mal, systemId, onLagret, onAvbryt }) { // systemId er null for globale maler
  const [felt, setFelt] = React.useState({ ...mal });
  const opd = (k,v) => setFelt(f=>({...f,[k]:v}));
  return (
    <div style={{ background:SK.iceBlueLight,borderRadius:8,padding:'12px 14px',marginTop:10 }}>
      <div style={{ display:'grid',gridTemplateColumns:'1fr 1fr',gap:10 }}>
        <div>
          <label style={SYS_LBL}>Utløsende status</label>
          <select className="ok-input" value={felt.trigger_status} onChange={e=>opd('trigger_status',e.target.value)} style={SYS_INP}>
            {Object.entries(SYS_TRIGGER_LABEL).map(([k,v])=><option key={k} value={k}>{v}</option>)}
          </select>
        </div>
        <div>
          <label style={SYS_LBL}>Frist (dager etter trigger)</label>
          <input type="number" min={1} max={90} className="ok-input" value={felt.frist_dager} onChange={e=>opd('frist_dager',parseInt(e.target.value)||3)} style={SYS_INP} />
        </div>
        <div style={{ gridColumn:'1/-1' }}>
          <label style={SYS_LBL}>Tiltakstittel</label>
          <input className="ok-input" value={felt.tiltak_tittel} onChange={e=>opd('tiltak_tittel',e.target.value)} placeholder="f.eks. Slett tilgang i Microsoft 365" style={SYS_INP} />
        </div>
        <div>
          <label style={SYS_LBL}>Ansvarlig</label>
          <select className="ok-input" value={felt.ansvarlig_rolle||''} onChange={e=>opd('ansvarlig_rolle',e.target.value)} style={SYS_INP}>
            <option value="">— Ingen satt —</option>
            {[['hr','HR'],['leder','Leder'],['systemeier','Systemeier'],['bruker','Bruker selv']].map(([k,v])=><option key={k} value={k}>{v}</option>)}
          </select>
        </div>
        <div>
          <label style={SYS_LBL}>Beskrivelse (valgfritt)</label>
          <input className="ok-input" value={felt.tiltak_beskr||''} onChange={e=>opd('tiltak_beskr',e.target.value)} style={SYS_INP} />
        </div>
      </div>
      <div style={{ display:'flex',gap:8,marginTop:10 }}>
        <Button variant="primary" size="sm" onClick={()=>onLagret(felt)}>Lagre</Button>
        <Button size="sm" onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

// ── GENERERTE TILTAK-VISNING (les-only, opprettes fra brukerhåndtering) ──
function SYS_GenerteTiltakPanel({ systemId }) {
  const [tiltak, setTiltak] = React.useState(null);
  React.useEffect(() => {
    window._sb.from('sys_genererte_tiltak')
      .select('*, ansvarlig:profiles!ansvarlig_id(id,navn)')
      .eq('system_id', systemId).order('created_at', { ascending: false })
      .then(({ data }) => setTiltak(data || []));
  }, [systemId]);
  if (!tiltak) return null;
  if (tiltak.length === 0) return <div style={{ fontSize:12,color:SK.soft,padding:'6px 0' }}>Ingen genererte tiltak ennå.</div>;
  const stFarge = { apen:'#fdeac8', pagar:SK.iceBlueLight, fullfort:'#dbeed8', avbrutt:'#f0f4fc' };
  return (
    <div style={{ marginTop:8 }}>
      <div style={{ fontSize:12,fontWeight:600,color:SK.soft,marginBottom:6 }}>GENERERTE TILTAK</div>
      {tiltak.map(t => (
        <div key={t.id} style={{ display:'flex',gap:10,alignItems:'center',padding:'5px 0',borderBottom:'1px solid rgba(17,24,61,.05)' }}>
          <span style={{ fontSize:10,padding:'1px 7px',borderRadius:99,background:stFarge[t.status]||SK.iceBlueLight,fontWeight:600 }}>{t.status}</span>
          <span style={{ fontSize:12.5,flex:1 }}>{t.tittel}</span>
          {t.frist && <span style={{ fontSize:11,color:SK.soft }}>{t.frist}</span>}
        </div>
      ))}
    </div>
  );
}


// ── LEVERANDØRNOTAT-PANEL (tidsstemplede notater) ─────────────
function SYS_LevNotatPanel({ leverandorId, innloggetId }) {
  const [notater, setNotater]   = React.useState(null);
  const [nyttTekst, setNy]      = React.useState('');
  const [laster, setLaster]     = React.useState(false);

  React.useEffect(() => {
    SYS_hentLevNotater(leverandorId).then(setNotater);
  }, [leverandorId]);

  const leggTil = async () => {
    if (!nyttTekst.trim()) return;
    setLaster(true);
    try {
      const r = await SYS_lagreLevNotat(leverandorId, nyttTekst.trim(), innloggetId);
      setNotater(prev => [r, ...(prev||[])]);
      setNy('');
    } catch(e) { alert('Feil: '+e.message); }
    finally { setLaster(false); }
  };

  const slett = async (id) => {
    await SYS_slettLevNotat(id);
    setNotater(prev => prev.filter(n=>n.id!==id));
  };

  const fmtTid = (ts) => {
    const d = new Date(ts);
    return d.toLocaleDateString('nb-NO',{day:'numeric',month:'short',year:'numeric'})
           + ' ' + d.toLocaleTimeString('nb-NO',{hour:'2-digit',minute:'2-digit'});
  };

  return (
    <div style={{ marginTop:14, paddingTop:12, borderTop:'1px solid rgba(17,24,61,.07)' }}>
      <div style={{ fontWeight:600, fontSize:13, marginBottom:8 }}>Notater</div>

      {/* Ny notat-input */}
      <div style={{ display:'flex', gap:8, marginBottom:12 }}>
        <textarea className="ok-input" value={nyttTekst} onChange={e=>setNy(e.target.value)}
          placeholder="Skriv et notat…" rows={2}
          style={{ flex:1, padding:'8px 12px', fontSize:13, resize:'vertical', fontFamily:'inherit' }}
          onKeyDown={e=>{ if(e.key==='Enter'&&e.ctrlKey) leggTil(); }} />
        <Button variant="primary" onClick={leggTil} disabled={laster||!nyttTekst.trim()} style={{ alignSelf:'flex-end' }}>
          {laster?'…':'Legg til'}
        </Button>
      </div>
      <div style={{ fontSize:11, color:SK.soft, marginBottom:12 }}>Ctrl+Enter for å legge til raskt.</div>

      {/* Notatliste */}
      {!notater
        ? <div style={{ color:SK.soft, fontSize:13 }}>Laster…</div>
        : notater.length === 0
          ? <div style={{ color:SK.soft, fontSize:13, fontStyle:'italic' }}>Ingen notater ennå.</div>
          : <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
              {notater.map(n => (
                <div key={n.id} style={{ background:SK.iceBlueLight, borderRadius:8, padding:'10px 12px' }}>
                  <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:5 }}>
                    <SysAvatar navn={n.forfatter?.navn||'?'} avatarUrl={n.forfatter?.avatar_url} size={24} />
                    <span style={{ fontSize:12, fontWeight:600 }}>{n.forfatter?.navn||'Ukjent'}</span>
                    <span style={{ fontSize:11, color:SK.soft, marginLeft:'auto' }}>{fmtTid(n.created_at)}</span>
                    {(n.forfatter_id === innloggetId) && (
                      <button onClick={()=>slett(n.id)} title="Slett notat"
                        style={{ border:'none', background:'none', color:SK.soft, cursor:'pointer', fontSize:14, lineHeight:1, padding:2 }}>×</button>
                    )}
                  </div>
                  <div style={{ fontSize:13, whiteSpace:'pre-wrap', lineHeight:1.5 }}>{n.tekst}</div>
                </div>
              ))}
            </div>}
    </div>
  );
}


// ── GLOBAL TILTAKSMAL-PANEL ───────────────────────────────────
// Vises øverst i Systemer-fanen. Maler her arves automatisk til
// alle nye systemer, og kan overstyres per system etter opprettelse.
function SYS_GlobalMalPanel() {
  const [apent,  setApent]  = React.useState(false);
  const [maler,  setMaler]  = React.useState([]);
  const [nyMal,  setNyMal]  = React.useState(null);
  const [laster, setLaster] = React.useState(false);

  React.useEffect(() => {
    if (apent && !maler.length) {
      setLaster(true);
      SYS_hentGlobaleMaler().then(d=>{ setMaler(d); setLaster(false); });
    }
  }, [apent]);

  const tomMal = { trigger_status:'avsluttet', tiltak_tittel:'', tiltak_beskr:'', ansvarlig_rolle:'hr', frist_dager:3, sortering: maler.length };

  const lagreMal = async (felter) => {
    const { arvet_fra_global, global_mal_id, ...rene } = felter;
    const r = await SYS_lagreGlobalMal(rene.id||null, rene);
    setMaler(prev => rene.id ? prev.map(m=>m.id===r.id?r:m) : [...prev, r]);
    setNyMal(null);
  };

  const slettMal = async (id) => {
    await SYS_slettGlobalMal(id);
    setMaler(prev => prev.filter(m=>m.id!==id));
  };

  return (
    <div style={{ background:'#fff', border:'1px solid rgba(17,24,61,.1)', borderRadius:12, marginBottom:16, overflow:'hidden' }}>
      {/* Hode — alltid synlig */}
      <div style={{ display:'flex',alignItems:'center',gap:12,padding:'13px 16px',cursor:'pointer',background:apent?SK.iceBlueLight:'#fff' }}
           onClick={()=>setApent(a=>!a)}>
        <div style={{ width:36,height:36,borderRadius:8,background:SK.ink,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0 }}>
          <span style={{ fontSize:16 }}>📋</span>
        </div>
        <div style={{ flex:1 }}>
          <div style={{ fontWeight:700,fontSize:14 }}>Standard tiltaksplan</div>
          <div style={{ fontSize:12,color:SK.soft }}>
            {apent ? 'Maler her arves automatisk til alle nye systemer' : `${maler.length||'Klikk for å se'} globale maler — arves til alle nye systemer`}
          </div>
        </div>
        <span style={{ fontSize:11,background:SK.coral,color:'#fff',padding:'2px 10px',borderRadius:99,fontWeight:600,flexShrink:0 }}>Standard</span>
        <span style={{ color:SK.soft,fontSize:18,transform:apent?'rotate(90deg)':'none',transition:'transform .15s',flexShrink:0 }}>›</span>
      </div>

      {/* Innhold */}
      {apent && (
        <div style={{ padding:'14px 16px',borderTop:'1px solid rgba(17,24,61,.07)' }}>
          <div style={{ fontSize:12.5,color:SK.soft,marginBottom:12,lineHeight:1.5 }}>
            Disse malene kopieres automatisk til alle <b>nye systemer</b> ved opprettelse.
            På hvert enkelt system kan malene deretter overstyres, slettes eller suppleres med egne maler.
          </div>

          {laster && <div style={{ color:SK.soft,fontSize:13 }}>Laster…</div>}

          {/* Grupper per trigger-status for oversiktlighet */}
          {!laster && Object.entries(SYS_TRIGGER_LABEL).map(([trigger, triggerLabel]) => {
            const triggerMaler = maler.filter(m=>m.trigger_status===trigger);
            if (!triggerMaler.length && !nyMal) return null;
            return (
              <div key={trigger} style={{ marginBottom:10 }}>
                <div style={{ fontSize:11,fontWeight:700,color:SK.soft,textTransform:'uppercase',letterSpacing:0.1,marginBottom:4 }}>{triggerLabel}</div>
                {triggerMaler.map(m=>(
                  <div key={m.id} style={{ display:'flex',alignItems:'flex-start',gap:10,padding:'7px 10px',borderRadius:8,background:SK.iceBlueLight,marginBottom:4 }}>
                    <div style={{ flex:1 }}>
                      <span style={{ fontSize:13,fontWeight:600 }}>{m.tiltak_tittel}</span>
                      {m.tiltak_beskr && <div style={{ fontSize:11.5,color:SK.soft,marginTop:1 }}>{m.tiltak_beskr}</div>}
                      <span style={{ fontSize:11,color:SK.soft }}>Frist: {m.frist_dager} dgr · Ansvarlig: {m.ansvarlig_rolle||'—'}</span>
                    </div>
                    <button onClick={()=>setNyMal({...m})} title="Rediger" style={{ border:'none',background:'none',color:SK.soft,cursor:'pointer',fontSize:13,padding:2 }}>✏️</button>
                    <button onClick={()=>slettMal(m.id)} title="Slett" style={{ border:'none',background:'none',color:SK.coral,cursor:'pointer',fontSize:16,lineHeight:1 }}>×</button>
                  </div>
                ))}
              </div>
            );
          })}

          {!laster && maler.length === 0 && !nyMal && (
            <div style={{ color:SK.soft,fontSize:13,marginBottom:12,fontStyle:'italic' }}>Ingen globale maler ennå. Legg til for å bygge standarden.</div>
          )}

          {nyMal ? (
            <SYS_MalSkjema mal={nyMal} onLagret={lagreMal} onAvbryt={()=>setNyMal(null)} />
          ) : (
            <Button size="sm" icon={I.plus} onClick={()=>setNyMal({...tomMal})}>Ny standardmal</Button>
          )}
        </div>
      )}
    </div>
  );
}

// ── SYSTEMKORT (utvidbart) ─────────────────────────────────────
function SYS_SystemKort({ system, profiler, leverandorer, innloggetId, onEndret }) {
  const [apent, setApent] = React.useState(false);
  const [tilganger, setTilganger] = React.useState(null);
  const [visMaler, setVisMaler] = React.useState(false);
  const [redigerTilgang, setRedigerTilgang] = React.useState(null);
  const [nyTilgang, setNyTilgang] = React.useState(false);
  const [redigerSystem, setRedigerSystem] = React.useState(false);
  const [sokTilgang, setSokTilgang] = React.useState('');
  const tone = SYS_STATUS_TONE[system.status] || SYS_STATUS_TONE.aktiv;

  const lastTilganger = () => { SYS_hentTilganger(system.id).then(setTilganger); };
  const apneKort = () => { if (!apent && !tilganger) lastTilganger(); setApent(a=>!a); };

  const aktiveTilganger = (tilganger||[]).filter(t=>t.status==='aktiv').length;
  const eier = system.eier;

  return (
    <div style={{ background:'#fff',border:'1px solid rgba(17,24,61,.1)',borderRadius:12,overflow:'hidden',marginBottom:8 }}>
      {redigerSystem && (
        <SYS_SystemSkjema system={system} profiler={profiler} leverandorer={leverandorer}
          onLagret={r=>{ onEndret(r); setRedigerSystem(false); }}
          onAvbryt={()=>setRedigerSystem(false)} />
      )}
      {/* Hodet */}
      {!redigerSystem && (
        <div style={{ display:'flex',alignItems:'center',gap:12,padding:'12px 16px',cursor:'pointer' }} onClick={apneKort}>
          <div style={{ width:6,height:40,borderRadius:3,background:tone.bg,flexShrink:0 }} />
          <div style={{ flex:1,minWidth:0 }}>
            <div style={{ display:'flex',alignItems:'center',gap:8,flexWrap:'wrap' }}>
              <span style={{ fontWeight:700,fontSize:14 }}>{system.navn}</span>
              <SysStatusPill status={system.status} />
              <span style={{ fontSize:11,color:SK.soft,background:SK.iceBlueLight,padding:'1px 7px',borderRadius:99 }}>{SYS_KAT_LABEL[system.kategori]||system.kategori}</span>
              {system.leverandor && <span style={{ fontSize:11,color:SK.soft }}>{system.leverandor_obj?.navn||system.leverandor}</span>}
              <SysRevVarsel dato={system.revidering_dato} />
            </div>
            <div style={{ fontSize:12,color:SK.soft,marginTop:2,display:'flex',gap:12 }}>
              {eier && <span>Eier: {eier.navn}</span>}
              <span>{aktiveTilganger > 0 ? `${aktiveTilganger} aktive tilganger` : 'Ingen tilganger registrert'}</span>
              {system.url && <a href={system.url} target="_blank" rel="noreferrer" onClick={e=>e.stopPropagation()} style={{ color:SK.coral,textDecoration:'none' }}>Åpne system ↗</a>}
            </div>
          </div>
          <div onClick={e=>{ e.stopPropagation(); setRedigerSystem(true); }} style={{ fontSize:11,color:SK.soft,cursor:'pointer',padding:'4px 8px',borderRadius:6,background:SK.iceBlueLight }}>Rediger</div>
          <span style={{ color:SK.soft,fontSize:18,transition:'transform .15s',transform:apent?'rotate(90deg)':'none' }}>›</span>
        </div>
      )}

      {/* Utvidet innhold */}
      {apent && !redigerSystem && (
        <div style={{ borderTop:'1px solid rgba(17,24,61,.07)',padding:'12px 16px' }}>
          {system.beskrivelse && <div style={{ fontSize:13,color:SK.soft,marginBottom:10 }}>{system.beskrivelse}</div>}

          {/* Revisjonsstatus */}
          {system.revidering_dato && (
            <div style={{ background:SK.iceBlueLight,borderRadius:8,padding:'8px 12px',marginBottom:12,fontSize:12,display:'flex',gap:12,alignItems:'center' }}>
              <span>📅 Neste revisjon: <b>{system.revidering_dato}</b></span>
              {system.revidering_ansvarlig_id && <span>Ansvarlig: {profiler.find(p=>p.id===system.revidering_ansvarlig_id)?.navn||'—'}</span>}
            </div>
          )}

          {/* Tilgangsliste */}
          <div style={{ display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:8 }}>
            <span style={{ fontWeight:600,fontSize:13 }}>Tilganger</span>
            <div style={{ display:'flex',gap:8 }}>
              <Button size="sm" onClick={()=>{ setVisMaler(!visMaler); setNyTilgang(false); }}>
                {visMaler?'Skjul maler':'Tiltaksmaler'}
              </Button>
              <Button size="sm" icon={I.plus} onClick={()=>{ setNyTilgang(true); setVisMaler(false); }}>Legg til tilgang</Button>
            </div>
          </div>

          {visMaler && <SYS_TiltaksMalPanel systemId={system.id} onLukk={()=>setVisMaler(false)} />}

          {nyTilgang && (
            <SYS_TilgangSkjema systemId={system.id} profiler={profiler}
              onLagret={r=>{ setTilganger(t=>[...(t||[]),r]); setNyTilgang(false); }}
              onAvbryt={()=>setNyTilgang(false)} />
          )}

          {/* Søk i tilganger */}
          {(tilganger||[]).length > 5 && (
            <input className="ok-input" placeholder="Søk i tilganger…" value={sokTilgang}
              onChange={e=>setSokTilgang(e.target.value)} style={{ ...SYS_INP, marginBottom:8, maxWidth:300 }} />
          )}

          {!tilganger ? <div style={{ color:SK.soft,fontSize:13,padding:8 }}>Laster tilganger…</div>
            : tilganger.length===0 ? <div style={{ color:SK.soft,fontSize:13,padding:8 }}>Ingen tilganger registrert på dette systemet.</div>
            : (
              <div style={{ border:'1px solid rgba(17,24,61,.08)',borderRadius:8,overflow:'hidden' }}>
                <table className="ok-table" style={{ margin:0 }}>
                  <thead><tr>
                    <th>Bruker</th><th>Rolle</th><th>Nivå</th><th>Status</th><th>Utløper</th><th></th>
                  </tr></thead>
                  <tbody>
                    {tilganger
                      .filter(t=>!sokTilgang||((t.profil?.navn||t.ekstern_navn||'').toLowerCase().includes(sokTilgang.toLowerCase())))
                      .map(t => {
                        const navnVis = t.profil?.navn||t.ekstern_navn||t.ekstern_epost||'—';
                        const st = { aktiv:{ bg:'#dbeed8',fg:'#1b6a2e' }, sperret:{ bg:'#fdeac8',fg:'#8e5a05' }, slettet:{ bg:'#fcddde',fg:'#8a1620' }, vikar:{ bg:SK.iceBlueLight,fg:SK.ink } }[t.status]||{ bg:SK.iceBlueLight,fg:SK.soft };
                        if (redigerTilgang===t.id) return (
                          <tr key={t.id}><td colSpan={6} style={{ padding:0 }}>
                            <SYS_TilgangSkjema tilgang={t} systemId={system.id} profiler={profiler}
                              onLagret={r=>{ setTilganger(prev=>prev.map(x=>x.id===r.id?r:x)); setRedigerTilgang(null); }}
                              onAvbryt={()=>setRedigerTilgang(null)} />
                          </td></tr>
                        );
                        return (
                          <tr key={t.id}>
                            <td>
                              <div style={{ display:'flex',alignItems:'center',gap:8 }}>
                                <SysAvatar navn={navnVis} avatarUrl={t.profil?.avatar_url} size={26} />
                                <div>
                                  <div style={{ fontSize:12.5,fontWeight:600 }}>{navnVis}</div>
                                  {t.profil?.enhet?.navn && <div style={{ fontSize:11,color:SK.soft }}>{t.profil.enhet.navn}</div>}
                                </div>
                              </div>
                            </td>
                            <td style={{ fontSize:12,color:SK.soft }}>{t.rolle||'—'}</td>
                            <td style={{ fontSize:12 }}>{SYS_TILGANG_NIVA[t.tilgang_niva]||t.tilgang_niva}</td>
                            <td><span style={{ fontSize:10.5,fontWeight:700,padding:'2px 7px',borderRadius:99,background:st.bg,color:st.fg }}>{t.status}</span></td>
                            <td style={{ fontSize:12,color:SK.soft }}>{t.utloper_dato||'—'}</td>
                            <td>
                              <div style={{ display:'flex',gap:6 }}>
                                <button onClick={()=>setRedigerTilgang(t.id)} style={{ border:'none',background:'none',color:SK.soft,cursor:'pointer',fontSize:12 }}>✏️</button>
                                 <button onClick={async()=>{
                                   if (!confirm('Fjern tilgang for '+navnVis+'?')) return;
                                   try { await SYS_slettTilgang(t.id); setTilganger(prev=>prev.filter(x=>x.id!==t.id)); }
                                   catch(e) { alert('Feil: '+e.message); }
                                 }} style={{ border:'none',background:'none',color:SK.coral,cursor:'pointer',fontSize:13 }}>🗑</button>
                              </div>
                            </td>
                          </tr>
                        );
                    })}
                  </tbody>
                </table>
              </div>
            )}
          <SYS_GenerteTiltakPanel systemId={system.id} />
        </div>
      )}
    </div>
  );
}

// ── LEVERANDØRSKJEMA ──────────────────────────────────────────
function SYS_LeverandorSkjema({ lev, profiler, lokasjoner: alleLokasjoner, onLagret, onAvbryt }) {
  const tom = { navn:'', kategori:'annet', org_nr:'', nettside:'', kontakt_navn:'', kontakt_epost:'', kontakt_tlf:'', avtale_id:'', lokasjon_ids:[], ansvarlige:[], innkjopere:[], faste_opplysninger:'', status:'aktiv' };
  const [felt, setFelt] = React.useState(lev ? { ...tom, ...lev, lokasjon_ids: lev.lokasjon_ids||[], innkjopere: lev.innkjopere||[], ansvarlige: lev.ansvarlige||[] } : tom);
  const [laster, setLaster] = React.useState(false);
  const opd = (k,v) => setFelt(f=>({...f,[k]:v}));
  const toggleArr = (k,id) => setFelt(f=>({ ...f, [k]: f[k].includes(id) ? f[k].filter(x=>x!==id) : [...f[k],id] }));
  const lagre = async () => {
    if (!felt.navn.trim()) { alert('Navn er påkrevd'); return; }
    setLaster(true);
    try { const r = await SYS_lagreLeverandor(lev?.id||null, { ...felt, avtale_id: felt.avtale_id||null, lokasjon_ids: felt.lokasjon_ids||[], faste_opplysninger: felt.faste_opplysninger||null }); onLagret(r); }
    catch(e) { alert('Feil: '+e.message); setLaster(false); }
  };
  return (
    <div style={{ padding:'18px 20px' }}>
      <h2 style={{ fontSize:16,fontWeight:700,margin:'0 0 16px' }}>{lev?'Rediger leverandør':'Ny leverandør'}</h2>
      <div style={{ display:'grid',gridTemplateColumns:'1fr 1fr',gap:12 }}>
        <div style={{ gridColumn:'1/-1' }}>
          <label style={SYS_LBL}>Leverandørnavn *</label>
          <input className="ok-input" value={felt.navn} onChange={e=>opd('navn',e.target.value)} placeholder="f.eks. Coop Obs!" style={SYS_INP} />
        </div>
        <div>
          <label style={SYS_LBL}>Kategori</label>
          <select className="ok-input" value={felt.kategori} onChange={e=>opd('kategori',e.target.value)} style={SYS_INP}>
            {Object.entries(SYS_LEV_KAT).map(([k,v])=><option key={k} value={k}>{v}</option>)}
          </select>
        </div>
        <div>
          <label style={SYS_LBL}>Status</label>
          <select className="ok-input" value={felt.status} onChange={e=>opd('status',e.target.value)} style={SYS_INP}>
            <option value="aktiv">Aktiv</option>
            <option value="inaktiv">Inaktiv</option>
            <option value="under_vurdering">Under vurdering</option>
          </select>
        </div>
        <div>
          <label style={SYS_LBL}>Org.nr</label>
          <input className="ok-input" value={felt.org_nr} onChange={e=>opd('org_nr',e.target.value)} placeholder="9 siffer" style={SYS_INP} />
        </div>
        <div>
          <label style={SYS_LBL}>Nettside</label>
          <input className="ok-input" value={felt.nettside} onChange={e=>opd('nettside',e.target.value)} placeholder="https://…" style={SYS_INP} />
        </div>
        <div>
          <label style={SYS_LBL}>Kontaktperson</label>
          <input className="ok-input" value={felt.kontakt_navn} onChange={e=>opd('kontakt_navn',e.target.value)} style={SYS_INP} />
        </div>
        <div>
          <label style={SYS_LBL}>Kontakt e-post</label>
          <input className="ok-input" value={felt.kontakt_epost} onChange={e=>opd('kontakt_epost',e.target.value)} style={SYS_INP} />
        </div>
        <div style={{ gridColumn:'1/-1' }}>
          <label style={SYS_LBL}>Lokasjoner</label>
          {(alleLokasjoner||[]).length === 0
            ? <div style={{ fontSize:12,color:SK.soft,padding:'6px 0' }}>Ingen lokasjoner registrert i Organisasjon-modulen ennå.</div>
            : <div style={{ display:'flex',flexWrap:'wrap',gap:8 }}>
                {(alleLokasjoner||[]).map(l=>(
                  <label key={l.id} style={{ display:'flex',alignItems:'center',gap:7,padding:'5px 12px',borderRadius:99,border:'1px solid',
                    borderColor: felt.lokasjon_ids.includes(l.id) ? SK.coral : 'rgba(17,24,61,.15)',
                    background: felt.lokasjon_ids.includes(l.id) ? '#fdeac8' : '#fff',
                    cursor:'pointer', fontSize:12.5, fontWeight: felt.lokasjon_ids.includes(l.id)?600:400 }}>
                    <input type="checkbox" checked={felt.lokasjon_ids.includes(l.id)}
                      onChange={()=>toggleArr('lokasjon_ids',l.id)}
                      style={{ display:'none' }} />
                    {felt.lokasjon_ids.includes(l.id) && <span style={{ color:SK.coral }}>✓ </span>}
                    {l.navn}{l.adresse && <span style={{ color:SK.soft, fontWeight:400 }}> · {l.adresse}</span>}
                  </label>
                ))}
              </div>}
        </div>
        <div>
          <label style={SYS_LBL}>Innkjøpere (kan handle)</label>
          <div style={{ border:'1px solid rgba(17,24,61,.12)',borderRadius:8,maxHeight:140,overflowY:'auto',padding:'4px' }}>
            {profiler.map(pr=>(
              <label key={pr.id} style={{ display:'flex',gap:8,padding:'5px 7px',cursor:'pointer',borderRadius:5,background:felt.innkjopere.includes(pr.id)?SK.iceBlueLight:'transparent' }}>
                <input type="checkbox" checked={felt.innkjopere.includes(pr.id)} onChange={()=>toggleArr('innkjopere',pr.id)} />
                <span style={{ fontSize:12 }}>{pr.navn||pr.epost}</span>
              </label>
            ))}
          </div>
        </div>
        <div>
          <label style={SYS_LBL}>Ansvarlige</label>
          <div style={{ border:'1px solid rgba(17,24,61,.12)',borderRadius:8,maxHeight:140,overflowY:'auto',padding:'4px' }}>
            {profiler.map(pr=>(
              <label key={pr.id} style={{ display:'flex',gap:8,padding:'5px 7px',cursor:'pointer',borderRadius:5,background:felt.ansvarlige.includes(pr.id)?SK.iceBlueLight:'transparent' }}>
                <input type="checkbox" checked={felt.ansvarlige.includes(pr.id)} onChange={()=>toggleArr('ansvarlige',pr.id)} />
                <span style={{ fontSize:12 }}>{pr.navn||pr.epost}</span>
              </label>
            ))}
          </div>
        </div>
        <div style={{ gridColumn:'1/-1' }}>
          <label style={SYS_LBL}>Faste opplysninger</label>
          <textarea className="ok-input" value={felt.faste_opplysninger||''} onChange={e=>opd('faste_opplysninger',e.target.value)}
            rows={3} placeholder="Faste opplysninger om leverandøren (kontraktsbetingelser, spesielle avtaler, etc.)"
            style={{ ...SYS_INP,resize:'vertical',fontFamily:'inherit' }} />
        </div>
      </div>
      <div style={{ display:'flex',gap:8,marginTop:16 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>{laster?'Lagrer…':'Lagre'}</Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

// ── LEVERANDØRKORT ────────────────────────────────────────────
function SYS_LeverandorKort({ lev, profiler, lokasjoner: alleLokasjoner, innloggetId, onEndret }) {
  const [rediger, setRediger] = React.useState(false);
  const katFarge = { it:SK.coral, kontor:SK.iceBlue, mat:'#fdeac8', transport:'#f0f4fc', kompetanse:'#e2eeed', bygg:'#fdeac8', annet:SK.iceBlueLight };
  const innkjopNavn = (lev.innkjopere||[]).map(id=>profiler.find(p=>p.id===id)?.navn||'?').filter(Boolean);
  const ansvarligNavn = (lev.ansvarlige||[]).map(id=>profiler.find(p=>p.id===id)?.navn||'?').filter(Boolean);
  const stTone = { aktiv:{ bg:'#dbeed8',fg:'#1b6a2e' }, inaktiv:{ bg:'#f0f4fc',fg:SK.soft }, under_vurdering:{ bg:'#fdeac8',fg:'#8e5a05' } }[lev.status]||{ bg:SK.iceBlueLight,fg:SK.soft };
  if (rediger) return (
    <div style={{ background:'#fff',border:'1px solid rgba(17,24,61,.1)',borderRadius:12,overflow:'hidden',marginBottom:8 }}>
      <SYS_LeverandorSkjema lev={lev} profiler={profiler} lokasjoner={alleLokasjoner} onLagret={r=>{ onEndret(r); setRediger(false); }} onAvbryt={()=>setRediger(false)} />
    </div>
  );
  return (
    <div style={{ background:'#fff',border:'1px solid rgba(17,24,61,.1)',borderRadius:12,padding:'14px 16px',marginBottom:8 }}>
      <div style={{ display:'flex',alignItems:'flex-start',gap:12 }}>
        <div style={{ width:44,height:44,borderRadius:10,background:katFarge[lev.kategori]||SK.iceBlueLight,display:'flex',alignItems:'center',justifyContent:'center',fontSize:20,flexShrink:0 }}>
          {lev.kategori==='it'?'💻':lev.kategori==='mat'?'🍽️':lev.kategori==='kontor'?'📦':lev.kategori==='bygg'?'🏗️':lev.kategori==='transport'?'🚚':lev.kategori==='kompetanse'?'📚':'🏢'}
        </div>
        <div style={{ flex:1,minWidth:0 }}>
          <div style={{ display:'flex',alignItems:'center',gap:8,flexWrap:'wrap' }}>
            <span style={{ fontWeight:700,fontSize:14 }}>{lev.navn}</span>
            <span style={{ fontSize:11,color:SK.soft,background:SK.iceBlueLight,padding:'1px 7px',borderRadius:99 }}>{SYS_LEV_KAT[lev.kategori]||lev.kategori}</span>
            <span style={{ fontSize:10.5,fontWeight:700,padding:'1px 7px',borderRadius:99,background:stTone.bg,color:stTone.fg }}>{lev.status==='aktiv'?'Aktiv':lev.status==='inaktiv'?'Inaktiv':'Under vurdering'}</span>
          </div>
          <div style={{ display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(180px,1fr))',gap:'6px 20px',marginTop:8,fontSize:12 }}>
            {lev.kontakt_navn && <div><span style={{ color:SK.soft }}>Kontakt: </span>{lev.kontakt_navn}{lev.kontakt_epost&&<> · <a href={'mailto:'+lev.kontakt_epost} style={{ color:SK.coral }}>{lev.kontakt_epost}</a></>}</div>}
            {innkjopNavn.length>0 && <div><span style={{ color:SK.soft }}>Kan handle: </span>{innkjopNavn.join(', ')}</div>}
            {ansvarligNavn.length>0 && <div><span style={{ color:SK.soft }}>Ansvarlig: </span>{ansvarligNavn.join(', ')}</div>}
            {(lev.lokasjon_ids||[]).length>0 && <div><span style={{ color:SK.soft }}>Lokasjoner: </span>{(lev.lokasjon_ids||[]).map(id=>(alleLokasjoner||[]).find(l=>l.id===id)?.navn||'?').join(', ')}</div>}
            {lev.nettside && <div><a href={lev.nettside} target="_blank" rel="noreferrer" style={{ color:SK.coral }}>Nettside ↗</a></div>}
          </div>
          {lev.faste_opplysninger && <div style={{ fontSize:11.5,color:SK.soft,marginTop:6 }}>{lev.faste_opplysninger}</div>}
        </div>
        <button onClick={()=>setRediger(true)} style={{ fontSize:11,color:SK.soft,cursor:'pointer',padding:'4px 8px',borderRadius:6,background:SK.iceBlueLight,border:'none' }}>Rediger</button>
      </div>
      <SYS_LevNotatPanel leverandorId={lev.id} innloggetId={innloggetId} />
    </div>
  );
}

// ── HOVED-WORKSPACE ───────────────────────────────────────────
function SystemerWorkspace({ go }) {
  const [tab, setTab]               = React.useState('systemer');
  const [systemer, setSystemer]     = React.useState([]);
  const [leverandorer, setLev]      = React.useState([]);
  const [profiler, setProfiler]     = React.useState([]);
  const [lasterSys, setLasterSys]   = React.useState(true);
  const [lasterLev, setLasterLev]   = React.useState(false);
  const [feil, setFeil]             = React.useState(null);
  const [orgLokasjoner, setOrgLok]  = React.useState([]);
  const [innloggetId,   setInnlogId] = React.useState(null);
  const [nyttSystem, setNyttSystem] = React.useState(false);
  const [nyLev, setNyLev]           = React.useState(false);
  const [sokSys, setSokSys]         = React.useState('');
  const [katFilter, setKatFilter]   = React.useState('');
  const [sokLev, setSokLev]         = React.useState('');
  const [levKatFilter, setLevKat]   = React.useState('');

  React.useEffect(() => {
    Promise.all([SYS_hentSystemer(), SYS_hentProfiler(), SYS_hentLeverandorer(), SYS_hentLokasjoner()])
      .then(([sys,p,l,lok]) => { setSystemer(sys); setProfiler(p); setLev(l); setOrgLok(lok); setLasterSys(false); })
      .catch(e => { setFeil(e.message); setLasterSys(false); });
    window._sb.auth.getUser().then(({ data:{ user } }) => { if(user) setInnlogId(user.id); });
  }, []);

  const filtSys = React.useMemo(() => {
    let h = systemer;
    if (sokSys) h = h.filter(s => s.navn.toLowerCase().includes(sokSys.toLowerCase()) || (s.leverandor||'').toLowerCase().includes(sokSys.toLowerCase()));
    if (katFilter) h = h.filter(s => s.kategori === katFilter);
    return h;
  }, [systemer, sokSys, katFilter]);

  const filtLev = React.useMemo(() => {
    let h = leverandorer;
    if (sokLev) { const q=sokLev.toLowerCase(); h = h.filter(l => l.navn.toLowerCase().includes(q) || (l.lokasjon_ids||[]).map(id=>orgLokasjoner.find(x=>x.id===id)?.navn||'').some(n=>n.toLowerCase().includes(q))); }
    if (levKatFilter) h = h.filter(l => l.kategori === levKatFilter);
    return h;
  }, [leverandorer, sokLev, levKatFilter]);

  // KPI
  const revisjonsVarsel = systemer.filter(s => {
    if (!s.revidering_dato) return false;
    return (new Date(s.revidering_dato) - new Date()) / 86400000 <= 30;
  }).length;

  const tabs = [
    { id:'systemer',   label:`Systemer (${systemer.length})` },
    { id:'leverandorer', label:`Leverandører (${leverandorer.length})` },
  ];

  return (
    <div className="ok-content__inner" style={{ maxWidth:1100 }}>
      <div style={{ marginBottom:4, fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.08, textTransform:'uppercase' }}>
        Masterdata · Systemer & leverandører
      </div>
      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:20, flexWrap:'wrap', gap:12 }}>
        <h1 style={{ fontSize:32, fontWeight:700, color:SK.ink, margin:0 }}>Systemer &amp; leverandører</h1>
        <div style={{ display:'flex',gap:8 }}>
          {tab==='systemer' && <Button variant="primary" icon={I.plus} onClick={()=>setNyttSystem(true)}>Nytt system</Button>}
          {tab==='leverandorer' && <Button variant="primary" icon={I.plus} onClick={()=>setNyLev(true)}>Ny leverandør</Button>}
        </div>
      </div>

      {/* KPI-rad */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(160px,1fr))', gap:12, marginBottom:22 }}>
        {[
          ['SYSTEMER', systemer.length, 'totalt'],
          ['AKTIVE', systemer.filter(s=>s.status==='aktiv').length, 'i bruk'],
          ['LEVERANDØRER', leverandorer.length, 'registrert'],
          ['REVISJON', revisjonsVarsel, revisjonsVarsel>0?'innen 30 dager':'ingen snart'],
        ].map(([lbl,tall,sub])=>(
          <Card key={lbl} padded>
            <div style={{ fontSize:10.5,fontWeight:700,color:SK.soft,letterSpacing:0.1,textTransform:'uppercase',marginBottom:4 }}>{lbl}</div>
            <div style={{ fontSize:28,fontWeight:700,color:tall>0&&lbl==='REVISJON'?SK.coral:SK.ink }}>{tall}</div>
            <div style={{ fontSize:12,color:SK.soft }}>{sub}</div>
          </Card>
        ))}
      </div>

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

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

      {/* ── SYSTEMER-FANE ─────────────────────────────────── */}
      {tab==='systemer' && (
        <div style={{ marginTop:16 }}>
          <SYS_GlobalMalPanel />
          {nyttSystem && (
            <Card padded={false} style={{ marginBottom:16 }}>
              <SYS_SystemSkjema profiler={profiler} leverandorer={leverandorer}
                onLagret={r=>{
                  setSystemer(prev=>[...prev,r]);
                  setNyttSystem(false);
                  // Arv globale tiltaksmaler til det nye systemet
                  SYS_arvGlobaleMaler(r.id).catch(e=>console.warn('Arv av maler feilet:', e.message));
                }}
                onAvbryt={()=>setNyttSystem(false)} />
            </Card>
          )}
          <div style={{ display:'flex',gap:10,marginBottom:14,flexWrap:'wrap',alignItems:'center' }}>
            <input className="ok-input" placeholder="Søk system, leverandør…" value={sokSys}
              onChange={e=>setSokSys(e.target.value)} style={{ ...SYS_INP, maxWidth:260 }} />
            <select className="ok-input" value={katFilter} onChange={e=>setKatFilter(e.target.value)} style={{ ...SYS_INP, maxWidth:190 }}>
              <option value="">Alle kategorier</option>
              {Object.entries(SYS_KAT_LABEL).map(([k,v])=><option key={k} value={k}>{v}</option>)}
            </select>
            <span style={{ fontSize:12,color:SK.soft,marginLeft:'auto' }}>{filtSys.length} av {systemer.length}</span>
          </div>
          {lasterSys ? <div style={{ color:SK.soft,padding:20,textAlign:'center' }}>Laster systemer…</div>
            : filtSys.length===0 ? <div style={{ color:SK.soft,padding:20,textAlign:'center' }}>Ingen systemer funnet.</div>
            : filtSys.map(sys=>(
              <SYS_SystemKort key={sys.id} system={sys} profiler={profiler} leverandorer={leverandorer}
                onEndret={r=>setSystemer(prev=>prev.map(s=>s.id===r.id?r:s))} />
            ))}
        </div>
      )}

      {/* ── LEVERANDØRER-FANE ─────────────────────────────── */}
      {tab==='leverandorer' && (
        <div style={{ marginTop:16 }}>
          {nyLev && (
            <Card padded={false} style={{ marginBottom:16 }}>
              <SYS_LeverandorSkjema profiler={profiler} lokasjoner={orgLokasjoner}
                onLagret={r=>{ setLev(prev=>[...prev,r]); setNyLev(false); }}
                onAvbryt={()=>setNyLev(false)} />
            </Card>
          )}
          <div style={{ display:'flex',gap:10,marginBottom:14,flexWrap:'wrap',alignItems:'center' }}>
            <input className="ok-input" placeholder="Søk leverandør, lokasjon…" value={sokLev}
              onChange={e=>setSokLev(e.target.value)} style={{ ...SYS_INP, maxWidth:260 }} />
            <select className="ok-input" value={levKatFilter} onChange={e=>setLevKat(e.target.value)} style={{ ...SYS_INP, maxWidth:190 }}>
              <option value="">Alle kategorier</option>
              {Object.entries(SYS_LEV_KAT).map(([k,v])=><option key={k} value={k}>{v}</option>)}
            </select>
            <span style={{ fontSize:12,color:SK.soft,marginLeft:'auto' }}>{filtLev.length} av {leverandorer.length}</span>
          </div>
          {filtLev.length===0 ? <div style={{ color:SK.soft,padding:20,textAlign:'center' }}>Ingen leverandører registrert ennå.</div>
            : filtLev.map(lev=>(
              <SYS_LeverandorKort key={lev.id} lev={lev} profiler={profiler} lokasjoner={orgLokasjoner} innloggetId={innloggetId}
                onEndret={r=>setLev(prev=>prev.map(l=>l.id===r.id?r:l))} />
            ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { SystemerWorkspace });