// brukere.jsx — Kombinert Brukere + Profiler fra Supabase

// ── OKAvatar — profilbilde eller initialer ────────────────────

function OKAvatar({ navn, avatarUrl, farge, size = 36, fontSize = 12 }) {
  const [imgFeil, setImgFeil] = React.useState(false);
  const ini = navn
    ? navn.split(' ').filter(Boolean).map(n => n[0]).slice(0, 2).join('').toUpperCase()
    : '?';
  const bg = farge || '#9aa3b8';
  const stil = { width: size, height: size, borderRadius: '50%', flexShrink: 0,
    overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' };
  if (avatarUrl && !imgFeil) {
    return (
      <div style={stil}>
        <img src={avatarUrl} alt={navn || ''} onError={() => setImgFeil(true)}
          style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '50%' }} />
      </div>
    );
  }
  return <div style={{ ...stil, background: bg, color: '#fff', fontSize, fontWeight: 700 }}>{ini}</div>;
}

async function lastOppAvatarBilde(profilId, fil) {
  const ext = fil.name.split('.').pop().toLowerCase();
  const sti = `avatarer/${profilId}.${ext}`;
  const { error: upErr } = await window._sb.storage
    .from('profil-bilder')
    .upload(sti, fil, { upsert: true, contentType: fil.type });
  if (upErr) throw upErr;
  const { data } = window._sb.storage.from('profil-bilder').getPublicUrl(sti);
  const url = data.publicUrl + '?t=' + Date.now();
  await window._sb.from('profiles').update({ avatar_url: url }).eq('id', profilId);
  return url;
}

// Erstatter FaneBrukere (mock) med ekte data fra auth + profiles + roller + enheter

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

async function hentBrukere() {
  const { data, error } = await window._sb
    .from('profiles')
    .select('*, roller(id, navn, farge, nokkel), enheter(id, navn, type, avd_nr, selskap:selskaper!selskap_id(id, navn, type))')
    .order('navn', { ascending: true });
  if (error) throw error;
  return data || [];
}

async function hentRollerForBrukere() {
  const { data, error } = await window._sb
    .from('roller')
    .select('id, navn, farge, nokkel')
    .order('sortering', { ascending: true });
  if (error) throw error;
  return data || [];
}

async function hentEnheterForBrukere() {
  const { data, error } = await window._sb
    .from('enheter')
    .select('id, navn, type')
    .eq('aktiv', true)
    .order('sortering', { ascending: true });
  if (error) throw error;
  return data || [];
}

async function oppdaterBrukerProfil(id, felter) {
  const { data, error } = await window._sb
    .from('profiles')
    .update({ ...felter, updated_at: new Date().toISOString() })
    .eq('id', id)
    .select('*, roller(id, navn, farge, nokkel), enheter(id, navn, type)')
    .single();
  if (error) throw error;
  return data;
}

async function hentRolleTilgang(rolleId) {
  if (!rolleId) return [];
  const { data, error } = await window._sb
    .from('roller_tilgang')
    .select('niva, moduler(nokkel, navn, gruppe, sub, sensitiv, sortering)')
    .eq('rolle_id', rolleId)
    .order('moduler(sortering)', { ascending: true });
  if (error) return [];
  return data || [];
}

// ── Opprett profil uten auth ──────────────────────────────────

async function opprettProfilUtenAuth(felter) {
  const { data, error } = await window._sb.rpc('opprett_profil_uten_auth', {
    p_navn:          felter.navn       || null,
    p_epost:         felter.epost,
    p_rolle_id:      felter.rolleId    || null,
    p_enhet_id:      felter.enhetId    || null,
    p_avdeling:      felter.avdeling   || null,
    p_overordnet_id: felter.overordnetId || null,
  });
  if (error) throw error;
  return data;
}

async function sendInvitasjon(epost) {
  const { error } = await window._sb.auth.signInWithOtp({
    email: epost.trim(),
    options: { shouldCreateUser: true },
  });
  if (error) throw error;
  // Merk profilen som invitert
  await window._sb.from('profiles')
    .update({ invitert_at: new Date().toISOString() })
    .eq('epost', epost.trim());
}

// ── NyBrukerSkjema ────────────────────────────────────────────

