// screen-analytics.jsx — Batch 8: Posts + Archive
// Channels tab is already provided via ChannelsAnalyticsTab → SocialStatsSection.
const { useState: useStateAn, useMemo: useMemoAn } = React;

/* ============ synthetic post metrics ============ */
const POST_METRICS = (function () {
  const all = POSTS.filter(p => p.status === 'posted').map((p, i) => {
    const base = 1500 + (i * 217) % 3800;
    const reach = base + (i % 5 === 0 ? 8200 : 0);
    const likes = Math.round(reach * (0.04 + (i % 7) * 0.008));
    const comments = Math.round(reach * 0.006);
    const shares = Math.round(reach * 0.012);
    const saves = Math.round(reach * 0.004);
    const er = +((likes + comments + shares + saves) / reach * 100).toFixed(2);
    const ctr = +(0.8 + (i % 9) * 0.21).toFixed(2);
    const product = PRODUCTS.find(x => x.id === p.productId);
    return {
      ...p,
      productTitle: product ? product.titleVn : p.id,
      productBrand: product ? product.brand : '',
      reach, likes, comments, shares, saves, er, ctr,
    };
  });
  // give a couple of breakout performers
  if (all[1]) { all[1].reach = 28400; all[1].likes = 2840; all[1].shares = 312; all[1].comments = 198; all[1].er = 12.45; all[1].ctr = 4.20; }
  if (all[3]) { all[3].reach = 22100; all[3].likes = 1980; all[3].shares = 234; all[3].comments = 145; all[3].er = 10.66; all[3].ctr = 3.80; }
  return all;
})();

const ARCHIVE_ITEMS = (function () {
  const olds = POST_METRICS.slice(0, 6).map((p, i) => ({
    kind: 'post',
    id: p.id,
    title: p.productTitle,
    archivedAt: new Date(Date.now() - (31 + i * 4) * 86400000).toISOString(),
    reason: 'Quá 30 ngày',
    er: p.er,
    reach: p.reach,
    brand: p.productBrand,
    channel: p.channel === 'fb' ? 'facebook' : p.channel,
    topPerformer: p.er > 10,
  }));
  const unlistedProducts = PRODUCTS.filter(p => p.status === 'skipped' || p.status === 'rejected').slice(0, 4).map((p, i) => ({
    kind: 'product',
    id: p.id,
    title: p.titleVn,
    archivedAt: new Date(Date.now() - (42 + i * 6) * 86400000).toISOString(),
    reason: 'Bỏ qua / unlist',
    brand: p.brand,
    score: p.score,
  }));
  return [...olds, ...unlistedProducts].sort((a, b) => new Date(b.archivedAt) - new Date(a.archivedAt));
})();

function fmtNum(n) { return n >= 1000 ? (n / 1000).toFixed(n >= 10000 ? 0 : 1) + 'K' : String(n); }
function dDays(iso) {
  return Math.floor((Date.now() - new Date(iso).getTime()) / 86400000);
}

