// vvj-screens-3.jsx — Ansattportal (employee view, mobil-mockup)
// Hva den ansatte ser i appen sin: opptjent lønn, NyBy-oppdrag, be om forskudd, timer

function VVJPortal() {
  // Vi viser Sara Jensen som eksempel — hun har høyest opptjent
  const [valgtAnsattId, setValgtAnsattId] = React.useState('a-sj');
  const a = VVJ_ANSATTE.find(x => x.id === valgtAnsattId);
  const onb = vvjOnbScore(a.onboarding);
  const utest = vvjUtestaende(a);
  const tilgjengelig = vvjAccessPct(a);
  const ansatteTimer = VVJ_TIMER.filter(t => t.ansattId === a.id);
  const ukens = ansatteTimer.filter(t => t.date >= '2026-05-18' && t.date <= '2026-05-22');
  const ukensSum = ukens.reduce((s, t) => s + t.hours, 0);
  const ansatteForskudd = VVJ_FORSKUDD.filter(f => f.ansattId === a.id);
  const nybyTilgjengelig = VVJ_NYBY_OPPDRAG
    .filter(o => o.status === 'tilgjengelig')
    .filter(o => {
      // Match opp mot rollen
      if (a.role.includes('Sykkel')) return o.type === 'Mekanikk';
      if (a.role.includes('IT')) return o.type === 'IT';
      if (a.role.includes('Bistro') || a.role.includes('Kantine')) return o.type === 'Servering' || o.type === 'Aktivitet';
      return true;
    })
    .slice(0, 3);
  const minePåtatte = VVJ_NYBY_OPPDRAG.filter(o => o.ansattId === a.id && o.status === 'påtatt');

  const pct = a.accruedKr > 0 ? Math.round((a.paidAdvanceKr / a.accruedKr) * 100) : 0;

  // Inline-styles for phone mockup
  const phoneShell = {
    width: 360, height: 740, background: '#11183d', borderRadius: 38, padding: 9,
    boxShadow: '0 30px 60px -20px rgba(17,24,61,.3), 0 0 0 1px rgba(17,24,61,.1)',
    position: 'relative', flexShrink: 0,
  };
  const phoneScreen = {
    width: '100%', height: '100%', background: '#f6f7fb', borderRadius: 30,
    overflow: 'hidden', position: 'relative', display: 'flex', flexDirection: 'column',
  };
  const notch = {
    position: 'absolute', top: 18, left: '50%', transform: 'translateX(-50%)',
    width: 100, height: 22, background: '#11183d', borderRadius: 14, zIndex: 5,
  };

  return (
    <div>
      {/* Intro / kontekst */}
      <Card padded style={{ marginBottom: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ width: 44, height: 44, borderRadius: 10, background: SK.lightCoral, color: SK.coral, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            {VI.smile}
          </span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.08, textTransform: 'uppercase' }}>Ansattportal — mobil</div>
            <div style={{ fontSize: 14, fontWeight: 600, marginTop: 2 }}>
              Hva den ansatte ser
            </div>
            <div style={{ fontSize: 12.5, color: SK.soft, marginTop: 2 }}>
              Egen visning hvor ansatte ser opptjent lønn, ber om forskudd og påtar seg NyBy-oppdrag.
              Forhåndsvisning som administrator — bytt ansatt nedenfor.
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 11.5, color: SK.soft }}>Forhåndsvis som:</span>
            <select value={valgtAnsattId} onChange={e => setValgtAnsattId(e.target.value)}
              className="ok-input" style={{ width: 220, padding: '6px 10px' }}>
              {VVJ_ANSATTE.filter(x => x.status === 'aktiv' || x.status === 'onboarding').map(x => (
                <option key={x.id} value={x.id}>{x.name} · {x.role}</option>
              ))}
            </select>
          </div>
        </div>
      </Card>

      <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 28, alignItems: 'flex-start' }}>
        {/* PHONE */}
        <div style={phoneShell}>
          <div style={notch} />
          <div style={phoneScreen}>
            {/* Status bar */}
            <div style={{ height: 44, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: '0 28px 6px', fontSize: 13, fontWeight: 600, color: SK.ink }}>
              <span>09:14</span>
              <span style={{ display: 'flex', gap: 4, alignItems: 'center', fontSize: 11 }}>
                <svg width="16" height="11" viewBox="0 0 16 11" fill="currentColor"><rect x="0" y="6" width="3" height="5" rx="0.5"/><rect x="4.5" y="4" width="3" height="7" rx="0.5"/><rect x="9" y="2" width="3" height="9" rx="0.5"/><rect x="13.5" y="0" width="3" height="11" rx="0.5"/></svg>
                <svg width="18" height="10" viewBox="0 0 18 10" fill="none" stroke="currentColor" strokeWidth="1.2"><rect x="0.5" y="1" width="14" height="8" rx="2"/><rect x="15.5" y="3.5" width="1.5" height="3" rx="0.6" fill="currentColor"/><rect x="2" y="2.5" width="11" height="5" rx="1" fill="currentColor"/></svg>
              </span>
            </div>

            {/* App header */}
            <div style={{ padding: '8px 20px 14px', background: '#f6f7fb' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <OkLogo size={26} />
                <div style={{ fontSize: 14, fontWeight: 600 }}>OsloKollega</div>
                <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ position: 'relative', display: 'inline-flex' }}>
                    <span style={{ color: SK.ink }}>{I.bell}</span>
                    <span style={{ position: 'absolute', top: -2, right: -2, width: 8, height: 8, borderRadius: '50%', background: SK.coral, border: '1.5px solid #f6f7fb' }} />
                  </span>
                  <Avatar initials={a.initials} color={a.color} size={28} />
                </div>
              </div>
              <div style={{ fontSize: 22, fontWeight: 600, marginTop: 14, letterSpacing: -0.02 }}>Hei, {a.name.split(' ')[0]} 👋</div>
              <div style={{ fontSize: 12, color: SK.soft, marginTop: 2 }}>{a.role} · {a.avd}</div>
            </div>

            {/* Scrollable content */}
            <div style={{ flex: 1, overflowY: 'auto', padding: '0 16px 90px' }}>
              {/* Lønnskort — hero */}
              <div style={{
                background: SK.ink, color: '#fff', borderRadius: 16,
                padding: 18, marginBottom: 14, position: 'relative', overflow: 'hidden',
              }}>
                <div style={{ position: 'absolute', right: -30, top: -30, width: 140, height: 140, borderRadius: '50%', background: 'rgba(242,84,92,.15)' }} />
                <div style={{ position: 'relative' }}>
                  <div style={{ fontSize: 10.5, fontWeight: 600, color: 'rgba(255,255,255,.55)', letterSpacing: 0.08, textTransform: 'uppercase' }}>Du har opptjent</div>
                  <div style={{ fontSize: 36, fontWeight: 600, letterSpacing: -0.02, marginTop: 4, lineHeight: 1 }}>
                    {vvjFmtKr(a.accruedKr)} <span style={{ fontSize: 18, color: 'rgba(255,255,255,.55)', fontWeight: 500 }}>kr</span>
                  </div>
                  <div style={{ fontSize: 11, color: 'rgba(255,255,255,.6)', marginTop: 4 }}>
                    {a.monthHours} timer · siden 1. mai
                  </div>

                  {/* Progress */}
                  <div style={{ marginTop: 16 }}>
                    <div style={{ height: 8, background: 'rgba(255,255,255,.12)', borderRadius: 99, overflow: 'hidden' }}>
                      <div style={{ width: `${pct}%`, height: '100%', background: SK.coral, borderRadius: 99 }} />
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 11 }}>
                      <span style={{ color: 'rgba(255,255,255,.7)' }}>Forskudd brukt</span>
                      <span style={{ fontWeight: 600 }}>{vvjFmtKr(a.paidAdvanceKr)} kr</span>
                    </div>
                  </div>

                  <div style={{ marginTop: 14, padding: '12px 14px', background: 'rgba(255,255,255,.08)', borderRadius: 10 }}>
                    <div style={{ fontSize: 10.5, fontWeight: 600, color: 'rgba(255,255,255,.6)', letterSpacing: 0.06, textTransform: 'uppercase' }}>Du kan ta ut nå</div>
                    <div style={{ fontSize: 22, fontWeight: 600, marginTop: 2 }}>{vvjFmtKr(tilgjengelig)} kr</div>
                  </div>

                  <button style={{
                    width: '100%', marginTop: 12, padding: '12px 16px', border: 'none',
                    background: SK.coral, color: '#fff', borderRadius: 10,
                    fontFamily: 'Poppins', fontSize: 14, fontWeight: 600, cursor: 'pointer',
                  }}>
                    Be om forskudd nå
                  </button>
                  <div style={{ fontSize: 10.5, color: 'rgba(255,255,255,.5)', textAlign: 'center', marginTop: 8 }}>
                    Utbetales innen 1 virkedag · gebyrfritt
                  </div>
                </div>
              </div>

              {/* Uke-oversikt */}
              <div style={{ background: '#fff', borderRadius: 14, padding: 14, marginBottom: 14, border: '1px solid rgba(17,24,61,.06)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
                  <div style={{ fontWeight: 600, fontSize: 13.5 }}>Uke 21</div>
                  <div style={{ fontSize: 11.5, color: SK.soft }}>{ukensSum}t av {a.weeklyHours}t</div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6 }}>
                  {[
                    { d: 'M', iso: '2026-05-18' },
                    { d: 'T', iso: '2026-05-19' },
                    { d: 'O', iso: '2026-05-20' },
                    { d: 'T', iso: '2026-05-21' },
                    { d: 'F', iso: '2026-05-22' },
                  ].map(dag => {
                    const t = ansatteTimer.find(x => x.date === dag.iso);
                    const bg = !t ? '#f0f1f4'
                      : t.status === 'godkjent' ? SK.iceBlue
                      : t.status === 'ventende' ? '#fdeac8'
                      : SK.lightCoral;
                    return (
                      <div key={dag.iso} style={{ background: bg, borderRadius: 8, padding: '8px 4px', textAlign: 'center' }}>
                        <div style={{ fontSize: 9.5, fontWeight: 600, color: SK.soft }}>{dag.d}</div>
                        <div style={{ fontSize: 14, fontWeight: 700, marginTop: 2 }}>{t ? t.hours : '–'}</div>
                      </div>
                    );
                  })}
                </div>
                <button style={{
                  marginTop: 12, width: '100%', padding: '10px', background: 'transparent',
                  border: `1px solid ${SK.ink}`, borderRadius: 10, color: SK.ink,
                  fontFamily: 'Poppins', fontSize: 12.5, fontWeight: 600, cursor: 'pointer',
                }}>+ Registrer timer</button>
              </div>

              {/* NyBy seksjon */}
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10, padding: '0 2px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ width: 28, height: 28, borderRadius: 8, background: SK.purple, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{VI.nyby}</span>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 13.5 }}>NyBy-oppdrag</div>
                    <div style={{ fontSize: 10.5, color: SK.soft }}>Ekstra inntekt nær deg</div>
                  </div>
                </div>
                <span style={{ fontSize: 11.5, fontWeight: 600, color: SK.coral }}>Se alle ›</span>
              </div>

              {nybyTilgjengelig.map(o => (
                <div key={o.id} style={{
                  background: '#fff', borderRadius: 12, padding: 14, marginBottom: 8,
                  border: '1px solid rgba(17,24,61,.06)',
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10, marginBottom: 6 }}>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 9.5, fontWeight: 700, color: SK.purple, letterSpacing: 0.06, textTransform: 'uppercase', marginBottom: 2 }}>{o.type}</div>
                      <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.3 }}>{o.tittel}</div>
                    </div>
                    <div style={{ textAlign: 'right', flexShrink: 0 }}>
                      <div style={{ fontWeight: 600, fontSize: 14 }}>{vvjFmtKr(o.timer * o.sats)} kr</div>
                      <div style={{ fontSize: 10.5, color: SK.soft }}>{o.timer}t · {vvjFmtKr(o.sats)}/t</div>
                    </div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: SK.soft, marginBottom: 10 }}>
                    {VI.pin} {o.sted} · {vvjFmtDate(o.dato)}
                  </div>
                  <button style={{
                    width: '100%', padding: '8px', background: SK.ink, color: '#fff', border: 'none',
                    borderRadius: 8, fontFamily: 'Poppins', fontSize: 12, fontWeight: 600, cursor: 'pointer',
                  }}>Påta meg oppdraget</button>
                </div>
              ))}

              {/* Bottom space */}
              <div style={{ height: 12 }} />
            </div>

            {/* Bottom tab bar */}
            <div style={{
              position: 'absolute', bottom: 0, left: 0, right: 0,
              background: '#fff', borderTop: '1px solid rgba(17,24,61,.08)',
              padding: '10px 0 22px', display: 'flex', justifyContent: 'space-around',
            }}>
              {[
                { i: I.home, l: 'Hjem', active: true },
                { i: VI.clock, l: 'Timer' },
                { i: VI.nyby, l: 'NyBy' },
                { i: VI.kr, l: 'Lønn' },
                { i: I.users, l: 'Profil' },
              ].map((x, i) => (
                <div key={i} style={{
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
                  color: x.active ? SK.coral : SK.soft,
                }}>
                  {x.i}
                  <span style={{ fontSize: 10, fontWeight: x.active ? 600 : 500 }}>{x.l}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Right column — info & annotasjoner */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Card padded>
            <div style={{ fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.08, textTransform: 'uppercase', marginBottom: 6 }}>Fra ansattens perspektiv</div>
            <h3 style={{ margin: '0 0 12px', fontSize: 17, fontWeight: 600 }}>
              Den ansatte ser hele lønnsstatusen sin — alltid oppdatert
            </h3>
            <div style={{ fontSize: 12.5, color: SK.soft, lineHeight: 1.55 }}>
              I appen kan {a.name.split(' ')[0]} se akkurat hvor mye hen har opptjent siden lønnsperioden startet,
              hvor mye som allerede er tatt som forskudd, og hva som er igjen å ta ut.
              Forskudd utbetales innen én virkedag, og hen kan be om det rett fra mobilen.
            </div>
          </Card>

          <Card title="Saldoen i tall">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <SaldoItem label="Opptjent (mai)" value={`${vvjFmtKr(a.accruedKr)} kr`} sub={`${a.monthHours} timer`} />
              <SaldoItem label="Forskudd tatt" value={`${vvjFmtKr(a.paidAdvanceKr)} kr`} sub={`${pct}% av opptjent`} />
              <SaldoItem label="Tilgjengelig nå" value={`${vvjFmtKr(tilgjengelig)} kr`} sub={`60% tak − tatt forskudd`} accent />
              <SaldoItem label="Til lønnskjøring 12/6" value={`${vvjFmtKr(utest)} kr`} sub="netto etter forskudd" />
            </div>
          </Card>

          <Card title="Forskudd-historikk · denne perioden" padded={false}>
            {ansatteForskudd.length === 0 ? (
              <div style={{ padding: 20, textAlign: 'center', color: SK.soft, fontSize: 12.5 }}>
                Ingen forskudd tatt denne måneden.
              </div>
            ) : ansatteForskudd.map((f, i) => (
              <div key={f.id} style={{ padding: '10px 18px', borderTop: i ? '1px solid rgba(17,24,61,.06)' : 'none', display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ width: 28, height: 28, borderRadius: 7, background: SK.lightCoral, color: SK.coral, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{VI.kr}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>Forskudd · {vvjFmtDate(f.dato)}</div>
                  <div style={{ fontSize: 10.5, color: SK.soft, fontFamily: 'monospace' }}>{f.ref}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontWeight: 700, fontSize: 13 }}>{vvjFmtKr(f.belop)} kr</div>
                  <Pill status={f.status === 'utbetalt' ? 'track' : 'risk'}>
                    {f.status === 'utbetalt' ? 'Utbetalt' : 'Venter'}
                  </Pill>
                </div>
              </div>
            ))}
          </Card>

          {minePåtatte.length > 0 ? (
            <Card title={`Påtatte NyBy-oppdrag (${minePåtatte.length})`} padded={false}>
              {minePåtatte.map((o, i) => (
                <div key={o.id} style={{ padding: '12px 18px', borderTop: i ? '1px solid rgba(17,24,61,.06)' : 'none' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 10 }}>
                    <div>
                      <div style={{ fontWeight: 600, fontSize: 13 }}>{o.tittel}</div>
                      <div style={{ fontSize: 11.5, color: SK.soft, marginTop: 2 }}>
                        {vvjFmtDate(o.dato)} · {o.sted} · {o.timer}t
                      </div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontWeight: 600, fontSize: 13 }}>{vvjFmtKr(o.timer * o.sats)} kr</div>
                      <div style={{ fontSize: 10.5, color: SK.soft }}>{vvjFmtKr(o.sats)} kr/t</div>
                    </div>
                  </div>
                </div>
              ))}
            </Card>
          ) : null}

          <Card padded>
            <div style={{ fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.08, textTransform: 'uppercase', marginBottom: 8 }}>Hvordan det fungerer</div>
            <ol style={{ margin: 0, paddingLeft: 18, fontSize: 12.5, lineHeight: 1.7, color: SK.ink }}>
              <li>Ansatt fører timer i appen (eller blir auto-importert fra NyBy)</li>
              <li>Veileder godkjenner timene — opptjent saldo oppdateres umiddelbart</li>
              <li>Ansatt kan be om forskudd opp til <b>60% av opptjent</b>, gebyrfritt</li>
              <li>Forskudd utbetales innen 1 virkedag via Visma Lønn</li>
              <li>Ordinær lønnskjøring 12. i påfølgende måned — netto etter forskudd</li>
            </ol>
          </Card>
        </div>
      </div>
    </div>
  );
}

function SaldoItem({ label, value, sub, accent }) {
  return (
    <div style={{ padding: '4px 0' }}>
      <div style={{ fontSize: 10.5, fontWeight: 600, color: SK.soft, letterSpacing: 0.04, textTransform: 'uppercase' }}>{label}</div>
      <div style={{ fontSize: 20, fontWeight: 600, letterSpacing: -0.01, marginTop: 4, color: accent ? SK.coral : SK.ink }}>{value}</div>
      <div style={{ fontSize: 11, color: SK.soft, marginTop: 2 }}>{sub}</div>
    </div>
  );
}

Object.assign(window, { VVJPortal });