// prosjekter.jsx — Prosjektportefølje med Supabase
// Erstatter ProjectList og ProjectDetail fra prototype-screens.jsx / prototype-screens-2.jsx

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

async function PRO_hentAlt() {
  const [p, m, t, pr] = await Promise.all([
    window._sb.from('prosjekter')
      .select('*, eier:profiles!eier_id(id,navn,epost,roller(farge)), enhet:enheter!enhet_id(id,navn)')
      .eq('aktiv', true).order('slutt_dato'),
    window._sb.from('profiles').select('id,navn,epost,roller(navn,farge)').order('navn'),
    window._sb.from('tiltak')
      .select('id,tittel,status,frist,ansvarlig_id,prosjekt_id,ansvarlig:profiles!ansvarlig_id(id,navn,roller(farge))')
      .not('prosjekt_id','is',null),
    window._sb.from('protokoller')
      .select('id,tittel,dato,status,mote_id,moter(navn,farge)').order('dato',{ascending:false}),
  ]);
  return {
    prosjekter: p.data || [],
    profiler:   m.data || [],
    tiltak:     t.data || [],
    protokoller: pr.data || [],
  };
}

async function PRO_hentProsjektMedlemmer(prosjektId) {
  const { data } = await window._sb.from('prosjekt_medlemmer')
    .select('*, profiles(id,navn,epost,roller(navn,farge))')
    .eq('prosjekt_id', prosjektId);
  return data || [];
}

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

async function PRO_oppdater(id, felter) {
  const { eier, enhet, prosjekt_medlemmer, ...rene } = felter;
  const { data, error } = await window._sb.from('prosjekter').update(rene).eq('id', id).select().single();
  if (error) throw error;
  return data;
}

async function PRO_leggTilMedlem(prosjektId, profilId, rolle) {
  await window._sb.from('prosjekt_medlemmer')
    .upsert({ prosjekt_id: prosjektId, profil_id: profilId, rolle }, { onConflict: 'prosjekt_id,profil_id' });
}

async function PRO_fjernMedlem(id) {
  await window._sb.from('prosjekt_medlemmer').delete().eq('id', id);
}

async function PRO_kobleProtokoll(tiltakIds, prosjektId) {
  if (!tiltakIds.length) return;
  await window._sb.from('tiltak').update({ prosjekt_id: prosjektId }).in('id', tiltakIds);
}

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

const PRO_STATUS = {
  track: { label: 'På spor',    bg: '#dbeed8', fg: '#1b6a2e' },
  risk:  { label: 'I risiko',   bg: '#fdeac8', fg: '#8e5a05' },
  delay: { label: 'Forsinket',  bg: '#fcddde', fg: '#8a1620' },
  draft: { label: 'Kladd',      bg: '#e9eef7', fg: '#3c4a6b' },
  done:  { label: 'Fullført',   bg: '#dbeed8', fg: '#1b6a2e' },
};
const PRO_TYPE_LABEL = {
  aft:'AFT', ips:'IPS', vta:'VTA', bistro:'OK:bistro',
  sykkel:'OK:sykkel', data:'OK:data', internt:'Internt', annet:'Annet',
};
const PRO_FASE = ['planlegging','gjennomføring','avslutning','arkivert'];

function proFmtDager(dato) {
  if (!dato) return null;
  return Math.ceil((new Date(dato) - new Date()) / 86400000);
}
function proFmtDato(d) {
  if (!d) return '—';
  return new Date(d).toLocaleDateString('nb-NO', { day:'numeric', month:'short', year:'numeric' });
}
function proFmtKr(n) {
  if (!n) return '0';
  return new Intl.NumberFormat('nb-NO', { notation: n >= 1e6 ? 'compact' : 'standard', maximumFractionDigits: 1 }).format(n);
}

function ProFremdrift({ value, status, style }) {
  const farge = status === 'delay' ? '#f2545c' : status === 'risk' ? '#f2cc8f' : '#2f9e44';
  return (
    <div style={{ height: 6, borderRadius: 99, background: 'rgba(17,24,61,.08)', overflow: 'hidden', ...style }}>
      <div style={{ width: `${Math.min(value, 100)}%`, height: '100%', background: farge, borderRadius: 99, transition: 'width .3s' }} />
    </div>
  );
}

