// personal.jsx — Personalendringer med Supabase + godkjenningstrapp
// Erstatter PersonalEndringerTab, UtgaaendeKontrakterTab, NyPersonalendringModal

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

async function PE_hentEndringer() {
  const { data, error } = await window._sb
    .from('personal_endringer')
    .select('*, profil:profiles!profil_id(id,navn,epost,roller(navn,farge),enheter(navn)), godkjenner:profiles!godkjenner_id(id,navn), godkjent_av:profiles!godkjent_av_id(id,navn), opprettet_av:profiles!opprettet_av_id(id,navn)')
    .order('created_at', { ascending: false });
  if (error) throw error;
  return data || [];
}

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

async function PE_oppdaterStatus(id, status, brukerId) {
  const oppdatering = { status };
  if (status === 'godkjent') { oppdatering.godkjent_av_id = brukerId; oppdatering.godkjent_dato = new Date().toISOString(); }
  const { data, error } = await window._sb.from('personal_endringer').update(oppdatering).eq('id', id).select().single();
  if (error) throw error;
  return data;
}

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

const PE_TYPE = {
  stilling:   { label: 'Stillingsendring',    farge: '#586ba4' },
  lønn:       { label: 'Lønnsendring',         farge: '#08605f' },
  org:        { label: 'Organisasjonsendring', farge: '#3a8fb7' },
  tittel:     { label: 'Titelendring',         farge: '#8e5a05' },
  permisjon:  { label: 'Permisjon',            farge: '#f2cc8f' },
  oppsigelse: { label: 'Oppsigelse',           farge: '#f2545c' },
  annet:      { label: 'Annet',               farge: '#9aa3b8' },
};

const PE_STATUS = {
  utkast:          { label: 'Utkast',          bg: '#e9eef7', fg: '#3c4a6b' },
  til_godkjenning: { label: 'Til godkjenning', bg: '#fdeac8', fg: '#8e5a05' },
  godkjent:        { label: 'Godkjent',        bg: '#dbeed8', fg: '#1b6a2e' },
  avvist:          { label: 'Avvist',          bg: '#fcddde', fg: '#8a1620' },
  trukket:         { label: 'Trukket',         bg: '#e9eef7', fg: '#9aa3b8' },
};

// ── NyEndringSkjema ────────────────────────────────────────────