/* ============ POSTS ANALYTICS SCREEN ============ */
function PostsAnalyticsScreen() {
  const [brand, setBrand] = useStateAn('all');
  const [tone, setTone] = useStateAn('all');
  const [channel, setChannel] = useStateAn('all');
  const [sort, setSort] = useStateAn('reach');
  const [search, setSearch] = useStateAn('');

  const rows = useMemoAn(() => {
    let r = POST_METRICS;
    if (brand !== 'all') r = r.filter(x => x.productBrand === brand);
    if (tone !== 'all') r = r.filter(x => x.tone === tone);
    if (channel !== 'all') r = r.filter(x => (x.channel === 'fb' ? 'facebook' : x.channel) === channel);
    if (search) r = r.filter(x => (x.productTitle + ' ' + x.id).toLowerCase().includes(search.toLowerCase()));
    return [...r].sort((a, b) => b[sort] - a[sort]);
  }, [brand, tone, channel, sort, search]);

  const stats = useMemoAn(() => {
    const total = POST_METRICS.length;
    const reach = POST_METRICS.reduce((a, b) => a + b.reach, 0);
    const eng = POST_METRICS.reduce((a, b) => a + b.likes + b.comments + b.shares + b.saves, 0);
    const er = +(eng / reach * 100).toFixed(2);
    const ctr = +(POST_METRICS.reduce((a, b) => a + b.ctr, 0) / total).toFixed(2);
    const top = [...POST_METRICS].sort((a, b) => b.shares - a.shares)[0];
    return { total, reach, eng, er, ctr, top };
  }, []);

  return (
    <div className="page-pad">
      {/* Insight banner */}
      {stats.top && (
        <div className="card card-pad" style={{ marginBottom: 14, background: 'var(--surface-2)', display: 'flex', gap: 12, alignItems: 'center' }}>
          <div style={{ width: 38, height: 38, borderRadius: 12, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'grid', placeItems: 'center' }}>
            <Icon name="sparkle" size={20} stroke={1.7} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="t-sm strong clip-1">Insight: bài share cao nhất là <em>{stats.top.productTitle}</em></div>
            <div className="t-2xs dimmer">Tone <strong>{stats.top.tone}</strong> · {fmtNum(stats.top.shares)} share / {fmtNum(stats.top.reach)} reach · gợi ý nhân bản tone này</div>
          </div>
          <Button variant="ghost" icon="copy" size="sm">Nhân bản tone</Button>
        </div>
      )}

      {/* Stats */}
      <div className="row gap-sm" style={{ marginBottom: 14, flexWrap: 'wrap' }}>
        <AnStat label="Bài đã đăng" value={stats.total} icon="upload" color="var(--accent)" />
        <AnStat label="Reach tổng" value={fmtNum(stats.reach)} icon="user" color="var(--blue)" />
        <AnStat label="Engagement" value={fmtNum(stats.eng)} icon="flag" color="var(--red)" />
        <AnStat label="ER trung bình" value={stats.er + '%'} icon="zap" color="var(--green)" />
        <AnStat label="CTR trung bình" value={stats.ctr + '%'} icon="external" color="var(--yellow)" />
      </div>

      {/* Filter bar */}
      <div className="card card-pad" style={{ marginBottom: 14 }}>
        <div className="row gap-sm" style={{ flexWrap: 'wrap', alignItems: 'center' }}>
          <select className="input sm" value={brand} onChange={e => setBrand(e.target.value)} style={{ width: 140 }}>
            <option value="all">Tất cả brand</option>
            {BRANDS.map(b => <option key={b.key} value={b.key}>{b.name}</option>)}
          </select>
          <select className="input sm" value={tone} onChange={e => setTone(e.target.value)} style={{ width: 160 }}>
            <option value="all">Tất cả tone</option>
            {TONE_PRESETS.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
          </select>
          <select className="input sm" value={channel} onChange={e => setChannel(e.target.value)} style={{ width: 140 }}>
            <option value="all">Tất cả kênh</option>
            {SOCIAL_CHANNELS.map(c => <option key={c.key} value={c.key}>{c.label}</option>)}
          </select>
          <select className="input sm" value={sort} onChange={e => setSort(e.target.value)} style={{ width: 160 }}>
            <option value="reach">Sort: Reach cao</option>
            <option value="er">Sort: ER cao</option>
            <option value="shares">Sort: Share cao</option>
            <option value="ctr">Sort: CTR cao</option>
            <option value="likes">Sort: Like cao</option>
          </select>
          <div style={{ flex: 1, minWidth: 180, position: 'relative' }}>
            <Icon name="search" size={14} style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-3)' }} />
            <input className="input sm" placeholder="Tìm bài đăng..." value={search} onChange={e => setSearch(e.target.value)} style={{ paddingLeft: 30 }} />
          </div>
          <Button variant="ghost" icon="download" size="sm">Export CSV</Button>
        </div>
      </div>

      {/* Table */}
      <div className="card" style={{ overflow: 'hidden' }}>
        <div className="row" style={{
          padding: '10px 14px', background: 'var(--surface-2)',
          borderBottom: '1px solid var(--border)', fontSize: 11, fontWeight: 600, color: 'var(--text-2)', textTransform: 'uppercase', letterSpacing: 0.4
        }}>
          <div style={{ flex: 1, minWidth: 0 }}>Bài đăng</div>
          <div style={{ width: 70, textAlign: 'right' }}>Reach</div>
          <div style={{ width: 60, textAlign: 'right' }}>Like</div>
          <div style={{ width: 60, textAlign: 'right' }}>Share</div>
          <div style={{ width: 60, textAlign: 'right' }}>CMT</div>
          <div style={{ width: 60, textAlign: 'right' }}>Save</div>
          <div style={{ width: 60, textAlign: 'right' }}>ER%</div>
          <div style={{ width: 60, textAlign: 'right' }}>CTR%</div>
        </div>
        {rows.length === 0
          ? <div style={{ padding: 32, textAlign: 'center' }} className="t-sm dim">Không có bài phù hợp.</div>
          : rows.slice(0, 30).map((r, i) => <PostMetricRow key={r.id} row={r} divider={i < rows.length - 1} />)}
      </div>
    </div>
  );
}

