// ressursbank.jsx — Ressursbank med Supabase + wizard for prosjektoppstart
// Erstatter RessursbankWorkspace og ProjectMaalView

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

async function RB_hentMaler() {
  const { data, error } = await window._sb
    .from('ressursbank_maler').select('*').eq('aktiv', true).order('tittel');
  if (error) throw error;
  return data || [];
}

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

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

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

const RB_KAT_FARGER = {
  aft:      '#586ba4',
  ips:      '#08605f',
  vta:      '#3a8fb7',
  internt:  '#8e5a05',
  bistro:   '#a01a25',
  sykkel:   '#4a3a7a',
  generelt: '#9aa3b8',
};

const RB_STATISKE_RAMMEVERK = [
  { id:'rf1', tittel:'Arbeidsforberedende trening (AFT)', kategori:'aft', beskrivelse:'Nasjonal tiltaksstandard for AFT. Krav, resultatkrav og rapporteringsmal fra NAV.' },
  { id:'rf2', tittel:'Individual Placement and Support (IPS)', kategori:'ips', beskrivelse:'Evidensbasert metode for jobbstøtte integrert i behandling. WHO-anbefalt.' },
  { id:'rf3', tittel:'Varig tilrettelagt arbeid (VTA)', kategori:'vta', beskrivelse:'Tilrettelagte arbeidsoppgaver for personer med varig nedsatt arbeidsevne.' },
  { id:'rf4', tittel:'Supported Employment (SE)', kategori:'generelt', beskrivelse:'Sju-stegs jobbstøttemetodikk. Brukes på tvers av tiltakstyper.' },
  { id:'rf5', tittel:'ISO 9001:2015 – kvalitetsledelse', kategori:'internt', beskrivelse:'Internasjonalt rammeverk for kvalitetsstyring. OsloKollega er sertifisert.' },
  { id:'rf6', tittel:'EQUASSurance', kategori:'generelt', beskrivelse:'Europeisk kvalitetssystem for sosiale tjenester. Sertifisering fornyes 2027.' },
];

const RB_STATISKE_DOKUMENTER = [
  { id:'d1', tittel:'Tiltaksrapport NAV – mal',       type:'Rapport',  format:'DOCX', kategori:'aft' },
  { id:'d2', tittel:'Deltakerkontrakt AFT',            type:'Kontrakt', format:'DOCX', kategori:'aft' },
  { id:'d3', tittel:'IPS-rapport kvartalsvis',         type:'Rapport',  format:'XLSX', kategori:'ips' },
  { id:'d4', tittel:'VTA arbeidsplan – mal',           type:'Plan',     format:'DOCX', kategori:'vta' },
  { id:'d5', tittel:'Prosjektmandat – intern mal',     type:'Mandat',   format:'DOCX', kategori:'internt' },
  { id:'d6', tittel:'Risikoanalyse – mal',             type:'Analyse',  format:'XLSX', kategori:'generelt' },
  { id:'d7', tittel:'Statusrapport prosjekt',          type:'Rapport',  format:'PPTX', kategori:'internt' },
  { id:'d8', tittel:'Avviksregistrering ISO',          type:'Skjema',   format:'DOCX', kategori:'internt' },
];

// ── MalKort ────────────────────────────────────────────────────

function RBMalKort({ mal, onClick }) {
  const farge = RB_KAT_FARGER[mal.kategori || mal.type] || RB_KAT_FARGER.generelt;
  return (
    <div onClick={onClick} style={{
      cursor:'pointer', padding:'14px 16px', borderRadius:10,
      background: SK.pureWhite, border:'1px solid rgba(17,24,61,.08)',
      borderLeft:`4px solid ${farge}`, transition:'all .12s',
    }}>
      <div style={{ fontWeight:600, fontSize:13, marginBottom:4 }}>{mal.tittel}</div>
      {mal.beskrivelse && <div style={{ fontSize:12, color:SK.soft, lineHeight:1.5, marginBottom:8 }}>{mal.beskrivelse}</div>}
      <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
        {mal.type && <span style={{ fontSize:10.5, fontWeight:600, padding:'2px 7px', borderRadius:99, background:SK.iceBlue, color:SK.ink }}>{mal.type}</span>}
        {mal.varighet && <span style={{ fontSize:10.5, color:SK.soft }}>⏱ {mal.varighet}</span>}
        {mal.deltakere && <span style={{ fontSize:10.5, color:SK.soft }}>👥 {mal.deltakere}</span>}
      </div>
    </div>
  );
}

// ── Ny mal-skjema ──────────────────────────────────────────────

