/* AAU CRM — Marketing: Cổng kết nối (tổng quan capability).
   Bảng tham chiếu cho team marketing: 11 nguồn / 4 nhóm — MỖI CỔNG THỰC SỰ kéo về gì.
   Nguồn dữ liệu của bảng = soi code backend (channels/fbads/fbpages/igconnect/threads/
   tiktokads/tiktokorganic/webtracking/websheets/leadgen). Cấu hình thật ở /system/channels. */

function ConnectionsOverview() {
  // y = kéo đầy đủ · n = không · {p:'…'} = MỘT PHẦN (ghi rõ giới hạn ngay trên ô)
  const Y = 'y', N = 'n';
  const GROUPS = [
    {
      key: 'chat', name: 'Nhóm 1 — Chat (2 chiều)', color: '#0084ff', icon: 'inbox',
      desc: 'Tin nhắn khách → Inbox + tự tạo Lead. Cập nhật gần như realtime.',
      rows: [
        { name: 'Kênh chat OA (FB · IG · Zalo OA)', lead: Y, cmt: N, eng: Y, ins: N, chat: Y, ads: N,
          sync: { t: 'Tự động · 120s', tone: 'success' },
          note: 'Hội thoại → tạo lead + chấm QC. Số THẬT khi nối CQA, ngược lại là demo.' },
        { name: 'Zalo cá nhân (zalo-bridge)', lead: Y, cmt: N, eng: Y, ins: N, chat: Y, ads: N,
          sync: { t: 'Realtime (push)', tone: 'success' },
          note: 'Bản KHÔNG chính thức — dùng SỐ PHỤ, có rủi ro khóa. Nhận tin tức thì.' },
      ],
    },
    {
      key: 'ads', name: 'Nhóm 2 — Ads (chi phí + hiệu suất)', color: '#c4320a', icon: 'megaphone',
      desc: 'Spend / impression / click / CPL. Lead ở đây là CON SỐ, không kèm liên hệ.',
      rows: [
        { name: 'Facebook Ads', lead: { p: 'chỉ số' }, cmt: N, eng: N, ins: Y, chat: N, ads: Y,
          sync: { t: 'Tự động · 15′', tone: 'success' },
          note: 'CPL/CTR/CVR thật. "Lead" = con số trong insight, KHÔNG có tên/SĐT.' },
        { name: 'Ad Sources (nhiều tài khoản FB)', lead: { p: 'chỉ số' }, cmt: N, eng: N, ins: Y, chat: N, ads: Y,
          sync: { t: 'Tự động · 15′', tone: 'success' },
          note: 'Quản lý nhiều tài khoản FB Ads; 1 nguồn "đang dùng" được auto-sync.' },
        { name: 'TikTok Ads', lead: { p: 'chỉ số' }, cmt: Y, eng: N, ins: Y, chat: N, ads: Y,
          sync: { t: 'Tự động · 15′', tone: 'success' },
          note: 'Comment DƯỚI QUẢNG CÁO thật + trả lời/ẩn ngay. "Lead" = con số.' },
      ],
    },
    {
      key: 'organic', name: 'Nhóm 3 — Organic content (post + insight)', color: '#7c3aed', icon: 'fileText',
      desc: 'Reach / engagement / insight từng bài. Comment hiện CHỈ ĐẾM tổng, chưa lấy nội dung.',
      rows: [
        { name: 'Facebook Page & Content', lead: N, cmt: { p: 'chỉ đếm' }, eng: Y, ins: Y, chat: N, ads: N,
          sync: { t: 'Live khi mở', tone: 'info' },
          note: 'Reach/engagement/post thật, đọc trực tiếp mỗi lần mở màn. Comment chỉ lấy tổng số.' },
        { name: 'Instagram', lead: N, cmt: { p: 'chỉ đếm' }, eng: Y, ins: Y, chat: N, ads: N,
          sync: { t: 'Live khi mở', tone: 'info' },
          note: 'Account + media insight (reach/save/eng) thật, đọc live. Comment chỉ đếm tổng.' },
        { name: 'TikTok Organic (@kênh)', lead: N, cmt: { p: 'chỉ đếm' }, eng: Y, ins: Y, chat: N, ads: N,
          sync: { t: 'Live khi mở', tone: 'info' },
          note: 'Follower/like/video + ER% thật (Display API), đọc live. Token 24h tự gia hạn.' },
        { name: 'Threads', lead: N, cmt: { p: 'chỉ đếm' }, eng: Y, ins: Y, chat: N, ads: N,
          sync: { t: 'Live khi mở', tone: 'info' },
          note: 'Views/replies/reposts thật, đọc live. Token 60 ngày. Chưa có DM (Threads chưa mở).' },
      ],
    },
    {
      key: 'web', name: 'Nhóm 4 — Web & Form', color: '#0a9e6e', icon: 'barChart',
      desc: 'Lưu lượng web (GA4) + form web → Lead.',
      rows: [
        { name: 'GA4 Web Tracking', lead: N, cmt: N, eng: Y, ins: Y, chat: N, ads: N,
          sync: { t: 'Tự động · 15′', tone: 'success' },
          note: 'Session/conversion/landing thật. Tách riêng khỏi ads spend (webFacts).' },
        { name: 'Google Sheets (form web / ebook)', lead: Y, cmt: N, eng: N, ins: N, chat: N, ads: N,
          sync: { t: 'Tự động · 30′', tone: 'success' },
          note: 'Form web → tạo lead vào pipeline (stage 2.1). Gộp trùng theo SĐT.' },
      ],
    },
  ];

  const COLS = [
    { k: 'lead', l: 'Lead' }, { k: 'cmt', l: 'Comment' }, { k: 'eng', l: 'Tương tác' },
    { k: 'ins', l: 'Insight' }, { k: 'chat', l: 'Chat 2 chiều' }, { k: 'ads', l: 'Ads spend' },
  ];

  const cell = (v) => {
    if (v === 'y') return <Icon name="check" size={15} color="#0a9e6e" />;
    if (v === 'n') return <span className="subtle">—</span>;
    return <Badge tone="warning">{v.p}</Badge>; // một phần
  };

  return (
    <div className="page wide">
      <PageHead title="Cổng kết nối — Tổng quan" breadcrumb={[{ label: 'Marketing' }, { label: 'Cổng kết nối' }]}
        subtitle="11 nguồn · 4 nhóm — bảng này nói rõ MỖI CỔNG THỰC SỰ kéo về gì (soi từ code, không phải nhãn). Cấu hình token & bật/tắt ở Hệ thống → Nguồn kết nối."
        actions={<Button icon="settings" variant="primary" onClick={() => navigate('/system/channels')}>Cấu hình cổng</Button>} />

      <Card title="Chú thích" className="mb16">
        <div className="row aic g24" style={{ flexWrap: 'wrap' }}>
          <span className="row aic g6"><Icon name="check" size={15} color="#0a9e6e" /><span className="t13">Kéo đầy đủ</span></span>
          <span className="row aic g6"><Badge tone="warning">một phần</Badge><span className="t13">Có nhưng giới hạn (ô ghi rõ)</span></span>
          <span className="row aic g6"><span className="subtle">—</span><span className="t13 muted">Không hỗ trợ</span></span>
          <span className="row aic g6"><Badge tone="success">Tự động</Badge><span className="t13">Chạy nền theo lịch / realtime</span></span>
          <span className="row aic g6"><Badge tone="info">Live khi mở</Badge><span className="t13">Đọc trực tiếp mỗi lần mở màn (luôn tươi)</span></span>
          <span className="row aic g6"><Badge tone="warning">Thủ công</Badge><span className="t13">Phải bấm “Đồng bộ” mới cập nhật</span></span>
        </div>
      </Card>

      {GROUPS.map(g => (
        <Card key={g.key} className="mb16"
          title={<span className="row aic g8"><Icon name={g.icon} size={16} color={g.color} />{g.name}</span>}
          subtitle={g.desc}>
          <div style={{ overflowX: 'auto' }}>
            <table className="tbl">
              <thead>
                <tr>
                  <th style={{ minWidth: 230 }}>Cổng</th>
                  {COLS.map(c => <th key={c.k} style={{ textAlign: 'center' }}>{c.l}</th>)}
                  <th style={{ textAlign: 'center', minWidth: 110 }}>Đồng bộ</th>
                  <th style={{ minWidth: 280 }}>Ghi chú</th>
                </tr>
              </thead>
              <tbody>
                {g.rows.map((r, i) => (
                  <tr key={i}>
                    <td className="fw6">{r.name}</td>
                    {COLS.map(c => <td key={c.k} style={{ textAlign: 'center' }}>{cell(r[c.k])}</td>)}
                    <td style={{ textAlign: 'center' }}><Badge tone={r.sync.tone}>{r.sync.t}</Badge></td>
                    <td className="t12 muted">{r.note}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      ))}

      <Card title="Hai điều team marketing cần nhớ" className="mb16">
        <div className="col g10">
          <div className="row ais g8"><Icon name="alert" size={15} color="#c4320a" /><span className="t13"><b>“Lead” ở các cổng Ads chỉ là CON SỐ</b> — biết tốn bao nhiêu ra bao nhiêu lead, nhưng KHÔNG có tên/SĐT. Lead có liên hệ thật chỉ đến từ <b>Chat</b> và <b>Google Sheets (form web)</b>. (Đang lên kế hoạch bổ sung FB/IG Lead Gen Forms để kéo liên hệ thật.)</span></div>
          <div className="row ais g8"><Icon name="alert" size={15} color="#d97706" /><span className="t13"><b>Comment trên post (FB/IG/TikTok Organic/Threads) hiện chỉ ĐẾM TỔNG</b> — chưa lấy nội dung, chưa trả lời/ẩn trong CRM. Riêng <b>TikTok Ads</b> đã đọc & trả lời được comment dưới quảng cáo.</span></div>
          <div className="row ais g8"><Icon name="clock" size={15} color="#0a9e6e" /><span className="t13"><b>Ads + GA4 nay TỰ ĐỘNG đồng bộ mỗi 15 phút</b> (FB Ads · TikTok Ads · Ad Sources → mktFacts, GA4 → webFacts) — không cần bấm tay nữa. Vẫn bấm “Đồng bộ” được để kéo ngay. Các cổng content đọc live khi mở màn nên luôn tươi.</span></div>
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { ConnectionsOverview });