// varsler-og-sok.jsx — Global varsler, notifikasjoner og søk
// Lastes tidlig i index.html slik at alle moduler kan bruke det

// ══════════════════════════════════════════════════════════════
// VARSEL-SYSTEM
// ══════════════════════════════════════════════════════════════

const VARSEL_TYPE = {
  frist:      { ikon: '⏰', farge: SK.coral,    label: 'Frist' },
  tiltak:     { ikon: '✓',  farge: '#586ba4',   label: 'Tiltak' },
  avtale:     { ikon: '📋', farge: '#08605f',   label: 'Avtale' },
  godkjenning:{ ikon: '👍', farge: '#8e5a05',   label: 'Godkjenning' },
  system:     { ikon: 'ℹ',  farge: SK.soft,     label: 'System' },
  info:       { ikon: 'ℹ',  farge: SK.soft,     label: 'Info' },
};

// Global varsel-state (deles på tvers av appen)
window._varslerState = {
  varsler: [],
  ulest:   0,
  laster:  false,
  listeners: [],

  abonner(fn) { this.listeners.push(fn); return () => { this.listeners = this.listeners.filter(l => l !== fn); }; },
  oppdater(varsler) {
    this.varsler = varsler;
    this.ulest   = varsler.filter(v => !v.lest).length;
    this.listeners.forEach(fn => fn({ varsler: this.varsler, ulest: this.ulest }));
  },
};

async function hentVarsler() {
  const { data: { user } } = await window._sb.auth.getUser();
  if (!user) return [];
  const { data } = await window._sb
    .from('varsler')
    .select('*')
    .eq('mottaker_id', user.id)
    .order('created_at', { ascending: false })
    .limit(50);
  return data || [];
}

async function markerVarselLest(id) {
  await window._sb.from('varsler').update({ lest: true, lest_dato: new Date().toISOString() }).eq('id', id);
  window._varslerState.oppdater(window._varslerState.varsler.map(v => v.id === id ? { ...v, lest: true } : v));
}

async function markerAlleVarslerLest() {
  const { data: { user } } = await window._sb.auth.getUser();
  if (!user) return;
  await window._sb.from('varsler').update({ lest: true, lest_dato: new Date().toISOString() })
    .eq('mottaker_id', user.id).eq('lest', false);
  window._varslerState.oppdater(window._varslerState.varsler.map(v => ({ ...v, lest: true })));
}

async function lastOgAbonnerVarsler() {
  const varsler = await hentVarsler();
  window._varslerState.oppdater(varsler);

  // Realtime-abonnement
  const { data: { user } } = await window._sb.auth.getUser();
  if (user) {
    window._sb
      .channel('varsler-' + user.id)
      .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'varsler', filter: `mottaker_id=eq.${user.id}` },
        payload => {
          const nytt = [payload.new, ...window._varslerState.varsler];
          window._varslerState.oppdater(nytt);
        })
      .subscribe();
  }
}

