// v2-dashboards.jsx — Kategori-dashboard (tom tilstand).
// Målbilde: når ingen e-post er valgt fylles lesevisningen med et kategori-
// spesifikt dashboard i stedet for et tomt felt. To eksempler: Bedrifter
// (åpne saker som krever handling) og Kjøp (totalt brukt, siste kjøp, søk).

// list column shared by the category screens
function CatList({ active, title, count, rows, render }) {
  return (
    <div style={{ width: 340, flex: 'none', borderRight: '1px solid var(--line)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ height: 60, flex: 'none', display: 'flex', alignItems: 'center', gap: 10, padding: '0 14px 0 22px', borderBottom: '1px solid var(--line)' }}>
        <span style={{ fontWeight: 600, fontSize: 15 }}>{title}</span>
        {count != null && <span className="chip chip-accent" style={{ fontSize: 11, padding: '2px 8px' }}>{count}</span>}
        <button style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6, padding: '7px 10px', borderRadius: 10,
          background: 'var(--glass)', border: '1px solid var(--glass-brd)', color: 'var(--muted)', cursor: 'pointer', fontFamily: 'Sora', fontSize: 12 }}>
          <IconX name="eyeoff" s={14} /> Ulest
        </button>
      </div>
      <div style={{ flex: 1, overflow: 'hidden' }}>{rows.map(render)}</div>
    </div>
  );
}

// small label that marks the reading pane as a dashboard (empty selection)
function DashTag() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 18 }}>
      <span style={{ ...v2Label, color: 'var(--faint)' }}>Ingen e-post valgt</span>
      <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
      <span style={{ fontSize: 11.5, color: 'var(--faint)' }}>Sammendrag for kategorien</span>
    </div>
  );
}