function ProStatusPill({ status }) {
  const t = PRO_STATUS[status] || PRO_STATUS.draft;
  return (
    <span style={{ fontSize: 11, fontWeight: 600, padding: '2px 8px', borderRadius: 99, background: t.bg, color: t.fg }}>
      {t.label}
    </span>
  );
}

// ── ProsjektSkjema ─────────────────────────────────────────────

function ProsjektSkjema({ prosjekt, profiler, enheter, brukerId, onLagret, onAvbryt }) {
  const [navn,      setNavn]      = React.useState(prosjekt?.navn        || '');
  const [besk,      setBesk]      = React.useState(prosjekt?.beskrivelse || '');
  const [type,      setType]      = React.useState(prosjekt?.type        || 'internt');
  const [fase,      setFase]      = React.useState(prosjekt?.fase        || 'planlegging');
  const [status,    setStatus]    = React.useState(prosjekt?.status      || 'track');
  const [fremdrift, setFremdrift] = React.useState(prosjekt?.fremdrift   ?? 0);
  const [eierId,    setEierId]    = React.useState(prosjekt?.eier_id     || '');
  const [enhetId,   setEnhetId]   = React.useState(prosjekt?.enhet_id   || '');
  const [startDato, setStartDato] = React.useState(prosjekt?.start_dato || '');
  const [sluttDato, setSluttDato] = React.useState(prosjekt?.slutt_dato || '');
  const [budsjett,  setBudsjett]  = React.useState(prosjekt?.budsjett   || '');
  const [forbruk,   setForbruk]   = React.useState(prosjekt?.forbruk    || '');
  const [milepæl,   setMilepæl]   = React.useState(prosjekt?.neste_milepæl || '');
  const [laster,    setLaster]    = React.useState(false);
  const [feil,      setFeil]      = React.useState(null);

  const lagre = async () => {
    if (!navn.trim()) { setFeil('Navn er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    const felter = {
      navn, beskrivelse: besk, type, fase, status,
      fremdrift: parseInt(fremdrift) || 0,
      eier_id: eierId || null, enhet_id: enhetId || null,
      start_dato: startDato || null, slutt_dato: sluttDato || null,
      budsjett: parseInt(budsjett) || 0, forbruk: parseInt(forbruk) || 0,
      neste_milepæl: milepæl || null,
      opprettet_av: brukerId,
    };
    try {
      const res = prosjekt ? await PRO_oppdater(prosjekt.id, felter) : await PRO_opprett(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: '20px 22px' }}>
      <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 16 }}>{prosjekt ? 'Rediger prosjekt' : 'Nytt prosjekt'}</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={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Prosjektnavn *</label>
          <input className="ok-input" value={navn} onChange={e=>setNavn(e.target.value)} autoFocus style={inp} placeholder="f.eks. AFT 2027 – høstkohort" />
        </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(PRO_TYPE_LABEL).map(([k,v]) => <option key={k} value={k}>{v}</option>)}
          </select>
        </div>

        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Fase</label>
          <select className="ok-input" value={fase} onChange={e=>setFase(e.target.value)} style={inp}>
            {PRO_FASE.map(f => <option key={f} value={f}>{f[0].toUpperCase()+f.slice(1)}</option>)}
          </select>
        </div>

        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Status</label>
          <select className="ok-input" value={status} onChange={e=>setStatus(e.target.value)} style={inp}>
            {Object.entries(PRO_STATUS).map(([k,v]) => <option key={k} value={k}>{v.label}</option>)}
          </select>
        </div>

        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Fremdrift ({fremdrift}%)</label>
          <input className="ok-input" type="range" min="0" max="100" value={fremdrift}
            onChange={e=>setFremdrift(e.target.value)} style={{ padding:'6px 0' }} />
        </div>

        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Prosjekteier</label>
          <select className="ok-input" value={eierId} onChange={e=>setEierId(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' }}>
          <label style={lbl}>Enhet / avdeling</label>
          <select className="ok-input" value={enhetId} onChange={e=>setEnhetId(e.target.value)} style={inp}>
            <option value="">— Ikke satt —</option>
            {enheter.map(e => <option key={e.id} value={e.id}>{e.navn}</option>)}
          </select>
        </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>

        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Budsjett (kr)</label>
          <input className="ok-input" type="number" value={budsjett} onChange={e=>setBudsjett(e.target.value)} style={inp} placeholder="f.eks. 2400000" />
        </div>

        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Forbruk (kr)</label>
          <input className="ok-input" type="number" value={forbruk} onChange={e=>setForbruk(e.target.value)} style={inp} placeholder="f.eks. 1200000" />
        </div>

        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={lbl}>Neste milepæl</label>
          <input className="ok-input" value={milepæl} onChange={e=>setMilepæl(e.target.value)} style={inp} placeholder="f.eks. Halvtidsevaluering · 12. juni" />
        </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…':(prosjekt?'Lagre endringer':'Opprett prosjekt')}</Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

// ── ProsjektDetail ─────────────────────────────────────────────

function ProjectDetail({ id, go }) {
  const [prosjekt,   setProsjekt]   = React.useState(null);
  const [medlemmer,  setMedlemmer]  = React.useState([]);
  const [tiltak,     setTiltak]     = React.useState([]);
  const [profiler,   setProfiler]   = React.useState([]);
  const [enheter,    setEnheter]    = React.useState([]);
  const [laster,     setLaster]     = React.useState(true);
  const [tab,        setTab]        = React.useState('oversikt');
  const [redigerer,  setRedigerer]  = React.useState(false);
  const [brukerId,   setBrukerId]   = React.useState(null);
  const [nyMedlem,   setNyMedlem]   = React.useState('');
  const [nyRolle,    setNyRolle]    = React.useState('medlem');

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

  async function lastInn() {
    setLaster(true);
    const [pRes, mRes, tRes, prRes, eRes] = await Promise.all([
      window._sb.from('prosjekter').select('*, eier:profiles!eier_id(id,navn), enhet:enheter!enhet_id(id,navn)').eq('id', id).single(),
      PRO_hentProsjektMedlemmer(id),
      window._sb.from('tiltak').select('*, ansvarlig:profiles!ansvarlig_id(id,navn,roller(farge))').eq('prosjekt_id', id).order('frist'),
      window._sb.from('profiles').select('id,navn,epost,roller(navn,farge)').order('navn'),
      window._sb.from('enheter').select('id,navn').eq('aktiv',true).order('sortering'),
    ]);
    setProsjekt(pRes.data);
    setMedlemmer(mRes);
    setTiltak(tRes.data || []);
    setProfiler(prRes.data || []);
    setEnheter(eRes.data || []);
    setLaster(false);
  }

  if (laster || !prosjekt) return <div className="ok-content__inner" style={{ padding:32, color:SK.soft }}>Laster prosjekt…</div>;

  if (redigerer) return (
    <div className="ok-content__inner" style={{ maxWidth:800 }}>
      <Card padded={false}>
        <ProsjektSkjema prosjekt={prosjekt} profiler={profiler} enheter={enheter} brukerId={brukerId}
          onLagret={res => { setProsjekt(res); setRedigerer(false); }}
          onAvbryt={() => setRedigerer(false)} />
      </Card>
    </div>
  );

  const dager      = proFmtDager(prosjekt.slutt_dato);
  const budgPct    = prosjekt.budsjett ? Math.round((prosjekt.forbruk / prosjekt.budsjett) * 100) : 0;
  const åpneTiltak = tiltak.filter(t => t.status !== 'done' && t.status !== 'avvist');

  const tabs = [
    { id:'oversikt',   label:'Oversikt' },
    { id:'tiltak',     label:`Tiltak (${åpneTiltak.length})` },
    { id:'team',       label:`Team (${medlemmer.length})` },
    { id:'okonomi',    label:'Økonomi' },
  ];

  return (
    <div className="ok-content__inner" style={{ maxWidth:1200 }}>
      <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', marginBottom:18 }}>
        <div style={{ flex:1 }}>
          <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:6 }}>
            <button onClick={() => go({ screen:'projects' })}
              style={{ background:'none', border:'none', cursor:'pointer', color:SK.soft, fontSize:12, fontFamily:'inherit', padding:0 }}>
              ← Alle prosjekter
            </button>
          </div>
          <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:6 }}>
            <ProStatusPill status={prosjekt.status} />
            <span style={{ fontSize:11.5, color:SK.soft }}>{prosjekt.fase[0].toUpperCase()+prosjekt.fase.slice(1)}</span>
            {prosjekt.enhet?.navn && <><span style={{ color:SK.soft }}>·</span><span style={{ fontSize:11.5, color:SK.soft }}>{prosjekt.enhet.navn}</span></>}
          </div>
          <h1 style={{ margin:0, fontSize:26, fontWeight:600, letterSpacing:-0.02 }}>{prosjekt.navn}</h1>
          {prosjekt.beskrivelse && <div style={{ marginTop:4, color:SK.soft, fontSize:13 }}>{prosjekt.beskrivelse}</div>}
        </div>
        <div style={{ display:'flex', gap:8, flexShrink:0 }}>
          <Button size="sm" variant="primary" onClick={() => setRedigerer(true)}>Rediger</Button>
        </div>
      </div>

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

      {tab === 'oversikt' && (
        <>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:14 }}>
            <Card padded>
              <KPI label="Fremdrift" value={`${prosjekt.fremdrift}%`} sub={prosjekt.fase} />
              <ProFremdrift value={prosjekt.fremdrift} status={prosjekt.status} style={{ marginTop:10 }} />
            </Card>
            <Card padded>
              <KPI label="Frist" value={proFmtDato(prosjekt.slutt_dato)}
                sub={dager === null ? '—' : dager < 0 ? `${Math.abs(dager)} dgr forsinket` : `om ${dager} dgr`}
                accent={dager !== null && dager < 14} />
            </Card>
            <Card padded>
              <KPI label="Budsjett" value={`${budgPct}%`}
                sub={`${proFmtKr(prosjekt.forbruk)} av ${proFmtKr(prosjekt.budsjett)} kr`}
                accent={budgPct > 85} />
              <ProFremdrift value={budgPct} status={budgPct > 85 ? 'risk' : 'track'} style={{ marginTop:10 }} />
            </Card>
            <Card padded>
              <KPI label="Åpne tiltak" value={åpneTiltak.length}
                sub={`${tiltak.filter(t=>t.status==='done').length} fullført`}
                accent={åpneTiltak.length > 5} />
            </Card>
          </div>

          <div style={{ display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:14 }}>
            <Card padded={false}>
              <div style={{ padding:'12px 18px', borderBottom:'1px solid rgba(17,24,61,.08)', fontWeight:600, fontSize:13 }}>
                Aktive tiltak
              </div>
              {åpneTiltak.slice(0,5).map((t,i) => {
                const farge = t.ansvarlig?.roller?.farge || '#9aa3b8';
                const ini   = t.ansvarlig?.navn?.split(' ').map(n=>n[0]).slice(0,2).join('').toUpperCase() || '?';
                return (
                  <div key={t.id} style={{ padding:'11px 18px', borderTop: i ? '1px solid rgba(17,24,61,.06)' : 'none',
                    display:'flex', gap:12, alignItems:'flex-start' }}>
                    <div style={{ flex:1 }}>
                      <div style={{ fontSize:13 }}>{t.tittel}</div>
                      <div style={{ fontSize:11, color:SK.soft, marginTop:3, display:'flex', alignItems:'center', gap:6 }}>
                        <div style={{ width:16, height:16, borderRadius:'50%', background:farge, color:'#fff',
                          display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize:8, fontWeight:700 }}>{ini}</div>
                        {t.ansvarlig?.navn}
                        {t.frist && <span>· frist {proFmtDato(t.frist)}</span>}
                      </div>
                    </div>
                  </div>
                );
              })}
              {åpneTiltak.length > 5 && (
                <div style={{ padding:'10px 18px', borderTop:'1px solid rgba(17,24,61,.06)' }}>
                  <button onClick={()=>setTab('tiltak')}
                    style={{ background:'none', border:'none', cursor:'pointer', color:SK.coral, fontSize:12, fontFamily:'inherit' }}>
                    Se alle {åpneTiltak.length} tiltak →
                  </button>
                </div>
              )}
            </Card>

            <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
              {prosjekt.neste_milepæl && (
                <Card padded>
                  <div style={{ fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.04, textTransform:'uppercase', marginBottom:8 }}>Neste milepæl</div>
                  <div style={{ fontWeight:600, fontSize:13 }}>{prosjekt.neste_milepæl}</div>
                </Card>
              )}
              <Card padded>
                <div style={{ fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.04, textTransform:'uppercase', marginBottom:10 }}>Team ({medlemmer.length})</div>
                {medlemmer.slice(0,4).map(m => {
                  const farge = m.profiles?.roller?.farge || '#9aa3b8';
                  const ini   = m.profiles?.navn?.split(' ').map(n=>n[0]).slice(0,2).join('').toUpperCase() || '?';
                  return (
                    <div key={m.id} style={{ display:'flex', alignItems:'center', gap:10, marginBottom:8 }}>
                      <div style={{ width:28, height:28, borderRadius:'50%', background:farge, color:'#fff',
                        display:'flex', alignItems:'center', justifyContent:'center', fontSize:9, fontWeight:700, flexShrink:0 }}>{ini}</div>
                      <div style={{ flex:1 }}>
                        <div style={{ fontSize:12.5, fontWeight:500 }}>{m.profiles?.navn||m.profiles?.epost}</div>
                        <div style={{ fontSize:11, color:SK.soft }}>{m.rolle[0].toUpperCase()+m.rolle.slice(1)}</div>
                      </div>
                      {m.profil_id === prosjekt.eier_id && (
                        <span style={{ fontSize:10, fontWeight:600, padding:'1px 6px', borderRadius:99, background:'#dbeed8', color:'#1b6a2e' }}>Eier</span>
                      )}
                    </div>
                  );
                })}
                <button onClick={()=>setTab('team')} style={{ background:'none', border:'none', cursor:'pointer', color:SK.coral, fontSize:12, fontFamily:'inherit', padding:0, marginTop:4 }}>
                  Se team →
                </button>
              </Card>
            </div>
          </div>
        </>
      )}

      {tab === 'tiltak' && (
        <Card padded={false}>
          <div style={{ padding:'12px 18px', borderBottom:'1px solid rgba(17,24,61,.08)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            <div style={{ fontWeight:600, fontSize:13 }}>Alle tiltak ({tiltak.length})</div>
            <Button size="sm" icon={I.plus} onClick={() => go({ screen:'tasks' })}>Legg til i Tiltaksplan</Button>
          </div>
          <table className="ok-table">
            <thead><tr>
              <th style={{ paddingLeft:18 }}>Tiltak</th>
              <th>Ansvarlig</th>
              <th>Frist</th>
              <th>Status</th>
            </tr></thead>
            <tbody>
              {tiltak.map(t => {
                const tone = { done:{bg:'#dbeed8',fg:'#1b6a2e'}, in_progress:{bg:'#fdeac8',fg:'#8e5a05'}, open:{bg:'#e9eef7',fg:'#3c4a6b'}, avvist:{bg:'#fcddde',fg:'#8a1620'} }[t.status] || {bg:'#e9eef7',fg:'#3c4a6b'};
                const farge = t.ansvarlig?.roller?.farge || '#9aa3b8';
                const ini   = t.ansvarlig?.navn?.split(' ').map(n=>n[0]).slice(0,2).join('').toUpperCase() || '?';
                return (
                  <tr key={t.id} style={{ opacity: t.status==='done' ? 0.55 : 1 }}>
                    <td style={{ paddingLeft:18 }}>
                      <div style={{ fontSize:12.5, textDecoration: t.status==='done'?'line-through':'none' }}>{t.tittel}</div>
                    </td>
                    <td>
                      {t.ansvarlig && (
                        <div style={{ display:'flex', alignItems:'center', gap:6 }}>
                          <div style={{ width:20, height:20, borderRadius:'50%', background:farge, color:'#fff',
                            display:'flex', alignItems:'center', justifyContent:'center', fontSize:8, fontWeight:700 }}>{ini}</div>
                          <span style={{ fontSize:12 }}>{t.ansvarlig.navn}</span>
                        </div>
                      )}
                    </td>
                    <td style={{ fontSize:12, color:SK.soft }}>{proFmtDato(t.frist)}</td>
                    <td>
                      <span style={{ fontSize:11, fontWeight:600, padding:'2px 8px', borderRadius:99, background:tone.bg, color:tone.fg }}>
                        {t.status==='done'?'Fullført':t.status==='in_progress'?'Pågår':t.status==='avvist'?'Avvist':'Åpen'}
                      </span>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>
      )}

      {tab === 'team' && (
        <Card padded>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16 }}>
            <div style={{ fontWeight:600, fontSize:13 }}>Prosjektteam</div>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(240px,1fr))', gap:10, marginBottom:20 }}>
            {medlemmer.map(m => {
              const farge = m.profiles?.roller?.farge || '#9aa3b8';
              const ini   = m.profiles?.navn?.split(' ').map(n=>n[0]).slice(0,2).join('').toUpperCase() || '?';
              return (
                <div key={m.id} style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 14px',
                  background:SK.iceBlueLight, borderRadius:10, border:'1px solid rgba(17,24,61,.08)' }}>
                  <div style={{ width:36, height:36, borderRadius:'50%', background:farge, color:'#fff',
                    display:'flex', alignItems:'center', justifyContent:'center', fontSize:11, fontWeight:700, flexShrink:0 }}>{ini}</div>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:13, fontWeight:600 }}>{m.profiles?.navn||m.profiles?.epost}</div>
                    <div style={{ fontSize:11.5, color:SK.soft }}>{m.rolle[0].toUpperCase()+m.rolle.slice(1)}</div>
                  </div>
                  <button onClick={() => PRO_fjernMedlem(m.id).then(lastInn)}
                    style={{ background:'none', border:'none', cursor:'pointer', color:SK.soft, fontSize:14, padding:'4px' }}>×</button>
                </div>
              );
            })}
          </div>
          <div style={{ display:'flex', gap:8, alignItems:'center' }}>
            <select className="ok-input" value={nyMedlem} onChange={e=>setNyMedlem(e.target.value)} style={{ padding:'8px 12px', fontSize:13, flex:1, maxWidth:300 }}>
              <option value="">Legg til teammedlem…</option>
              {profiler.filter(p => !medlemmer.find(m => m.profil_id === p.id)).map(p => (
                <option key={p.id} value={p.id}>{p.navn||p.epost}</option>
              ))}
            </select>
            <select className="ok-input" value={nyRolle} onChange={e=>setNyRolle(e.target.value)} style={{ padding:'8px 12px', fontSize:13, width:140 }}>
              {['eier','leder','medlem','observator'].map(r => <option key={r} value={r}>{r[0].toUpperCase()+r.slice(1)}</option>)}
            </select>
            <Button size="sm" variant="primary" disabled={!nyMedlem}
              onClick={() => PRO_leggTilMedlem(id, nyMedlem, nyRolle).then(() => { setNyMedlem(''); lastInn(); })}>
              Legg til
            </Button>
          </div>
        </Card>
      )}

      {tab === 'okonomi' && (
        <Card padded>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20, marginBottom:20 }}>
            {[
              ['Budsjett', `kr ${proFmtKr(prosjekt.budsjett)}`],
              ['Forbruk', `kr ${proFmtKr(prosjekt.forbruk)}`],
              ['Gjenstår', `kr ${proFmtKr((prosjekt.budsjett||0)-(prosjekt.forbruk||0))}`],
            ].map(([l,v]) => (
              <div key={l} style={{ padding:'12px 16px', background:SK.iceBlueLight, borderRadius:10 }}>
                <div style={{ fontSize:11, fontWeight:600, color:SK.soft, textTransform:'uppercase', letterSpacing:0.04, marginBottom:6 }}>{l}</div>
                <div style={{ fontSize:22, fontWeight:700 }}>{v}</div>
              </div>
            ))}
          </div>
          <div style={{ marginBottom:8, fontSize:12, color:SK.soft }}>Budsjettforbruk</div>
          <ProFremdrift value={budgPct} status={budgPct > 85 ? 'risk' : budgPct > 70 ? 'risk' : 'track'} style={{ height:10 }} />
          <div style={{ fontSize:12, color:SK.soft, marginTop:6 }}>{budgPct}% brukt</div>
          <div style={{ marginTop:20, fontSize:12.5, color:SK.soft, lineHeight:1.6, padding:'12px 16px', background:SK.iceBlueLight, borderRadius:8 }}>
            Detaljert regnskap kobles til Visma/Finago ved integrasjon.
          </div>
        </Card>
      )}
    </div>
  );
}

