// v2-manage.jsx — Flervalgsmodus + ulest-filter, og Sendt + utkast.

// ── Flervalgsmodus med ulest-filter ─────────────────────────
// A people-list in selection mode: checkboxes, 3 marked, a contextual bulk
// action bar, and the "Ulest" filter active (only unread rows shown).
function AMultiSelect() {
  // only unread (ulest-filter active): Nora, Mamma + two business unreads
  const rows = [
    { mono: 'IS', col: '#e8a87c', from: 'Nora Dahl', subj: 'Re: Hytta i påsken', time: '09:24', sel: true },
    { mono: 'M',  col: '#c8b6e2', from: 'Mamma',          subj: 'Bilder fra søndag',  time: 'i går', sel: true },
    { mono: 'DNB', col: '#1f7a4d', from: 'DNB',           subj: 'Signering kreves — lånedokument', time: '2 d', sel: false },
    { mono: 'T',  col: '#2a8fd4', from: 'Telenor',        subj: 'Faktura forfaller snart', time: '1 d', sel: true },
    { mono: 'F',  col: '#0f7d7d', from: 'Fjordkraft',     subj: 'Bekreft måleravlesning', time: '4 d', sel: false },
  ];
  const nSel = rows.filter((r) => r.sel).length;
  return (
    <div className="screen theme-dark"><div className="amb amb-dark" />
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex' }}>
        <RailV2 active="people" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          {/* contextual selection bar replaces the topbar */}
          <div style={{ height: 60, flex: 'none', display: 'flex', alignItems: 'center', gap: 14, padding: '0 26px',
            borderBottom: '1px solid var(--line)', background: 'var(--accent-soft)' }}>
            <span style={{ width: 26, height: 26, borderRadius: 8, background: 'var(--accent)', color: '#1a0d06', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconX name="check" s={15} /></span>
            <span style={{ fontSize: 15, fontWeight: 600 }}>{nSel} markert</span>
            <div style={{ width: 1, height: 24, background: 'var(--line-strong)', margin: '0 4px' }} />
            <div style={{ display: 'flex', gap: 9 }}>
              <button style={bulkBtn}><IconX name="eye" s={15} /> Marker lest</button>
              <button style={bulkBtn}><IconX name="archive" s={15} /> Arkiver</button>
              <button style={{ ...bulkBtn, color: '#ff8a8a', borderColor: 'color-mix(in oklab, #ff8a8a 30%, transparent)' }}><IconX name="trash" s={15} /> Slett</button>
            </div>
            <button style={{ ...bulkBtn, marginLeft: 'auto', background: 'transparent', border: '1px solid transparent', color: 'var(--muted)' }}>Avbryt</button>
          </div>
          <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
            <div style={{ flex: 1, padding: '26px 36px', overflow: 'hidden' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
                <h1 style={{ margin: 0, fontSize: 27, fontWeight: 600, letterSpacing: '-0.03em' }}>Innboks</h1>
                {/* unread filter — active */}
                <span className="chip chip-accent" style={{ marginLeft: 6 }}><IconX name="eyeoff" s={13} /> Kun ulest · 5</span>
                <span className="chip" style={{ color: 'var(--faint)' }}>Alle</span>
                <span style={{ marginLeft: 'auto', fontSize: 12.5, color: 'var(--faint)' }}>Velg flere · utfør samlet</span>
              </div>
              <div className="glass" style={{ borderRadius: 20, overflow: 'hidden' }}>
                {rows.map((m, i) => (
                  <div key={i} style={{ display: 'flex', gap: 14, padding: '15px 18px', alignItems: 'center',
                    borderTop: i ? '1px solid var(--line)' : 'none', background: m.sel ? 'var(--accent-soft)' : 'transparent' }}>
                    {/* checkbox */}
                    <span style={{ width: 22, height: 22, flex: 'none', borderRadius: 7, display: 'flex', alignItems: 'center', justifyContent: 'center',
                      background: m.sel ? 'var(--accent)' : 'transparent', border: '1.5px solid ' + (m.sel ? 'var(--accent)' : 'var(--line-strong)'), color: '#1a0d06' }}>
                      {m.sel && <IconX name="check" s={13} sw={2.2} />}
                    </span>
                    <div className="ava" style={{ width: 40, height: 40, borderRadius: 12, fontSize: 13, background: m.col, color: '#fff' }}>{m.mono}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                        <span style={{ fontWeight: 600, fontSize: 15 }}>{m.from}</span>
                        <span style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--faint)' }}>{m.time}</span>
                        <span className="dot" />
                      </div>
                      <div style={{ fontSize: 13.5, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', marginTop: 2 }}>{m.subj}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div style={{ fontSize: 12.5, color: 'var(--faint)', marginTop: 16, lineHeight: 1.6, display: 'flex', alignItems: 'center', gap: 8 }}>
                <IconX name="eyeoff" s={14} /> Ulest-filteret finnes i alle kategorivisninger. Flervalg gjelder slett, arkiver og lestatus.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
const bulkBtn = { display: 'flex', alignItems: 'center', gap: 7, padding: '8px 13px', borderRadius: 10, cursor: 'pointer',
  fontFamily: 'Sora', fontSize: 13, fontWeight: 500, background: 'var(--glass-2)', border: '1px solid var(--glass-brd)', color: 'var(--fg)' };

// ── Sendt + utkast ───────────────────────────────────────────
function ASent() {
  return (
    <div className="screen theme-dark"><div className="amb amb-dark" />
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex' }}>
        <RailV2 active="sent" />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          <TopbarV2 title="Sendt" sub="søkbar · kronologisk · på tvers av kontoer" placeholder="Søk i sendte e-poster — mottaker, emne, dato…" />
          <div style={{ flex: 1, display: 'flex', minHeight: 0 }}>
            {/* sent list */}
            <div style={{ flex: 1, padding: '26px 34px', overflow: 'hidden', minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
                <span className="chip chip-accent"><IconX name="send" s={13} /> Sendt</span>
                <span className="chip" style={{ color: 'var(--faint)' }}><IconX name="pencil" s={13} /> Utkast · 3</span>
                <span style={{ marginLeft: 'auto', fontSize: 12.5, color: 'var(--faint)' }}>juni 2026</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {SENT.map((s, i) => (
                  <div key={i} className="glass" style={{ borderRadius: 15, padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 14 }}>
                    <span style={{ color: 'var(--faint)', display: 'flex' }}><IconX name="send" s={15} /></span>
                    <div className="ava" style={{ width: 36, height: 36, borderRadius: 11, fontSize: 12, background: s.col, color: '#fff' }}>{s.to[0]}</div>
                    <div style={{ minWidth: 0, flex: 1 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <span style={{ fontSize: 11, color: 'var(--faint)' }}>Til</span>
                        <span style={{ fontSize: 14.5, fontWeight: 600 }}>{s.to}</span>
                      </div>
                      <div style={{ fontSize: 13, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', marginTop: 2 }}>
                        <span style={{ color: 'var(--fg)' }}>{s.subj}</span> — {s.prev}
                      </div>
                    </div>
                    <span className="chip" style={{ fontSize: 11, borderColor: 'var(--line)', color: 'var(--faint)' }}>
                      <span style={{ width: 6, height: 6, borderRadius: 3, background: s.acct === 'gmail' ? '#d14d4d' : '#7fb088' }} />{s.acct}
                    </span>
                    <span className="mono" style={{ fontSize: 12.5, color: 'var(--faint)', width: 48, textAlign: 'right' }}>{s.when}</span>
                  </div>
                ))}
              </div>
            </div>
            {/* drafts aside */}
            <div style={{ width: 360, flex: 'none', borderLeft: '1px solid var(--line)', padding: '26px 24px', overflow: 'hidden' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 8 }}>
                <span style={v2Label}>Utkast</span>
                <span className="chip chip-accent" style={{ fontSize: 11, padding: '2px 8px' }}>3</span>
              </div>
              <div style={{ fontSize: 12, color: 'var(--faint)', marginBottom: 16, display: 'flex', alignItems: 'center', gap: 7 }}>
                <IconX name="check" s={13} style={{ color: '#7fb088' }} /> Lagres automatisk · synket til alle enheter
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {DRAFTS.map((d, i) => (
                  <div key={i} className="glass-2" style={{ borderRadius: 15, padding: '14px 16px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
                      <div className="ava" style={{ width: 28, height: 28, borderRadius: 9, fontSize: 10, background: d.col, color: '#15110d' }}>{d.to.split(' ').map((w) => w[0]).join('').slice(0, 2)}</div>
                      <span style={{ fontSize: 13.5, fontWeight: 600 }}>{d.to}</span>
                      <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--faint)' }}>{d.when}</span>
                    </div>
                    <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 3 }}>{d.subj}</div>
                    <div style={{ fontSize: 12.5, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.prev}</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 11 }}>
                      <button style={{ flex: 1, padding: '8px', borderRadius: 10, background: 'var(--accent)', color: '#1a0d06', border: 'none', cursor: 'pointer',
                        fontFamily: 'Sora', fontSize: 12.5, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
                        <IconX name="pencil" s={13} /> Fortsett
                      </button>
                      <span className="chip" style={{ fontSize: 11, borderColor: 'var(--line)', color: 'var(--faint)' }}>{d.acct}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AMultiSelect, ASent, bulkBtn });