// visning-og-admin.jsx — Global "Se som bruker" + admin-nivå
// Lastes tidlig i index.html så alle moduler kan bruke window._visningState

// ══════════════════════════════════════════════════════════════
// GLOBAL "SE SOM BRUKER"-STATE
// ══════════════════════════════════════════════════════════════
// Lar administrator/daglig leder simulere en annen brukers visning
// på tvers av HELE applikasjonen, ikke bare i Tilganger-modulen.

window._visningState = {
  ekteBruker:    null,   // den faktisk innloggede
  visningBruker: null,   // brukeren man "ser som" (null = seg selv)
  aktivertTid:   null,   // når visningen startet (for varighet i logg)
  listeners: [],

  abonner(fn) { this.listeners.push(fn); return () => { this.listeners = this.listeners.filter(l => l !== fn); }; },

  settEkte(bruker) { this.ekteBruker = bruker; this._varsle(); },

  async seSom(bruker) {
    this.visningBruker = bruker;
    this.aktivertTid = Date.now();
    this._varsle();
    // Logg til Supabase (audit)
    try {
      await window._sb.from('sesom_logg').insert([{
        bruker_id:     this.ekteBruker?.id || null,
        bruker_navn:   this.ekteBruker?.navn || this.ekteBruker?.epost || null,
        sett_som_id:   bruker?.id || null,
        sett_som_navn: bruker?.navn || bruker?.epost || null,
        handling:      'aktivert',
      }]);
    } catch(e) { console.error('Se som-logg feilet:', e.message); }
  },

  async tilbakestill() {
    const varighet = this.aktivertTid ? Math.round((Date.now() - this.aktivertTid) / 1000) : null;
    const settSom = this.visningBruker;
    this.visningBruker = null;
    this.aktivertTid = null;
    this._varsle();
    try {
      await window._sb.from('sesom_logg').insert([{
        bruker_id:     this.ekteBruker?.id || null,
        bruker_navn:   this.ekteBruker?.navn || this.ekteBruker?.epost || null,
        sett_som_id:   settSom?.id || null,
        sett_som_navn: settSom?.navn || settSom?.epost || null,
        handling:      'deaktivert',
        varighet_sek:  varighet,
      }]);
    } catch(e) { console.error('Se som-logg feilet:', e.message); }
  },

  // Hvilken bruker skal UI vise? (visning hvis aktiv, ellers ekte)
  aktivBruker() { return this.visningBruker || this.ekteBruker; },

  erSimulering() { return this.visningBruker !== null; },

  _varsle() {
    this.listeners.forEach(fn => fn({
      ekteBruker: this.ekteBruker,
      visningBruker: this.visningBruker,
      simulerer: this.erSimulering(),
    }));
  },
};

// Sjekk om innlogget bruker har lov til "Se som bruker"
async function kanBrukeSeSom() {
  try {
    const { data } = await window._sb.rpc('kan_bruke_se_som');
    return !!data;
  } catch(e) {
    return false;
  }
}

// Hook for komponenter som vil reagere på visning-endringer
function useVisning() {
  const [state, setState] = React.useState({
    ekteBruker: window._visningState.ekteBruker,
    visningBruker: window._visningState.visningBruker,
    simulerer: window._visningState.erSimulering(),
  });
  React.useEffect(() => window._visningState.abonner(setState), []);
  return state;
}

// ══════════════════════════════════════════════════════════════
// GLOBALT SIMULERINGS-BANNER (vises øverst i hele appen)
// ══════════════════════════════════════════════════════════════

function SimuleringsBanner() {
  const { visningBruker, simulerer } = useVisning();

  if (!simulerer || !visningBruker) return null;

  const rolleTekst = [visningBruker.rolle, visningBruker.avdeling].filter(Boolean).join(' · ');

  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 500,
      background: '#8e2d36', color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14,
      padding: '9px 18px', fontSize: 13, fontWeight: 500,
      borderBottom: '2px solid #f2545c',
    }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>
        </svg>
        Du ser systemet som <b>{visningBruker.navn || visningBruker.epost}</b>
        {rolleTekst && <span style={{ opacity: 0.85 }}>· {rolleTekst}</span>}
        <span style={{ opacity: 0.7, fontWeight: 400 }}>· tilgang begrenset til denne brukerens</span>
      </span>
      <button
        onClick={() => window._visningState.tilbakestill()}
        style={{
          background: '#fff', color: '#8e2d36', border: 'none', borderRadius: 7,
          padding: '5px 14px', fontSize: 12.5, fontWeight: 600, cursor: 'pointer',
          fontFamily: 'inherit',
        }}>
        Avslutt og gå tilbake til din visning
      </button>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// "SE SOM"-VELGER (brukes i Tilganger og Brukere)
