// v2-empty-states.jsx — Tom-tilstand for de tre gjenstående kategoriene.
// Når en kategori er valgt men ingen e-post er åpnet, fylles lesevisningen med
// et sammendrag skreddersydd til hva kategorien er FOR — ikke et tomt felt.
// Bedrifter (ABizDash) og Kjøp (ABuyDash) ligger i v2-dashboards.jsx; her er:
//   Mennesker (AMenneskerDash) · Reklame (APromoDash) · Billetter (ATicketsDash)
// Alle bruker fem-kategori-rad: RailV2 active="<key>" omit={['verify']}.
//
// AVerifyDash finnes nederst men er UTGÅTT — verifisering er ikke lenger en
// kategori (se v3-verifycode.jsx). Beholdt kun som referanse, ikke montert.

// ── Felles byggeklosser ──────────────────────────────────────
const esCol = { flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' };
const esBody = { flex: 1, padding: '28px 36px', overflow: 'hidden' };

// pane-header (60px): kategoriikon i `col` + tittel + regel-chip ytterst
function DashHead({ icon, col, title, rule }) {
  return (
    <div style={{ height: 60, flex: 'none', display: 'flex', alignItems: 'center', gap: 13, padding: '0 30px', borderBottom: '1px solid var(--line)' }}>
      <span style={{ color: col, display: 'flex' }}><IconX name={icon} s={20} /></span>
      <div style={{ fontWeight: 600, fontSize: 15 }}>{title}</div>
      <span className="chip" style={{ marginLeft: 'auto', fontSize: 11.5 }}>{rule}</span>
    </div>
  );
}

// ── Mockdata ─────────────────────────────────────────────────
// Mennesker: hvem venter på svar fra deg (eldste/«hot» øverst)
const AWAIT = [
  { name: 'Kari Nymoen',    mono: 'KN', col: '#a8d8b9', subj: 'Kontrakt — utkast', excerpt: 'Rekker du å se over utkastet før fredag?', wait: 'venter 5 dager', hot: true },
  { name: 'Per Strand',     mono: 'JB', col: '#9ec7e8', subj: 'Lunsj torsdag?', excerpt: 'Tim Wendelboe kl 12 — funker det for deg?', wait: 'venter 2 dager', hot: false },
  { name: 'Sara Lind',      mono: 'SL', col: '#a8d8b9', subj: 'Takk for sist!', excerpt: 'Vi må gjenta det snart — finner du en helg?', wait: 'venter 1 dag', hot: false },
];

// Mennesker: dine nærmeste (sist kontakt; `quiet` = stille lenge)
const NEAR = [
  { name: 'Nora Dahl', mono: 'IS', col: '#e8a87c', last: 'i dag' },
  { name: 'Mamma',          mono: 'M',  col: '#c8b6e2', last: 'i går' },
  { name: 'Per Strand',     mono: 'JB', col: '#9ec7e8', last: '4 dager siden' },
  { name: 'Onkel Per',      mono: 'P',  col: '#b8c89a', last: 'stille i 3 uker', quiet: true },
];

// Reklame: dagens utdrag + avsendere du aldri åpner
const PROMO_DIGEST = [
  { name: 'Komplett', teaser: 'Sommersalg — opptil 40 % på utvalgt elektronikk' },
  { name: 'XXL',      teaser: 'Nye løpesko inn på lager · medlemspris' },
  { name: 'Morgenlevering', teaser: 'Ukens tilbud i appen — fersk fisk til helgen' },
];
const PROMO_NEVER = [
  { name: 'Nettavisen', mono: 'N', col: '#c44', count: 41 },
  { name: 'Stylepit',   mono: 'S', col: '#b0a0c8', count: 33 },
  { name: 'Lyko',       mono: 'L', col: '#7aa0a0', count: 28 },
];

// ── A.1 Mennesker — AMenneskerDash ───────────────────────────
function AMenneskerDash() {
  return (
    <div className="screen theme-dark"><div className="amb amb-dark" />
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex' }}>
        <RailV2 active="people" omit={['verify']} />
        <CatList title="Mennesker" count={4} rows={PEOPLE} render={(p, i) => (
          <div key={i} style={{ display: 'flex', gap: 12, padding: '15px 18px', alignItems: 'center', borderLeft: '2px solid transparent' }}>
            <div className="ava" style={{ width: 36, height: 36, borderRadius: '50%', fontSize: 12, background: p.col, color: '#fff' }}>{p.mono}</div>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <span style={{ fontSize: 14, fontWeight: p.unread ? 600 : 500 }}>{p.from}</span>
                {p.pin && <span style={{ color: 'var(--faint)', display: 'flex' }}><IconX name="pin" s={12} /></span>}
                <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--faint)' }}>{p.time}</span>
                {p.unread && <span className="dot" />}
              </div>
              <div style={{ fontSize: 12.5, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', marginTop: 2 }}>{p.subj}</div>
            </div>
          </div>
        )} />
        <div style={esCol}>
          <DashHead icon="people" col="#e8a87c" title="Mennesker" rule="Beholdes — får all plass" />
          <div style={esBody}>
            <DashTag />
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 20 }}>
              <h1 style={{ margin: 0, fontSize: 27, fontWeight: 600, letterSpacing: '-0.03em' }}>3 venter på svar fra deg</h1>
              <span style={{ fontSize: 13, color: 'var(--muted)' }}>ingen haster — bare folk du kjenner</span>
            </div>
            {/* venter-på-svar */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {AWAIT.map((a, i) => (
                <div key={i} className="glass" style={{ borderRadius: 16, padding: '15px 18px', display: 'flex', alignItems: 'center', gap: 15,
                  ...(a.hot ? { borderColor: 'color-mix(in oklab, var(--accent) 38%, transparent)', background: 'var(--accent-soft)' } : {}) }}>
                  <div className="ava" style={{ width: 42, height: 42, borderRadius: '50%', fontSize: 13, background: a.col, color: '#fff' }}>{a.mono}</div>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{ fontSize: 15, fontWeight: 600 }}>{a.name}</div>
                    <div style={{ fontSize: 13, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.subj} — {a.excerpt}</div>
                  </div>
                  <div style={{ fontSize: 12, color: a.hot ? 'var(--accent)' : 'var(--faint)', fontWeight: 500, flex: 'none' }}>{a.wait}</div>
                  <button style={{ flex: 'none', padding: '9px 16px', borderRadius: 11, cursor: 'pointer', fontFamily: 'Sora', fontSize: 13, fontWeight: 600,
                    border: a.hot ? 'none' : '1px solid var(--line-strong)',
                    background: a.hot ? 'var(--accent)' : 'transparent', color: a.hot ? '#1a0d06' : 'var(--fg)',
                    display: 'flex', alignItems: 'center', gap: 7 }}>
                    <IconX name={a.hot ? 'sparkle' : 'reply'} s={14} /> {a.hot ? 'Foreslå svar' : 'Svar'}
                  </button>
                </div>
              ))}
            </div>
            {/* dine nærmeste */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, margin: '24px 0 12px' }}>
              <span style={v2Label}>Dine nærmeste</span>
              <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12 }}>
              {NEAR.map((n, i) => (
                <div key={i} className="glass" style={{ borderRadius: 15, padding: '16px 14px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 9, textAlign: 'center',
                  ...(n.quiet ? { borderColor: 'color-mix(in oklab, var(--accent) 35%, transparent)' } : {}) }}>
                  <div className="ava" style={{ width: 44, height: 44, borderRadius: '50%', fontSize: 14, background: n.col, color: '#fff' }}>{n.mono}</div>
                  <div style={{ fontSize: 13.5, fontWeight: 600 }}>{n.name}</div>
                  <div style={{ fontSize: 11.5, color: n.quiet ? 'var(--accent)' : 'var(--faint)' }}>{n.last}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── A.2 Reklame — APromoDash ─────────────────────────────────
function APromoDash() {
  return (
    <div className="screen theme-dark"><div className="amb amb-dark" />
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex' }}>
        <RailV2 active="promo" omit={['verify']} />
        <CatList title="Reklame" count={null} rows={PROMO_DIGEST.concat(PROMO_NEVER)} render={(r, i) => (
          <div key={i} style={{ display: 'flex', gap: 12, padding: '13px 18px', alignItems: 'center', opacity: 0.66, borderLeft: '2px solid transparent' }}>
            <div className="ava" style={{ width: 32, height: 32, borderRadius: 9, background: 'var(--glass-2)', color: 'var(--faint)' }}><IconX name="tag" s={14} /></div>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 13.5, fontWeight: 500 }}>{r.name}</div>
              <div style={{ fontSize: 12, color: 'var(--faint)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.teaser || 'Reklame · samles til daglig utdrag'}</div>
            </div>
          </div>
        )} />
        <div style={esCol}>
          <DashHead icon="tag" col="#b0a0c8" title="Reklame" rule="Daglig utdrag · fyller ikke innboksen" />
          <div style={esBody}>
            <DashTag />
            {/* ryddet-bort-hero */}
            <div className="glass-2" style={{ borderRadius: 18, padding: '22px 24px', display: 'flex', alignItems: 'center', gap: 28, marginBottom: 22 }}>
              <div>
                <div className="mono" style={{ fontSize: 46, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1 }}>138</div>
                <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 6 }}>ryddet bort i mai</div>
              </div>
              <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--line)' }} />
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontSize: 17, fontWeight: 600 }}>0 nådde innboksen din</div>
                <div style={{ fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.5, marginTop: 6 }}>Reklame samles til ett rolig utdrag om dagen — ikke 138 avbrudd.</div>
              </div>
            </div>
            {/* to kort */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
              {/* neste utdrag */}
              <div className="glass" style={{ borderRadius: 18, padding: '18px 20px' }}>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: 14 }}>
                  <span style={v2Label}>Neste utdrag</span>
                  <span className="chip" style={{ marginLeft: 'auto', fontSize: 11 }}><IconX name="clock" s={12} /> kl 08:00</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                  {PROMO_DIGEST.map((d, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                      <span style={{ width: 6, height: 6, borderRadius: 3, background: '#b0a0c8', flex: 'none' }} />
                      <span style={{ fontSize: 13, fontWeight: 500, flex: 'none' }}>{d.name}</span>
                      <span style={{ fontSize: 12.5, color: 'var(--faint)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.teaser}</span>
                    </div>
                  ))}
                </div>
                <button style={{ width: '100%', marginTop: 16, padding: '10px', borderRadius: 11, background: 'transparent', color: 'var(--fg)',
                  border: '1px solid var(--line-strong)', cursor: 'pointer', fontFamily: 'Sora', fontSize: 13, fontWeight: 500, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7 }}>
                  <IconX name="eye" s={15} /> Vis utdraget nå
                </button>
              </div>
              {/* du åpner aldri disse */}
              <div className="glass" style={{ borderRadius: 18, padding: '18px 20px' }}>
                <div style={{ marginBottom: 14 }}><span style={v2Label}>Du åpner aldri disse</span></div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {PROMO_NEVER.map((n, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                      <div className="ava" style={{ width: 30, height: 30, borderRadius: 9, fontSize: 11, background: n.col, color: '#fff' }}>{n.mono}</div>
                      <div style={{ minWidth: 0, flex: 1 }}>
                        <div style={{ fontSize: 13.5, fontWeight: 500 }}>{n.name}</div>
                        <div style={{ fontSize: 11.5, color: 'var(--faint)' }}>{n.count} e-poster · siste 3 mnd</div>
                      </div>
                      <button style={{ flex: 'none', padding: '6px 12px', borderRadius: 9, background: 'transparent', color: 'var(--muted)',
                        border: '1px solid var(--line-strong)', cursor: 'pointer', fontFamily: 'Sora', fontSize: 12, display: 'flex', alignItems: 'center', gap: 6 }}>
                        <IconX name="mute" s={13} /> Meld av
                      </button>
                    </div>
                  ))}
                </div>
                <button style={{ width: '100%', marginTop: 16, padding: '10px', borderRadius: 11, background: 'var(--accent)', color: '#1a0d06',
                  border: 'none', cursor: 'pointer', fontFamily: 'Sora', fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7 }}>
                  <IconX name="mute" s={14} /> Meld av alle tre
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── A.3 Billetter — ATicketsDash ─────────────────────────────
function ATicketsDash() {
  const sorted = [...TICKETS].sort((a, b) => a.days - b.days);
  const next = sorted[0], later = sorted.slice(1);
  return (
    <div className="screen theme-dark"><div className="amb amb-dark" />
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex' }}>
        <RailV2 active="tickets" omit={['verify']} />
        <CatList title="Billetter" count={sorted.length} rows={sorted} render={(t, i) => (
          <div key={i} style={{ display: 'flex', gap: 12, padding: '14px 18px', alignItems: 'center', borderLeft: '2px solid transparent' }}>
            <div className="ava" style={{ width: 34, height: 34, borderRadius: 10, background: t.col, color: '#fff' }}><IconX name="ticket" s={15} /></div>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 500 }}>{t.name}</div>
              <div style={{ fontSize: 12, color: 'var(--faint)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.when}</div>
            </div>
            <span className="chip" style={{ fontSize: 11 }}>{t.days} d</span>
          </div>
        )} />
        <div style={esCol}>
          <DashHead icon="ticket" col="#c89a5c" title="Billetter" rule="Lagt i kalender automatisk" />
          <div style={esBody}>
            <DashTag />
            {/* neste-hendelse-spotlight */}
            <div className="glass" style={{ borderRadius: 20, padding: '22px 24px', borderColor: 'color-mix(in oklab, var(--accent) 28%, transparent)', background: 'var(--accent-soft)', display: 'flex', gap: 22, marginBottom: 22 }}>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                  <span style={{ ...v2Label, color: 'var(--accent)' }}>Neste · om {next.days} dager</span>
                  <span className="chip" style={{ fontSize: 11 }}><IconX name="calendar" s={12} /> I kalender</span>
                </div>
                <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>{next.org}</div>
                <h1 style={{ margin: '2px 0 16px', fontSize: 26, fontWeight: 600, letterSpacing: '-0.03em' }}>{next.name}</h1>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13.5, color: 'var(--muted)' }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 9 }}><IconX name="clock" s={15} style={{ color: 'var(--faint)' }} /> {next.when}</span>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 9 }}><IconX name="pin" s={15} style={{ color: 'var(--faint)' }} /> {next.where}</span>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 9 }}><IconX name="ticket" s={15} style={{ color: 'var(--faint)' }} /> {next.seat}</span>
                </div>
                <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
                  <button style={{ padding: '9px 16px', borderRadius: 11, background: 'var(--accent)', color: '#1a0d06',
                    border: 'none', cursor: 'pointer', fontFamily: 'Sora', fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 7 }}>
                    <IconX name="qr" s={14} /> Vis billett
                  </button>
                  <button style={{ padding: '9px 16px', borderRadius: 11, background: 'transparent', color: 'var(--fg)',
                    border: '1px solid var(--line-strong)', cursor: 'pointer', fontFamily: 'Sora', fontSize: 13, display: 'flex', alignItems: 'center', gap: 7 }}>
                    <IconX name="map" s={14} /> Veibeskrivelse
                  </button>
                </div>
              </div>
              {/* QR-plassholder (generer ekte QR i prod) */}
              <div style={{ width: 104, height: 104, flex: 'none', borderRadius: 14, background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#111' }}>
                <IconX name="qr" s={70} sw={1.2} />
              </div>
            </div>
            {/* senere */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, margin: '0 0 12px' }}>
              <span style={v2Label}>Senere</span>
              <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
              <span style={{ fontSize: 11.5, color: 'var(--faint)' }}>{later.length} kommende</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {later.map((t, i) => (
                <div key={i} className="glass" style={{ borderRadius: 15, padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 15 }}>
                  <div className="ava" style={{ width: 38, height: 38, borderRadius: 11, background: t.col, color: '#fff' }}><IconX name="ticket" s={16} /></div>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{ fontSize: 14.5, fontWeight: 600 }}>{t.name}</div>
                    <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>{t.org} · {t.where}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>{t.when}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--faint)', marginTop: 2 }}>{t.seat}</div>
                  </div>
                  <span className="chip" style={{ fontSize: 11 }}><IconX name="calendar" s={12} /> om {t.days} d</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── AVerifyDash — UTGÅTT (ikke montert) ──────────────────────
// Beholdt kun som referanse hvis dere senere ønsker en «aktive koder»-oversikt
// et annet sted. Verifisering er nå en flyktig forside-overflate, ikke en
// kategori — se v3-verifycode.jsx / AFrontVerify.
function AVerifyDash() {
  return (
    <div className="screen theme-dark"><div className="amb amb-dark" />
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40 }}>
        <div className="glass-2" style={{ borderRadius: 18, padding: '26px 30px', maxWidth: 520, textAlign: 'center' }}>
          <div style={{ color: 'var(--faint)', display: 'flex', justifyContent: 'center', marginBottom: 12 }}><IconX name="shield" s={28} /></div>
          <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 8 }}>Verifisering er ikke lenger en kategori</div>
          <div style={{ fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.6 }}>
            Koder dukker opp øverst på forsiden, auto-kopieres og slettes etter 5 minutter.
            Denne skjermen er utgått og beholdt kun som referanse.
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DashHead, esCol, esBody, AWAIT, NEAR, PROMO_DIGEST, PROMO_NEVER, AMenneskerDash, APromoDash, ATicketsDash, AVerifyDash });