// rutiner.jsx — Rutiner & metodikk med Supabase

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

async function RUT_hentRutiner(filtre = {}) {
  let q = window._sb
    .from('rutiner')
    .select(`
      *,
      ansvarlig:profiles!ansvarlig_id(id,navn,epost),
      enhet:enheter!enhet_id(id,navn),
      stedfortreder:profiles!stedfortreder_id(id,navn)
    `)
    .order('tittel');
  if (filtre.omrade) q = q.eq('omrade', filtre.omrade);
  if (filtre.frekvens) q = q.eq('frekvens', filtre.frekvens);
  if (filtre.status) q = q.eq('status', filtre.status);
  const { data, error } = await q;
  if (error) throw error;
  return data || [];
}

async function RUT_hentFravaer() {
  const { data, error } = await window._sb
    .from('rutine_fravaer')
    .select('*, profil:profiles!profil_id(id,navn,epost)')
    .gte('slutt', new Date().toISOString().split('T')[0])
    .order('start');
  if (error) throw error;
  return data || [];
}

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

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

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

async function RUT_loggUtforelse(rutineId, brukerId, notat) {
  const { error } = await window._sb.from('rutine_log').insert([{
    rutine_id: rutineId,
    utfort_av: brukerId,
    notat: notat || null,
    utfort_dato: new Date().toISOString().split('T')[0],
  }]);
  if (error) throw error;
}

async function RUT_hentLog(rutineId) {
  const { data, error } = await window._sb
    .from('rutine_log')
    .select('*, utfort_av:profiles!utfort_av(id,navn)')
    .eq('rutine_id', rutineId)
    .order('utfort_dato', { ascending: false })
    .limit(20);
  if (error) throw error;
  return data || [];
}

async function RUT_hentProfiler() {
  const { data } = await window._sb.from('profiles').select('id,navn,epost').order('navn');
  return data || [];
}

async function RUT_hentEnheter() {
  const { data } = await window._sb.from('enheter').select('id,navn').order('navn');
  return data || [];
}

// ── Konstanter ────────────────────────────────────────────────

const RUT_OMRADER_DEF = [
  { id: 'ledelse',  navn: 'Ledelse & strategi',  farge: '#11183d' },
  { id: 'hr',       navn: 'HR & personal',       farge: '#586ba4' },
  { id: 'okonomi',  navn: 'Økonomi & lønn',      farge: '#08605f' },
  { id: 'kvalitet', navn: 'Kvalitet & HMS',      farge: '#e08d3c' },
  { id: 'drift',    navn: 'Drift · avdeling',    farge: '#28589f' },
  { id: 'entrep',   navn: 'Sosial entreprise',   farge: '#f2545c' },
];

const RUT_FREKVENS_DEF = {
  daglig:      { label: 'Daglig',      bg: '#e9eef7', fg: '#3c4a6b' },
  ukentlig:    { label: 'Ukentlig',    bg: '#dce5f5', fg: '#28589f' },
  månedlig:    { label: 'Månedlig',    bg: '#d7ebe7', fg: '#08605f' },
  kvartalsvis: { label: 'Kvartalsvis', bg: '#fdeac8', fg: '#8e5a05' },
  halvårlig:   { label: 'Halvårlig',   bg: '#fcddde', fg: '#8a1620' },
  årlig:       { label: 'Årlig',       bg: '#e9eef7', fg: '#3c4a6b' },
  adhoc:       { label: 'Ad-hoc',      bg: '#f0f4fc', fg: '#6f7795' },
};

const RUT_STATUS_DEF = {
  aktiv:   { label: 'Aktiv',   bg: '#dbeed8', fg: '#1b6a2e' },
  utkast:  { label: 'Utkast',  bg: '#e9eef7', fg: '#3c4a6b' },
  utgått:  { label: 'Utgått',  bg: '#f0f0f0', fg: '#888' },
};

function rutFmtDato(d) {
  if (!d) return '—';
  return new Date(d).toLocaleDateString('nb-NO', { day: 'numeric', month: 'short', year: 'numeric' });
}

