// screen-login-dashboard.jsx
const { useState: useStateLD } = React;

/* ============ LOGIN ============ */
function LoginScreen({ onLogin, theme, setTheme }) {
  const [email, setEmail] = useStateLD('admin@zei.com');
  const [state, setState] = useStateLD('idle'); // idle | submitting | sent
  const submit = (e) => {
    e.preventDefault();
    setState('submitting');
    setTimeout(() => setState('sent'), 900);
  };
  return (
    <div style={{ height: '100vh', display: 'grid', placeItems: 'center', background: 'var(--bg)', position: 'relative', overflow: 'auto' }}>
      <button className="btn btn-ghost btn-sm btn-icon" style={{ position: 'absolute', top: 18, right: 18 }}
              onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} aria-label="Theme">
        <Icon name={theme === 'dark' ? 'sun' : 'moon'} size={18} />
      </button>
      <div style={{ width: 'min(380px, 92vw)', padding: 20 }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, marginBottom: 30 }}>
          <div className="sb-logo" style={{ width: 52, height: 52, fontSize: 24, borderRadius: 14 }}>Z</div>
          <div style={{ textAlign: 'center' }}>
            <div className="t-h1">Zei JP Console</div>
            <div className="t-sm dim" style={{ marginTop: 4 }}>Đăng nhập để vận hành hệ thống</div>
          </div>
        </div>

        <div className="card card-pad" style={{ borderRadius: 'var(--r-xl)' }}>
          {state === 'sent' ? (
            <div style={{ textAlign: 'center', padding: '14px 4px' }}>
              <Icon name="mail" size={34} style={{ color: 'var(--accent)' }} />
              <h3 className="t-h2" style={{ marginTop: 14 }}>Kiểm tra email của bạn</h3>
              <p className="t-sm dim" style={{ marginTop: 8 }}>Đã gửi magic link tới<br /><span className="strong" style={{ color: 'var(--text)' }}>{email}</span></p>
              <Button variant="primary" className="btn-block" onClick={onLogin} style={{ marginTop: 18 }}>Mô phỏng: vào app →</Button>
              <button className="btn btn-ghost btn-sm btn-block" style={{ marginTop: 6 }} onClick={() => setState('idle')}>Dùng email khác</button>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Field label="Email">
                <div className="input-search">
                  <Icon name="mail" size={16} />
                  <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="ban@zei.com" required />
                </div>
              </Field>
              <Button variant="primary" size="lg" className="btn-block" type="submit" disabled={state === 'submitting'}>
                {state === 'submitting' ? <><Icon name="loader" size={16} className="spin" />Đang gửi…</> : 'Gửi magic link'}
              </Button>
              <div className="row" style={{ gap: 10, color: 'var(--text-faint)' }}>
                <div style={{ flex: 1, height: 1, background: 'var(--border)' }}></div>
                <span className="t-xs">hoặc</span>
                <div style={{ flex: 1, height: 1, background: 'var(--border)' }}></div>
              </div>
              <button type="button" className="btn btn-default btn-block" onClick={onLogin}>Đăng nhập bằng mật khẩu</button>
            </form>
          )}
        </div>
        <div style={{ textAlign: 'center', marginTop: 18 }} className="t-xs dimmer">
          Tài khoản được cấp bởi chủ shop · <a style={{ color: 'var(--text-2)', textDecoration: 'underline' }}>Powered by MADIAD</a>
        </div>
      </div>
    </div>
  );
}

/* ============ DASHBOARD ============ */
function fmtVNDcompact(n) {
  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'tr';
  if (n >= 1000) return Math.round(n / 1000) + 'k';
  return String(n);
}