function PENyEndringSkjema({ profiler, brukerId, onLagret, onAvbryt, prefyllProfilId }) {
  const [profilId,      setProfilId]      = React.useState(prefyllProfilId || '');
  const [type,          setType]          = React.useState('stilling');
  const [tittel,        setTittel]        = React.useState('');
  const [beskrivelse,   setBesk]          = React.useState('');
  const [fraVerdi,      setFraVerdi]      = React.useState('');
  const [tilVerdi,      setTilVerdi]      = React.useState('');
  const [ikrafttredelse,setIkraft]        = React.useState('');
  const [godkjennerId,  setGodkjennerId]  = React.useState('');
  const [aarsak,        setAarsak]        = React.useState('');
  const [sendTilGodk,   setSendTilGodk]   = React.useState(true);
  const [laster,        setLaster]        = React.useState(false);
  const [feil,          setFeil]          = React.useState(null);

  const lagre = async () => {
    if (!profilId) { setFeil('Velg ansatt.'); return; }
    if (!tittel.trim()) { setFeil('Tittel er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    try {
      const res = await PE_opprett({
        profil_id: profilId, type, tittel, beskrivelse,
        fra_verdi: fraVerdi || null, til_verdi: tilVerdi || null,
        ikrafttredelse: ikrafttredelse || null,
        godkjenner_id: godkjennerId || null,
        aarsak: aarsak || null,
        status: sendTilGodk ? 'til_godkjenning' : 'utkast',
        opprettet_av: brukerId,
      });
      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 };

  // Automatisk tittel
  React.useEffect(() => {
    if (!tittel && profilId && type) {
      const p = profiler.find(x => x.id === profilId);
      if (p) setTittel(`${PE_TYPE[type]?.label} – ${p.navn || p.epost}`);
    }
  }, [profilId, type]);

  return (
    <div style={{ padding:'20px 22px' }}>
      <div style={{ fontSize:14, fontWeight:600, marginBottom:16 }}>Ny personalendring</div>
      {feil && <div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8, padding:'9px 13px', fontSize:13, color:'#8a1620', marginBottom:14 }}>{feil}</div>}

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'14px 20px', marginBottom:20 }}>
        <div style={{ 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>
            {profiler.map(p => <option key={p.id} value={p.id}>{p.navn||p.epost}</option>)}
          </select>
        </div>

        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Type endring</label>
          <select className="ok-input" value={type} onChange={e=>setType(e.target.value)} style={inp}>
            {Object.entries(PE_TYPE).map(([k,v]) => <option key={k} value={k}>{v.label}</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}
            placeholder="f.eks. Stillingsendring fra 80% til 100%" />
        </div>

        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Fra (nåværende)</label>
          <input className="ok-input" value={fraVerdi} onChange={e=>setFraVerdi(e.target.value)} style={inp}
            placeholder="f.eks. 80% stilling" />
        </div>

        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Til (nytt)</label>
          <input className="ok-input" value={tilVerdi} onChange={e=>setTilVerdi(e.target.value)} style={inp}
            placeholder="f.eks. 100% stilling" />
        </div>

        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Ikrafttredelse</label>
          <input className="ok-input" type="date" value={ikrafttredelse} onChange={e=>setIkraft(e.target.value)} style={inp} />
        </div>

        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Godkjenner</label>
          <select className="ok-input" value={godkjennerId} onChange={e=>setGodkjennerId(e.target.value)} style={inp}>
            <option value="">— Ikke satt —</option>
            {profiler.filter(p => p.id !== profilId).map(p => <option key={p.id} value={p.id}>{p.navn||p.epost}</option>)}
          </select>
        </div>

        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Årsak</label>
          <input className="ok-input" value={aarsak} onChange={e=>setAarsak(e.target.value)} style={inp}
            placeholder="f.eks. Økt oppdragsvolum" />
        </div>

        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Beskrivelse</label>
          <textarea className="ok-input" value={beskrivelse} onChange={e=>setBesk(e.target.value)}
            rows={3} style={{ ...inp, resize:'vertical', fontFamily:'inherit' }} />
        </div>
      </div>

      <div style={{ background:SK.iceBlueLight, borderRadius:10, padding:'12px 16px', marginBottom:16,
        border: sendTilGodk ? `1.5px solid ${SK.coral}` : '1.5px solid rgba(17,24,61,.1)' }}>
        <label style={{ display:'flex', alignItems:'flex-start', gap:10, cursor:'pointer' }}>
          <input type="checkbox" checked={sendTilGodk} onChange={e=>setSendTilGodk(e.target.checked)}
            style={{ marginTop:3, accentColor:SK.coral }} />
          <div>
            <div style={{ fontSize:13, fontWeight:600, marginBottom:2 }}>Send til godkjenning nå</div>
            <div style={{ fontSize:12, color:SK.soft }}>Godkjenner varsles om endringen. Huk av for å lagre som utkast.</div>
          </div>
        </label>
      </div>

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

// ── EndringDetalj ──────────────────────────────────────────────

function PEEndringDetalj({ endring, brukerId, onOppdatert, onLukk }) {
  const type  = PE_TYPE[endring.type] || PE_TYPE.annet;
  const satus = PE_STATUS[endring.status] || PE_STATUS.utkast;

  const behandle = async (nyStatus) => {
    try {
      const res = await PE_oppdaterStatus(endring.id, nyStatus, brukerId);
      onOppdatert(res);
    } catch(e) { alert(e.message); }
  };

  return (
    <Card padded={false} style={{ marginTop:16 }}>
      <div style={{ padding:'14px 18px', borderBottom:'1px solid rgba(17,24,61,.08)',
        display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:12 }}>
        <div>
          <div style={{ display:'flex', gap:8, marginBottom:6, alignItems:'center' }}>
            <span style={{ fontSize:10.5, fontWeight:600, padding:'2px 8px', borderRadius:99,
              background:satus.bg, color:satus.fg }}>{satus.label}</span>
            <span style={{ fontSize:11, color:SK.soft }}>{type.label}</span>
          </div>
          <div style={{ fontWeight:600, fontSize:15 }}>{endring.tittel}</div>
          <div style={{ fontSize:12, color:SK.soft, marginTop:3 }}>
            {endring.profil?.navn || endring.profil?.epost}
            {endring.profil?.enheter?.navn && ` · ${endring.profil.enheter.navn}`}
          </div>
        </div>
        <button onClick={onLukk} style={{ background:'none', border:'1px solid rgba(17,24,61,.15)', borderRadius:99,
          width:28, height:28, cursor:'pointer', color:SK.soft, display:'inline-flex', alignItems:'center', justifyContent:'center' }}>
          <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 style={{ padding:'14px 18px' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:14 }}>
          {[
            ['Fra', endring.fra_verdi || '—'],
            ['Til', endring.til_verdi || '—'],
            ['Ikrafttredelse', endring.ikrafttredelse ? new Date(endring.ikrafttredelse).toLocaleDateString('nb-NO') : '—'],
            ['Godkjenner', endring.godkjenner?.navn || '—'],
            ['Opprettet av', endring.opprettet_av?.navn || '—'],
            ['Årsak', endring.aarsak || '—'],
          ].map(([l,v]) => (
            <div key={l} style={{ padding:'8px 10px', 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>

        {endring.beskrivelse && (
          <div style={{ fontSize:13, color:SK.soft, lineHeight:1.6, marginBottom:14 }}>{endring.beskrivelse}</div>
        )}

        {/* Godkjenningstrapp */}
        <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
          {endring.status === 'utkast' && (
            <Button size="sm" variant="primary" onClick={() => behandle('til_godkjenning')}>Send til godkjenning</Button>
          )}
          {endring.status === 'til_godkjenning' && (
            <>
              <Button size="sm" variant="primary" onClick={() => behandle('godkjent')}>✓ Godkjenn</Button>
              <Button size="sm" onClick={() => behandle('avvist')}>✕ Avvis</Button>
            </>
          )}
          {endring.status === 'godkjent' && (
            <div style={{ fontSize:12, color:'#1b6a2e', fontWeight:500 }}>
              ✓ Godkjent av {endring.godkjent_av?.navn} {endring.godkjent_dato ? `· ${new Date(endring.godkjent_dato).toLocaleDateString('nb-NO')}` : ''}
            </div>
          )}
          {['utkast','til_godkjenning'].includes(endring.status) && (
            <Button size="sm" onClick={() => behandle('trukket')}>Trekk</Button>
          )}
        </div>
      </div>
    </Card>
  );
}

// ── PersonalEndringerTab (hoved) ───────────────────────────────

function PersonalEndringerTab({ go }) {
  const [endringer,  setEndringer]  = React.useState([]);
  const [profiler,   setProfiler]   = React.useState([]);
  const [laster,     setLaster]     = React.useState(true);
  const [feil,       setFeil]       = React.useState(null);
  const [statusFilt, setStatusFilt] = React.useState('alle');
  const [valgtId,    setValgtId]    = React.useState(null);
  const [visNy,      setVisNy]      = React.useState(false);
  const [brukerId,   setBrukerId]   = React.useState(null);

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

  async function lastInn() {
    setLaster(true); setFeil(null);
    try {
      const [e, p] = await Promise.all([PE_hentEndringer(), window._sb.from('profiles').select('id,navn,epost,roller(navn,farge),enheter(navn)').order('navn')]);
      setEndringer(e);
      setProfiler(p.data || []);
    } catch(e) { setFeil(e.message); } finally { setLaster(false); }
  }

  const filtrert = statusFilt === 'alle' ? endringer : endringer.filter(e => e.status === statusFilt);
  const valgtEndring = valgtId ? endringer.find(e => e.id === valgtId) : null;

  const telFilt = (s) => endringer.filter(e => e.status === s).length;
  const tilGodk = telFilt('til_godkjenning');

  if (visNy) return (
    <div className="ok-content__inner" style={{ maxWidth:800 }}>
      <Card padded={false}>
        <PENyEndringSkjema profiler={profiler} brukerId={brukerId}
          onLagret={res => { setEndringer(prev => [res, ...prev]); setVisNy(false); setValgtId(res.id); }}
          onAvbryt={() => setVisNy(false)} />
      </Card>
    </div>
  );

  return (
    <div className="ok-content__inner" style={{ maxWidth:1280 }}>
      <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' }}>HR · Personal</div>
          <h1 style={{ margin:'6px 0 0', fontSize:28, fontWeight:600, letterSpacing:-0.02 }}>Personalendringer</h1>
          <div style={{ marginTop:4, color:SK.soft, fontSize:13 }}>
            {endringer.length} totalt
            {tilGodk > 0 && <span style={{ color:SK.coral }}> · {tilGodk} venter godkjenning</span>}
          </div>
        </div>
        <div style={{ display:'flex', gap:8 }}>
          <Button size="sm" onClick={lastInn}>Oppdater</Button>
          <Button variant="primary" icon={I.plus} onClick={() => setVisNy(true)}>Ny endring</Button>
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:18 }}>
        <Card padded><KPI label="Til godkjenning" value={laster?'…':tilGodk} sub="venter" accent={tilGodk>0} /></Card>
        <Card padded><KPI label="Godkjente" value={laster?'…':telFilt('godkjent')} sub="i år" /></Card>
        <Card padded><KPI label="Utkast" value={laster?'…':telFilt('utkast')} sub="ikke sendt" /></Card>
        <Card padded><KPI label="Totalt" value={laster?'…':endringer.length} sub="registrerte" /></Card>
      </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:'flex', gap:6, marginBottom:14 }}>
        {[['alle','Alle'],['til_godkjenning','Til godkjenning'],['godkjent','Godkjente'],['utkast','Utkast'],['avvist','Avviste']].map(([k,l]) => (
          <button key={k} onClick={()=>setStatusFilt(k)} className="ok-btn ok-btn--sm" style={{
            background: statusFilt===k ? SK.ink : 'transparent',
            color: statusFilt===k ? '#fff' : SK.ink,
            borderColor: statusFilt===k ? SK.ink : 'rgba(17,24,61,.15)',
          }}>{l} {k!=='alle'?`(${telFilt(k)})`:''}</button>
        ))}
      </div>

      <Card padded={false}>
        {laster ? (
          <div style={{ padding:32, textAlign:'center', color:SK.soft }}>Laster…</div>
        ) : filtrert.length === 0 ? (
          <div style={{ padding:32, textAlign:'center', color:SK.soft }}>Ingen personalendringer.</div>
        ) : (
          <table className="ok-table">
            <thead><tr>
              <th style={{ paddingLeft:18 }}>Endring</th>
              <th>Ansatt</th>
              <th>Type</th>
              <th>Ikrafttredelse</th>
              <th>Godkjenner</th>
              <th>Status</th>
            </tr></thead>
            <tbody>
              {filtrert.map(e => {
                const type  = PE_TYPE[e.type] || PE_TYPE.annet;
                const satus = PE_STATUS[e.status] || PE_STATUS.utkast;
                const erValgt = e.id === valgtId;
                return (
                  <tr key={e.id} onClick={() => setValgtId(erValgt?null:e.id)} style={{
                    background: erValgt ? SK.iceBlueLight : 'transparent',
                    borderLeft: erValgt ? `3px solid ${SK.coral}` : '3px solid transparent',
                    cursor:'pointer',
                  }}>
                    <td style={{ paddingLeft:18 }}>
                      <div style={{ fontWeight:600, fontSize:12.5 }}>{e.tittel}</div>
                      {e.beskrivelse && <div style={{ fontSize:11.5, color:SK.soft, marginTop:2 }}>{e.beskrivelse.slice(0,60)}{e.beskrivelse.length>60?'…':''}</div>}
                    </td>
                    <td style={{ fontSize:12 }}>{e.profil?.navn || e.profil?.epost || '—'}</td>
                    <td>
                      <span style={{ fontSize:11, fontWeight:600, padding:'2px 8px', borderRadius:99,
                        background:`${type.farge}20`, color:type.farge }}>{type.label}</span>
                    </td>
                    <td style={{ fontSize:12 }}>{e.ikrafttredelse ? new Date(e.ikrafttredelse).toLocaleDateString('nb-NO') : '—'}</td>
                    <td style={{ fontSize:12, color:SK.soft }}>{e.godkjenner?.navn || '—'}</td>
                    <td>
                      <span style={{ fontSize:11, fontWeight:600, padding:'2px 8px', borderRadius:99,
                        background:satus.bg, color:satus.fg }}>{satus.label}</span>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </Card>

      {valgtEndring && (
        <PEEndringDetalj endring={valgtEndring} brukerId={brukerId}
          onOppdatert={res => setEndringer(prev => prev.map(e => e.id===res.id ? res : e))}
          onLukk={() => setValgtId(null)} />
      )}
    </div>
  );
}

// Kompatibilitet med prototype-app router
function NyPersonalendringModal({ open, onClose }) { return null; }
function UtgaaendeKontrakterTab({ go }) { return <PersonalEndringerTab go={go} />; }
function EmployeesList({ go }) { return <PersonalEndringerTab go={go} />; }

Object.assign(window, { PersonalEndringerTab, EmployeesList, UtgaaendeKontrakterTab, NyPersonalendringModal });