function AnStat({ label, value, icon, color }) {
  return (
    <div className="card card-pad" style={{ flex: '1 1 180px', minWidth: 160 }}>
      <div className="row gap-xs" style={{ alignItems: 'center', marginBottom: 4 }}>
        <Icon name={icon} size={14} stroke={1.6} style={{ color }} />
        <span className="t-2xs strong dimmer" style={{ textTransform: 'uppercase', letterSpacing: 0.4 }}>{label}</span>
      </div>
      <div className="t-h2" style={{ color, fontSize: 22 }}>{value}</div>
    </div>
  );
}

function PostMetricRow({ row, divider }) {
  const b = brandOf(row.productBrand);
  const ch = SOCIAL_CHANNELS.find(c => c.key === (row.channel === 'fb' ? 'facebook' : row.channel)) || {};
  return (
    <div className="row" style={{ padding: '10px 14px', borderBottom: divider ? '1px solid var(--border)' : 'none', alignItems: 'center' }}>
      <div className="row gap-sm" style={{ flex: 1, minWidth: 0 }}>
        <BrandLogo brand={b} size={22} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="t-xs strong clip-1">{row.productTitle}</div>
          <div className="row gap-xs" style={{ marginTop: 2 }}>
            <Icon name={ch.icon || 'globe'} size={11} style={{ color: ch.color || 'var(--text-2)' }} />
            <span className="t-2xs dimmer">{ch.label || row.channel}</span>
            {row.tone && <span className="t-2xs dimmer">· {row.tone}</span>}
            <span className="t-2xs dimmer">· {row.format}</span>
          </div>
        </div>
      </div>
      <div style={{ width: 70, textAlign: 'right' }} className="t-xs mono">{fmtNum(row.reach)}</div>
      <div style={{ width: 60, textAlign: 'right' }} className="t-xs mono">{fmtNum(row.likes)}</div>
      <div style={{ width: 60, textAlign: 'right' }} className="t-xs mono">{fmtNum(row.shares)}</div>
      <div style={{ width: 60, textAlign: 'right' }} className="t-xs mono">{fmtNum(row.comments)}</div>
      <div style={{ width: 60, textAlign: 'right' }} className="t-xs mono">{row.saves > 0 ? fmtNum(row.saves) : '—'}</div>
      <div className="t-xs mono strong"
           style={{ width: 60, textAlign: 'right', color: row.er > 8 ? 'var(--green)' : row.er > 5 ? 'var(--text-1)' : 'var(--text-3)' }}>
        {row.er}
      </div>
      <div style={{ width: 60, textAlign: 'right' }} className="t-xs mono">{row.ctr}</div>
    </div>
  );
}