// ══════════════════════════════════════════════════════════════

function SeSomVelger({ profiler, kompakt }) {
  const { simulerer } = useVisning();
  const [valgt, setValgt] = React.useState('');
  const [harTilgang, setHarTilgang] = React.useState(null);

  React.useEffect(() => { kanBrukeSeSom().then(setHarTilgang); }, []);

  if (simulerer) return null; // banneret håndterer "tilbake"
  if (harTilgang === false) return null; // ikke autorisert — skjul helt
  if (harTilgang === null) return null;  // venter på sjekk

  const start = () => {
    const p = (profiler || []).find(x => x.id === valgt);
    if (p) window._visningState.seSom(p);
    setValgt('');
  };

  if (kompakt) {
    return (
      <select className="ok-input" style={{ padding:'7px 10px', fontSize:12, maxWidth:200 }}
        value={valgt}
        onChange={e => { const p=(profiler||[]).find(x=>x.id===e.target.value); if(p) window._visningState.seSom(p); }}>
        <option value="">Se som bruker…</option>
        {(profiler||[]).map(p => <option key={p.id} value={p.id}>{p.navn || p.epost}</option>)}
      </select>
    );
  }

  return (
    <div style={{ background:SK.iceBlueLight, border:'1px solid rgba(17,24,61,.1)', borderRadius:10,
      padding:'14px 16px', display:'flex', alignItems:'center', gap:12, marginBottom:16, flexWrap:'wrap' }}>
      <div style={{ fontSize:13, fontWeight:500 }}>Se systemet som en annen bruker:</div>
      <select className="ok-input" value={valgt} onChange={e => setValgt(e.target.value)} style={{ padding:'7px 10px', fontSize:13, maxWidth:240 }}>
        <option value="">— Velg bruker —</option>
        {(profiler||[]).map(p => <option key={p.id} value={p.id}>{p.navn || p.epost}</option>)}
      </select>
      <Button variant="primary" size="sm" disabled={!valgt} onClick={start}>Aktiver visning</Button>
      <div style={{ fontSize:11.5, color:SK.soft, flexBasis:'100%' }}>
        Visningen gjelder i hele applikasjonen. Du ser det brukeren ville sett, men gjør ingen endringer på vegne av dem.
      </div>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// ADMIN-NIVÅ — hjelpere og badge
// ══════════════════════════════════════════════════════════════

const ADMIN_NIVAA = {
  ingen:         { label: 'Vanlig bruker',  farge: SK.soft,   bg: '#e9eef7' },
  administrator: { label: 'Administrator',  farge: '#8e5a05', bg: '#fdeac8' },
  superbruker:   { label: 'Superbruker',    farge: '#a01a25', bg: '#fcddde' },
};

function AdminBadge({ nivaa }) {
  if (!nivaa || nivaa === 'ingen') return null;
  const a = ADMIN_NIVAA[nivaa] || ADMIN_NIVAA.ingen;
  return (
    <span style={{ fontSize:10.5, fontWeight:700, padding:'2px 8px', borderRadius:99,
      background:a.bg, color:a.farge, display:'inline-flex', alignItems:'center', gap:4 }}>
      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5l-8-3Z"/>
      </svg>
      {a.label}
    </span>
  );
}

// Sett admin-nivå på en bruker (kun superbruker/daglig leder kan)
async function settAdminNivaa(profilId, nivaa) {
  const { error } = await window._sb.from('profiles')
    .update({ admin_nivaa: nivaa })
    .eq('id', profilId);
  if (error) throw error;
}

Object.assign(window, {
  useVisning, SimuleringsBanner, SeSomVelger, kanBrukeSeSom,
  ADMIN_NIVAA, AdminBadge, settAdminNivaa,
});