function DashboardScreen() {
  const app = useApp();
  const c = app.counts;
  const postedToday = POSTS.filter(p => p.status === 'posted').length;
  const failedToday = POSTS.filter(p => p.status === 'failed').length;

  const stats = [
    { k: 'pool',     label: 'Chờ duyệt SP',    val: c.pool,                    icon: 'package',   tip: 'Stage 1 · sản phẩm đang chờ duyệt',         go: () => app.go('products', 'pool') },
    { k: 'campaign', label: 'KM đang chạy',    val: c.campaignActive || 0,     icon: 'megaphone', tip: 'Chiến dịch khuyến mãi đang active',          go: () => app.go('sources', 'campaigns') },
    { k: 'await',    label: 'Chờ duyệt ND',    val: c.awaiting,                icon: 'sparkle',   tip: 'Stage 2 · bài chờ duyệt text hoặc ảnh',     go: () => app.go('content', 'compose') },
    { k: 'sched',    label: 'Lên lịch',        val: c.scheduled || 0,          icon: 'calendar',  tip: 'Bài đã lên lịch, chờ tới giờ tự đăng',      go: () => app.go('schedule', 'calendar') },
    { k: 'posted',   label: 'Đã đăng',         val: postedToday,               icon: 'upload',    tip: 'Bài đã publish thành công (toàn bộ kênh)',   go: () => app.go('schedule', 'log') },
    { k: 'ads',      label: 'Quảng cáo',       val: c.adsActive || 0,          icon: 'megaphone', tip: 'Chiến dịch ads đang active (FB/IG/TikTok)',  go: () => app.go('analytics', 'ads') },
    { k: 'inbox',    label: 'Inbox chưa đọc',  val: c.inboxUnread || 0,        icon: 'mail',      tip: 'Tin nhắn chưa trả lời từ FB/IG/Zalo',         go: () => app.go('analytics', 'inbox') },
    { k: 'fail',     label: 'Lỗi',             val: failedToday,               icon: 'alert',     tip: 'Bài fail trong 24h gần đây',                  go: () => app.go('schedule', 'log') },
  ];

  return (
    <div className="page-pad">
      {/* Alert banner — chỉ hiển thị khi có brand fail */}
      {c.brandErr > 0 && (
        <div className="banner banner-danger" style={{ marginBottom: 18 }}>
          <Icon name="alert" size={18} style={{ color: 'var(--red)' }} />
          <div style={{ flex: 1 }}><span className="strong">{c.brandErr} brand đang fail crawl.</span></div>
          <Button variant="danger" size="sm" iconR="arrowR" onClick={() => app.go('sources', 'brands')}>Xem chi tiết</Button>
        </div>
      )}

      {/* KPI strip */}
      <div className="stat-grid" style={{ marginBottom: 20 }}>
        {stats.map(s => (
          <div className="stat" key={s.k} onClick={s.go} title={s.tip}>
            <div className="stat-top">
              <Icon name={s.icon} size={15} />
              <span className="t-xs strong" style={{ color: 'var(--text-2)' }}>{s.label}</span>
            </div>
            <div className="stat-val" style={{ color: s.k === 'fail' && s.val > 0 ? 'var(--red)' : undefined }}>{s.val}</div>
          </div>
        ))}
      </div>

      {/* Ads campaigns */}
      <AdsCampaignsBlock />

      {/* Inbox */}
      <InboxOverviewBlock />

      {/* Top posts cross-channel */}
      <CrossChannelTopPosts />

      {/* Bottom: activity + scrape health */}
      <div className="grid-2" style={{ gridTemplateColumns: '1.4fr 1fr', alignItems: 'start', marginTop: 20 }}>
        <div className="card">
          <div className="between" style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)' }}>
            <div className="t-h2">Hoạt động gần đây</div>
            <div className="live-dot"><span className="pulse"></span>Live</div>
          </div>
          <div style={{ padding: '6px 14px 12px' }}>
            <div className="timeline">
              {ACTIVITY.map((a, i) => (
                <div className="tl-item" key={i}>
                  <div className="tl-dot" style={{ color: a.color }}><Icon name={a.icon} size={14} /></div>
                  <div style={{ flex: 1 }}>
                    <div className="tl-line"><span className="strong">{a.who}</span> <span className="dim">{a.what}</span> <span className="strong">{a.target}</span></div>
                    <div className="tl-time">{a.time}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="card">
          <div className="between" style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)' }}>
            <div className="t-h2">Sức khỏe scrape</div>
            <button className="btn btn-ghost btn-sm" onClick={() => app.go('sources', 'brands')}>Tất cả</button>
          </div>
          <div style={{ padding: '10px 14px 14px', display: 'flex', flexDirection: 'column', gap: 4 }}>
            {BRANDS.filter(b => b.enabled).map(b => (
              <div key={b.key} className="row" style={{ padding: '8px 4px' }}>
                <BrandLogo brand={b} size={26} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="t-sm strong clip-1">{b.name}</div>
                  <div className="t-2xs dimmer">{b.lastScrape}</div>
                </div>
                <div style={{ width: 90 }}>
                  <div style={{ height: 6, background: 'var(--surface-2)', borderRadius: 99, overflow: 'hidden' }}>
                    <div style={{ width: b.rate24 + '%', height: '100%', borderRadius: 99, background: b.rate24 >= 90 ? 'var(--green)' : b.rate24 >= 70 ? 'var(--yellow)' : 'var(--red)' }}></div>
                  </div>
                  <div className="t-2xs dimmer mono" style={{ marginTop: 4, textAlign: 'right' }}>{b.rate24}% · {b.rateN}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============ ADS CAMPAIGNS BLOCK ============ */
function AdsCampaignsBlock() {
  const app = useApp();
  if (typeof ADS_CAMPAIGNS === 'undefined') return null;

  const byPlatform = ['facebook', 'instagram', 'tiktok'].map(plt => {
    const items = ADS_CAMPAIGNS.filter(a => a.platform === plt);
    const active = items.filter(a => a.status === 'active');
    const spend = items.reduce((s, a) => s + a.lifetimeSpend, 0);
    const roasSum = items.reduce((s, a) => s + a.roas * a.lifetimeSpend, 0);
    const avgRoas = spend > 0 ? (roasSum / spend) : 0;
    const totalReach = items.reduce((s, a) => s + a.reach, 0);
    const icon = plt === 'facebook' ? 'facebook' : plt === 'instagram' ? 'instagram' : 'video';
    const color = plt === 'facebook' ? '#1877f2' : plt === 'instagram' ? '#e4405f' : '#000';
    return { key: plt, label: plt === 'tiktok' ? 'TikTok' : plt[0].toUpperCase() + plt.slice(1), icon, color, active: active.length, total: items.length, spend, avgRoas, reach: totalReach };
  });

  const topCampaigns = [...ADS_CAMPAIGNS]
    .filter(a => a.status === 'active')
    .sort((a, b) => b.roas - a.roas)
    .slice(0, 4);

  return (
    <div className="card" style={{ marginBottom: 20, overflow: 'hidden' }}>
      <div className="between" style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)' }}>
        <div className="t-h2">Quảng cáo đang chạy</div>
        <button className="btn btn-ghost btn-sm" onClick={() => app.go('analytics', 'ads')}>Xem tất cả</button>
      </div>

      <div className="grid-3" style={{ gap: 0 }}>
        {byPlatform.map((p, i) => (
          <div key={p.key} style={{ padding: 14, borderRight: i < byPlatform.length - 1 ? '1px solid var(--border)' : 'none' }}>
            <div className="row gap-sm" style={{ marginBottom: 8 }}>
              <Icon name={p.icon} size={16} style={{ color: p.color }} />
              <span className="t-sm strong">{p.label}</span>
              <span className="t-2xs dimmer mono">{p.active}/{p.total} active</span>
            </div>
            <div className="grid-2" style={{ gap: 8 }}>
              <div>
                <div className="t-2xs dimmer">Chi tiêu</div>
                <div className="t-h2 mono">{fmtVNDcompact(p.spend)}đ</div>
              </div>
              <div>
                <div className="t-2xs dimmer">ROAS trung bình</div>
                <div className="t-h2 mono" style={{ color: p.avgRoas >= 2.5 ? 'var(--green)' : p.avgRoas >= 1.5 ? 'var(--yellow)' : 'var(--red)' }}>
                  {p.avgRoas.toFixed(1)}x
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {topCampaigns.length > 0 && (
        <div style={{ padding: '12px 18px', borderTop: '1px solid var(--border)' }}>
          <div className="t-2xs strong dimmer" style={{ marginBottom: 8 }}>TOP CHIẾN DỊCH (THEO ROAS)</div>
          <div className="col" style={{ gap: 6 }}>
            {topCampaigns.map(camp => (
              <div key={camp.id} className="row" style={{ gap: 10, padding: '6px 8px', borderRadius: 'var(--r-sm)', background: 'var(--surface)' }}>
                <Icon name={camp.platform === 'facebook' ? 'facebook' : camp.platform === 'instagram' ? 'instagram' : 'video'} size={14}
                  style={{ color: camp.platform === 'facebook' ? '#1877f2' : camp.platform === 'instagram' ? '#e4405f' : 'var(--text-2)' }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="t-xs strong clip-1">{camp.name}</div>
                  <div className="t-2xs dimmer mono">{camp.objective} · reach {fmtCompact(camp.reach)} · CTR {camp.ctr}%</div>
                </div>
                <div className="t-sm mono strong" style={{ color: camp.roas >= 2.5 ? 'var(--green)' : 'var(--text-2)' }}>{camp.roas.toFixed(1)}x</div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

/* ============ INBOX OVERVIEW BLOCK ============ */
function InboxOverviewBlock() {
  const app = useApp();
  if (typeof INBOX_STATS === 'undefined') return null;

  const channels = Object.entries(INBOX_STATS);

  return (
    <div className="card" style={{ marginBottom: 20, overflow: 'hidden' }}>
      <div className="between" style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)' }}>
        <div className="t-h2">Inbox</div>
        <button className="btn btn-ghost btn-sm" onClick={() => app.go('analytics', 'inbox')}>Xem tất cả</button>
      </div>
      <div className="grid-3" style={{ gap: 0 }}>
        {channels.map(([k, s], i) => {
          const slaOk = s.avgResponseMin <= s.slaTarget;
          return (
            <div key={k} style={{ padding: 14, borderRight: i < channels.length - 1 ? '1px solid var(--border)' : 'none', cursor: 'pointer' }} onClick={() => app.go('analytics', 'inbox')}>
              <div className="row gap-sm" style={{ marginBottom: 10 }}>
                <Icon name={s.icon} size={16} style={{ color: s.color }} />
                <span className="t-sm strong">{s.label}</span>
              </div>
              <div className="row" style={{ gap: 12, alignItems: 'baseline' }}>
                <div>
                  <div className="t-display mono" style={{ fontSize: 26, color: s.unreadCount > 0 ? 'var(--accent)' : 'var(--text-2)' }}>{s.unreadCount}</div>
                  <div className="t-2xs dimmer">chưa đọc</div>
                </div>
                <div>
                  <div className="t-sm mono strong">{s.awaitingReplyCount}</div>
                  <div className="t-2xs dimmer">chờ trả lời</div>
                </div>
                <div className="topbar-spacer"></div>
                <div style={{ textAlign: 'right' }}>
                  <div className="t-sm mono strong" style={{ color: slaOk ? 'var(--green)' : 'var(--yellow)' }}>{s.avgResponseMin}p</div>
                  <div className="t-2xs dimmer">SLA {s.slaTarget}p</div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ============ CROSS-CHANNEL TOP POSTS ============ */
function CrossChannelTopPosts() {
  const app = useApp();
  // Gộp topPosts từ 3 kênh, sort theo reach giảm dần, lấy top 5
  const all = [];
  Object.entries(SOCIAL_STATS).forEach(([k, ch]) => {
    ch.topPosts.forEach(tp => all.push({ ...tp, channel: k, channelLabel: ch.label, channelIcon: ch.icon, channelColor: ch.color }));
  });
  all.sort((a, b) => b.reach - a.reach);
  const top5 = all.slice(0, 5);

  return (
    <div className="card" style={{ marginBottom: 20, overflow: 'hidden' }}>
      <div className="between" style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)' }}>
        <div className="t-h2">Top bài viết cross-channel</div>
        <button className="btn btn-ghost btn-sm" onClick={() => app.go('analytics', 'posts')}>Xem tất cả</button>
      </div>
      <div className="col" style={{ padding: '10px 14px 14px', gap: 6 }}>
        {top5.map((tp, i) => (
          <div key={tp.channel + tp.id} className="row" style={{ gap: 10, padding: 8, background: 'var(--surface)', borderRadius: 'var(--r-sm)' }}>
            <div style={{ width: 22, height: 22, borderRadius: 99, background: i === 0 ? 'var(--accent)' : 'var(--surface-2)', color: i === 0 ? 'var(--accent-text)' : 'var(--text-2)', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700, flexShrink: 0 }}>{i + 1}</div>
            <Icon name={tp.channelIcon} size={14} style={{ color: tp.channelColor, flexShrink: 0 }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="t-xs strong clip-1">{tp.title}</div>
              <div className="row gap-sm t-2xs dimmer mono" style={{ marginTop: 2, flexWrap: 'wrap' }}>
                <span>👁 {fmtCompact(tp.reach)}</span>
                <span>♥ {fmtCompact(tp.likes)}</span>
                <span>↗ {fmtCompact(tp.shares)}</span>
                <span>💬 {fmtCompact(tp.comments)}</span>
                {tp.saves > 0 && <span>🔖 {fmtCompact(tp.saves)}</span>}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============ SOCIAL STATS (FB/IG/TikTok) ============ */
function SocialStatsSection() {
  const app = useApp();
  const channels = Object.entries(SOCIAL_STATS);
  const [active, setActive] = useStateLD(channels[0][0]);
  const s = SOCIAL_STATS[active];

  const peak = Math.max(...s.sparkline);
  const totalReach = channels.reduce((sum, [, v]) => sum + v.reach28d, 0);
  const totalFollowers = channels.reduce((sum, [, v]) => sum + v.followers, 0);

  return (
    <div className="card" style={{ marginBottom: 20, overflow: 'hidden' }}>
      <div className="between" style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)', flexWrap: 'wrap', gap: 10 }}>
        <div>
          <div className="t-h2">Hiệu suất mạng xã hội</div>
          <div className="t-xs dim" style={{ marginTop: 2 }}>
            28 ngày · tổng {fmtCompact(totalFollowers)} followers · reach {fmtCompact(totalReach)}
          </div>
        </div>
        <div className="row gap-sm" style={{ flexWrap: 'wrap' }}>
          {channels.map(([k, v]) => (
            <button key={k}
                    onClick={() => setActive(k)}
                    className="row gap-sm"
                    style={{
                      padding: '7px 12px', borderRadius: 'var(--r-md)', cursor: 'pointer',
                      background: active === k ? v.color : 'var(--surface-2)',
                      color: active === k ? '#fff' : 'var(--text-2)',
                      border: '1px solid ' + (active === k ? v.color : 'var(--border)'),
                      fontSize: 13, fontWeight: 600,
                    }}>
              <Icon name={v.icon} size={14} />
              <span>{v.label}</span>
              <span className="t-2xs mono" style={{ opacity: .85 }}>{fmtCompact(v.followers)}</span>
            </button>
          ))}
        </div>
      </div>

      <div style={{ padding: 18 }}>
        <div className="grid-4" style={{ gap: 12, marginBottom: 16 }}>
          <SocialMetric label="Followers" value={fmtCompact(s.followers)} delta={s.followersDelta} icon="user" raw />
          <SocialMetric label="Reach 28d" value={fmtCompact(s.reach28d)} delta={s.reachDelta} icon="eye" pct />
          <SocialMetric label="Engagement 28d" value={fmtCompact(s.engagement28d)} delta={s.engagementDelta} icon="sparkle" pct sub={'ER ' + s.er + '%'} />
          <SocialMetric label="Bài đăng 28d" value={s.posts28d} delta={s.postsDelta} icon="upload" raw />
        </div>

        <div className="grid-2" style={{ gridTemplateColumns: '1.4fr 1fr', alignItems: 'stretch' }}>
          {/* Sparkline */}
          <div className="card card-pad" style={{ background: 'var(--bg-2)' }}>
            <div className="between" style={{ marginBottom: 12 }}>
              <span className="t-2xs strong dimmer">REACH HÀNG NGÀY · 28 NGÀY QUA (NGHÌN)</span>
              <span className="t-2xs mono" style={{ color: s.color }}>peak {peak}k</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 90 }}>
              {s.sparkline.map((v, i) => (
                <div key={i} title={'Day ' + (i + 1) + ': ' + v + 'k'}
                     style={{
                       flex: 1, height: (v / peak * 100) + '%',
                       background: i === s.sparkline.length - 1 ? s.color : 'color-mix(in oklab, ' + s.color + ' 50%, transparent)',
                       borderRadius: 2, minHeight: 4,
                     }}></div>
              ))}
            </div>
            <div className="between t-2xs dimmer" style={{ marginTop: 8 }}>
              <span>28 ngày trước</span>
              <span>Hôm nay</span>
            </div>
          </div>

          {/* Top posts */}
          <div className="card card-pad" style={{ background: 'var(--bg-2)' }}>
            <div className="between" style={{ marginBottom: 10 }}>
              <span className="t-2xs strong dimmer">TOP 3 BÀI HIỆU SUẤT NHẤT</span>
            </div>
            <div className="col" style={{ gap: 8 }}>
              {s.topPosts.map((tp, i) => (
                <div key={tp.id} className="row" style={{ gap: 10, padding: 8, background: 'var(--surface)', borderRadius: 'var(--r-sm)' }}>
                  <div style={{ width: 22, height: 22, borderRadius: 99, background: i === 0 ? 'var(--accent)' : 'var(--surface-2)', color: i === 0 ? 'var(--accent-text)' : 'var(--text-2)', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700, flexShrink: 0 }}>{i + 1}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="t-xs strong clip-1">{tp.title}</div>
                    <div className="row gap-sm t-2xs dimmer mono" style={{ marginTop: 2 }}>
                      <span>👁 {fmtCompact(tp.reach)}</span>
                      <span>♥ {fmtCompact(tp.likes)}</span>
                      <span>↗ {fmtCompact(tp.shares)}</span>
                      <span>💬 {fmtCompact(tp.comments)}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function SocialMetric({ label, value, delta, icon, pct, raw, sub }) {
  const isPositive = delta >= 0;
  return (
    <div className="card card-pad" style={{ background: 'var(--bg-2)' }}>
      <div className="row gap-sm t-2xs strong dimmer" style={{ marginBottom: 6 }}>
        <Icon name={icon} size={12} />{label}
      </div>
      <div className="t-display mono" style={{ fontSize: 24 }}>{value}</div>
      <div className="row gap-sm" style={{ marginTop: 4 }}>
        <span className={'t-2xs mono strong ' + (isPositive ? '' : '')} style={{ color: isPositive ? 'var(--green)' : 'var(--red)' }}>
          {isPositive ? '▲' : '▼'} {pct ? Math.abs(delta) + '%' : raw ? (isPositive ? '+' : '') + delta : delta}
        </span>
        <span className="t-2xs dimmer">vs 28d trước</span>
        {sub && <><span className="t-2xs dimmer">·</span><span className="t-2xs dimmer">{sub}</span></>}
      </div>
    </div>
  );
}

function fmtCompact(n) {
  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
  if (n >= 1000) return (n / 1000).toFixed(n >= 10000 ? 0 : 1) + 'k';
  return String(n);
}

Object.assign(window, { LoginScreen, DashboardScreen, SocialStatsSection });