/* ============ ARCHIVE SCREEN ============ */
function ArchiveScreen() {
  const [kind, setKind] = useStateAn('all');
  const [search, setSearch] = useStateAn('');

  const rows = useMemoAn(() => {
    let r = ARCHIVE_ITEMS;
    if (kind !== 'all') r = r.filter(x => x.kind === kind);
    if (search) r = r.filter(x => x.title.toLowerCase().includes(search.toLowerCase()));
    return r;
  }, [kind, search]);

  const stats = useMemoAn(() => ({
    total: ARCHIVE_ITEMS.length,
    posts: ARCHIVE_ITEMS.filter(x => x.kind === 'post').length,
    products: ARCHIVE_ITEMS.filter(x => x.kind === 'product').length,
    topPerf: ARCHIVE_ITEMS.filter(x => x.topPerformer).length,
  }), []);

  return (
    <div className="page-pad">
      <div className="card card-pad" style={{ marginBottom: 14, background: 'var(--surface-2)' }}>
        <div className="row gap-sm" style={{ alignItems: 'center' }}>
          <Icon name="archive" size={18} stroke={1.6} style={{ color: 'var(--text-2)' }} />
          <div style={{ flex: 1 }}>
            <div className="t-sm strong">Archive</div>
            <div className="t-2xs dim">Bài đăng &gt; 30 ngày + sản phẩm đã unlist. Search/restore. Bài top performer dùng làm training tone.</div>
          </div>
          <Button variant="ghost" icon="sparkle" size="sm">Tạo bộ training tone</Button>
        </div>
      </div>

      <div className="row gap-sm" style={{ marginBottom: 14, flexWrap: 'wrap' }}>
        <AnStat label="Tổng archive" value={stats.total} icon="archive" color="var(--text-2)" />
        <AnStat label="Bài đăng cũ" value={stats.posts} icon="upload" color="var(--blue)" />
        <AnStat label="Sản phẩm unlist" value={stats.products} icon="package" color="var(--text-3)" />
        <AnStat label="Top performer" value={stats.topPerf} icon="star" color="var(--yellow)" />
      </div>

      <div className="card card-pad" style={{ marginBottom: 14 }}>
        <div className="row gap-sm" style={{ flexWrap: 'wrap', alignItems: 'center' }}>
          <Seg options={[
            { value: 'all', label: 'Tất cả' },
            { value: 'post', label: 'Bài đăng' },
            { value: 'product', label: 'Sản phẩm' },
          ]} value={kind} onChange={setKind} />
          <div style={{ flex: 1, minWidth: 180, position: 'relative' }}>
            <Icon name="search" size={14} style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-3)' }} />
            <input className="input sm" placeholder="Tìm trong archive..." value={search} onChange={e => setSearch(e.target.value)} style={{ paddingLeft: 30 }} />
          </div>
        </div>
      </div>

      <div className="card" style={{ overflow: 'hidden' }}>
        {rows.length === 0
          ? <div style={{ padding: 32, textAlign: 'center' }} className="t-sm dim">Không có mục archive.</div>
          : rows.map((r, i) => <ArchiveRow key={r.id} row={r} divider={i < rows.length - 1} />)}
      </div>
    </div>
  );
}

function ArchiveRow({ row, divider }) {
  const b = row.brand ? brandOf(row.brand) : null;
  return (
    <div className="row" style={{ padding: '12px 14px', borderBottom: divider ? '1px solid var(--border)' : 'none', alignItems: 'center', gap: 12 }}>
      <div style={{ width: 32, height: 32, borderRadius: 10, background: 'var(--surface-2)', color: row.kind === 'post' ? 'var(--blue)' : 'var(--text-3)', display: 'grid', placeItems: 'center' }}>
        <Icon name={row.kind === 'post' ? 'upload' : 'package'} size={16} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="row gap-xs" style={{ alignItems: 'center' }}>
          <span className="t-sm strong clip-1">{row.title}</span>
          {row.topPerformer && <Badge variant="yellow" icon="star">Top</Badge>}
        </div>
        <div className="t-2xs dimmer">
          {row.reason} · {dDays(row.archivedAt)} ngày trước
          {b && ` · ${b.name}`}
          {row.kind === 'post' && row.reach && ` · ${fmtNum(row.reach)} reach · ER ${row.er}%`}
          {row.kind === 'product' && row.score != null && ` · score ${row.score}`}
        </div>
      </div>
      <Button variant="ghost" size="sm" icon="rotate">Restore</Button>
      <Button variant="ghost" size="sm" icon="download">Export</Button>
    </div>
  );
}

/* ============ ADS ANALYTICS TAB ============ */
function fmtVND(n) {
  if (n >= 1000000) return (n / 1000000).toFixed(n >= 10000000 ? 0 : 1) + 'tr';
  if (n >= 1000) return Math.round(n / 1000) + 'k';
  return String(n);
}

