// kvalitet.jsx — Kvalitet & ISO med Supabase

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

async function KVAL_hentAvvik(filtre = {}) {
  let q = window._sb
    .from('avvik')
    .select(`*, ansvarlig:profiles!ansvarlig_id(id,navn), enhet:enheter!enhet_id(id,navn), opprettet_av:profiles!opprettet_av(id,navn)`)
    .order('oppdaget_dato', { ascending: false });
  if (filtre.status) q = q.eq('status', filtre.status);
  if (filtre.standard) q = q.eq('standard', filtre.standard);
  const { data, error } = await q;
  if (error) throw error;
  return data || [];
}

async function KVAL_hentRevisjoner() {
  const { data, error } = await window._sb
    .from('iso_revisjoner')
    .select('*, ansvarlig:profiles!ansvarlig_id(id,navn)')
    .order('dato');
  if (error) throw error;
  return data || [];
}

async function KVAL_opprettAvvik(felter) {
  const { ansvarlig, enhet, opprettet_av: ov, ...rene } = felter;
  const { data, error } = await window._sb.from('avvik').insert([rene]).select().single();
  if (error) throw error;
  return data;
}

async function KVAL_oppdaterAvvik(id, felter) {
  const { ansvarlig, enhet, opprettet_av: ov, ...rene } = felter;
  const { data, error } = await window._sb.from('avvik').update(rene).eq('id', id).select().single();
  if (error) throw error;
  return data;
}

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

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

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

const KVAL_ALVORLIGHET = {
  lav:    { label: 'Lav',    bg: '#dbeed8', fg: '#1b6a2e' },
  medium: { label: 'Medium', bg: '#fdeac8', fg: '#8e5a05' },
  høy:    { label: 'Høy',    bg: '#fcddde', fg: '#8a1620' },
  kritisk:{ label: 'Kritisk',bg: '#f2545c', fg: '#fff' },
};

const KVAL_STATUS = {
  åpen:             { label: 'Åpen',             bg: '#fcddde', fg: '#8a1620' },
  under_behandling: { label: 'Under behandling', bg: '#fdeac8', fg: '#8e5a05' },
  lukket:           { label: 'Lukket',           bg: '#dbeed8', fg: '#1b6a2e' },
};

const KVAL_TYPE = {
  avvik:       { label: 'Avvik',       bg: '#fcddde', fg: '#8a1620' },
  observasjon: { label: 'Observasjon', bg: '#fdeac8', fg: '#8e5a05' },
  forbedring:  { label: 'Forbedring',  bg: '#dbeed8', fg: '#1b6a2e' },
};

const KVAL_ISO_STANDARDER = [
  { id: '9001',  navn: 'ISO 9001:2015',  tema: 'Kvalitetsledelse', farge: '#28589f', gyldigTil: '2027-03-14', organ: 'DNV' },
  { id: '14001', navn: 'ISO 14001:2015', tema: 'Miljøledelse',     farge: '#08605f', gyldigTil: '2026-11-30', organ: 'DNV' },
];

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

// ── Avvik-skjema ──────────────────────────────────────────────