// ── ProjectList ────────────────────────────────────────────────

function ProjectList({ go }) {
  const [prosjekter, setProsjekter] = 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 [sokTekst,   setSokTekst]   = React.useState('');
  const [statusFilt, setStatusFilt] = React.useState('all');
  const [sortK,      setSortK]      = React.useState('slutt_dato');
  const [sortDir,    setSortDir]    = React.useState('asc');
  const [visSkjema,  setVisSkjema]  = 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 { prosjekter: p, profiler: pr } = await PRO_hentAlt();
      setProsjekter(p);
      setProfiler(pr);
      const eRes = await window._sb.from('enheter').select('id,navn').eq('aktiv',true).order('sortering');
      setEnheter(eRes.data || []);
    } catch(e) { setFeil(e.message); } finally { setLaster(false); }
  }

  const filtrert = React.useMemo(() => {
    let p = prosjekter.slice();
    if (statusFilt !== 'all') p = p.filter(x => x.status === statusFilt);
    if (sokTekst) {
      const q = sokTekst.toLowerCase();
      p = p.filter(x => (x.navn||'').toLowerCase().includes(q) || (x.beskrivelse||'').toLowerCase().includes(q));
    }
    p.sort((a, b) => {
      let va = a[sortK], vb = b[sortK];
      if (sortK === 'fremdrift' || sortK === 'budsjett') { va = +va||0; vb = +vb||0; }
      if (va < vb) return sortDir === 'asc' ? -1 : 1;
      if (va > vb) return sortDir === 'asc' ? 1 : -1;
      return 0;
    });
    return p;
  }, [prosjekter, statusFilt, sokTekst, sortK, sortDir]);

  const toggleSort = (k) => {
    if (sortK === k) setSortDir(d => d==='asc'?'desc':'asc');
    else { setSortK(k); setSortDir('asc'); }
  };

  const SH = ({ k, children }) => (
    <th onClick={() => toggleSort(k)} style={{ cursor:'pointer', userSelect:'none' }}>
      <span style={{ display:'inline-flex', alignItems:'center', gap:4 }}>
        {children}{sortK===k ? (sortDir==='asc' ? ' ↑' : ' ↓') : ''}
      </span>
    </th>
  );

  const totBudsjett = prosjekter.reduce((s,p) => s + (p.budsjett||0), 0);
  const aktive      = prosjekter.filter(p => p.status !== 'done' && p.fase !== 'arkivert').length;
  const forsinkede  = prosjekter.filter(p => p.status === 'delay').length;

  if (visSkjema) return (
    <div className="ok-content__inner" style={{ maxWidth:800 }}>
      <Card padded={false}>
        <ProsjektSkjema profiler={profiler} enheter={enheter} brukerId={brukerId}
          onLagret={res => { setProsjekter(prev => [res, ...prev]); setVisSkjema(false); go({ screen:'project', id:res.id }); }}
          onAvbryt={() => setVisSkjema(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' }}>Portefølje</div>
          <h1 style={{ margin:'6px 0 0', fontSize:28, fontWeight:600, letterSpacing:-0.02 }}>
            Prosjekter <span style={{ color:SK.soft, fontWeight:400 }}>· {filtrert.length}</span>
          </h1>
          <div style={{ marginTop:4, color:SK.soft, fontSize:13 }}>
            {aktive} aktive · {forsinkede > 0 && <span style={{ color:SK.coral }}>{forsinkede} forsinket · </span>}
            totalbudsjett kr {proFmtKr(totBudsjett)}
          </div>
        </div>
        <div style={{ display:'flex', gap:8 }}>
          <EksportKnapp
            data={filtrert}
            kolonner={[
              {label:'Navn', felt:'navn'},
              {label:'Type', felt:'type'},
              {label:'Fase', felt:'fase'},
              {label:'Status', felt:'status'},
              {label:'Fremdrift', felt:'fremdrift'},
              {label:'Enhet', felt:'enhet.navn'},
              {label:'Eier', felt:'eier.navn'},
              {label:'Startdato', felt:'start_dato'},
              {label:'Sluttdato', felt:'slutt_dato'},
              {label:'Budsjett', felt:'budsjett'},
              {label:'Forbruk', felt:'forbruk'},
            ]}
            filnavn="prosjekter"
          />
          <Button size="sm" onClick={lastInn}>Oppdater</Button>
          <Button variant="primary" icon={I.plus} onClick={() => setVisSkjema(true)}>Nytt prosjekt</Button>
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:18 }}>
        <Card padded><KPI label="Aktive" value={laster?'…':aktive} sub="pågår" /></Card>
        <Card padded><KPI label="Forsinkede" value={laster?'…':forsinkede} sub="over frist" accent={forsinkede>0} /></Card>
        <Card padded><KPI label="Totalbudsjett" value={laster?'…':`kr ${proFmtKr(totBudsjett)}`} sub="alle prosjekter" /></Card>
        <Card padded><KPI label="Fullførte" value={laster?'…':prosjekter.filter(p=>p.status==='done').length} sub="avsluttet" /></Card>
      </div>

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

      <Card padded={false}>
        <div style={{ padding:'12px 16px', display:'flex', gap:10, alignItems:'center', borderBottom:'1px solid rgba(17,24,61,.08)', flexWrap:'wrap' }}>
          <input className="ok-input ok-input--search" placeholder="Søk i prosjekter…"
            value={sokTekst} onChange={e=>setSokTekst(e.target.value)}
            style={{ maxWidth:240, padding:'7px 12px 7px 32px' }} />
          <div style={{ display:'flex', gap:4 }}>
            {[['all','Alle'],['track','På spor'],['risk','I risiko'],['delay','Forsinket'],['draft','Kladd'],['done','Fullført']].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}</button>
            ))}
          </div>
        </div>

        {laster ? (
          <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Laster prosjekter…</div>
        ) : (
          <div style={{ overflow:'auto' }}>
            <table className="ok-table">
              <thead><tr>
                <SH k="navn">Prosjekt</SH>
                <SH k="enhet">Enhet</SH>
                <SH k="fase">Fase</SH>
                <th>Status</th>
                <SH k="fremdrift">Fremdrift</SH>
                <SH k="slutt_dato">Frist</SH>
                <th>Eier</th>
              </tr></thead>
              <tbody>
                {filtrert.map(p => {
                  const dager = proFmtDager(p.slutt_dato);
                  const eiIni = p.eier?.navn?.split(' ').map(n=>n[0]).slice(0,2).join('').toUpperCase() || '?';
                  const eiFarge = p.eier?.roller?.farge || '#9aa3b8';
                  return (
                    <tr key={p.id} onClick={() => go({ screen:'project', id:p.id })} style={{ cursor:'pointer' }}>
                      <td style={{ paddingLeft:18 }}>
                        <div style={{ fontWeight:600, fontSize:13 }}>{p.navn}</div>
                        {p.beskrivelse && <div style={{ fontSize:11.5, color:SK.soft, marginTop:2 }}>{p.beskrivelse}</div>}
                      </td>
                      <td style={{ fontSize:12 }}>{p.enhet?.navn || '—'}</td>
                      <td style={{ fontSize:12 }}>{p.fase[0].toUpperCase()+p.fase.slice(1)}</td>
                      <td><ProStatusPill status={p.status} /></td>
                      <td style={{ width:140 }}>
                        <ProFremdrift value={p.fremdrift} status={p.status} />
                        <div style={{ fontSize:11, color:SK.soft, marginTop:4 }}>{p.fremdrift}%</div>
                      </td>
                      <td>
                        <div style={{ fontSize:12.5, fontWeight:600 }}>{proFmtDato(p.slutt_dato)}</div>
                        {dager !== null && (
                          <div style={{ fontSize:11, color: dager < 14 ? SK.coral : SK.soft, marginTop:2 }}>
                            {dager < 0 ? `${Math.abs(dager)} dgr forsinket` : `om ${dager} dgr`}
                          </div>
                        )}
                      </td>
                      <td>
                        {p.eier && (
                          <div style={{ display:'flex', alignItems:'center', gap:6 }}>
                            <div style={{ width:22, height:22, borderRadius:'50%', background:eiFarge, color:'#fff',
                              display:'flex', alignItems:'center', justifyContent:'center', fontSize:8, fontWeight:700 }}>{eiIni}</div>
                            <span style={{ fontSize:12 }}>{p.eier.navn}</span>
                          </div>
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </Card>
    </div>
  );
}

Object.assign(window, { ProjectList, ProjectDetail });