// hr.jsx — HR & personal med Supabase + full funksjonalitet fra prototypen

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

async function HR_hentAnsatte() {
  const { data, error } = await window._sb
    .from('profiles')
    .select('*, enhet:enheter!enhet_id(id,navn), rolle:roller!rolle_id(id,navn,farge)')
    .order('navn');
  if (error) throw error;
  return data || [];
}

async function HR_hentKontrakter() {
  const { data, error } = await window._sb
    .from('kontrakter')
    .select('*, profil:profiles!profil_id(id,navn,epost,enhet:enheter!enhet_id(id,navn))')
    .order('startdato', { ascending: false });
  if (error) throw error;
  return data || [];
}

async function HR_hentSykefravær() {
  const { data, error } = await window._sb
    .from('sykefravær')
    .select('*, profil:profiles!profil_id(id,navn,epost,enhet:enheter!enhet_id(id,navn))')
    .order('fra_dato', { ascending: false });
  if (error) throw error;
  return data || [];
}

async function HR_hentKompetanse() {
  const { data, error } = await window._sb
    .from('kompetanse')
    .select('*, profil:profiles!profil_id(id,navn,enhet:enheter!enhet_id(id,navn))')
    .order('dato', { ascending: false });
  if (error) throw error;
  return data || [];
}

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

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

async function HR_registrerFravær(felter) {
  const { profil, ...rene } = felter;
  const { data, error } = await window._sb.from('sykefravær').insert([rene]).select().single();
  if (error) throw error;
  return data;
}

async function HR_oppdaterFravær(id, felter) {
  const { profil, ...rene } = felter;
  const { data, error } = await window._sb.from('sykefravær').update(rene).eq('id', id).select().single();
  if (error) throw error;
  return data;
}

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

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

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

const HR_KONTRAKT_TYPE = {
  fast:        { label: 'Fast',        bg: '#dbeed8', fg: '#1b6a2e' },
  vikariat:    { label: 'Vikariat',    bg: '#fdeac8', fg: '#8e5a05' },
  midlertidig: { label: 'Midlertidig', bg: '#fdeac8', fg: '#8e5a05' },
  lærling:     { label: 'Lærling',     bg: '#e9eef7', fg: '#3c4a6b' },
  tilkalling:  { label: 'Tilkalling',  bg: '#f0f4fc', fg: '#6f7795' },
};

const HR_FRAVÆR_TYPE = {
  egenmelding: { label: 'Egenmelding', bg: '#fdeac8', fg: '#8e5a05' },
  sykmelding:  { label: 'Sykmelding',  bg: '#fcddde', fg: '#8a1620' },
  ferie:       { label: 'Ferie',       bg: '#dbeed8', fg: '#1b6a2e' },
  permisjon:   { label: 'Permisjon',   bg: '#e9eef7', fg: '#3c4a6b' },
};

const HR_KOMPETANSE_TYPE = {
  kurs:           { label: 'Kurs',           ikon: '📚' },
  sertifisering:  { label: 'Sertifisering',  ikon: '🏆' },
  fagbrev:        { label: 'Fagbrev',        ikon: '🎓' },
  intern:         { label: 'Internt kurs',   ikon: '🏢' },
  konferanse:     { label: 'Konferanse',     ikon: '🎤' },
};

function hrFmt(d) {
  if (!d) return '—';
  return new Date(d).toLocaleDateString('nb-NO', { day: 'numeric', month: 'short', year: 'numeric' });
}
function hrDager(d) {
  if (!d) return null;
  return Math.ceil((new Date(d) - new Date()) / 86400000);
}
function hrIni(navn) {
  if (!navn) return '?';
  return navn.split(' ').filter(Boolean).map(n=>n[0]).slice(0,2).join('').toUpperCase();
}
function hrFarge(navn) {
  const f=['#f2545c','#586ba4','#08605f','#11183d','#e08d3c','#9b59b6'];
  return f[(navn||'').charCodeAt(0)%f.length];
}

// ── Kontrakt-skjema ───────────────────────────────────────────

function HR_KontraktSkjema({ kontrakt, ansatte, brukerId, onLagret, onAvbryt }) {
  const [profilId,   setProfilId]   = React.useState(kontrakt?.profil_id || '');
  const [type,       setType]       = React.useState(kontrakt?.type || 'fast');
  const [prosent,    setProsent]    = React.useState(kontrakt?.stilling_prosent ?? 100);
  const [lonn,       setLonn]       = React.useState(kontrakt?.manedslonn || '');
  const [startdato,  setStartdato]  = React.useState(kontrakt?.startdato || '');
  const [sluttdato,  setSluttdato]  = React.useState(kontrakt?.sluttdato || '');
  const [begrunnelse,setBegrunnelse]= React.useState(kontrakt?.begrunnelse || '');
  const [laster,     setLaster]     = React.useState(false);
  const [feil,       setFeil]       = React.useState(null);

  const lagre = async () => {
    if (!profilId || !startdato) { setFeil('Ansatt og startdato er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    const felter = { profil_id: profilId, type, stilling_prosent: prosent,
      manedslonn: lonn || null, startdato, sluttdato: sluttdato || null,
      begrunnelse: begrunnelse || null, opprettet_av: brukerId };
    try {
      const res = kontrakt ? await HR_oppdaterKontrakt(kontrakt.id, felter) : await HR_opprettKontrakt(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: '22px 26px' }}>
      <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 20 }}>{kontrakt ? 'Rediger kontrakt' : 'Ny kontrakt'}</div>
      {feil && <div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8, padding:'10px 14px', fontSize:13, color:'#8a1620', marginBottom:16 }}>{feil}</div>}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'16px 20px', marginBottom:20 }}>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Ansatt *</label>
          <select className="ok-input" value={profilId} onChange={e=>setProfilId(e.target.value)} style={INP}>
            <option value="">— Velg ansatt —</option>
            {ansatte.map(a => <option key={a.id} value={a.id}>{a.navn || a.epost}{a.enhet?.navn ? ` · ${a.enhet.navn}` : ''}</option>)}
          </select>
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Kontrakttype</label>
          <select className="ok-input" value={type} onChange={e=>setType(e.target.value)} style={INP}>
            {Object.entries(HR_KONTRAKT_TYPE).map(([k,v]) => <option key={k} value={k}>{v.label}</option>)}
          </select>
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Stilling %</label>
          <div>
            <input type="range" min="20" max="100" step="10" value={prosent}
              onChange={e=>setProsent(Number(e.target.value))} style={{ width:'100%', marginBottom:4 }} />
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <span style={{ fontSize:11, color:SK.soft }}>20%</span>
              <span style={{ fontSize:18, fontWeight:700, color:SK.ink }}>{prosent}%</span>
              <span style={{ fontSize:11, color:SK.soft }}>100%</span>
            </div>
          </div>
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Månedslønn (kr)</label>
          <input className="ok-input" type="number" value={lonn} onChange={e=>setLonn(e.target.value)} style={INP} placeholder="f.eks. 65 000" />
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Startdato *</label>
          <input className="ok-input" type="date" value={startdato} onChange={e=>setStartdato(e.target.value)} style={INP} />
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Sluttdato</label>
          <input className="ok-input" type="date" value={sluttdato} onChange={e=>setSluttdato(e.target.value)} style={INP} />
          <div style={{ fontSize:11, color:SK.soft, marginTop:4 }}>La stå tom for faste ansettelser</div>
        </div>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Begrunnelse / merknad</label>
          <textarea className="ok-input" value={begrunnelse} onChange={e=>setBegrunnelse(e.target.value)}
            rows={3} style={{ ...INP, resize:'vertical', fontFamily:'inherit', lineHeight:1.6 }}
            placeholder="f.eks. Vikariat for Hege Aas (foreldrepermisjon til aug 2027)" />
        </div>
      </div>
      <div style={{ display:'flex', gap:10 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>{laster ? 'Lagrer…' : (kontrakt ? 'Lagre' : 'Opprett kontrakt')}</Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

// ── Fravær-skjema ─────────────────────────────────────────────

function HR_FraværSkjema({ ansatte, brukerId, onLagret, onAvbryt }) {
  const [profilId, setProfilId] = React.useState('');
  const [type,     setType]     = React.useState('egenmelding');
  const [fraDato,  setFraDato]  = React.useState(new Date().toISOString().split('T')[0]);
  const [tilDato,  setTilDato]  = React.useState('');
  const [prosent,  setProsent]  = React.useState(100);
  const [merknad,  setMerknad]  = React.useState('');
  const [laster,   setLaster]   = React.useState(false);
  const [feil,     setFeil]     = React.useState(null);

  const lagre = async () => {
    if (!profilId || !fraDato) { setFeil('Ansatt og fra-dato er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    try {
      const res = await HR_registrerFravær({ profil_id: profilId, type, fra_dato: fraDato,
        til_dato: tilDato || null, prosent, merknad: merknad || null });
      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:'22px 26px' }}>
      <div style={{ fontSize:15, fontWeight:600, marginBottom:20 }}>Registrer fravær</div>
      {feil && <div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8, padding:'10px 14px', fontSize:13, color:'#8a1620', marginBottom:16 }}>{feil}</div>}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'16px 20px', marginBottom:20 }}>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Ansatt *</label>
          <select className="ok-input" value={profilId} onChange={e=>setProfilId(e.target.value)} style={INP}>
            <option value="">— Velg ansatt —</option>
            {ansatte.map(a => <option key={a.id} value={a.id}>{a.navn || a.epost}{a.enhet?.navn ? ` · ${a.enhet.navn}` : ''}</option>)}
          </select>
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Type fravær</label>
          <select className="ok-input" value={type} onChange={e=>setType(e.target.value)} style={INP}>
            {Object.entries(HR_FRAVÆR_TYPE).map(([k,v]) => <option key={k} value={k}>{v.label}</option>)}
          </select>
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Fraværsprosent</label>
          <select className="ok-input" value={prosent} onChange={e=>setProsent(Number(e.target.value))} style={INP}>
            {[100,80,60,50,40,20].map(p => <option key={p} value={p}>{p}%</option>)}
          </select>
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Fra dato *</label>
          <input className="ok-input" type="date" value={fraDato} onChange={e=>setFraDato(e.target.value)} style={INP} />
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Til dato</label>
          <input className="ok-input" type="date" value={tilDato} onChange={e=>setTilDato(e.target.value)} style={INP} />
          <div style={{ fontSize:11, color:SK.soft, marginTop:4 }}>La stå tom hvis ikke avklart</div>
        </div>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Merknad</label>
          <textarea className="ok-input" value={merknad} onChange={e=>setMerknad(e.target.value)}
            rows={2} style={{ ...INP, resize:'vertical', fontFamily:'inherit' }} />
        </div>
      </div>
      <div style={{ display:'flex', gap:10 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>{laster ? 'Lagrer…' : 'Registrer fravær'}</Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

// ── Kompetanse-skjema ─────────────────────────────────────────

function HR_KompetanseSkjema({ ansatte, brukerId, onLagret, onAvbryt }) {
  const [profilId,  setProfilId]  = React.useState('');
  const [tittel,    setTittel]    = React.useState('');
  const [type,      setType]      = React.useState('kurs');
  const [leverandor,setLeverandor]= React.useState('');
  const [dato,      setDato]      = React.useState('');
  const [utloper,   setUtloper]   = React.useState('');
  const [sertifikat,setSertifikat]= React.useState(false);
  const [laster,    setLaster]    = React.useState(false);
  const [feil,      setFeil]      = React.useState(null);

  const lagre = async () => {
    if (!profilId || !tittel) { setFeil('Ansatt og tittel er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    try {
      const res = await HR_leggTilKompetanse({ profil_id: profilId, tittel, type,
        leverandor: leverandor || null, dato: dato || null, utloper: utloper || null,
        sertifikat });
      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:'22px 26px' }}>
      <div style={{ fontSize:15, fontWeight:600, marginBottom:20 }}>Legg til kompetanse</div>
      {feil && <div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8, padding:'10px 14px', fontSize:13, color:'#8a1620', marginBottom:16 }}>{feil}</div>}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'16px 20px', marginBottom:20 }}>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Ansatt *</label>
          <select className="ok-input" value={profilId} onChange={e=>setProfilId(e.target.value)} style={INP}>
            <option value="">— Velg ansatt —</option>
            {ansatte.map(a => <option key={a.id} value={a.id}>{a.navn || a.epost}</option>)}
          </select>
        </div>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Tittel *</label>
          <input className="ok-input" value={tittel} onChange={e=>setTittel(e.target.value)} style={INP} autoFocus placeholder="f.eks. Førstehjelp grunnkurs" />
        </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}>
            {Object.entries(HR_KOMPETANSE_TYPE).map(([k,v]) => <option key={k} value={k}>{v.ikon} {v.label}</option>)}
          </select>
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Leverandør</label>
          <input className="ok-input" value={leverandor} onChange={e=>setLeverandor(e.target.value)} style={INP} placeholder="f.eks. Røde Kors" />
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Dato gjennomført</label>
          <input className="ok-input" type="date" value={dato} onChange={e=>setDato(e.target.value)} style={INP} />
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Utløper</label>
          <input className="ok-input" type="date" value={utloper} onChange={e=>setUtloper(e.target.value)} style={INP} />
        </div>
        <div style={{ gridColumn:'1/-1', display:'flex', alignItems:'center', gap:10 }}>
          <input type="checkbox" id="sert" checked={sertifikat} onChange={e=>setSertifikat(e.target.checked)} style={{ width:18, height:18 }} />
          <label htmlFor="sert" style={{ fontSize:13, cursor:'pointer' }}>Sertifikat / bevis utstedt</label>
        </div>
      </div>
      <div style={{ display:'flex', gap:10 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>{laster ? 'Lagrer…' : 'Legg til'}</Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

// ── Pill-hjelper ──────────────────────────────────────────────

function HRPill({ bg, fg, children }) {
  return <span style={{ fontSize:10, fontWeight:600, padding:'2px 8px', borderRadius:99, background:bg, color:fg, whiteSpace:'nowrap' }}>{children}</span>;
}

// ── HRWorkspace (hoved) ───────────────────────────────────────

function HRWorkspace({ go }) {
  const [ansatte,    setAnsatte]    = React.useState([]);
  const [kontrakter, setKontrakter] = React.useState([]);
  const [fravaer,    setFravaer]    = React.useState([]);
  const [kompetanse, setKompetanse] = React.useState([]);
  const [laster,     setLaster]     = React.useState(true);
  const [feil,       setFeil]       = React.useState(null);
  const [fane,       setFane]       = React.useState('oversikt');
  const [panel,      setPanel]      = React.useState(null); // null | 'nyKontrakt' | 'nyFravær' | 'nyKompetanse'
  const [redigerKontrakt, setRedigerKontrakt] = React.useState(null);
  const [brukerId,   setBrukerId]   = React.useState(null);
  const [sok,        setSok]        = React.useState('');

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

  async function lastInn() {
    setLaster(true); setFeil(null);
    try {
      const [a, k, f, ko] = await Promise.all([HR_hentAnsatte(), HR_hentKontrakter(), HR_hentSykefravær(), HR_hentKompetanse()]);
      setAnsatte(a); setKontrakter(k); setFravaer(f); setKompetanse(ko);
    } catch(err) { setFeil(err.message); } finally { setLaster(false); }
  }

  const utgaende = kontrakter.filter(k => { const d = hrDager(k.sluttdato); return d !== null && d >= 0 && d <= 90; });
  const aktivtFravær = fravaer.filter(f => !f.til_dato || new Date(f.til_dato) >= new Date());
  const utlopendeKomp = kompetanse.filter(k => { const d = hrDager(k.utloper); return d !== null && d >= 0 && d <= 90; });
  const filtrerteAnsatte = ansatte.filter(a => !sok || (a.navn||'').toLowerCase().includes(sok.toLowerCase()) || (a.epost||'').toLowerCase().includes(sok.toLowerCase()));

  const FANER = [
    { id:'oversikt',   label:'Oversikt' },
    { id:'ansatte',    label:`Ansatte (${ansatte.length})` },
    { id:'kontrakter', label:`Kontrakter (${kontrakter.length})`, badge: utgaende.length },
    { id:'fravaer',    label:`Fravær (${aktivtFravær.length} aktive)` },
    { id:'kompetanse', label:`Kompetanse (${kompetanse.length})` },
  ];

  return (
    <div className="ok-content__inner" style={{ maxWidth:1320 }}>
      {/* Header */}
      <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' }}>Administrasjon</div>
          <h1 style={{ margin:'6px 0 0', fontSize:28, fontWeight:600, letterSpacing:-0.02 }}>HR & personal</h1>
          <div style={{ marginTop:4, color:SK.soft, fontSize:13 }}>
            {ansatte.length} ansatte · {kontrakter.length} kontrakter
            {utgaende.length > 0 && <span style={{ color:SK.coral }}> · {utgaende.length} utløper snart</span>}
            {aktivtFravær.length > 0 && <span style={{ color:'#8e5a05' }}> · {aktivtFravær.length} i fravær nå</span>}
          </div>
        </div>
        <div style={{ display:'flex', gap:8, flexWrap:'wrap', justifyContent:'flex-end' }}>
          <Button size="sm" onClick={lastInn}>Oppdater</Button>
          {fane === 'kontrakter' && <Button variant="primary" icon={I.plus} onClick={() => setPanel('nyKontrakt')}>Ny kontrakt</Button>}
          {fane === 'fravaer'    && <Button variant="primary" icon={I.plus} onClick={() => setPanel('nyFravær')}>Registrer fravær</Button>}
          {fane === 'kompetanse' && <Button variant="primary" icon={I.plus} onClick={() => setPanel('nyKompetanse')}>Legg til kompetanse</Button>}
          {fane === 'ansatte'    && <Button variant="primary" icon={I.plus} onClick={() => go && go('tilganger')}>Inviter bruker</Button>}
        </div>
      </div>

      {/* KPI */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:12, marginBottom:22 }}>
        <Card padded><KPI label="Ansatte" value={laster?'…':ansatte.length} sub="i systemet" /></Card>
        <Card padded><KPI label="Kontrakter" value={laster?'…':kontrakter.length} sub="registrert" /></Card>
        <Card padded><KPI label="Utløper < 90 d" value={laster?'…':utgaende.length} sub="krever handling" accent={utgaende.length>0} /></Card>
        <Card padded><KPI label="Aktiv fravær" value={laster?'…':aktivtFravær.length} sub="nå" accent={aktivtFravær.length>0} /></Card>
        <Card padded><KPI label="Komp. utløper" value={laster?'…':utlopendeKomp.length} sub="innen 90 dager" accent={utlopendeKomp.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>}

      {/* Skjema-panel */}
      {panel && (
        <Card padded={false} style={{ marginBottom:22 }}>
          {panel === 'nyKontrakt' && (
            <HR_KontraktSkjema ansatte={ansatte} brukerId={brukerId}
              onLagret={res => { setKontrakter(prev=>[res,...prev]); setPanel(null); setFane('kontrakter'); }}
              onAvbryt={() => setPanel(null)} />
          )}
          {panel === 'redigerKontrakt' && redigerKontrakt && (
            <HR_KontraktSkjema kontrakt={redigerKontrakt} ansatte={ansatte} brukerId={brukerId}
              onLagret={res => { setKontrakter(prev=>prev.map(k=>k.id===res.id?res:k)); setPanel(null); setRedigerKontrakt(null); }}
              onAvbryt={() => { setPanel(null); setRedigerKontrakt(null); }} />
          )}
          {panel === 'nyFravær' && (
            <HR_FraværSkjema ansatte={ansatte} brukerId={brukerId}
              onLagret={res => { setFravaer(prev=>[res,...prev]); setPanel(null); }}
              onAvbryt={() => setPanel(null)} />
          )}
          {panel === 'nyKompetanse' && (
            <HR_KompetanseSkjema ansatte={ansatte} brukerId={brukerId}
              onLagret={res => { setKompetanse(prev=>[res,...prev]); setPanel(null); }}
              onAvbryt={() => setPanel(null)} />
          )}
        </Card>
      )}

      {/* Faner */}
      <div style={{ display:'flex', borderBottom:'1px solid rgba(17,24,61,.08)', marginBottom:20 }}>
        {FANER.map(f => (
          <button key={f.id} onClick={() => { setFane(f.id); setPanel(null); }} style={{
            background:'none', border:'none', cursor:'pointer', padding:'9px 18px',
            fontSize:13, fontWeight: fane===f.id ? 600 : 400,
            color: fane===f.id ? SK.ink : SK.soft,
            borderBottom: fane===f.id ? `2px solid ${SK.coral}` : '2px solid transparent',
            fontFamily:'inherit', display:'flex', alignItems:'center', gap:6,
          }}>
            {f.label}
            {f.badge > 0 && <span style={{ fontSize:10, fontWeight:700, padding:'1px 6px', borderRadius:99, background:SK.coral, color:'#fff' }}>{f.badge}</span>}
          </button>
        ))}
      </div>

      {laster ? (
        <Card padded><div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Laster…</div></Card>
      ) : (
        <>
          {/* ── OVERSIKT ── */}
          {fane === 'oversikt' && (
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:18 }}>
              {/* Varsler */}
              <Card padded={false}>
                <div style={{ padding:'14px 18px', borderBottom:'1px solid rgba(17,24,61,.07)', fontSize:13, fontWeight:600 }}>Varsler og handlinger</div>
                <div style={{ padding:'12px 18px', display:'flex', flexDirection:'column', gap:10 }}>
                  {utgaende.length === 0 && aktivtFravær.length === 0 && utlopendeKomp.length === 0 && (
                    <div style={{ fontSize:13, color:SK.soft, padding:'16px 0', textAlign:'center' }}>Ingen varsler — alt ser bra ut 👍</div>
                  )}
                  {utgaende.map(k => {
                    const d = hrDager(k.sluttdato);
                    return (
                      <div key={k.id} onClick={() => setFane('kontrakter')} style={{ display:'flex', gap:12, alignItems:'center', padding:'10px 12px', background:'#fcddde', borderRadius:8, cursor:'pointer' }}>
                        <div style={{ width:8, height:8, borderRadius:'50%', background:SK.coral, flexShrink:0 }} />
                        <div style={{ flex:1 }}>
                          <div style={{ fontSize:13, fontWeight:600 }}>{k.profil?.navn || '—'} · kontrakt utløper</div>
                          <div style={{ fontSize:11.5, color:'#8a1620', marginTop:2 }}>{hrFmt(k.sluttdato)} · om {d} dager · {HR_KONTRAKT_TYPE[k.type]?.label}</div>
                        </div>
                        <Button size="sm" onClick={e=>{e.stopPropagation();setRedigerKontrakt(k);setPanel('redigerKontrakt');setFane('kontrakter');}}>Forleng</Button>
                      </div>
                    );
                  })}
                  {aktivtFravær.slice(0,3).map(f => (
                    <div key={f.id} style={{ display:'flex', gap:12, alignItems:'center', padding:'10px 12px', background:'#fdeac8', borderRadius:8 }}>
                      <div style={{ width:8, height:8, borderRadius:'50%', background:'#e08d3c', flexShrink:0 }} />
                      <div style={{ flex:1 }}>
                        <div style={{ fontSize:13, fontWeight:600 }}>{f.profil?.navn || '—'} · {HR_FRAVÆR_TYPE[f.type]?.label}</div>
                        <div style={{ fontSize:11.5, color:'#8e5a05', marginTop:2 }}>{hrFmt(f.fra_dato)} → {f.til_dato ? hrFmt(f.til_dato) : 'ubestemt'} · {f.prosent}%</div>
                      </div>
                    </div>
                  ))}
                  {utlopendeKomp.map(k => (
                    <div key={k.id} style={{ display:'flex', gap:12, alignItems:'center', padding:'10px 12px', background:'#e9eef7', borderRadius:8 }}>
                      <div style={{ width:8, height:8, borderRadius:'50%', background:'#586ba4', flexShrink:0 }} />
                      <div style={{ flex:1 }}>
                        <div style={{ fontSize:13, fontWeight:600 }}>{k.profil?.navn || '—'} · {k.tittel}</div>
                        <div style={{ fontSize:11.5, color:SK.soft, marginTop:2 }}>Kompetanse utløper {hrFmt(k.utloper)}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </Card>

              {/* Siste ansatte */}
              <Card padded={false}>
                <div style={{ padding:'14px 18px', borderBottom:'1px solid rgba(17,24,61,.07)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                  <span style={{ fontSize:13, fontWeight:600 }}>Ansatte ({ansatte.length})</span>
                  <Button size="sm" onClick={() => setFane('ansatte')}>Se alle →</Button>
                </div>
                <div style={{ padding:'12px 18px', display:'flex', flexDirection:'column', gap:8 }}>
                  {ansatte.slice(0,6).map(a => (
                    <div key={a.id} style={{ display:'flex', alignItems:'center', gap:10 }}>
                      <div style={{ width:32, height:32, borderRadius:'50%', background:hrFarge(a.navn), color:'#fff',
                        display:'flex', alignItems:'center', justifyContent:'center', fontSize:11, fontWeight:700, flexShrink:0 }}>
                        {hrIni(a.navn||a.epost)}
                      </div>
                      <div style={{ flex:1, minWidth:0 }}>
                        <div style={{ fontSize:12.5, fontWeight:600, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{a.navn || a.epost}</div>
                        <div style={{ fontSize:11, color:SK.soft }}>{a.enhet?.navn || '—'}</div>
                      </div>
                      {a.rolle && (
                        <span style={{ fontSize:10, fontWeight:600, padding:'2px 7px', borderRadius:99,
                          background:(a.rolle.farge||'#586ba4')+'22', color:a.rolle.farge||'#586ba4', flexShrink:0 }}>
                          {a.rolle.navn}
                        </span>
                      )}
                    </div>
                  ))}
                </div>
              </Card>
            </div>
          )}

          {/* ── ANSATTE ── */}
          {fane === 'ansatte' && (
            <div>
              <div style={{ display:'flex', gap:10, marginBottom:16 }}>
                <input className="ok-input ok-input--search" value={sok} onChange={e=>setSok(e.target.value)}
                  placeholder="Søk på navn eller e-post…" style={{ padding:'8px 12px 8px 32px', fontSize:13, width:260 }} />
                <span style={{ alignSelf:'center', fontSize:12.5, color:SK.soft }}>
                  {filtrerteAnsatte.length} av {ansatte.length} ansatte
                </span>
              </div>
              <Card padded={false}>
                <table className="ok-table">
                  <thead>
                    <tr>
                      <th style={{ paddingLeft:18 }}>Ansatt</th>
                      <th>Rolle</th>
                      <th>Enhet</th>
                      <th>Status</th>
                      <th>Kontrakt</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filtrerteAnsatte.map(a => {
                      const k = kontrakter.find(k => k.profil_id === a.id);
                      const kType = k ? HR_KONTRAKT_TYPE[k.type] : null;
                      const kDager = k?.sluttdato ? hrDager(k.sluttdato) : null;
                      const kAdvarsel = kDager !== null && kDager >= 0 && kDager <= 90;
                      return (
                        <tr key={a.id} style={{ borderLeft:`3px solid ${kAdvarsel ? SK.coral : 'transparent'}` }}>
                          <td style={{ paddingLeft:18 }}>
                            <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                              <div style={{ width:34, height:34, borderRadius:'50%', background:hrFarge(a.navn), color:'#fff',
                                display:'flex', alignItems:'center', justifyContent:'center', fontSize:12, fontWeight:700, flexShrink:0 }}>
                                {hrIni(a.navn||a.epost)}
                              </div>
                              <div>
                                <div style={{ fontWeight:600, fontSize:13 }}>{a.navn || '—'}</div>
                                <div style={{ fontSize:11, color:SK.soft }}>{a.epost}</div>
                              </div>
                            </div>
                          </td>
                          <td>
                            {a.rolle ? (
                              <span style={{ fontSize:11, fontWeight:600, padding:'2px 8px', borderRadius:99,
                                background:(a.rolle.farge||'#586ba4')+'22', color:a.rolle.farge||'#586ba4' }}>
                                {a.rolle.navn}
                              </span>
                            ) : <span style={{ color:SK.soft, fontSize:12 }}>—</span>}
                          </td>
                          <td style={{ fontSize:12.5 }}>{a.enhet?.navn || '—'}</td>
                          <td>
                            <span style={{ fontSize:10, fontWeight:600, padding:'2px 8px', borderRadius:99,
                              background: a.status === 'aktiv' || !a.status ? '#dbeed8' : '#fdeac8',
                              color: a.status === 'aktiv' || !a.status ? '#1b6a2e' : '#8e5a05' }}>
                              {a.status || 'Aktiv'}
                            </span>
                          </td>
                          <td>
                            {kType && <span style={{ fontSize:10, fontWeight:600, padding:'2px 7px', borderRadius:99, background:kType.bg, color:kType.fg }}>{kType.label}</span>}
                            {kAdvarsel && <div style={{ fontSize:10, color:SK.coral, marginTop:2 }}>Utløper om {kDager} dager</div>}
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </Card>
            </div>
          )}

          {/* ── KONTRAKTER ── */}
          {fane === 'kontrakter' && (
            <Card padded={false}>
              {kontrakter.length === 0 ? (
                <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Ingen kontrakter registrert. Klikk «Ny kontrakt» for å starte.</div>
              ) : (
                <table className="ok-table">
                  <thead>
                    <tr>
                      <th style={{ paddingLeft:18 }}>Ansatt</th>
                      <th>Type</th>
                      <th>Stilling</th>
                      <th>Lønn/mnd</th>
                      <th>Startdato</th>
                      <th>Sluttdato</th>
                      <th>Merknad</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    {kontrakter.map(k => {
                      const type = HR_KONTRAKT_TYPE[k.type] || { label:k.type, bg:'#e9eef7', fg:'#3c4a6b' };
                      const dager = hrDager(k.sluttdato);
                      const snart = dager !== null && dager >= 0 && dager <= 90;
                      return (
                        <tr key={k.id} style={{ borderLeft:`3px solid ${snart ? SK.coral : 'transparent'}` }}>
                          <td style={{ paddingLeft:18 }}>
                            <div style={{ fontWeight:600, fontSize:13 }}>{k.profil?.navn || k.profil?.epost || '—'}</div>
                            <div style={{ fontSize:11, color:SK.soft }}>{k.profil?.enhet?.navn}</div>
                          </td>
                          <td><HRPill bg={type.bg} fg={type.fg}>{type.label}</HRPill></td>
                          <td style={{ fontSize:13, fontWeight:500 }}>{k.stilling_prosent}%</td>
                          <td style={{ fontSize:12.5, fontVariantNumeric:'tabular-nums' }}>
                            {k.manedslonn ? new Intl.NumberFormat('nb-NO').format(k.manedslonn)+' kr' : '—'}
                          </td>
                          <td style={{ fontSize:12.5, whiteSpace:'nowrap' }}>{hrFmt(k.startdato)}</td>
                          <td style={{ fontSize:12.5, whiteSpace:'nowrap', color: snart ? SK.coral : 'inherit', fontWeight: snart ? 600 : 400 }}>
                            {k.sluttdato ? hrFmt(k.sluttdato) : <span style={{ color:SK.soft }}>—</span>}
                            {snart && <div style={{ fontSize:10, color:SK.coral }}>Om {dager} dager</div>}
                          </td>
                          <td style={{ fontSize:12, color:SK.soft, maxWidth:200, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{k.begrunnelse || '—'}</td>
                          <td>
                            <Button size="sm" onClick={() => { setRedigerKontrakt(k); setPanel('redigerKontrakt'); }}>Rediger</Button>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              )}
            </Card>
          )}

          {/* ── FRAVÆR ── */}
          {fane === 'fravaer' && (
            <Card padded={false}>
              {fravaer.length === 0 ? (
                <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Ingen fravær registrert.</div>
              ) : (
                <table className="ok-table">
                  <thead>
                    <tr>
                      <th style={{ paddingLeft:18 }}>Ansatt</th>
                      <th>Type</th>
                      <th>Fra</th>
                      <th>Til</th>
                      <th>Grad</th>
                      <th>Enhet</th>
                      <th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {fravaer.map(f => {
                      const type = HR_FRAVÆR_TYPE[f.type] || { label:f.type, bg:'#e9eef7', fg:'#3c4a6b' };
                      const aktiv = !f.til_dato || new Date(f.til_dato) >= new Date();
                      return (
                        <tr key={f.id} style={{ borderLeft:`3px solid ${aktiv ? SK.coral : 'transparent'}`, opacity: aktiv ? 1 : .65 }}>
                          <td style={{ paddingLeft:18 }}>
                            <div style={{ display:'flex', alignItems:'center', gap:9 }}>
                              <div style={{ width:28, height:28, borderRadius:'50%', background:hrFarge(f.profil?.navn||''), color:'#fff',
                                display:'flex', alignItems:'center', justifyContent:'center', fontSize:10, fontWeight:700, flexShrink:0 }}>
                                {hrIni(f.profil?.navn||f.profil?.epost||'?')}
                              </div>
                              <span style={{ fontWeight:600, fontSize:12.5 }}>{f.profil?.navn || f.profil?.epost || '—'}</span>
                            </div>
                          </td>
                          <td><HRPill bg={type.bg} fg={type.fg}>{type.label}</HRPill></td>
                          <td style={{ fontSize:12.5, whiteSpace:'nowrap' }}>{hrFmt(f.fra_dato)}</td>
                          <td style={{ fontSize:12.5, whiteSpace:'nowrap' }}>{f.til_dato ? hrFmt(f.til_dato) : <span style={{ color:SK.soft }}>Ubestemt</span>}</td>
                          <td style={{ fontSize:13, fontWeight:500 }}>{f.prosent}%</td>
                          <td style={{ fontSize:12, color:SK.soft }}>{f.profil?.enhet?.navn || '—'}</td>
                          <td><HRPill bg={aktiv ? '#fcddde' : '#f0f4fc'} fg={aktiv ? '#8a1620' : SK.soft}>{aktiv ? 'Aktivt' : 'Avsluttet'}</HRPill></td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              )}
            </Card>
          )}

          {/* ── KOMPETANSE ── */}
          {fane === 'kompetanse' && (
            <Card padded={false}>
              {kompetanse.length === 0 ? (
                <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Ingen kompetanse registrert.</div>
              ) : (
                <table className="ok-table">
                  <thead>
                    <tr>
                      <th style={{ paddingLeft:18 }}>Kurs / sertifisering</th>
                      <th>Ansatt</th>
                      <th>Type</th>
                      <th>Leverandør</th>
                      <th>Dato</th>
                      <th>Utløper</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    {kompetanse.map(k => {
                      const type = HR_KOMPETANSE_TYPE[k.type] || { label:k.type, ikon:'📖' };
                      const dager = hrDager(k.utloper);
                      const snart = dager !== null && dager >= 0 && dager <= 90;
                      const utlopt = dager !== null && dager < 0;
                      return (
                        <tr key={k.id} style={{ borderLeft:`3px solid ${utlopt ? SK.coral : snart ? '#e08d3c' : 'transparent'}` }}>
                          <td style={{ paddingLeft:18 }}>
                            <div style={{ fontWeight:600, fontSize:12.5 }}>{k.tittel}</div>
                            {k.sertifikat && <span style={{ fontSize:10, fontWeight:600, color:'#1b6a2e' }}>🏆 Sertifikat</span>}
                          </td>
                          <td style={{ fontSize:12.5 }}>{k.profil?.navn || '—'}</td>
                          <td style={{ fontSize:12.5 }}>{type.ikon} {type.label}</td>
                          <td style={{ fontSize:12, color:SK.soft }}>{k.leverandor || '—'}</td>
                          <td style={{ fontSize:12.5, whiteSpace:'nowrap' }}>{hrFmt(k.dato)}</td>
                          <td style={{ fontSize:12.5, whiteSpace:'nowrap', color: utlopt ? SK.coral : snart ? '#e08d3c' : 'inherit', fontWeight: (utlopt||snart) ? 600 : 400 }}>
                            {k.utloper ? hrFmt(k.utloper) : <span style={{ color:SK.soft }}>—</span>}
                            {utlopt && <div style={{ fontSize:10, color:SK.coral }}>Utløpt</div>}
                            {snart && !utlopt && <div style={{ fontSize:10, color:'#e08d3c' }}>Om {dager} dager</div>}
                          </td>
                          <td>
                            <Button size="sm" onClick={async () => { if (confirm('Slette denne kompetanseposten?')) { await HR_slettKompetanse(k.id); setKompetanse(prev=>prev.filter(x=>x.id!==k.id)); }}}>Slett</Button>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              )}
            </Card>
          )}
        </>
      )}
    </div>
  );
}

function HROversikt({ go }) { return <HRWorkspace go={go} />; }

Object.assign(window, { HRWorkspace, HROversikt });