function AvvikSkjema({ avvik, profiler, enheter, brukerId, onLagret, onAvbryt }) {
  const [tittel,     setTittel]     = React.useState(avvik?.tittel || '');
  const [type,       setType]       = React.useState(avvik?.type || 'avvik');
  const [alvorlighet,setAlvorlighet]= React.useState(avvik?.alvorlighet || 'lav');
  const [status,     setStatus]     = React.useState(avvik?.status || 'åpen');
  const [standard,   setStandard]   = React.useState(avvik?.standard || '');
  const [klausul,    setKlausul]    = React.useState(avvik?.klausul || '');
  const [beskrivelse,setBeskrivelse]= React.useState(avvik?.beskrivelse || '');
  const [rotaarsak,  setRotaarsak]  = React.useState(avvik?.rotaarsak || '');
  const [korr,       setKorr]       = React.useState(avvik?.korrigerende_tiltak || '');
  const [ansvarligId,setAnsvarligId]= React.useState(avvik?.ansvarlig_id || '');
  const [enhetId,    setEnhetId]    = React.useState(avvik?.enhet_id || '');
  const [frist,      setFrist]      = React.useState(avvik?.frist || '');
  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, type, alvorlighet, status,
      standard: standard || null, klausul: klausul || null,
      beskrivelse: beskrivelse || null, rotaarsak: rotaarsak || null,
      korrigerende_tiltak: korr || null,
      ansvarlig_id: ansvarligId || null, enhet_id: enhetId || null,
      frist: frist || null, opprettet_av: brukerId,
      oppdaget_dato: avvik?.oppdaget_dato || new Date().toISOString().split('T')[0],
    };
    try {
      const res = avvik ? await KVAL_oppdaterAvvik(avvik.id, felter) : await KVAL_opprettAvvik(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 }}>{avvik ? 'Rediger avvik' : 'Registrer avvik / observasjon'}</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} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Type</label>
          <select className="ok-input" value={type} onChange={e => setType(e.target.value)} style={inp}>
            {Object.entries(KVAL_TYPE).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
          </select>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Alvorlighet</label>
          <select className="ok-input" value={alvorlighet} onChange={e => setAlvorlighet(e.target.value)} style={inp}>
            {Object.entries(KVAL_ALVORLIGHET).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
          </select>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Standard</label>
          <select className="ok-input" value={standard} onChange={e => setStandard(e.target.value)} style={inp}>
            <option value="">— Ikke ISO-relatert —</option>
            {KVAL_ISO_STANDARDER.map(s => <option key={s.id} value={s.id}>{s.navn}</option>)}
          </select>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Klausul</label>
          <input className="ok-input" value={klausul} onChange={e => setKlausul(e.target.value)} style={inp} placeholder="f.eks. 7.2" />
        </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}>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}>Frist</label>
          <input className="ok-input" type="date" value={frist} onChange={e => setFrist(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(KVAL_STATUS).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' }} />
        </div>
        <div style={{ gridColumn: '1/-1', display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Rotårsak</label>
          <textarea className="ok-input" value={rotaarsak} onChange={e => setRotaarsak(e.target.value)} rows={2} style={{ ...inp, resize: 'vertical', fontFamily: 'inherit' }} placeholder="Hva er den underliggende årsaken?" />
        </div>
        <div style={{ gridColumn: '1/-1', display: 'flex', flexDirection: 'column', gap: 5 }}>
          <label style={lbl}>Korrigerende tiltak</label>
          <textarea className="ok-input" value={korr} onChange={e => setKorr(e.target.value)} rows={2} style={{ ...inp, resize: 'vertical', fontFamily: 'inherit' }} placeholder="Hvilke tiltak er iverksatt eller planlagt?" />
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>{laster ? 'Lagrer…' : (avvik ? 'Lagre endringer' : 'Registrer')}</Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

// ── KvalitetWorkspace (hovedkomponent) ────────────────────────

function KvalitetWorkspace({ go }) {
  const [avvik,      setAvvik]      = React.useState([]);
  const [revisjoner, setRevisjoner] = React.useState([]);
  const [profiler,   setProfiler]   = React.useState([]);
  const [enheter,    setEnheter]    = React.useState([]);
  const [laster,     setLaster]     = React.useState(true);
  const [feil,       setFeil]       = React.useState(null);
  const [fane,       setFane]       = React.useState('avvik');
  const [visning,    setVisning]    = React.useState('liste');
  const [valgtAvvik, setValgtAvvik] = React.useState(null);
  const [statusFilter, setStatusFilter] = React.useState('alle');
  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 [a, r, p, e] = await Promise.all([KVAL_hentAvvik(), KVAL_hentRevisjoner(), KVAL_hentProfiler(), KVAL_hentEnheter()]);
      setAvvik(a); setRevisjoner(r); setProfiler(p); setEnheter(e);
    } catch(err) { setFeil(err.message); } finally { setLaster(false); }
  }

  const åpne = avvik.filter(a => a.status === 'åpen').length;
  const høye = avvik.filter(a => a.alvorlighet === 'høy' || a.alvorlighet === 'kritisk').length;
  const filtrerte = statusFilter === 'alle' ? avvik : avvik.filter(a => a.status === statusFilter);

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

  if (visning === 'rediger' && valgtAvvik) return (
    <div className="ok-content__inner" style={{ maxWidth: 800 }}>
      <Card padded={false}>
        <AvvikSkjema avvik={valgtAvvik} profiler={profiler} enheter={enheter} brukerId={brukerId}
          onLagret={res => { setAvvik(prev => prev.map(a => a.id === res.id ? res : a)); setValgtAvvik(null); setVisning('liste'); }}
          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 }}>Kvalitet & ISO</h1>
          <div style={{ marginTop: 4, color: SK.soft, fontSize: 13 }}>
            {avvik.length} avvik registrert · {revisjoner.length} revisjoner planlagt
            {åpne > 0 && <span style={{ color: SK.coral }}> · {åpne} åpne</span>}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button size="sm" onClick={lastInn}>Oppdater</Button>
          <Button variant="primary" icon={I.plus} onClick={() => setVisning('ny')}>Registrer avvik</Button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14, marginBottom: 22 }}>
        <Card padded><KPI label="Åpne avvik" value={laster ? '…' : åpne} sub="ikke lukket" accent={åpne > 0} /></Card>
        <Card padded><KPI label="Høy/kritisk" value={laster ? '…' : høye} sub="alvorlighet" accent={høye > 0} /></Card>
        <Card padded><KPI label="Sertifiseringer" value="2" sub="ISO 9001 + 14001" /></Card>
        <Card padded><KPI label="Neste revisjon" value="okt. 2026" sub="DNV ekstern" /></Card>
      </div>

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

      {/* ISO-sertifiseringskort */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 22 }}>
        {KVAL_ISO_STANDARDER.map(s => {
          const dagerTil = Math.ceil((new Date(s.gyldigTil) - new Date()) / 86400000);
          return (
            <div key={s.id} style={{ background: SK.pureWhite, borderRadius: 10, border: `1px solid rgba(17,24,61,.08)`, borderLeft: `4px solid ${s.farge}`, padding: '14px 16px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 13.5 }}>{s.navn}</div>
                  <div style={{ fontSize: 12, color: SK.soft, marginTop: 2 }}>{s.tema} · {s.organ}</div>
                </div>
                <span style={{ fontSize: 10, fontWeight: 600, padding: '2px 8px', borderRadius: 99, background: dagerTil > 180 ? '#dbeed8' : '#fdeac8', color: dagerTil > 180 ? '#1b6a2e' : '#8e5a05' }}>
                  Gyldig til {kvalFmtDato(s.gyldigTil)}
                </span>
              </div>
              <div style={{ marginTop: 10, fontSize: 12, color: SK.soft }}>
                Neste revisjon: {revisjoner.find(r => r.standard === s.id && r.status === 'planlagt')?.dato ? kvalFmtDato(revisjoner.find(r => r.standard === s.id && r.status === 'planlagt').dato) : '—'}
              </div>
            </div>
          );
        })}
      </div>

      {/* Faner */}
      <div style={{ display: 'flex', borderBottom: '1px solid rgba(17,24,61,.08)', marginBottom: 16 }}>
        {[['avvik', `Avvik & observasjoner (${avvik.length})`], ['revisjoner', `Revisjoner (${revisjoner.length})`]].map(([k, l]) => (
          <button key={k} onClick={() => setFane(k)} style={{
            background: 'none', border: 'none', cursor: 'pointer', padding: '9px 18px',
            fontSize: 13, 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>

      {fane === 'avvik' && (
        <div>
          <div style={{ display: 'flex', gap: 8, marginBottom: 14, flexWrap: 'wrap' }}>
            {[['alle', 'Alle'], ...Object.entries(KVAL_STATUS).map(([k, v]) => [k, v.label])].map(([k, l]) => (
              <button key={k} onClick={() => setStatusFilter(k)} style={{
                padding: '5px 12px', borderRadius: 99, fontSize: 12, cursor: 'pointer', fontFamily: 'inherit',
                border: '1px solid rgba(17,24,61,.15)',
                background: statusFilter === k ? SK.ink : 'transparent',
                color: statusFilter === k ? '#fff' : SK.ink,
              }}>{l}</button>
            ))}
          </div>
          {laster ? (
            <Card padded><div style={{ padding: 32, textAlign: 'center', color: SK.soft, fontSize: 13 }}>Laster…</div></Card>
          ) : (
            <Card padded={false}>
              {filtrerte.length === 0 ? (
                <div style={{ padding: 24, textAlign: 'center', color: SK.soft, fontSize: 13 }}>
                  {statusFilter === 'alle' ? 'Ingen avvik registrert. Bra!' : `Ingen avvik med status «${KVAL_STATUS[statusFilter]?.label}».`}
                </div>
              ) : (
                <table className="ok-table">
                  <thead>
                    <tr>
                      <th style={{ paddingLeft: 18 }}>Avvik</th>
                      <th>Type</th>
                      <th>Alvorlighet</th>
                      <th>Ansvarlig</th>
                      <th>Frist</th>
                      <th>Status</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    {filtrerte.map(a => {
                      const alv = KVAL_ALVORLIGHET[a.alvorlighet] || KVAL_ALVORLIGHET.lav;
                      const stat = KVAL_STATUS[a.status] || KVAL_STATUS.åpen;
                      const typ = KVAL_TYPE[a.type] || KVAL_TYPE.avvik;
                      return (
                        <tr key={a.id} style={{ cursor: 'pointer', borderLeft: `3px solid ${alv.bg === '#dbeed8' ? '#1b6a2e' : alv.bg === '#fdeac8' ? '#e08d3c' : '#f2545c'}` }}
                          onClick={() => { setValgtAvvik(a); setVisning('rediger'); }}>
                          <td style={{ paddingLeft: 18 }}>
                            <div style={{ fontWeight: 600, fontSize: 12.5 }}>{a.tittel}</div>
                            {a.standard && <div style={{ fontSize: 11, color: SK.soft, marginTop: 2 }}>ISO {a.standard} · §{a.klausul}</div>}
                          </td>
                          <td><span style={{ fontSize: 10, fontWeight: 600, padding: '2px 7px', borderRadius: 99, background: typ.bg, color: typ.fg }}>{typ.label}</span></td>
                          <td><span style={{ fontSize: 10, fontWeight: 600, padding: '2px 7px', borderRadius: 99, background: alv.bg, color: alv.fg }}>{alv.label}</span></td>
                          <td style={{ fontSize: 12, color: SK.soft }}>{a.ansvarlig?.navn || '—'}</td>
                          <td style={{ fontSize: 12.5, whiteSpace: 'nowrap' }}>{kvalFmtDato(a.frist)}</td>
                          <td><span style={{ fontSize: 10, fontWeight: 600, padding: '2px 7px', borderRadius: 99, background: stat.bg, color: stat.fg }}>{stat.label}</span></td>
                          <td><Button size="sm" onClick={e => { e.stopPropagation(); setValgtAvvik(a); setVisning('rediger'); }}>Rediger</Button></td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              )}
            </Card>
          )}
        </div>
      )}

      {fane === 'revisjoner' && (
        <Card padded={false}>
          <table className="ok-table">
            <thead>
              <tr>
                <th style={{ paddingLeft: 18 }}>Standard</th>
                <th>Type</th>
                <th>Dato</th>
                <th>Ansvarlig</th>
                <th>Status</th>
                <th>Funn</th>
              </tr>
            </thead>
            <tbody>
              {revisjoner.map(r => {
                const std = KVAL_ISO_STANDARDER.find(s => s.id === r.standard);
                return (
                  <tr key={r.id} style={{ borderLeft: `3px solid ${std?.farge || 'transparent'}` }}>
                    <td style={{ paddingLeft: 18 }}>
                      <div style={{ fontWeight: 600, fontSize: 12.5 }}>{std?.navn || r.standard}</div>
                    </td>
                    <td style={{ fontSize: 12.5 }}>{r.type === 'ekstern' ? 'Ekstern (DNV)' : 'Intern'}</td>
                    <td style={{ fontSize: 12.5, whiteSpace: 'nowrap' }}>{kvalFmtDato(r.dato)}</td>
                    <td style={{ fontSize: 12, color: SK.soft }}>{r.ansvarlig?.navn || '—'}</td>
                    <td>
                      <span style={{ fontSize: 10, fontWeight: 600, padding: '2px 8px', borderRadius: 99,
                        background: r.status === 'gjennomført' ? '#dbeed8' : r.status === 'planlagt' ? '#fdeac8' : '#e9eef7',
                        color: r.status === 'gjennomført' ? '#1b6a2e' : r.status === 'planlagt' ? '#8e5a05' : '#3c4a6b' }}>
                        {r.status === 'gjennomført' ? 'Gjennomført' : r.status === 'planlagt' ? 'Planlagt' : r.status}
                      </span>
                    </td>
                    <td style={{ fontSize: 12, color: SK.soft }}>
                      {r.avvik_antall > 0 ? `${r.avvik_antall} avvik` : '—'}
                      {r.merknad_antall > 0 ? ` · ${r.merknad_antall} merknader` : ''}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>
      )}
    </div>
  );
}

Object.assign(window, { KvalitetWorkspace });