function NyBrukerSkjema({ roller, enheter, alleProfiler, onLagret, onAvbryt }) {
  const [epost,       setEpost]       = React.useState('');
  const [navn,        setNavn]        = React.useState('');
  const [rolleId,     setRolleId]     = React.useState('');
  const [enhetId,     setEnhetId]     = React.useState('');
  const [avdeling,    setAvdeling]    = React.useState('');
  const [overordnetId,setOverordnetId]= React.useState('');
  const [sendInv,     setSendInv]     = React.useState(false);
  const [laster,      setLaster]      = React.useState(false);
  const [feil,        setFeil]        = React.useState(null);
  const [suksess,     setSuksess]     = React.useState(null);

  const lagre = async () => {
    if (!epost.trim())         { setFeil('E-post er påkrevd.');           return; }
    if (!epost.includes('@'))  { setFeil('Skriv inn gyldig e-postadresse.'); return; }
    setLaster(true); setFeil(null);
    try {
      const profil = await opprettProfilUtenAuth({ navn, epost, rolleId, enhetId, avdeling, overordnetId });
      if (sendInv) {
        await sendInvitasjon(epost);
        setSuksess('invitert');
      } else {
        setSuksess('opprettet');
      }
      setTimeout(() => onLagret(profil), 1800);
    } catch(e) {
      setFeil(e.message);
    } finally {
      setLaster(false);
    }
  };

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

  if (suksess) {
    return (
      <div style={{ padding: '28px 22px', textAlign: 'center' }}>
        <div style={{ fontSize: 32, marginBottom: 12 }}>{suksess === 'invitert' ? '✉️' : '✓'}</div>
        <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 8 }}>
          {suksess === 'invitert' ? 'Bruker opprettet og invitasjon sendt!' : 'Bruker opprettet!'}
        </div>
        <div style={{ fontSize: 13, color: SK.soft, lineHeight: 1.6 }}>
          {suksess === 'invitert'
            ? <>Innloggingslenke sendt til <b style={{ color: SK.ink }}>{epost}</b>.</>
            : <>Profilen er opprettet for <b style={{ color: SK.ink }}>{navn || epost}</b>. Invitasjon kan sendes når som helst fra brukerlisten.</>
          }
        </div>
      </div>
    );
  }

  return (
    <div style={{ padding: '20px 22px' }}>
      <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4 }}>Legg til bruker</div>
      <div style={{ fontSize: 12.5, color: SK.soft, marginBottom: 20, lineHeight: 1.5 }}>
        Brukeren opprettes i systemet. Invitasjon med påloggingslenke kan sendes nå eller senere.
      </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: '14px 20px', marginBottom: 20 }}>
        <div style={{ gridColumn: '1/-1', display: 'flex', flexDirection: 'column' }}>
          <label style={lbl}>E-postadresse *</label>
          <input className="ok-input" type="email" value={epost}
            onChange={e => setEpost(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && lagre()}
            placeholder="navn@oslokollega.no" style={inp} autoFocus />
        </div>

        <div style={{ gridColumn: '1/-1', display: 'flex', flexDirection: 'column' }}>
          <label style={lbl}>Fullt navn</label>
          <input className="ok-input" value={navn}
            onChange={e => setNavn(e.target.value)}
            placeholder="f.eks. Kari Solberg" style={inp} />
        </div>

        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <label style={lbl}>Rolle</label>
          <select className="ok-input" value={rolleId} onChange={e => setRolleId(e.target.value)} style={inp}>
            <option value="">— Ikke satt —</option>
            {roller.map(r => <option key={r.id} value={r.id}>{r.navn}</option>)}
          </select>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <label style={lbl}>Organisasjonsenhet</label>
          <select className="ok-input" value={enhetId} onChange={e => setEnhetId(e.target.value)} style={inp}>
            <option value="">— Ikke satt —</option>
            {enheter.map(e => <option key={e.id} value={e.id}>{e.navn}</option>)}
          </select>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <label style={lbl}>Avdeling (fritekst)</label>
          <input className="ok-input" value={avdeling}
            onChange={e => setAvdeling(e.target.value)}
            placeholder="Alternativt til enhet" style={inp} />
        </div>

        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <label style={lbl}>Overordnet</label>
          <select className="ok-input" value={overordnetId} onChange={e => setOverordnetId(e.target.value)} style={inp}>
            <option value="">— Ikke satt —</option>
            {(alleProfiler || []).map(p => (
              <option key={p.id} value={p.id}>{p.navn || p.epost}</option>
            ))}
          </select>
        </div>
      </div>

      {/* Invitasjonsvalg */}
      <div style={{ background: SK.iceBlueLight, borderRadius: 10, padding: '14px 16px', marginBottom: 20,
        border: sendInv ? `1.5px solid ${SK.coral}` : '1.5px solid rgba(17,24,61,.1)', transition: 'border .15s' }}>
        <label style={{ display: 'flex', alignItems: 'flex-start', gap: 12, cursor: 'pointer' }}>
          <input type="checkbox" checked={sendInv} onChange={e => setSendInv(e.target.checked)}
            style={{ marginTop: 3, width: 16, height: 16, cursor: 'pointer', accentColor: SK.coral }} />
          <div>
            <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 3 }}>Send invitasjon med påloggingslenke nå</div>
            <div style={{ fontSize: 12, color: SK.soft, lineHeight: 1.5 }}>
              Brukeren får en e-post med en lenke for å sette passord.
              Huk av hvis brukeren skal få tilgang med det samme.
              <br />Ikke huk av for å opprette profilen uten å sende invitasjon — du kan sende den senere.
            </div>
          </div>
        </label>
      </div>

      <div style={{ display: 'flex', gap: 8 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>
          {laster ? 'Oppretter…' : (sendInv ? 'Opprett og send invitasjon' : 'Legg til bruker')}
        </Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>

      <div style={{ marginTop: 14, fontSize: 11.5, color: SK.soft, lineHeight: 1.6 }}>
        Invitasjonslenken er gyldig i 24 timer. Ny invitasjon kan sendes fra brukerlisten.
      </div>
    </div>
  );
}
function BrukerSkjema({ profil, roller, enheter, alleProfiler, onLagret, onAvbryt }) {
  const [navn,        setNavn]        = React.useState(profil.navn        || '');
  const [rolleId,     setRolleId]     = React.useState(profil.rolle_id    || '');
  const [enhetId,     setEnhetId]     = React.useState(profil.enhet_id    || '');
  const [avdeling,    setAvdeling]    = React.useState(profil.avdeling    || '');
  const [status,      setStatus]      = React.useState(profil.status      || 'aktiv');
  const [statusFra,   setStatusFra]   = React.useState(profil.status_fra  || '');
  const [statusTil,   setStatusTil]   = React.useState(profil.status_til  || '');
  const [vikarId,     setVikarId]     = React.useState(profil.vikar_id    || '');
  const [overordnetId,setOverordnetId]= React.useState(profil.overordnet_id || '');
  const [laster,      setLaster]      = React.useState(false);
  const [feil,        setFeil]        = React.useState(null);

  const lagre = async () => {
    if (!navn.trim()) { setFeil('Navn er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    try {
      const oppdatert = await oppdaterBrukerProfil(profil.id, {
        navn,
        rolle_id:      rolleId      || null,
        enhet_id:      enhetId      || null,
        avdeling:      avdeling     || null,
        status,
        status_fra:    statusFra    || null,
        status_til:    statusTil    || null,
        vikar_id:      vikarId      || null,
        overordnet_id: overordnetId || null,
      });
      onLagret(oppdatert);
    } catch(e) {
      setFeil('Feil ved lagring: ' + e.message);
    } finally {
      setLaster(false);
    }
  };

  const lbl = { fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.04, textTransform: 'uppercase', display: 'block', marginBottom: 5 };
  const inp = { padding: '10px 12px', fontSize: 13 };
  const andreProfiler = (alleProfiler || []).filter(p => p.id !== profil.id);

  const BRUKER_STATUS = {
    aktiv:     { label: 'Aktiv',     bg: '#dbeed8', fg: '#1b6a2e' },
    permisjon: { label: 'Permisjon', bg: '#fdeac8', fg: '#8e5a05' },
    sykmeldt:  { label: 'Sykmeldt',  bg: '#fdeac8', fg: '#8e5a05' },
    sluttet:   { label: 'Sluttet',   bg: '#fcddde', fg: '#8a1620' },
    overgang:  { label: 'Overgang',  bg: '#e9eef7', fg: '#3c4a6b' },
  };


// ── Detalj­panel ──────────────────────────────────────────────


  return (
    <div style={{ padding: '18px 20px' }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.04, textTransform: 'uppercase', marginBottom: 4 }}>Rediger bruker</div>
      <div style={{ fontSize: 13, color: SK.soft, marginBottom: 18 }}>{profil.epost}</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, marginBottom: 20 }}>
        <div style={{ gridColumn:'1/-1', display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Fullt navn *</label>
          <input className="ok-input" value={navn} onChange={e => setNavn(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && lagre()} placeholder="f.eks. Kari Solberg" style={inp} autoFocus />
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Rolle</label>
          <select className="ok-input" value={rolleId} onChange={e => setRolleId(e.target.value)} style={inp}>
            <option value="">— Ikke satt —</option>
            {roller.map(r => <option key={r.id} value={r.id}>{r.navn}</option>)}
          </select>
          <div style={{ fontSize: 11, color: SK.soft }}>Bestemmer tilgangsnivå.</div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Organisasjonsenhet</label>
          <select className="ok-input" value={enhetId} onChange={e => setEnhetId(e.target.value)} style={inp}>
            <option value="">— Ikke satt —</option>
            {enheter.map(e => <option key={e.id} value={e.id}>{e.navn}</option>)}
          </select>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Status</label>
          <select className="ok-input" value={status} onChange={e => setStatus(e.target.value)} style={inp}>
            {Object.entries(BRUKER_STATUS).map(([k,v]) => <option key={k} value={k}>{v.label}</option>)}
          </select>
        </div>

        {status !== 'aktiv' && (
          <>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
              <label style={lbl}>Fra dato</label>
              <input className="ok-input" type="date" value={statusFra} onChange={e=>setStatusFra(e.target.value)} style={inp} />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
              <label style={lbl}>Til dato (valgfritt)</label>
              <input className="ok-input" type="date" value={statusTil} onChange={e=>setStatusTil(e.target.value)} style={inp} />
            </div>
          </>
        )}

        {status !== 'aktiv' && (
          <div style={{ gridColumn:'1/-1', display: 'flex', flexDirection: 'column', gap: 5 }}>
            <label style={lbl}>Vikar</label>
            <select className="ok-input" value={vikarId} onChange={e=>setVikarId(e.target.value)} style={inp}>
              <option value="">— Ingen vikar (bruker overordnet) —</option>
              {andreProfiler.filter(p => p.status === 'aktiv' || !p.status).map(p => (
                <option key={p.id} value={p.id}>{p.navn || p.epost}</option>
              ))}
            </select>
            <div style={{ fontSize: 11, color: SK.soft, lineHeight: 1.5 }}>
              Ved status-endring overføres åpne tiltak og avtaler automatisk til vikar, eller overordnet som fallback.
            </div>
          </div>
        )}

        <div style={{ gridColumn:'1/-1', display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Overordnet</label>
          <select className="ok-input" value={overordnetId} onChange={e=>setOverordnetId(e.target.value)} style={inp}>
            <option value="">— Ikke satt —</option>
            {andreProfiler.map(p => (
              <option key={p.id} value={p.id}>{p.navn || p.epost}</option>
            ))}
          </select>
        </div>
      </div>

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

function AdminNivaaSeksjon({ profil, onOppdatert }) {
  const [egetNivaa,  setEgetNivaa]  = React.useState(null);
  const [lagrer,     setLagrer]     = React.useState(false);
  const [feil,       setFeil]       = React.useState(null);
  const naverende = profil.admin_nivaa || 'ingen';

  // Hent innlogget brukers eget admin-nivå for å avgjøre om hen kan endre
  React.useEffect(() => {
    window._sb.auth.getUser().then(({ data: { user } }) => {
      if (!user) return;
      window._sb.from('profiles').select('admin_nivaa, roller(nokkel)').eq('id', user.id).single()
        .then(({ data }) => setEgetNivaa({
          nivaa: data?.admin_nivaa || 'ingen',
          rolle: data?.roller?.nokkel,
        }));
    });
  }, []);

  // Kun superbruker eller daglig leder kan endre admin-nivå
  const kanEndre = egetNivaa && (egetNivaa.nivaa === 'superbruker' || egetNivaa.rolle === 'daglig-leder');

  const settNivaa = async (nytt) => {
    setLagrer(true); setFeil(null);
    try {
      await window.settAdminNivaa(profil.id, nytt);
      if (onOppdatert) onOppdatert({ ...profil, admin_nivaa: nytt });
    } catch(e) { setFeil(e.message); } finally { setLagrer(false); }
  };

  if (!kanEndre) {
    // Vis bare badge hvis brukeren har et admin-nivå, ingen redigering
    if (naverende === 'ingen') return null;
    return (
      <div style={{ padding:'10px 12px', borderRadius:8, background:'#fcf0e8', border:'1px solid #f0c9b3' }}>
        <div style={{ fontSize:10, fontWeight:600, color:SK.soft, letterSpacing:0.04, textTransform:'uppercase', marginBottom:6 }}>Administrasjonsnivå</div>
        <AdminBadge nivaa={naverende} />
      </div>
    );
  }

  return (
    <div style={{ padding:'12px 14px', borderRadius:8, background:'#fcf0e8', border:'1px solid #f0c9b3' }}>
      <div style={{ fontSize:11, fontWeight:600, color:'#8e5a05', letterSpacing:0.04, textTransform:'uppercase', marginBottom:4 }}>
        Administrasjonsnivå
      </div>
      <div style={{ fontSize:12, color:SK.soft, lineHeight:1.5, marginBottom:10 }}>
        Gir tilgang uavhengig av rolle. Administrator har full tilgang i appen; superbruker har i tillegg
        tilgang til systeminnstillinger og brukeradministrasjon.
      </div>
      {feil && <div style={{ fontSize:12, color:'#8a1620', marginBottom:8 }}>{feil}</div>}
      <div style={{ display:'flex', gap:6 }}>
        {[['ingen','Vanlig'],['administrator','Administrator'],['superbruker','Superbruker']].map(([k,l]) => (
          <button key={k} disabled={lagrer} onClick={() => settNivaa(k)} className="ok-btn ok-btn--sm" style={{
            background: naverende===k ? SK.ink : 'transparent',
            color: naverende===k ? '#fff' : SK.ink,
            borderColor: naverende===k ? SK.ink : 'rgba(17,24,61,.15)',
          }}>{l}</button>
        ))}
      </div>
    </div>
  );
}

function BrukerDetalj({ profil, roller, enheter, alleProfiler, innloggetId, onLukk, onOppdatert, go }) {
  const [redigerer,   setRedigerer]   = React.useState(false);
  const [tilganger,   setTilganger]   = React.useState([]);
  const [lasterTilg,  setLasterTilg]  = React.useState(false);
  const [fane,        setFane]        = React.useState('info');

  React.useEffect(() => {
    if (fane === 'tilgang' && profil.rolle_id) {
      setLasterTilg(true);
      hentRolleTilgang(profil.rolle_id).then(t => { setTilganger(t); setLasterTilg(false); });
    }
  }, [fane, profil.rolle_id]);

  const ini = profil.navn
    ? profil.navn.split(' ').filter(Boolean).map(n => n[0]).slice(0, 2).join('').toUpperCase()
    : (profil.epost?.[0] || '?').toUpperCase();

  const farge = profil.roller?.farge || '#9aa3b8';
  const erDeg = profil.id === innloggetId;

  if (redigerer) {
    return (
      <Card padded={false} style={{ position: 'sticky', top: 0 }}>
        <BrukerSkjema
          profil={profil} roller={roller} enheter={enheter} alleProfiler={alleProfiler}
          onLagret={oppdatert => { onOppdatert(oppdatert); setRedigerer(false); }}
          onAvbryt={() => setRedigerer(false)}
        />
      </Card>
    );
  }

  return (
    <Card padded={false} style={{ position: 'sticky', top: 0 }}>
      {/* Header */}
      <div style={{ padding: '16px 18px', borderBottom: '1px solid rgba(17,24,61,.08)', display: 'flex', gap: 12, alignItems: 'center' }}>
        <div style={{ position: 'relative', flexShrink: 0 }}>
          <OKAvatar navn={profil.navn} avatarUrl={profil.avatar_url} farge={farge} size={42} fontSize={13} />
          <label title="Last opp profilbilde" style={{
            position: 'absolute', bottom: -2, right: -2,
            width: 20, height: 20, borderRadius: '50%',
            background: SK.ink, border: '2px solid #fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer',
          }}>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5" strokeLinecap="round">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
              <polyline points="17 8 12 3 7 8"/>
              <line x1="12" y1="3" x2="12" y2="15"/>
            </svg>
            <input type="file" accept="image/jpeg,image/png,image/webp" style={{ display: 'none' }}
              onChange={async e => {
                const fil = e.target.files?.[0];
                if (!fil) return;
                if (fil.size > 2 * 1024 * 1024) { alert('Bildet er for stort. Maks 2 MB.'); return; }
                try {
                  const url = await lastOppAvatarBilde(profil.id, fil);
                  onOppdatert({ ...profil, avatar_url: url });
                } catch(err) { alert('Feil: ' + err.message); }
              }} />
          </label>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 600, fontSize: 15, display: 'flex', alignItems: 'center', gap: 8 }}>
            {profil.navn || <span style={{ color: SK.soft, fontStyle: 'italic' }}>Navn ikke satt</span>}
            {erDeg && <span style={{ fontSize: 10, background: SK.iceBlue, color: SK.ink, padding: '1px 7px', borderRadius: 99, fontWeight: 600 }}>deg</span>}
          </div>
          <div style={{ fontSize: 11.5, color: SK.soft, marginTop: 2 }}>{profil.epost}</div>
        </div>
        <button onClick={onLukk} style={{ background: 'none', border: '1px solid rgba(17,24,61,.15)', borderRadius: 99,
          width: 28, height: 28, cursor: 'pointer', color: SK.soft,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
        </button>
      </div>

      {/* Faner */}
      <div style={{ display: 'flex', borderBottom: '1px solid rgba(17,24,61,.08)' }}>
        {[['info','Info'],['tilgang','Tilgang']].map(([k, l]) => (
          <button key={k} onClick={() => setFane(k)} style={{
            background: 'none', border: 'none', cursor: 'pointer', padding: '9px 16px',
            fontSize: 12.5, fontWeight: fane === k ? 600 : 400,
            color: fane === k ? SK.ink : SK.soft,
            borderBottom: fane === k ? `2px solid ${SK.coral}` : '2px solid transparent',
            fontFamily: 'inherit',
          }}>{l}</button>
        ))}
      </div>

      <div style={{ padding: 18 }}>
        {fane === 'info' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {[
                ['Rolle', profil.roller?.navn
                  ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                      <span style={{ width: 8, height: 8, borderRadius: '50%', background: farge }} />
                      {profil.roller.navn}
                    </span>
                  : <span style={{ color: SK.coral, fontStyle: 'italic' }}>Ikke satt</span>],
                ['Enhet', profil.enheter?.navn
                  ? <span>{profil.enheter.avd_nr ? `${profil.enheter.avd_nr} · ` : ''}{profil.enheter.navn}</span>
                  : (profil.avdeling || <span style={{ color: SK.soft }}>—</span>)],
                ['Selskap', profil.enheter?.selskap?.navn
                  ? <span style={{ display:'inline-flex', alignItems:'center', gap:5 }}>
                      {profil.enheter.selskap.type === 'morselskap' && <span style={{ fontSize:9, color:'#a01a25' }}>●</span>}
                      {profil.enheter.selskap.navn}
                    </span>
                  : <span style={{ color: SK.soft }}>—</span>],
              ].map(([l, v]) => (
                <div key={l} style={{ padding: '9px 11px', borderRadius: 8, background: SK.iceBlueLight }}>
                  <div style={{ fontSize: 10, fontWeight: 600, color: SK.soft, letterSpacing: 0.04, textTransform: 'uppercase' }}>{l}</div>
                  <div style={{ fontSize: 13, fontWeight: 500, marginTop: 4 }}>{v}</div>
                </div>
              ))}
            </div>

            {/* Admin-nivå (superbruker/administrator) */}
            <AdminNivaaSeksjon profil={profil} onOppdatert={onOppdatert} />

            <div style={{ display: 'flex', gap: 8, paddingTop: 4, flexWrap: 'wrap' }}>
              <Button size="sm" variant="primary" onClick={() => setRedigerer(true)}>Rediger profil</Button>
              {!profil.auth_koblet && (
                <Button size="sm" onClick={async () => {
                  try {
                    await sendInvitasjon(profil.epost);
                    // Suksess – brukeren ser oppdatert status i tabellen
                  } catch(e) { console.error('Invitasjon feil:', e.message); }
                }}>
                  {profil.invitert_at ? '↻ Send ny invitasjon' : '✉ Send invitasjon'}
                </Button>
              )}
              {profil.roller?.nokkel === 'styre' && (
                <Button size="sm" onClick={() => go({ screen: 'styre' })}>Åpne styreportal</Button>
              )}
            </div>
            {!profil.auth_koblet && (
              <div style={{ marginTop: 10, fontSize: 12, color: SK.soft, lineHeight: 1.5,
                padding: '8px 10px', background: profil.invitert_at ? '#fdeac820' : '#e9eef740',
                borderRadius: 7, border: `1px solid ${profil.invitert_at ? '#f2b950' : 'rgba(17,24,61,.1)'}` }}>
                {profil.invitert_at
                  ? <>✉ Invitasjon sendt {new Date(profil.invitert_at).toLocaleDateString('nb-NO')} – brukeren har ikke logget inn ennå.</>
                  : <>Ingen invitasjon sendt ennå. Klikk «Send invitasjon» når brukeren skal få tilgang til systemet.</>
                }
              </div>
            )}
          </div>
        )}

        {fane === 'tilgang' && (
          <div>
            {!profil.rolle_id ? (
              <div style={{ fontSize: 13, color: SK.soft, padding: '12px 0' }}>
                Ingen rolle satt – tilgang ikke definert.
                <br />
                <button onClick={() => setRedigerer(true)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: SK.coral, fontSize: 13, fontFamily: 'inherit', padding: 0, marginTop: 8 }}>
                  Sett rolle →
                </button>
              </div>
            ) : lasterTilg ? (
              <div style={{ fontSize: 13, color: SK.soft, padding: '12px 0' }}>Laster tilganger…</div>
            ) : (
              <div>
                <div style={{ fontSize: 11, color: SK.soft, marginBottom: 12 }}>
                  Tilgang basert på rollen <b style={{ color: SK.ink }}>{profil.roller?.navn}</b>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                  {tilganger.filter(t => t.niva !== '·').map(t => {
                    const kode = AKS_KODER[t.niva];
                    return (
                      <div key={t.moduler?.nokkel} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', borderRadius: 7, background: SK.iceBlueLight }}>
                        <div style={{ width: 22, height: 22, display: 'flex', alignItems: 'center', justifyContent: 'center',
                          background: kode?.bg, color: kode?.fg, fontSize: 10, fontWeight: 700, borderRadius: 5,
                          boxShadow: `inset 0 0 0 1.5px ${kode?.ring}`, flexShrink: 0 }}>
                          {kode?.kort}
                        </div>
                        <span style={{ fontSize: 12.5, paddingLeft: t.moduler?.sub ? 12 : 0 }}>{t.moduler?.navn}</span>
                      </div>
                    );
                  })}
                </div>
              </div>
            )}
          </div>
        )}
      </div>
    </Card>
  );
}

// ── Hoved­komponent: FaneBrukere (erstatter mock-versjonen) ───

function FaneBrukere({ brukere: _mockIgnored, setBrukere: _mockIgnored2, go }) {
  const [profiler,   setProfiler]   = React.useState([]);
  const [roller,     setRoller]     = React.useState([]);
  const [enheter,    setEnheter]    = React.useState([]);
  const [laster,     setLaster]     = React.useState(true);
  const [feil,       setFeil]       = React.useState(null);
  const [sok,        setSok]        = React.useState('');
  const [rolleFilter,setRolleFilter]= React.useState('alle');
  const [valgtId,    setValgtId]    = React.useState(null);
  const [innloggetId,setInnloggetId]= React.useState(null);
  const [visInviter, setVisInviter] = React.useState(false);

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

  async function lastInn() {
    setLaster(true); setFeil(null);
    try {
      const [p, r, e] = await Promise.all([hentBrukere(), hentRollerForBrukere(), hentEnheterForBrukere()]);
      setProfiler(p); setRoller(r); setEnheter(e);
    } catch(err) {
      setFeil('Kunne ikke hente brukere: ' + err.message);
    } finally {
      setLaster(false);
    }
  }

  const filtrert = profiler.filter(p => {
    if (rolleFilter !== 'alle') {
      if (rolleFilter === 'ingen' && p.rolle_id) return false;
      if (rolleFilter !== 'ingen' && p.rolle_id !== rolleFilter) return false;
    }
    if (!sok) return true;
    const q = sok.toLowerCase();
    return (p.navn || '').toLowerCase().includes(q) ||
           (p.epost || '').toLowerCase().includes(q) ||
           (p.avdeling || '').toLowerCase().includes(q) ||
           (p.enheter?.navn || '').toLowerCase().includes(q);
  });

  const valgtProfil = valgtId ? profiler.find(p => p.id === valgtId) : null;

  const utenRolle = profiler.filter(p => !p.rolle_id).length;
  const ikkeAktivert = profiler.filter(p => !p.auth_koblet).length;

  if (visInviter) {
    return (
      <div style={{ marginTop: 16 }}>
        <Card padded={false} style={{ maxWidth: 560 }}>
          <NyBrukerSkjema
            roller={roller}
            enheter={enheter}
            alleProfiler={profiler}
            onLagret={nyProfil => {
              setVisInviter(false);
              lastInn();
            }}
            onAvbryt={() => setVisInviter(false)}
          />
        </Card>
      </div>
    );
  }

  return (
    <div style={{ marginTop: 16 }}>
      {utenRolle > 0 && (
        <div style={{ background: '#fdeac8', border: '1px solid #f2b950', borderRadius: 8, padding: '10px 14px', fontSize: 13, color: '#8e5a05', marginBottom: 10 }}>
          ⚠ <b>{utenRolle}</b> bruker{utenRolle > 1 ? 'e' : ''} mangler rolle – tilgang er ikke definert.
        </div>
      )}
      {ikkeAktivert > 0 && (
        <div style={{ background: '#e9eef7', border: '1px solid #b4c3e8', borderRadius: 8, padding: '10px 14px', fontSize: 13, color: '#3c4a6b', marginBottom: 14 }}>
          ✉ <b>{ikkeAktivert}</b> bruker{ikkeAktivert > 1 ? 'e har' : ' har'} ikke aktivert konto – invitasjon ikke sendt eller ikke åpnet.
        </div>
      )}

      <div style={{ display: 'flex', gap: 10, marginBottom: 14, alignItems: 'center', flexWrap: 'wrap' }}>
        <input className="ok-input ok-input--search" placeholder="Søk navn, e-post, enhet…" value={sok}
          onChange={e => setSok(e.target.value)} style={{ maxWidth: 300, padding: '7px 12px 7px 32px' }} />
        <select className="ok-input" value={rolleFilter} onChange={e => setRolleFilter(e.target.value)} style={{ maxWidth: 200, padding: '7px 10px', fontSize: 13 }}>
          <option value="alle">Alle roller</option>
          {roller.map(r => <option key={r.id} value={r.id}>{r.navn}</option>)}
          <option value="ingen">Uten rolle</option>
        </select>
        <span style={{ fontSize: 12, color: SK.soft }}>{filtrert.length} av {profiler.length}</span>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <Button size="sm" onClick={lastInn}>Oppdater</Button>
          <Button variant="primary" icon={I.plus} onClick={() => setVisInviter(true)}>Legg til bruker</Button>
        </div>
      </div>

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

      <div style={{ display: 'grid', gridTemplateColumns: valgtProfil ? '1fr 360px' : '1fr', gap: 16, alignItems: 'start' }}>
        <Card padded={false}>
          {laster ? (
            <div style={{ padding: 32, textAlign: 'center', color: SK.soft, fontSize: 13 }}>Laster brukere…</div>
          ) : filtrert.length === 0 ? (
            <div style={{ padding: 32, textAlign: 'center', color: SK.soft, fontSize: 13 }}>Ingen brukere funnet.</div>
          ) : (
            <table className="ok-table">
              <thead>
                <tr>
                  <th style={{ paddingLeft: 18 }}>Navn</th>
                  <th>Rolle</th>
                  <th>Enhet</th>
                  <th>Status</th>
                  <th>E-post</th>
                </tr>
              </thead>
              <tbody>
                {filtrert.map(p => {
                  const farge   = p.roller?.farge || '#9aa3b8';
                  const erDeg   = p.id === innloggetId;
                  const erValgt = p.id === valgtId;
                  const ini = p.navn
                    ? p.navn.split(' ').filter(Boolean).map(n => n[0]).slice(0, 2).join('').toUpperCase()
                    : (p.epost?.[0] || '?').toUpperCase();
                  const aktivertStatus = p.auth_koblet
                    ? { label: 'Aktiv', bg: '#dbeed8', fg: '#1b6a2e' }
                    : p.invitert_at
                    ? { label: 'Invitert', bg: '#fdeac8', fg: '#8e5a05' }
                    : { label: 'Ikke invitert', bg: '#e9eef7', fg: '#3c4a6b' };
                  return (
                    <tr key={p.id} onClick={() => setValgtId(erValgt ? null : p.id)} style={{
                      background: erValgt ? SK.iceBlueLight : 'transparent',
                      borderLeft: erValgt ? `3px solid ${SK.coral}` : '3px solid transparent',
                      cursor: 'pointer',
                    }}>
                      <td style={{ paddingLeft: 18 }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                          <div style={{ width: 32, height: 32, borderRadius: '50%', background: farge, color: '#fff',
                            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700, flexShrink: 0 }}>
                            {ini}
                          </div>
                          <div>
                            <div style={{ fontWeight: 600, fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 6 }}>
                              {p.navn || <span style={{ color: SK.soft, fontStyle: 'italic' }}>Navn ikke satt</span>}
                              {erDeg && <span style={{ fontSize: 10, background: SK.iceBlue, color: SK.ink, padding: '1px 6px', borderRadius: 99, fontWeight: 600 }}>deg</span>}
                            </div>
                          </div>
                        </div>
                      </td>
                      <td>
                        {p.roller?.navn ? (
                          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12 }}>
                            <span style={{ width: 8, height: 8, borderRadius: '50%', background: farge }} />
                            {p.roller.navn}
                          </span>
                        ) : <span style={{ fontSize: 12, color: SK.coral, fontStyle: 'italic' }}>Ikke satt</span>}
                      </td>
                      <td style={{ fontSize: 12, color: SK.soft }}>{p.enheter?.navn || p.avdeling || '—'}</td>
                      <td>
                        <span style={{ fontSize: 11, fontWeight: 600, padding: '2px 8px', borderRadius: 99,
                          background: aktivertStatus.bg, color: aktivertStatus.fg }}>
                          {aktivertStatus.label}
                        </span>
                      </td>
                      <td style={{ fontSize: 12, color: SK.soft }}>{p.epost}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </Card>

        {valgtProfil && (
          <BrukerDetalj
            profil={valgtProfil}
            roller={roller}
            enheter={enheter}
            alleProfiler={profiler}
            innloggetId={innloggetId}
            onLukk={() => setValgtId(null)}
            onOppdatert={oppdatert => {
              setProfiler(prev => prev.map(p => p.id === oppdatert.id ? oppdatert : p));
              setValgtId(oppdatert.id);
            }}
            go={go}
          />
        )}
      </div>
    </div>
  );
}

Object.assign(window, { FaneBrukere, OKAvatar, lastOppAvatarBilde });