function AdsAnalyticsTab() {
  const [platform, setPlatform] = useStateAn('all');
  const [status, setStatus] = useStateAn('all');

  const rows = useMemoAn(() => {
    let r = typeof ADS_CAMPAIGNS !== 'undefined' ? ADS_CAMPAIGNS : [];
    if (platform !== 'all') r = r.filter(x => x.platform === platform);
    if (status !== 'all') r = r.filter(x => x.status === status);
    return [...r].sort((a, b) => b.roas - a.roas);
  }, [platform, status]);

  const stats = useMemoAn(() => {
    const all = typeof ADS_CAMPAIGNS !== 'undefined' ? ADS_CAMPAIGNS : [];
    const active = all.filter(c => c.status === 'active');
    const spend = all.reduce((s, c) => s + c.lifetimeSpend, 0);
    const reach = all.reduce((s, c) => s + c.reach, 0);
    const conversions = all.reduce((s, c) => s + c.conversions, 0);
    const roasSum = all.reduce((s, c) => s + c.roas * c.lifetimeSpend, 0);
    const ctrAvg = all.length ? (all.reduce((s, c) => s + c.ctr, 0) / all.length) : 0;
    return {
      activeCount: active.length, total: all.length,
      spend, reach, conversions,
      avgRoas: spend > 0 ? (roasSum / spend) : 0,
      avgCtr: ctrAvg,
    };
  }, []);

  const platformBadge = (p) => {
    const ic = p === 'facebook' ? 'facebook' : p === 'instagram' ? 'instagram' : 'video';
    const col = p === 'facebook' ? '#1877f2' : p === 'instagram' ? '#e4405f' : 'var(--text)';
    const lbl = p === 'tiktok' ? 'TikTok' : p[0].toUpperCase() + p.slice(1);
    return <span className="row gap-xs"><Icon name={ic} size={12} style={{ color: col }} /><span className="t-2xs">{lbl}</span></span>;
  };
  const statusBadge = (s) => {
    const map = { active: 'green', paused: 'yellow', ended: 'neutral' };
    const lbl = { active: 'Đang chạy', paused: 'Tạm dừng', ended: 'Đã kết thúc' };
    return <Badge variant={map[s] || 'neutral'}>{lbl[s] || s}</Badge>;
  };

  return (
    <div className="page-pad">
      <div className="row gap-sm" style={{ marginBottom: 14, flexWrap: 'wrap' }}>
        <AnStat label="Đang chạy" value={stats.activeCount + '/' + stats.total} icon="megaphone" color="var(--accent)" />
        <AnStat label="Chi tiêu" value={fmtVND(stats.spend) + 'đ'} icon="zap" color="var(--blue)" />
        <AnStat label="Reach" value={fmtNum(stats.reach)} icon="eye" color="var(--text-2)" />
        <AnStat label="Conversion" value={stats.conversions} icon="check" color="var(--green)" />
        <AnStat label="ROAS TB" value={stats.avgRoas.toFixed(1) + 'x'} icon="trending" color={stats.avgRoas >= 2.5 ? 'var(--green)' : 'var(--yellow)'} />
        <AnStat label="CTR TB" value={stats.avgCtr.toFixed(2) + '%'} icon="external" color="var(--accent)" />
      </div>

      <div className="card card-pad" style={{ marginBottom: 14 }}>
        <div className="row gap-sm" style={{ flexWrap: 'wrap', alignItems: 'center' }}>
          <select className="input sm" value={platform} onChange={e => setPlatform(e.target.value)} style={{ width: 160 }}>
            <option value="all">Tất cả nền tảng</option>
            <option value="facebook">Facebook Ads</option>
            <option value="instagram">Instagram Ads</option>
            <option value="tiktok">TikTok Ads</option>
          </select>
          <select className="input sm" value={status} onChange={e => setStatus(e.target.value)} style={{ width: 160 }}>
            <option value="all">Tất cả trạng thái</option>
            <option value="active">Đang chạy</option>
            <option value="paused">Tạm dừng</option>
            <option value="ended">Đã kết thúc</option>
          </select>
          <div className="topbar-spacer"></div>
          <Button variant="ghost" icon="download" size="sm">Export CSV</Button>
        </div>
      </div>

      <div className="card" style={{ overflow: 'hidden' }}>
        <div className="row" style={{
          padding: '10px 14px', background: 'var(--surface-2)',
          borderBottom: '1px solid var(--border)', fontSize: 11, fontWeight: 600, color: 'var(--text-2)', textTransform: 'uppercase', letterSpacing: 0.4
        }}>
          <div style={{ flex: 1, minWidth: 0 }}>Chiến dịch</div>
          <div style={{ width: 90, textAlign: 'right' }}>Chi tiêu</div>
          <div style={{ width: 70, textAlign: 'right' }}>Reach</div>
          <div style={{ width: 60, textAlign: 'right' }}>CTR%</div>
          <div style={{ width: 70, textAlign: 'right' }}>Conv</div>
          <div style={{ width: 70, textAlign: 'right' }}>CPA</div>
          <div style={{ width: 60, textAlign: 'right' }}>ROAS</div>
        </div>
        {rows.length === 0
          ? <div style={{ padding: 32, textAlign: 'center' }} className="t-sm dim">Không có chiến dịch phù hợp.</div>
          : rows.map((r, i) => (
            <div key={r.id} className="row" style={{ padding: '10px 14px', borderBottom: i < rows.length - 1 ? '1px solid var(--border)' : 'none', alignItems: 'center' }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="row gap-xs" style={{ marginBottom: 2 }}>
                  <span className="t-xs strong clip-1">{r.name}</span>
                  {statusBadge(r.status)}
                </div>
                <div className="row gap-sm" style={{ flexWrap: 'wrap' }}>
                  {platformBadge(r.platform)}
                  <span className="t-2xs dimmer">· {r.objective}</span>
                  <span className="t-2xs dimmer">· {r.startAt} → {r.endAt}</span>
                </div>
              </div>
              <div style={{ width: 90, textAlign: 'right' }} className="t-xs mono">{fmtVND(r.lifetimeSpend)}đ</div>
              <div style={{ width: 70, textAlign: 'right' }} className="t-xs mono">{fmtNum(r.reach)}</div>
              <div style={{ width: 60, textAlign: 'right' }} className="t-xs mono">{r.ctr}</div>
              <div style={{ width: 70, textAlign: 'right' }} className="t-xs mono">{r.conversions}</div>
              <div style={{ width: 70, textAlign: 'right' }} className="t-xs mono">{fmtVND(r.cpa)}đ</div>
              <div className="t-xs mono strong"
                   style={{ width: 60, textAlign: 'right', color: r.roas >= 2.5 ? 'var(--green)' : r.roas >= 1.5 ? 'var(--yellow)' : 'var(--red)' }}>
                {r.roas.toFixed(1)}x
              </div>
            </div>
          ))}
      </div>

      <div className="t-2xs dimmer" style={{ marginTop: 12, padding: '0 4px' }}>
        Dữ liệu fetch từ Meta Marketing API (/act_/insights) và TikTok Marketing API (/report/integrated/get/). Yêu cầu scope ads_read.
      </div>
    </div>
  );
}

/* ============ INBOX ANALYTICS TAB ============ */
function InboxAnalyticsTab() {
  const app = useApp();
  if (typeof INBOX_STATS === 'undefined') {
    return <div className="page-pad"><div className="card card-pad t-sm dim">Chưa nạp dữ liệu inbox.</div></div>;
  }
  const channels = Object.entries(INBOX_STATS);
  const [active, setActive] = useStateAn(channels[0][0]);
  const s = INBOX_STATS[active];
  const peak = Math.max(...s.last7d);

  return (
    <div className="page-pad">
      {/* Channel selector */}
      <div className="row gap-sm" style={{ marginBottom: 14, flexWrap: 'wrap' }}>
        {channels.map(([k, ch]) => (
          <button key={k} onClick={() => setActive(k)}
            className="row gap-sm"
            style={{
              padding: '8px 14px', borderRadius: 'var(--r-md)', cursor: 'pointer',
              background: active === k ? ch.color : 'var(--surface-2)',
              color: active === k ? '#fff' : 'var(--text-2)',
              border: '1px solid ' + (active === k ? ch.color : 'var(--border)'),
              fontSize: 13, fontWeight: 600,
            }}>
            <Icon name={ch.icon} size={14} />
            <span>{ch.label}</span>
            <span className="t-2xs mono" style={{ opacity: .85 }}>{ch.unreadCount}</span>
          </button>
        ))}
      </div>

      {/* Stat grid */}
      <div className="row gap-sm" style={{ marginBottom: 14, flexWrap: 'wrap' }}>
        <AnStat label="Chưa đọc" value={s.unreadCount} icon="mail" color="var(--accent)" />
        <AnStat label="Chờ trả lời" value={s.awaitingReplyCount} icon="clock" color="var(--yellow)" />
        <AnStat label="Conversation" value={s.totalConversations} icon="messageCircle" color="var(--text-2)" />
        <AnStat label="Phản hồi TB" value={s.avgResponseMin + 'p'} icon="zap" color={s.avgResponseMin <= s.slaTarget ? 'var(--green)' : 'var(--red)'} />
        <AnStat label="SLA target" value={s.slaTarget + 'p'} icon="target" color="var(--text-3)" />
      </div>

      {/* Sparkline + Recent list */}
      <div className="grid-2" style={{ gridTemplateColumns: '1fr 1.4fr', gap: 14, alignItems: 'start' }}>
        <div className="card card-pad" style={{ background: 'var(--bg-2)' }}>
          <div className="between" style={{ marginBottom: 12 }}>
            <span className="t-2xs strong dimmer">TIN NHẮN HÀNG NGÀY · 7 NGÀY</span>
            <span className="t-2xs mono" style={{ color: s.color }}>peak {peak}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 90 }}>
            {s.last7d.map((v, i) => (
              <div key={i} title={'Ngày ' + (i + 1) + ': ' + v + ' tin nhắn'}
                style={{
                  flex: 1, height: (v / peak * 100) + '%',
                  background: i === s.last7d.length - 1 ? s.color : 'color-mix(in oklab, ' + s.color + ' 50%, transparent)',
                  borderRadius: 3, minHeight: 6,
                }}></div>
            ))}
          </div>
          <div className="between t-2xs dimmer" style={{ marginTop: 8 }}>
            <span>7 ngày trước</span>
            <span>Hôm nay</span>
          </div>
        </div>

        <div className="card" style={{ overflow: 'hidden' }}>
          <div className="between" style={{ padding: '12px 14px', borderBottom: '1px solid var(--border)' }}>
            <span className="t-2xs strong dimmer">TIN NHẮN GẦN ĐÂY</span>
            <Button variant="ghost" size="sm" icon="external" onClick={() => app.toast && app.toast('Mở console ' + s.label, 'external')}>Mở console</Button>
          </div>
          <div>
            {s.recent.map((m, i) => (
              <div key={m.id} className="row" style={{ padding: '10px 14px', gap: 10, borderBottom: i < s.recent.length - 1 ? '1px solid var(--border)' : 'none' }}>
                <div style={{ width: 8, height: 8, borderRadius: 99, background: m.unread ? s.color : 'transparent', flexShrink: 0, marginTop: 6 }}></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="row gap-sm">
                    <span className="t-xs strong">{m.from}</span>
                    {m.unread && <Badge variant="accent">Chưa đọc</Badge>}
                  </div>
                  <div className="t-xs dim clip-1" style={{ marginTop: 2 }}>{m.preview}</div>
                </div>
                <div className="t-2xs dimmer mono" style={{ flexShrink: 0 }}>{new Date(m.receivedAt).toLocaleTimeString('vi-VN', { hour: '2-digit', minute: '2-digit' })}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="t-2xs dimmer" style={{ marginTop: 12, padding: '0 4px' }}>
        Nguồn: Facebook Messenger Platform (/conversations?fields=unread_count), Instagram Messaging API (/me/conversations?platform=instagram), Zalo OA Open API. TikTok không cung cấp DM endpoint công khai nên không có trong danh sách.
      </div>
    </div>
  );
}

Object.assign(window, { PostsAnalyticsScreen, ArchiveScreen, AnStat, AdsAnalyticsTab, InboxAnalyticsTab });