function rutDagerSiden(d) {
  if (!d) return null;
  return Math.floor((new Date() - new Date(d)) / 86400000);
}

// ── Rutine-skjema ─────────────────────────────────────────────

function RutineSkjema({ rutine, profiler, enheter, brukerId, onLagret, onAvbryt }) {
  const [tittel,      setTittel]      = React.useState(rutine?.tittel || '');
  const [beskrivelse, setBeskrivelse] = React.useState(rutine?.beskrivelse || '');
  const [omrade,      setOmrade]      = React.useState(rutine?.omrade || 'drift');
  const [frekvens,    setFrekvens]    = React.useState(rutine?.frekvens || 'månedlig');
  const [status,      setStatus]      = React.useState(rutine?.status || 'aktiv');
  const [ansvarligId, setAnsvarligId] = React.useState(rutine?.ansvarlig_id || '');
  const [stedfortId,  setStedfortId]  = React.useState(rutine?.stedfortreder_id || '');
  const [enhetId,     setEnhetId]     = React.useState(rutine?.enhet_id || '');
  const [nesteFrist,  setNesteFrist]  = React.useState(rutine?.neste_frist?.split('T')[0] || '');
  const [trinn,       setTrinn]       = React.useState((rutine?.trinn || []).join('\n'));
  const [laster,      setLaster]      = React.useState(false);
  const [feil,        setFeil]        = React.useState(null);

  const lagre = async () => {
    if (!tittel.trim()) { setFeil('Tittel er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    const felter = {
      tittel, beskrivelse: beskrivelse || null,
      omrade, frekvens, status,
      ansvarlig_id: ansvarligId || null,
      stedfortreder_id: stedfortId || null,
      enhet_id: enhetId || null,
      neste_frist: nesteFrist || null,
      trinn: trinn.split('\n').map(s => s.trim()).filter(Boolean),
      opprettet_av: brukerId,
    };
    try {
      const res = rutine ? await RUT_oppdaterRutine(rutine.id, felter) : await RUT_opprettRutine(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' };
  const inp = { padding: '8px 11px', fontSize: 13 };

  return (
    <div style={{ padding: '18px 20px' }}>
      <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 16 }}>
        {rutine ? 'Rediger rutine' : 'Ny rutine'}
      </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: 18 }}>
        <div style={{ gridColumn: '1/-1', display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Tittel *</label>
          <input className="ok-input" value={tittel} onChange={e => setTittel(e.target.value)} autoFocus style={inp} placeholder="f.eks. Månedlig bankavstemming" />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Område</label>
          <select className="ok-input" value={omrade} onChange={e => setOmrade(e.target.value)} style={inp}>
            {RUT_OMRADER_DEF.map(o => <option key={o.id} value={o.id}>{o.navn}</option>)}
          </select>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Frekvens</label>
          <select className="ok-input" value={frekvens} onChange={e => setFrekvens(e.target.value)} style={inp}>
            {Object.entries(RUT_FREKVENS_DEF).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
          </select>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Ansvarlig</label>
          <select className="ok-input" value={ansvarligId} onChange={e => setAnsvarligId(e.target.value)} style={inp}>
            <option value="">— Ikke satt —</option>
            {profiler.map(p => <option key={p.id} value={p.id}>{p.navn || p.epost}</option>)}
          </select>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Stedfortreder</label>
          <select className="ok-input" value={stedfortId} onChange={e => setStedfortId(e.target.value)} style={inp}>
            <option value="">— Ikke satt —</option>
            {profiler.map(p => <option key={p.id} value={p.id}>{p.navn || p.epost}</option>)}
          </select>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Enhet</label>
          <select className="ok-input" value={enhetId} onChange={e => setEnhetId(e.target.value)} style={inp}>
            <option value="">— Alle enheter —</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}>Neste frist</label>
          <input className="ok-input" type="date" value={nesteFrist} onChange={e => setNesteFrist(e.target.value)} style={inp} />
        </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(RUT_STATUS_DEF).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
          </select>
        </div>
        <div style={{ gridColumn: '1/-1', display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Beskrivelse</label>
          <textarea className="ok-input" value={beskrivelse} onChange={e => setBeskrivelse(e.target.value)}
            rows={3} style={{ ...inp, resize: 'vertical', fontFamily: 'inherit' }} placeholder="Hva er formålet med denne rutinen?" />
        </div>
        <div style={{ gridColumn: '1/-1', display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Trinn/steg (én per linje)</label>
          <textarea className="ok-input" value={trinn} onChange={e => setTrinn(e.target.value)}
            rows={5} style={{ ...inp, resize: 'vertical', fontFamily: 'inherit' }}
            placeholder={'1. Logg inn i systemet\n2. Hent rapport\n3. Sammenlign med forrige periode\n4. Send til godkjenner'} />
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>
          {laster ? 'Lagrer…' : (rutine ? 'Lagre endringer' : 'Opprett rutine')}
        </Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

// ── Rutine-detalj ─────────────────────────────────────────────

function RutineDetalj({ rutine, brukerId, onLukk, onOppdatert, onSlettet }) {
  const [log,      setLog]      = React.useState([]);
  const [notat,    setNotat]    = React.useState('');
  const [lagrer,   setLagrer]   = React.useState(false);
  const [fane,     setFane]     = React.useState('info');

  React.useEffect(() => {
    RUT_hentLog(rutine.id).then(setLog).catch(() => {});
  }, [rutine.id]);

  const markerUtfort = async () => {
    setLagrer(true);
    try {
      await RUT_loggUtforelse(rutine.id, brukerId, notat);
      const oppdatertLog = await RUT_hentLog(rutine.id);
      setLog(oppdatertLog);
      setNotat('');
    } catch(e) { alert(e.message); } finally { setLagrer(false); }
  };

  const omrade = RUT_OMRADER_DEF.find(o => o.id === rutine.omrade);
  const frekvens = RUT_FREKVENS_DEF[rutine.frekvens] || { label: rutine.frekvens, bg: '#f0f4fc', fg: '#6f7795' };
  const status = RUT_STATUS_DEF[rutine.status] || RUT_STATUS_DEF.aktiv;
  const dagerSiden = log.length > 0 ? rutDagerSiden(log[0].utfort_dato) : null;

  return (
    <Card padded={false}>
      <div style={{ padding: '16px 18px', borderBottom: '1px solid rgba(17,24,61,.08)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginBottom: 6, flexWrap: 'wrap' }}>
            {omrade && (
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: omrade.farge, display: 'inline-block', flexShrink: 0 }} />
            )}
            <span style={{ fontSize: 11, color: SK.soft }}>{omrade?.navn}</span>
            <span style={{ fontSize: 10, fontWeight: 600, padding: '2px 7px', borderRadius: 99, background: frekvens.bg, color: frekvens.fg }}>{frekvens.label}</span>
            <span style={{ fontSize: 10, fontWeight: 600, padding: '2px 7px', borderRadius: 99, background: status.bg, color: status.fg }}>{status.label}</span>
          </div>
          <h2 style={{ margin: 0, fontSize: 17, fontWeight: 600, letterSpacing: -0.01 }}>{rutine.tittel}</h2>
        </div>
        <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
          <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' }}>
            <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>
      </div>

      <div style={{ display: 'flex', borderBottom: '1px solid rgba(17,24,61,.08)' }}>
        {[['info', 'Info'], ['trinn', 'Trinn'], ['logg', `Logg (${log.length})`]].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: '16px 18px' }}>
        {fane === 'info' && (
          <div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 16 }}>
              {[
                ['Ansvarlig', rutine.ansvarlig?.navn || '—'],
                ['Stedfortreder', rutine.stedfortreder?.navn || '—'],
                ['Enhet', rutine.enhet?.navn || 'Alle enheter'],
                ['Neste frist', rutFmtDato(rutine.neste_frist)],
                ['Sist utført', dagerSiden !== null ? `${dagerSiden} dager siden` : '—'],
              ].map(([l, v]) => (
                <div key={l} style={{ padding: '9px 12px', borderRadius: 8, background: SK.iceBlueLight }}>
                  <div style={{ fontSize: 10, fontWeight: 600, color: SK.soft, textTransform: 'uppercase', letterSpacing: 0.04 }}>{l}</div>
                  <div style={{ fontSize: 13, fontWeight: 500, marginTop: 4 }}>{v}</div>
                </div>
              ))}
            </div>
            {rutine.beskrivelse && (
              <div style={{ fontSize: 13, lineHeight: 1.6, color: SK.soft, marginBottom: 16 }}>{rutine.beskrivelse}</div>
            )}
            <div style={{ marginTop: 8, paddingTop: 14, borderTop: '1px solid rgba(17,24,61,.07)' }}>
              <div style={{ fontSize: 11, fontWeight: 600, color: SK.soft, textTransform: 'uppercase', letterSpacing: 0.04, marginBottom: 8 }}>Marker som utført</div>
              <div style={{ display: 'flex', gap: 8 }}>
                <input className="ok-input" value={notat} onChange={e => setNotat(e.target.value)}
                  placeholder="Valgfritt notat…" style={{ flex: 1, padding: '8px 11px', fontSize: 13 }} />
                <Button variant="primary" size="sm" onClick={markerUtfort} disabled={lagrer}>
                  {lagrer ? '…' : '✓ Utført'}
                </Button>
              </div>
            </div>
          </div>
        )}

        {fane === 'trinn' && (
          <div>
            {!rutine.trinn?.length ? (
              <div style={{ fontSize: 13, color: SK.soft }}>Ingen trinn definert for denne rutinen.</div>
            ) : (
              <div>
                {rutine.trinn.map((t, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, padding: '10px 0', borderBottom: '1px solid rgba(17,24,61,.05)' }}>
                    <div style={{ width: 24, height: 24, borderRadius: '50%', background: SK.ink, color: '#fff',
                      display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700, flexShrink: 0, marginTop: 1 }}>
                      {i + 1}
                    </div>
                    <span style={{ fontSize: 13, lineHeight: 1.5 }}>{t}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

        {fane === 'logg' && (
          <div>
            {log.length === 0 ? (
              <div style={{ fontSize: 13, color: SK.soft }}>Ingen utførelser registrert ennå.</div>
            ) : (
              <div>
                {log.map(entry => (
                  <div key={entry.id} style={{ display: 'flex', gap: 12, padding: '8px 0', borderBottom: '1px solid rgba(17,24,61,.05)' }}>
                    <div style={{ width: 32, height: 32, borderRadius: '50%', background: '#dbeed8', color: '#1b6a2e',
                      display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, flexShrink: 0 }}>✓</div>
                    <div>
                      <div style={{ fontSize: 12.5, fontWeight: 500 }}>{entry.utfort_av?.navn || '—'}</div>
                      <div style={{ fontSize: 11.5, color: SK.soft }}>{rutFmtDato(entry.utfort_dato)}</div>
                      {entry.notat && <div style={{ fontSize: 12, color: SK.soft, marginTop: 3, fontStyle: 'italic' }}>{entry.notat}</div>}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </div>
    </Card>
  );
}

// ── RutinerWorkspace (hovedkomponent) ─────────────────────────

function RutinerWorkspace({ go }) {
  const [rutiner,   setRutiner]   = React.useState([]);
  const [profiler,  setProfiler]  = React.useState([]);
  const [enheter,   setEnheter]   = React.useState([]);
  const [fravaer,   setFravaer]   = React.useState([]);
  const [laster,    setLaster]    = React.useState(true);
  const [feil,      setFeil]      = React.useState(null);
  const [visning,   setVisning]   = React.useState('liste'); // liste | ny | rediger
  const [valgtId,   setValgtId]   = React.useState(null);
  const [redigerRutine, setRedigerRutine] = React.useState(null);
  const [omradeFilter, setOmradeFilter]   = React.useState('alle');
  const [sok,       setSok]        = React.useState('');
  const [brukerId,  setBrukerId]   = React.useState(null);

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

  async function lastInn() {
    setLaster(true); setFeil(null);
    try {
      const [r, p, e, f] = await Promise.all([
        RUT_hentRutiner(), RUT_hentProfiler(), RUT_hentEnheter(), RUT_hentFravaer()
      ]);
      setRutiner(r); setProfiler(p); setEnheter(e); setFravaer(f);
    } catch(err) { setFeil(err.message); } finally { setLaster(false); }
  }

  const filtrerte = rutiner.filter(r => {
    if (omradeFilter !== 'alle' && r.omrade !== omradeFilter) return false;
    if (sok && !r.tittel.toLowerCase().includes(sok.toLowerCase())) return false;
    return true;
  });

  const valgtRutine = rutiner.find(r => r.id === valgtId);

  if (visning === 'ny') return (
    <div className="ok-content__inner" style={{ maxWidth: 800 }}>
      <Card padded={false}>
        <RutineSkjema profiler={profiler} enheter={enheter} brukerId={brukerId}
          onLagret={res => { setRutiner(prev => [res, ...prev]); setVisning('liste'); setValgtId(res.id); }}
          onAvbryt={() => setVisning('liste')} />
      </Card>
    </div>
  );

  if (visning === 'rediger' && redigerRutine) return (
    <div className="ok-content__inner" style={{ maxWidth: 800 }}>
      <Card padded={false}>
        <RutineSkjema rutine={redigerRutine} profiler={profiler} enheter={enheter} brukerId={brukerId}
          onLagret={res => { setRutiner(prev => prev.map(r => r.id === res.id ? res : r)); setVisning('liste'); setValgtId(res.id); }}
          onAvbryt={() => setVisning('liste')} />
      </Card>
    </div>
  );

  return (
    <div className="ok-content__inner" style={{ maxWidth: 1320 }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 22 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.08, textTransform: 'uppercase' }}>Drift</div>
          <h1 style={{ margin: '6px 0 0', fontSize: 28, fontWeight: 600, letterSpacing: -0.02 }}>Rutiner & metodikk</h1>
          <div style={{ marginTop: 4, color: SK.soft, fontSize: 13 }}>
            {rutiner.length} rutiner · {fravaer.length} fraværsmeldinger aktive
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button size="sm" onClick={lastInn}>Oppdater</Button>
          <Button variant="primary" icon={I.plus} onClick={() => setVisning('ny')}>Ny rutine</Button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14, marginBottom: 22 }}>
        <Card padded><KPI label="Totalt rutiner" value={laster ? '…' : rutiner.length} sub="i katalogen" /></Card>
        <Card padded><KPI label="Aktive" value={laster ? '…' : rutiner.filter(r => r.status === 'aktiv').length} sub="status aktiv" /></Card>
        <Card padded><KPI label="Fraværende" value={laster ? '…' : fravaer.length} sub="nå" accent={fravaer.length > 0} /></Card>
        <Card padded><KPI label="Uten ansvarlig" value={laster ? '…' : rutiner.filter(r => !r.ansvarlig_id).length} sub="mangler eier" accent={rutiner.filter(r => !r.ansvarlig_id).length > 0} /></Card>
      </div>

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

      {fravaer.length > 0 && (
        <div style={{ background: '#fdeac8', border: '1px solid #f2cc8f', borderRadius: 10, padding: '12px 16px', marginBottom: 18 }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: '#8e5a05', marginBottom: 8 }}>Aktive fraværsmeldinger</div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            {fravaer.map(f => (
              <div key={f.id} style={{ fontSize: 12, color: '#8e5a05' }}>
                <strong>{f.profil?.navn || '—'}</strong> · {f.type} · {rutFmtDato(f.start)}–{f.slutt ? rutFmtDato(f.slutt) : 'ubestemt'}
              </div>
            ))}
          </div>
        </div>
      )}

      <div style={{ display: 'flex', gap: 10, marginBottom: 16, flexWrap: 'wrap' }}>
        <input className="ok-input ok-input--search" value={sok} onChange={e => setSok(e.target.value)}
          placeholder="Søk i rutiner…" style={{ width: 220, padding: '7px 11px 7px 32px', fontSize: 13 }} />
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {[{ id: 'alle', navn: 'Alle' }, ...RUT_OMRADER_DEF].map(o => (
            <button key={o.id} onClick={() => setOmradeFilter(o.id)} style={{
              padding: '6px 12px', borderRadius: 99, border: '1px solid rgba(17,24,61,.15)',
              background: omradeFilter === o.id ? SK.ink : 'transparent',
              color: omradeFilter === o.id ? '#fff' : SK.ink,
              fontSize: 12, cursor: 'pointer', fontFamily: 'inherit',
            }}>{o.navn}</button>
          ))}
        </div>
      </div>

      {laster ? (
        <Card padded><div style={{ padding: 32, textAlign: 'center', color: SK.soft, fontSize: 13 }}>Laster rutiner…</div></Card>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: valgtId ? '1fr 1fr' : '1fr', gap: 18, alignItems: 'flex-start' }}>
          <Card padded={false}>
            {filtrerte.length === 0 ? (
              <div style={{ padding: 24, textAlign: 'center', color: SK.soft, fontSize: 13 }}>
                Ingen rutiner funnet. Klikk «Ny rutine» for å opprette.
              </div>
            ) : (
              <table className="ok-table">
                <thead>
                  <tr>
                    <th style={{ paddingLeft: 18 }}>Rutine</th>
                    <th>Frekvens</th>
                    <th>Ansvarlig</th>
                    <th>Neste frist</th>
                    <th>Status</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {filtrerte.map(r => {
                    const omrade = RUT_OMRADER_DEF.find(o => o.id === r.omrade);
                    const frekvens = RUT_FREKVENS_DEF[r.frekvens] || { label: r.frekvens, bg: '#f0f4fc', fg: '#6f7795' };
                    const status = RUT_STATUS_DEF[r.status] || RUT_STATUS_DEF.aktiv;
                    const erValgt = r.id === valgtId;
                    return (
                      <tr key={r.id} onClick={() => setValgtId(erValgt ? null : r.id)} style={{
                        background: erValgt ? SK.iceBlueLight : 'transparent',
                        borderLeft: `3px solid ${erValgt ? SK.coral : (omrade?.farge || 'transparent')}`,
                        cursor: 'pointer',
                      }}>
                        <td style={{ paddingLeft: 18 }}>
                          <div style={{ fontWeight: 600, fontSize: 12.5 }}>{r.tittel}</div>
                          {r.enhet?.navn && <div style={{ fontSize: 11, color: SK.soft, marginTop: 2 }}>{r.enhet.navn}</div>}
                        </td>
                        <td>
                          <span style={{ fontSize: 10, fontWeight: 600, padding: '2px 7px', borderRadius: 99, background: frekvens.bg, color: frekvens.fg }}>{frekvens.label}</span>
                        </td>
                        <td style={{ fontSize: 12, color: SK.soft }}>{r.ansvarlig?.navn || '—'}</td>
                        <td style={{ fontSize: 12.5, whiteSpace: 'nowrap' }}>{rutFmtDato(r.neste_frist)}</td>
                        <td>
                          <span style={{ fontSize: 10, fontWeight: 600, padding: '2px 7px', borderRadius: 99, background: status.bg, color: status.fg }}>{status.label}</span>
                        </td>
                        <td>
                          <Button size="sm" onClick={e => { e.stopPropagation(); setRedigerRutine(r); setVisning('rediger'); }}>Rediger</Button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            )}
          </Card>

          {valgtRutine && (
            <RutineDetalj rutine={valgtRutine} brukerId={brukerId}
              onLukk={() => setValgtId(null)}
              onOppdatert={res => setRutiner(prev => prev.map(r => r.id === res.id ? res : r))}
              onSlettet={() => { setRutiner(prev => prev.filter(r => r.id !== valgtId)); setValgtId(null); }} />
          )}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { RutinerWorkspace });