function RBNyMalSkjema({ onLagret, onAvbryt, brukerId }) {
  const [tittel,   setTittel]   = React.useState('');
  const [type,     setType]     = React.useState('');
  const [kategori, setKategori] = React.useState('generelt');
  const [besk,     setBesk]     = React.useState('');
  const [varighet, setVarighet] = React.useState('');
  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);
    try {
      const res = await RB_lagreMal({ tittel, type, kategori, beskrivelse: besk, varighet, eier_id: 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 };

  return (
    <div style={{ padding:'20px 22px' }}>
      <div style={{ fontSize:14, fontWeight:600, marginBottom:16 }}>Ny mal / ressurs</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:18 }}>
        <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)} autoFocus style={inp} />
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Type</label>
          <input className="ok-input" value={type} onChange={e=>setType(e.target.value)} placeholder="f.eks. Prosjektmal" style={inp} />
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Kategori</label>
          <select className="ok-input" value={kategori} onChange={e=>setKategori(e.target.value)} style={inp}>
            {Object.keys(RB_KAT_FARGER).map(k => <option key={k} value={k}>{k[0].toUpperCase()+k.slice(1)}</option>)}
          </select>
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Estimert varighet</label>
          <input className="ok-input" value={varighet} onChange={e=>setVarighet(e.target.value)} placeholder="f.eks. 6 måneder" style={inp} />
        </div>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Beskrivelse</label>
          <textarea className="ok-input" value={besk} onChange={e=>setBesk(e.target.value)}
            rows={3} style={{ ...inp, resize:'vertical', fontFamily:'inherit' }} />
        </div>
      </div>
      <div style={{ display:'flex', gap:8 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>{laster?'Lagrer…':'Lagre mal'}</Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

// ── Hoved­komponent ────────────────────────────────────────────

function RessursbankWorkspace({ go }) {
  const [maler,    setMaler]    = React.useState([]);
  const [laster,   setLaster]   = React.useState(true);
  const [feil,     setFeil]     = React.useState(null);
  const [tab,      setTab]      = React.useState('maler');
  const [sokTekst, setSokTekst] = React.useState('');
  const [aktivKat, setAktivKat] = React.useState(null);
  const [valgtMal, setValgtMal] = 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));
    RB_hentMaler().then(setMaler).catch(e => setFeil(e.message)).finally(() => setLaster(false));
  }, []);

  const alleKat = [...new Set([...maler.map(m => m.kategori), ...RB_STATISKE_RAMMEVERK.map(r => r.kategori)])].filter(Boolean);

  const filtrertMaler = maler.filter(m => {
    if (aktivKat && m.kategori !== aktivKat) return false;
    if (sokTekst && !(m.tittel||'').toLowerCase().includes(sokTekst.toLowerCase()) &&
        !(m.beskrivelse||'').toLowerCase().includes(sokTekst.toLowerCase())) return false;
    return true;
  });

  const filtrertRammeverk = RB_STATISKE_RAMMEVERK.filter(r => !aktivKat || r.kategori === aktivKat);
  const filtrertDokumenter = RB_STATISKE_DOKUMENTER.filter(d => !aktivKat || d.kategori === aktivKat);

  const tabs = [
    { id:'maler',      label:`Prosjektmaler (${maler.length})` },
    { id:'rammeverk',  label:`Rammeverk (${RB_STATISKE_RAMMEVERK.length})` },
    { id:'dokumenter', label:`Dokumentmaler (${RB_STATISKE_DOKUMENTER.length})` },
  ];

  if (visNy) return (
    <div className="ok-content__inner" style={{ maxWidth:700 }}>
      <Card padded={false}>
        <RBNyMalSkjema brukerId={brukerId}
          onLagret={res => { setMaler(prev => [...prev, res]); setVisNy(false); }}
          onAvbryt={() => setVisNy(false)} />
      </Card>
    </div>
  );

  return (
    <div className="ok-content__inner" style={{ maxWidth:1200 }}>
      <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' }}>Arbeid · Verktøy</div>
          <h1 style={{ margin:'6px 0 0', fontSize:28, fontWeight:600, letterSpacing:-0.02 }}>Ressursbank</h1>
          <div style={{ marginTop:4, color:SK.soft, fontSize:13 }}>Prosjektmaler, rammeverk og dokumentmaler</div>
        </div>
        <div style={{ display:'flex', gap:8 }}>
          <Button variant="primary" icon={I.plus} onClick={() => setVisNy(true)}>Ny mal</Button>
        </div>
      </div>

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

      {/* Filter */}
      <div style={{ display:'flex', gap:8, marginBottom:18, flexWrap:'wrap', alignItems:'center' }}>
        <input className="ok-input ok-input--search" placeholder="Søk ressurser…"
          value={sokTekst} onChange={e=>setSokTekst(e.target.value)}
          style={{ maxWidth:220, padding:'7px 12px 7px 32px' }} />
        <button onClick={()=>setAktivKat(null)} className="ok-btn ok-btn--sm" style={{
          background: !aktivKat ? SK.ink : 'transparent', color: !aktivKat ? '#fff' : SK.ink,
          borderColor: !aktivKat ? SK.ink : 'rgba(17,24,61,.15)',
        }}>Alle</button>
        {alleKat.map(k => (
          <button key={k} onClick={()=>setAktivKat(aktivKat===k?null:k)} className="ok-btn ok-btn--sm" style={{
            background: aktivKat===k ? (RB_KAT_FARGER[k]||SK.ink) : 'transparent',
            color: aktivKat===k ? '#fff' : SK.ink,
            borderColor: aktivKat===k ? (RB_KAT_FARGER[k]||SK.ink) : 'rgba(17,24,61,.15)',
          }}>{k[0].toUpperCase()+k.slice(1)}</button>
        ))}
      </div>

      <Tabs tabs={tabs} value={tab} onChange={setTab} />

      {tab === 'maler' && (
        laster ? <div style={{ padding:32, textAlign:'center', color:SK.soft }}>Laster…</div> :
        filtrertMaler.length === 0 ? (
          <Card padded>
            <div style={{ padding:'32px 20px', textAlign:'center', color:SK.soft }}>
              <div style={{ fontSize:14, fontWeight:600, color:SK.ink, marginBottom:8 }}>Ingen prosjektmaler ennå</div>
              <div style={{ fontSize:13, marginBottom:16 }}>Opprett din første mal for å gjenbruke prosjektoppsett.</div>
              <Button variant="primary" icon={I.plus} onClick={() => setVisNy(true)}>Opprett mal</Button>
            </div>
          </Card>
        ) : (
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(300px,1fr))', gap:12 }}>
            {filtrertMaler.map(m => (
              <RBMalKort key={m.id} mal={m} onClick={() => setValgtMal(valgtMal?.id===m.id?null:m)} />
            ))}
          </div>
        )
      )}

      {tab === 'rammeverk' && (
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          {filtrertRammeverk.map(r => {
            const farge = RB_KAT_FARGER[r.kategori] || RB_KAT_FARGER.generelt;
            return (
              <Card key={r.id} padded style={{ borderLeft:`4px solid ${farge}` }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:12 }}>
                  <div>
                    <div style={{ fontWeight:600, fontSize:13.5, marginBottom:4 }}>{r.tittel}</div>
                    <div style={{ fontSize:13, color:SK.soft, lineHeight:1.5 }}>{r.beskrivelse}</div>
                  </div>
                  <span style={{ fontSize:10.5, fontWeight:600, padding:'2px 8px', borderRadius:99,
                    background:SK.iceBlue, color:SK.ink, flexShrink:0 }}>
                    {r.kategori.toUpperCase()}
                  </span>
                </div>
              </Card>
            );
          })}
        </div>
      )}

      {tab === 'dokumenter' && (
        <Card padded={false}>
          <table className="ok-table">
            <thead><tr>
              <th style={{ paddingLeft:18 }}>Dokument</th>
              <th>Type</th>
              <th>Format</th>
              <th>Kategori</th>
            </tr></thead>
            <tbody>
              {filtrertDokumenter.map(d => {
                const farge = RB_KAT_FARGER[d.kategori] || RB_KAT_FARGER.generelt;
                return (
                  <tr key={d.id}>
                    <td style={{ paddingLeft:18 }}>
                      <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                        <span style={{ width:6, height:6, borderRadius:'50%', background:farge, flexShrink:0 }} />
                        <span style={{ fontWeight:600, fontSize:12.5 }}>{d.tittel}</span>
                      </div>
                    </td>
                    <td style={{ fontSize:12, color:SK.soft }}>{d.type}</td>
                    <td>
                      <span style={{ fontSize:10.5, fontWeight:700, padding:'2px 7px', borderRadius:4,
                        background: d.format==='DOCX'?'#e9eef7':d.format==='XLSX'?'#dbeed8':'#fdeac8',
                        color: d.format==='DOCX'?'#3c4a6b':d.format==='XLSX'?'#1b6a2e':'#8e5a05' }}>
                        {d.format}
                      </span>
                    </td>
                    <td style={{ fontSize:12, color:SK.soft }}>{d.kategori}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>
      )}
    </div>
  );
}

// ProjectMaalView brukes fra prototype-screens-2 / ProjectDetail
function ProjectMaalView({ projectId, go }) {
  return (
    <Card padded>
      <div style={{ padding:'32px 20px', textAlign:'center', color:SK.soft }}>
        <div style={{ fontSize:14, fontWeight:600, color:SK.ink, marginBottom:8 }}>Mål & resultater</div>
        <div style={{ fontSize:13, marginBottom:16 }}>
          Resultatmål og KPI-er kobles til Ressursbanken og NAV-rapportering.
        </div>
        <Button onClick={() => go({ screen:'ressursbank' })}>Åpne Ressursbank</Button>
      </div>
    </Card>
  );
}

Object.assign(window, { RessursbankWorkspace, ProjectMaalView });