// ── Bedrifter — empty-state dashboard ────────────────────────
function ABizDash() {
  return (
    <div className="screen theme-dark"><div className="amb amb-dark" />
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex' }}>
        <RailV2 active="biz" omit={['verify']} />
        <CatList title="Bedrifter" count={3} rows={BIZ} render={(b, 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: 11, fontSize: 12, background: b.col, color: '#fff' }}>{b.mono}</div>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <span style={{ fontSize: 14, fontWeight: b.unread ? 600 : 500 }}>{b.from}</span>
                {b.hot && <span style={{ color: 'var(--accent)', display: 'flex' }}><IconX name="pulse" s={13} /></span>}
                <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--faint)' }}>{b.age}</span>
                {b.unread && <span className="dot" />}
              </div>
              <div style={{ fontSize: 12.5, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', marginTop: 2 }}>{b.subj}</div>
            </div>
          </div>
        )} />
        {/* dashboard pane */}
        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
          <div style={{ height: 60, flex: 'none', display: 'flex', alignItems: 'center', gap: 13, padding: '0 30px', borderBottom: '1px solid var(--line)' }}>
            <span style={{ color: '#7fb088', display: 'flex' }}><IconX name="building" s={20} /></span>
            <div style={{ fontWeight: 600, fontSize: 15 }}>Bedrifter og organisasjoner</div>
            <span className="chip" style={{ marginLeft: 'auto', fontSize: 11.5 }}>Beholdes til handlet — så arkiv</span>
          </div>
          <div style={{ flex: 1, padding: '28px 36px', overflow: 'hidden' }}>
            <DashTag />
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 20 }}>
              <h1 style={{ margin: 0, fontSize: 27, fontWeight: 600, letterSpacing: '-0.03em' }}>2 saker krever handling</h1>
              <span style={{ fontSize: 13, color: 'var(--muted)' }}>eldste ubesvarte: 4 dager</span>
            </div>
            {/* next-best-action cards */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {BIZ.map((b, i) => (
                <div key={i} className="glass" style={{ borderRadius: 16, padding: '16px 18px', display: 'flex', alignItems: 'center', gap: 15,
                  ...(b.hot ? { borderColor: 'color-mix(in oklab, var(--accent) 38%, transparent)', background: 'var(--accent-soft)' } : {}) }}>
                  <div className="ava" style={{ width: 42, height: 42, borderRadius: 12, fontSize: 13, background: b.col, color: '#fff' }}>{b.mono}</div>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{ fontSize: 15, fontWeight: 600 }}>{b.from}</div>
                    <div style={{ fontSize: 13, color: 'var(--muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{b.subj}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: 12.5, color: b.hot ? 'var(--accent)' : 'var(--muted)', fontWeight: 500 }}>{b.need}</div>
                    <div style={{ fontSize: 11, color: 'var(--faint)', marginTop: 2 }}>{b.age} siden</div>
                  </div>
                  <button style={{ flex: 'none', padding: '9px 16px', borderRadius: 11, cursor: 'pointer', fontFamily: 'Sora', fontSize: 13, fontWeight: 600,
                    border: b.hot ? 'none' : '1px solid var(--line-strong)',
                    background: b.hot ? 'var(--accent)' : 'transparent', color: b.hot ? '#1a0d06' : 'var(--fg)',
                    display: 'flex', alignItems: 'center', gap: 7 }}>
                    <IconX name="sparkle" s={14} /> {b.action}
                  </button>
                </div>
              ))}
            </div>
            {/* footer insight */}
            <div className="glass-2" style={{ borderRadius: 14, padding: '14px 17px', marginTop: 18, display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ color: 'var(--accent)', display: 'flex' }}><IconX name="sparkle" s={16} /></span>
              <span style={{ fontSize: 13.5, color: 'var(--fg)', lineHeight: 1.5 }}>
                <b style={{ fontWeight: 600 }}>Next best action</b> foreslås per sak — drøm leser hva avsenderen ber om og setter knappen først.
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Kjøp — empty-state dashboard ─────────────────────────────
function ABuyDash() {
  const months = [['feb', 9.2], ['mar', 12.6], ['apr', 10.1], ['mai', 14.4]];
  const top = [['Thon Hotel', 2980, '#b89a4e'], ['Oda', 893, '#d14d4d'], ['Vinmonopolet', 648, '#7a9e7e'], ['Ruter', 852, '#c2185b']];
  return (
    <div className="screen theme-dark"><div className="amb amb-dark" />
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex' }}>
        <RailV2 active="buy" omit={['verify']} />
        <CatList title="Kjøp" count={null} rows={BUY.slice(0, 6)} render={(b, i) => (
          <div key={i} style={{ display: 'flex', gap: 12, padding: '13px 18px', alignItems: 'center', borderLeft: '2px solid transparent' }}>
            <div className="ava" style={{ width: 34, height: 34, borderRadius: 10, fontSize: 11, background: b.col, color: '#fff' }}>{b.mono || <IconX name="bag" s={14} />}</div>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 500 }}>{b.merch}</div>
              <div style={{ fontSize: 12, color: 'var(--faint)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{b.what}</div>
            </div>
            <span className="mono" style={{ fontSize: 13, color: 'var(--muted)' }}>{b.amt}</span>
          </div>
        )} />
        {/* dashboard pane */}
        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
          <div style={{ height: 60, flex: 'none', display: 'flex', alignItems: 'center', gap: 13, padding: '0 30px', borderBottom: '1px solid var(--line)' }}>
            <span style={{ color: '#7aa0a0', display: 'flex' }}><IconX name="bag" s={20} /></span>
            <div style={{ fontWeight: 600, fontSize: 15 }}>Kjøp og kvitteringer</div>
            <span className="chip" style={{ marginLeft: 'auto', fontSize: 11.5 }}>Bevares permanent · søkbart</span>
          </div>
          <div style={{ flex: 1, padding: '28px 36px', overflow: 'hidden' }}>
            <DashTag />
            {/* search prompt */}
            <div className="glass-2" style={{ height: 48, borderRadius: 13, display: 'flex', alignItems: 'center', gap: 12, padding: '0 16px', color: 'var(--faint)', marginBottom: 22 }}>
              <IconX name="search" s={17} />
              <span style={{ fontSize: 13.5 }}>Søk i kjøpshistorikk — butikk, beløp, varelinje eller dato…</span>
              <span className="kbd" style={{ marginLeft: 'auto' }}>⌘K</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
              {/* spend trend */}
              <div className="glass" style={{ borderRadius: 18, padding: '18px 20px' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 4 }}>
                  <span style={v2Label}>Totalt brukt</span>
                  <span style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--faint)' }}>siste 4 mnd</span>
                </div>
                <div className="mono" style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 18 }}>14 380<span style={{ fontSize: 15, color: 'var(--muted)' }}> kr i mai</span></div>
                <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14, height: 96 }}>
                  {months.map((m, i) => (
                    <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 7 }}>
                      <div style={{ width: '100%', maxWidth: 46, height: `${(m[1] / 14.4) * 80}px`, borderRadius: 8,
                        background: i === months.length - 1 ? 'var(--accent)' : 'var(--glass-2)', border: '1px solid ' + (i === months.length - 1 ? 'transparent' : 'var(--line-strong)') }} />
                      <span style={{ fontSize: 11, color: 'var(--faint)' }}>{m[0]}</span>
                    </div>
                  ))}
                </div>
              </div>
              {/* top merchants */}
              <div className="glass" style={{ borderRadius: 18, padding: '18px 20px' }}>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
                  <span style={v2Label}>Største kjøp i mai</span>
                  <span style={{ marginLeft: 'auto', fontSize: 12, color: 'var(--faint)' }}>4 av 11</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
                  {top.map((t, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                      <div className="ava" style={{ width: 30, height: 30, borderRadius: 9, fontSize: 11, background: t[2], color: '#fff' }}>{t[0][0]}</div>
                      <span style={{ fontSize: 13.5 }}>{t[0]}</span>
                      <div style={{ flex: 1, height: 6, borderRadius: 4, background: 'var(--glass-2)', overflow: 'hidden' }}>
                        <div style={{ width: `${(t[1] / 2980) * 100}%`, height: '100%', borderRadius: 4, background: t[2], opacity: 0.85 }} />
                      </div>
                      <span className="mono tnum" style={{ fontSize: 12.5, color: 'var(--muted)', width: 64, textAlign: 'right' }}>{t[1].toLocaleString('nb-NO')}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            {/* last purchase strip */}
            <div className="glass" style={{ borderRadius: 16, padding: '15px 18px', marginTop: 18, display: 'flex', alignItems: 'center', gap: 14 }}>
              <span style={{ ...v2Label }}>Siste kjøp</span>
              <div className="ava" style={{ width: 34, height: 34, borderRadius: 10, fontSize: 12, background: '#7a9e7e', color: '#fff', marginLeft: 4 }}>V</div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600 }}>Vinmonopolet</div>
                <div style={{ fontSize: 12, color: 'var(--faint)' }}>2. jun · 14:02 · kvittering bevart</div>
              </div>
              <span className="mono" style={{ marginLeft: 'auto', fontSize: 18, fontWeight: 600 }}>648,00</span>
              <span className="chip"><IconX name="archive" s={13} /> Eksporter</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ABizDash, ABuyDash, CatList, DashTag });