// Varsel-klokke-komponent (brukes i sidebar)
function VarselKlokke({ go }) {
  const [state, setState] = React.useState({ varsler: [], ulest: 0 });
  const [visPanel, setVisPanel] = React.useState(false);

  React.useEffect(() => {
    setState({ varsler: window._varslerState.varsler, ulest: window._varslerState.ulest });
    const unsub = window._varslerState.abonner(setState);
    return unsub;
  }, []);

  const navigerTil = (varsel) => {
    markerVarselLest(varsel.id);
    setVisPanel(false);
    if (varsel.lenke_type && go) {
      const skjerm = {
        avtale: 'agreements', tiltak: 'tasks', prosjekt: 'projects', protokoll: 'protocols'
      }[varsel.lenke_type];
      if (skjerm) go({ screen: skjerm });
    }
  };

  return (
    <div style={{ position: 'relative' }}>
      <button onClick={() => setVisPanel(v => !v)} style={{
        background: 'none', border: 'none', cursor: 'pointer', padding: '6px',
        position: 'relative', color: SK.soft, fontSize: 18, lineHeight: 1,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        🔔
        {state.ulest > 0 && (
          <span style={{
            position: 'absolute', top: 0, right: 0,
            width: 16, height: 16, borderRadius: '50%',
            background: SK.coral, color: '#fff',
            fontSize: 9, fontWeight: 700,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>{state.ulest > 9 ? '9+' : state.ulest}</span>
        )}
      </button>

      {visPanel && (
        <div style={{
          position: 'absolute', top: '100%', right: 0, width: 340, zIndex: 200,
          background: SK.pureWhite, borderRadius: 12, border: '1px solid rgba(17,24,61,.1)',
          boxShadow: '0 8px 32px rgba(17,24,61,.15)', overflow: 'hidden',
        }}>
          <div style={{ padding: '12px 14px', borderBottom: '1px solid rgba(17,24,61,.08)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontWeight: 600, fontSize: 13 }}>Varsler {state.ulest > 0 && `(${state.ulest} nye)`}</span>
            {state.ulest > 0 && (
              <button onClick={markerAlleVarslerLest} style={{ background: 'none', border: 'none', cursor: 'pointer',
                fontSize: 11.5, color: SK.coral, fontFamily: 'inherit' }}>Merk alle lest</button>
            )}
          </div>

          <div style={{ maxHeight: 380, overflowY: 'auto' }}>
            {state.varsler.length === 0 ? (
              <div style={{ padding: '24px 16px', textAlign: 'center', color: SK.soft, fontSize: 13 }}>
                Ingen varsler
              </div>
            ) : (
              state.varsler.map(v => {
                const t = VARSEL_TYPE[v.type] || VARSEL_TYPE.info;
                const datoStr = new Date(v.created_at).toLocaleDateString('nb-NO', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
                return (
                  <div key={v.id} onClick={() => navigerTil(v)} style={{
                    padding: '11px 14px', cursor: 'pointer',
                    background: v.lest ? 'transparent' : SK.iceBlueLight,
                    borderBottom: '1px solid rgba(17,24,61,.05)',
                    display: 'flex', gap: 10, alignItems: 'flex-start',
                    transition: 'background .1s',
                  }}>
                    <span style={{ fontSize: 16, flexShrink: 0, marginTop: 1 }}>{t.ikon}</span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 12.5, fontWeight: v.lest ? 400 : 600, lineHeight: 1.35 }}>{v.tittel}</div>
                      {v.melding && <div style={{ fontSize: 11.5, color: SK.soft, marginTop: 2 }}>{v.melding}</div>}
                      <div style={{ fontSize: 11, color: SK.soft, marginTop: 3 }}>{datoStr}</div>
                    </div>
                    {!v.lest && <div style={{ width: 7, height: 7, borderRadius: '50%', background: SK.coral, flexShrink: 0, marginTop: 4 }} />}
                  </div>
                );
              })
            )}
          </div>
        </div>
      )}
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// GLOBAL SØK
// ══════════════════════════════════════════════════════════════

async function globalSok(query) {
  if (!query || query.length < 2) return {};
  const q = query.trim();

  const [avtaler, tiltak, prosjekter, profiler] = await Promise.all([
    window._sb.from('avtaler').select('id,name,motpart,status').ilike('name', `%${q}%`).limit(5),
    window._sb.from('tiltak').select('id,tittel,status,frist').ilike('tittel', `%${q}%`).limit(5),
    window._sb.from('prosjekter').select('id,navn,beskrivelse,status').ilike('navn', `%${q}%`).limit(5),
    window._sb.from('profiles').select('id,navn,epost').or(`navn.ilike.%${q}%,epost.ilike.%${q}%`).limit(5),
  ]);

  return {
    avtaler:   avtaler.data   || [],
    tiltak:    tiltak.data    || [],
    prosjekter:prosjekter.data|| [],
    profiler:  profiler.data  || [],
  };
}

function GlobalSokFelt({ go }) {
  const [query,     setQuery]     = React.useState('');
  const [resultater,setResultater]= React.useState(null);
  const [laster,    setLaster]    = React.useState(false);
  const [apen,      setApen]      = React.useState(false);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (!query || query.length < 2) { setResultater(null); return; }
    const timer = setTimeout(async () => {
      setLaster(true);
      try {
        const res = await globalSok(query);
        setResultater(res);
      } finally { setLaster(false); }
    }, 280);
    return () => clearTimeout(timer);
  }, [query]);

  // Keyboard shortcut: Ctrl/Cmd + K
  React.useEffect(() => {
    const handler = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
        e.preventDefault();
        setApen(true);
        setTimeout(() => inputRef.current?.focus(), 50);
      }
      if (e.key === 'Escape') { setApen(false); setQuery(''); setResultater(null); }
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, []);

  const naviger = (skjerm, id) => {
    setApen(false); setQuery(''); setResultater(null);
    go({ screen: skjerm, id });
  };

  const totalt = resultater
    ? (resultater.avtaler?.length || 0) + (resultater.tiltak?.length || 0) + (resultater.prosjekter?.length || 0) + (resultater.profiler?.length || 0)
    : 0;

  return (
    <div style={{ position: 'relative', flex: 1, maxWidth: 340 }}>
      <div style={{ position: 'relative' }}>
        <span style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: SK.soft, fontSize: 14, pointerEvents: 'none' }}>🔍</span>
        <input
          ref={inputRef}
          value={query}
          onChange={e => { setQuery(e.target.value); setApen(true); }}
          onFocus={() => setApen(true)}
          placeholder="Søk… (Ctrl+K)"
          style={{
            width: '100%', boxSizing: 'border-box',
            padding: '7px 12px 7px 32px', fontSize: 13,
            background: 'rgba(255,255,255,.07)', border: '1px solid rgba(255,255,255,.12)',
            borderRadius: 8, color: '#fff', fontFamily: 'inherit',
            outline: 'none',
          }}
        />
        {laster && <span style={{ position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)', color: SK.soft, fontSize: 12 }}>…</span>}
      </div>

      {apen && resultater && totalt === 0 && query.length >= 2 && (
        <div style={{ position: 'absolute', top: '100%', left: 0, right: 0, marginTop: 4, zIndex: 200,
          background: SK.pureWhite, borderRadius: 10, border: '1px solid rgba(17,24,61,.1)',
          boxShadow: '0 8px 24px rgba(17,24,61,.12)', padding: '12px 14px', fontSize: 13, color: SK.soft }}>
          Ingen treff på «{query}»
        </div>
      )}

      {apen && resultater && totalt > 0 && (
        <div style={{ position: 'absolute', top: '100%', left: 0, right: 0, marginTop: 4, zIndex: 200,
          background: SK.pureWhite, borderRadius: 10, border: '1px solid rgba(17,24,61,.1)',
          boxShadow: '0 8px 24px rgba(17,24,61,.12)', overflow: 'hidden' }}>

          {[
            { data: resultater.avtaler,    label: 'Avtaler',    skjerm: 'agreements', ikon: '📋' },
            { data: resultater.tiltak,     label: 'Tiltak',     skjerm: 'tasks',      ikon: '✓' },
            { data: resultater.prosjekter, label: 'Prosjekter', skjerm: 'projects',   ikon: '📁' },
            { data: resultater.profiler,   label: 'Brukere',    skjerm: 'settings',   ikon: '👤' },
          ].filter(g => g.data?.length > 0).map(gruppe => (
            <div key={gruppe.label}>
              <div style={{ padding: '8px 14px 4px', fontSize: 10, fontWeight: 700, letterSpacing: 0.08,
                textTransform: 'uppercase', color: SK.soft }}>
                {gruppe.ikon} {gruppe.label}
              </div>
              {gruppe.data.map(item => (
                <div key={item.id} onClick={() => naviger(gruppe.skjerm, item.id)}
                  style={{ padding: '8px 14px', cursor: 'pointer', fontSize: 13,
                    display: 'flex', gap: 8, alignItems: 'center',
                    borderTop: '1px solid rgba(17,24,61,.04)',
                    transition: 'background .08s',
                  }}
                  onMouseEnter={e => e.currentTarget.style.background = SK.iceBlueLight}
                  onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                  <span style={{ flex: 1, fontWeight: 500 }}>
                    {item.name || item.navn || item.tittel || item.epost}
                  </span>
                  {item.status && (
                    <span style={{ fontSize: 10.5, color: SK.soft }}>{item.status}</span>
                  )}
                </div>
              ))}
            </div>
          ))}

          <div style={{ padding: '8px 14px', borderTop: '1px solid rgba(17,24,61,.08)',
            fontSize: 11.5, color: SK.soft, textAlign: 'center' }}>
            {totalt} treff · Trykk Esc for å lukke
          </div>
        </div>
      )}

      {apen && (
        <div onClick={() => { setApen(false); setQuery(''); setResultater(null); }}
          style={{ position: 'fixed', inset: 0, zIndex: 199 }} />
      )}
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// EKSPORT-VERKTØY
// ══════════════════════════════════════════════════════════════

function eksporterTilCSV(data, kolonner, filnavn) {
  if (!data || data.length === 0) return;
  const header = kolonner.map(k => typeof k === 'string' ? k : k.label).join(';');
  const rows = data.map(rad =>
    kolonner.map(k => {
      const felt = typeof k === 'string' ? k : k.felt;
      const verdi = felt.split('.').reduce((o, f) => o?.[f], rad) ?? '';
      return `"${String(verdi).replace(/"/g, '""')}"`;
    }).join(';')
  );
  const csv = '\uFEFF' + [header, ...rows].join('\n'); // BOM for Excel
  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = filnavn + '.csv';
  a.click(); URL.revokeObjectURL(url);
}

// Knapp som wrapper eksporten
function EksportKnapp({ data, kolonner, filnavn, label, size }) {
  const [eksporterer, setEksporterer] = React.useState(false);
  return (
    <Button size={size || 'sm'} icon={I.download}
      disabled={!data || data.length === 0 || eksporterer}
      onClick={() => {
        setEksporterer(true);
        try { eksporterTilCSV(data, kolonner, filnavn); }
        finally { setTimeout(() => setEksporterer(false), 800); }
      }}>
      {eksporterer ? 'Eksporterer…' : (label || 'Eksporter CSV')}
    </Button>
  );
}

// ══════════════════════════════════════════════════════════════
// LOKASJONS-ADMINISTRASJON (panel for Organisasjon-modulen)
// ══════════════════════════════════════════════════════════════

async function hentLokasjoner() {
  const { data, error } = await window._sb
    .from('lokasjoner')
    .select('*, enhet:enheter!enhet_id(id,navn)')
    .eq('aktiv', true)
    .order('navn');
  if (error) throw error;
  return data || [];
}

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

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

async function slettLokasjon(id) {
  await window._sb.from('lokasjoner').update({ aktiv: false }).eq('id', id);
}

function LokasjonSkjema({ lokasjon, enheter, onLagret, onAvbryt }) {
  const [navn,     setNavn]     = React.useState(lokasjon?.navn        || '');
  const [adresse,  setAdresse]  = React.useState(lokasjon?.adresse     || '');
  const [type,     setType]     = React.useState(lokasjon?.type        || 'kontor');
  const [enhetId,  setEnhetId]  = React.useState(lokasjon?.enhet_id   || '');
  const [besk,     setBesk]     = React.useState(lokasjon?.beskrivelse || '');
  const [laster,   setLaster]   = React.useState(false);
  const [feil,     setFeil]     = React.useState(null);

  const lagre = async () => {
    if (!navn.trim()) { setFeil('Navn er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    const felter = { navn, adresse: adresse || null, type, enhet_id: enhetId || null, beskrivelse: besk || null };
    try {
      const res = lokasjon ? await oppdaterLokasjon(lokasjon.id, felter) : await lagreLokasjon(felter);
      onLagret(res);
    } catch(e) { setFeil(e.message); } finally { setLaster(false); }
  };

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

  return (
    <div style={{ padding: '18px 20px' }}>
      <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 14 }}>{lokasjon ? 'Rediger lokasjon' : 'Ny lokasjon'}</div>
      {feil && <div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8, padding:'9px 13px', fontSize:13, color:'#8a1620', marginBottom:12 }}>{feil}</div>}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 18px', marginBottom: 16 }}>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Navn *</label>
          <input className="ok-input" value={navn} onChange={e=>setNavn(e.target.value)} autoFocus style={inp} />
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Type</label>
          <select className="ok-input" value={type} onChange={e=>setType(e.target.value)} style={inp}>
            {[['kontor','Kontor'],['verksted','Verksted'],['kantine','Kantine'],['eksternt','Eksternt'],['annet','Annet']].map(([v,l]) => <option key={v} value={v}>{l}</option>)}
          </select>
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Tilhørende enhet</label>
          <select className="ok-input" value={enhetId} onChange={e=>setEnhetId(e.target.value)} style={inp}>
            <option value="">— Ingen —</option>
            {(enheter||[]).map(e => <option key={e.id} value={e.id}>{e.navn}</option>)}
          </select>
        </div>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Adresse</label>
          <input className="ok-input" value={adresse} onChange={e=>setAdresse(e.target.value)} placeholder="Gate og nummer, postnr sted" style={inp} />
        </div>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Beskrivelse</label>
          <textarea className="ok-input" value={besk} onChange={e=>setBesk(e.target.value)} rows={2} style={{ ...inp, resize:'vertical', fontFamily:'inherit' }} />
        </div>
      </div>
      <div style={{ display:'flex', gap:8 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>{laster?'Lagrer…':(lokasjon?'Lagre':'Opprett')}</Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

function LokasjonsPanel({ enheter }) {
  const [lokasjoner, setLokasjoner] = React.useState([]);
  const [laster,     setLaster]     = React.useState(true);
  const [feil,       setFeil]       = React.useState(null);
  const [redigerer,  setRedigerer]  = React.useState(null);
  const [visNy,      setVisNy]      = React.useState(false);
  const [bekreft,    setBekreft]    = React.useState(null);

  React.useEffect(() => { hentLokasjoner().then(setLokasjoner).catch(e => setFeil(e.message)).finally(() => setLaster(false)); }, []);

  // Finn avdelinger knyttet til en lokasjon — via lokasjon_id ELLER navn-match (fallback)
  const avdelingerFor = (lok) => (enheter || []).filter(e =>
    e.lokasjon_id === lok.id ||
    (!e.lokasjon_id && e.lokasjon && lok.navn && e.lokasjon.toLowerCase() === lok.navn.toLowerCase())
  );

  if (visNy || redigerer) return (
    <Card padded={false} style={{ marginTop: 16 }}>
      <LokasjonSkjema lokasjon={redigerer} enheter={enheter}
        onLagret={res => {
          if (redigerer) setLokasjoner(prev => prev.map(l => l.id === res.id ? res : l));
          else setLokasjoner(prev => [...prev, res].sort((a,b) => a.navn.localeCompare(b.navn)));
          setRedigerer(null); setVisNy(false);
        }}
        onAvbryt={() => { setRedigerer(null); setVisNy(false); }}
      />
    </Card>
  );

  const ENHET_TONE = {
    avdeling:   { bg:'#e9eef7', fg:'#3c4a6b' },
    stab:       { bg:'#dce5f5', fg:'#11183d' },
    entreprise: { bg:'#dbeed8', fg:'#2f5a28' },
  };

  return (
    <div style={{ marginTop: 16 }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
        <div style={{ fontSize:13, fontWeight:600 }}>Lokasjoner ({lokasjoner.length})</div>
        <Button size="sm" variant="primary" icon={I.plus} onClick={() => setVisNy(true)}>Ny lokasjon</Button>
      </div>
      <div style={{ fontSize:12.5, color:'#6f7795', lineHeight:1.5, marginBottom:14,
        padding:'10px 14px', background:'#f0f4fc', borderRadius:10 }}>
        Hver lokasjon kan ha flere avdelinger. Avdelinger knyttes til lokasjon i avdelings-skjemaet
        (Organisasjon → Avdelinger → Rediger).
      </div>
      {feil && <div style={{ background:'#fcddde', borderRadius:8, padding:'9px 13px', fontSize:13, color:'#8a1620', marginBottom:12 }}>{feil}</div>}
      {laster ? <div style={{ color:'#6f7795', fontSize:13 }}>Laster…</div> :
      lokasjoner.length === 0 ? <div style={{ color:'#6f7795', fontSize:13 }}>Ingen lokasjoner registrert.</div> : (
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(330px,1fr))', gap:14 }}>
          {lokasjoner.map(l => {
            const avd = avdelingerFor(l);
            return (
              <div key={l.id} style={{ border:'1px solid rgba(17,24,61,.1)', borderRadius:12, background:'#fff', overflow:'hidden' }}>
                <div style={{ padding:'12px 16px', borderBottom:'1px solid rgba(17,24,61,.07)', background:'#f0f4fc' }}>
                  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
                    <div style={{ flex:1, minWidth:0 }}>
                      <div style={{ fontSize:14, fontWeight:600 }}>{l.navn}</div>
                      {l.adresse && <div style={{ fontSize:11.5, color:'#6f7795', marginTop:2 }}>{l.adresse}</div>}
                    </div>
                    <span style={{ fontSize:11, fontWeight:600, color:'#6f7795', whiteSpace:'nowrap', marginLeft:8 }}>
                      {avd.length} avd.
                    </span>
                  </div>
                </div>
                <div style={{ padding:'10px 12px' }}>
                  {avd.length === 0 ? (
                    <div style={{ fontSize:12, color:'#9aa3b8', padding:'6px 4px' }}>Ingen avdelinger her ennå.</div>
                  ) : (
                    <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
                      {avd.map(e => {
                        const tone = ENHET_TONE[e.type] || ENHET_TONE.avdeling;
                        return (
                          <div key={e.id} style={{ display:'flex', alignItems:'center', gap:8, padding:'6px 8px',
                            borderRadius:7, background:'#f7f9fd' }}>
                            {e.avd_nr && <span style={{ fontSize:11, fontWeight:700, color:'#6f7795',
                              fontFamily:'ui-monospace, monospace', minWidth:28 }}>{e.avd_nr}</span>}
                            <span style={{ flex:1, fontSize:12.5, fontWeight:500 }}>{e.navn}</span>
                            {e.selskap?.navn && (
                              <span style={{ fontSize:10, color:'#6f7795' }}>{e.selskap.navn.replace('OsloKollega ','OK ')}</span>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  )}
                  <div style={{ display:'flex', gap:6, marginTop:10, paddingTop:10, borderTop:'1px solid rgba(17,24,61,.06)' }}>
                    <Button size="sm" onClick={() => setRedigerer(l)}>Rediger</Button>
                    {bekreft === l.id ? (
                      <>
                        <Button size="sm" onClick={async () => { await slettLokasjon(l.id); setLokasjoner(p => p.filter(x => x.id !== l.id)); setBekreft(null); }}
                          style={{ background:'#f2545c', color:'#fff', borderColor:'#f2545c' }}>Slett</Button>
                        <Button size="sm" onClick={() => setBekreft(null)}>Avbryt</Button>
                      </>
                    ) : (
                      avd.length === 0 && <Button size="sm" onClick={() => setBekreft(l.id)}>Slett</Button>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

// Start varsler ved oppstart
window.addEventListener('load', () => {
  setTimeout(() => {
    if (window._sb) lastOgAbonnerVarsler().catch(() => {});
  }, 2000);
});

Object.assign(window, {
  VarselKlokke, GlobalSokFelt, EksportKnapp,
  LokasjonsPanel, LokasjonSkjema,
  eksporterTilCSV, hentLokasjoner, lagreLokasjon,
  lastOgAbonnerVarsler, markerVarselLest,
});