// ===========================================================
// Sapo sync — trạng thái đồng bộ, đối soát đơn, khách trùng
// Sapo là NGUỒN DỮ LIỆU GỐC; CRM nhận data qua webhook + cron.
// ===========================================================

// ----- Badge nhỏ ở sidebar -----
function SapoSyncBadge() {
  return (
    <div className="sidebar-sync" title="Đồng bộ Sapo lần cuối: 14:22 — 10 phút trước">
      <style>{`
        .sidebar-sync{display:flex;align-items:center;gap:8px;margin:0 var(--space-3);padding:8px 10px;
          border-radius:var(--radius-sm);background:rgba(255,255,255,0.06);font-size:11px;color:rgba(255,255,255,0.65)}
        .sidebar-sync .dot{width:7px;height:7px;border-radius:50%;background:var(--status-success);flex-shrink:0;
          box-shadow:0 0 0 3px rgba(6,167,125,0.25)}
        html[data-variation="compact"] .sidebar-sync .lbl{display:none}
        html[data-variation="compact"] .sidebar-sync{justify-content:center;padding:8px 0;margin:0 8px}
      `}</style>
      <span className="dot"/>
      <span className="lbl">Sapo · đồng bộ 10 phút trước</span>
    </div>
  );
}

// ----- Tab đầy đủ trong Cài đặt -----
function SapoSyncTab() {
  const session = useTvsSession();

  // Trạng thái đồng bộ thật từ backend (nếu đã đăng nhập thật).
  const [syncInfo, setSyncInfo] = useState(null);
  const [syncing, setSyncing] = useState(false);
  const apiLive = !!(window.TVS_API && window.TVS_API.isAuthed());
  useEffect(() => {
    if (apiLive) window.TVS_API.syncStatus().then(setSyncInfo).catch(() => {});
  }, []);
  const allState = syncInfo ? (syncInfo.states || []).find(s => s.entity === '__all__') : null;
  const lastSyncLabel = allState && allState.lastSyncAt
    ? new Date(allState.lastSyncAt).toLocaleString('vi-VN') : '14:22 — 10 phút trước';
  const realPending = syncInfo
    ? (syncInfo.pendingMerges || []).map(p => ({ id: p.id, staff: '—', who: p.name || p.phone, ref: p.phone, crm: null, sapo: null, status: 'pending' }))
    : [];
  const runRealSync = async () => {
    if (!apiLive) { window.tvsDemo && window.tvsDemo('Đồng bộ ngay'); return; }
    setSyncing(true);
    try {
      await window.TVS_API.syncNow();
      setSyncInfo(await window.TVS_API.syncStatus());
      window.tvsDemo && window.tvsDemo('Đã đồng bộ Sapo → CRM');
    } catch (e) { window.tvsDemo && window.tvsDemo('Lỗi đồng bộ: ' + e.message); }
    setSyncing(false);
  };

  // Đơn nhân viên vừa ghi nhận trong phiên demo → hàng chờ khớp
  const sessionPending = Object.entries(session.ordersByCustomer || {}).flatMap(([custId, list]) =>
    (list || []).map(o => {
      const cust = D.customers.find(c => c.id === custId) || D.partners.find(p => p.id === custId);
      return { id: o.id, staff: o.staff || 'Bạn', who: cust ? cust.name : custId, ref: o.ref || '(chưa nhập mã)', crm: o.total, sapo: null, status: 'pending' };
    })
  );

  const RECON_STATIC = [
    { id: 'R-101', staff: 'Trần Quốc Bảo',  who: 'Đặng Hoàng Mai',   ref: 'POS-Q1-2026-99821', crm: 2389000, sapo: 2389000, status: 'matched' },
    { id: 'R-102', staff: 'Nguyễn Mỹ Linh', who: 'Hoàng Anh Tuấn',   ref: 'SP-2026-05-00812',  crm: 1378000, sapo: 1333000, status: 'mismatch' },
    { id: 'R-103', staff: 'Lê Phương Anh',  who: 'Pharmacity — chuỗi miền Nam', ref: 'SP-2026-05-00821', crm: 42800000, sapo: null, status: 'pending' },
  ];
  const recon = [...realPending, ...sessionPending, ...(apiLive ? [] : RECON_STATIC)];

  // Khách trùng — interactive demo (persist in localStorage to avoid reappearing on refresh)
  const [dupes, setDupes] = useState(() => {
    const defaultDupes = [
      { id: 'DUP-1', phone: '0903 821 447', sapo: { name: 'Đặng Hoàng Mai', code: 'SAPO-C-88102', orders: 18 }, crm: { name: 'Mai Đặng (NV tự thêm)', code: 'C-10241', orders: 2 } },
      { id: 'DUP-2', phone: '0967 113 224', sapo: { name: 'Nguyễn Quốc Đạt', code: 'SAPO-C-91250', orders: 3 }, crm: { name: 'Đạt Nguyễn Q.', code: 'C-11034', orders: 1 } },
    ];
    try {
      const mergedIds = JSON.parse(localStorage.getItem('tvs_merged_dupes') || '[]');
      return defaultDupes.filter(d => mergedIds.includes(d.id) === false);
    } catch (_) {
      return defaultDupes;
    }
  });
  const doMerge = (d) => {
    setDupes(list => list.filter(x => x.id !== d.id));
    try {
      const mergedIds = JSON.parse(localStorage.getItem('tvs_merged_dupes') || '[]');
      if (mergedIds.includes(d.id) === false) {
        mergedIds.push(d.id);
        localStorage.setItem('tvs_merged_dupes', JSON.stringify(mergedIds));
      }
      window.tvsRefreshUI && window.tvsRefreshUI();
    } catch (_) {}
  };
  const merged = (() => {
    try {
      return JSON.parse(localStorage.getItem('tvs_merged_dupes') || '[]');
    } catch (_) {
      return [];
    }
  })();

  return (
    <>
      {/* Trạng thái tổng */}
      <Card pad={false} className="mb-4">
        <div style={{padding:'var(--space-5)',display:'flex',gap:'var(--space-5)',alignItems:'center',flexWrap:'wrap'}}>
          <div style={{width:52,height:52,borderRadius:'50%',background:'rgba(6,167,125,0.10)',display:'flex',alignItems:'center',justifyContent:'center',position:'relative'}}>
            <Icon name="refresh" size={24} style={{color:'var(--status-success)'}}/>
          </div>
          <div style={{flex:1,minWidth:220}}>
            <div className="row gap-2">
              <h3 style={{margin:0,fontSize:'var(--t-md)',color:'var(--fg-1)'}}>Đồng bộ Sapo đang hoạt động</h3>
              <Tag variant="success" dot>Kết nối tốt</Tag>
            </div>
            <div className="text-sm fg-muted mt-1">
              Lần cuối: <b className="fg-1">{lastSyncLabel}</b> · Lịch tự động: mỗi 5–15 phút · Kết nối Sapo: <b style={{color:'var(--status-success)'}}>{apiLive ? 'trực tiếp qua API' : 'demo'}</b>
            </div>
          </div>
          <button className="btn btn-cta" onClick={runRealSync} disabled={syncing}><Icon name="refresh" size={14}/>{syncing ? 'Đang đồng bộ…' : 'Đồng bộ ngay'}</button>
        </div>
        <div className="divider"/>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',padding:'var(--space-4) var(--space-5)',gap:'var(--space-4)'}}>
          {[
            {l:'Khách mới từ Sapo hôm nay', v:'+38'},
            {l:'Đơn đồng bộ hôm nay', v:'312'},
            {l:'Đơn chờ khớp', v: String(recon.filter(r=>r.status==='pending').length), warn: true},
            {l:'Khách trùng cần gộp', v: String(dupes.length), warn: dupes.length > 0},
          ].map((s,i) => (
            <div key={i}>
              <div style={{fontSize:10,letterSpacing:'0.12em',textTransform:'uppercase',color:'var(--fg-muted)',fontWeight:700,marginBottom:4}}>{s.l}</div>
              <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:24,color: s.warn ? 'var(--status-warning)' : 'var(--fg-1)',lineHeight:1}} className="tnum">{s.v}</div>
            </div>
          ))}
        </div>
      </Card>

      {/* Đối soát đơn ghi nhận */}
      <Card pad={false} className="mb-4">
        <CardHeader title="Đối soát đơn ghi nhận ↔ đơn Sapo"
          sub="Đơn nhân viên ghi nhận tay sẽ tự khớp với đơn Sapo theo mã tham chiếu / SĐT trong vòng 15 phút"
          actions={<Tag variant="warning">{recon.filter(r=>r.status!=='matched').length} cần chú ý</Tag>}/>
        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr><th>Nhân viên ghi nhận</th><th>Khách / Đối tác</th><th>Mã tham chiếu</th><th className="num">Tổng CRM</th><th className="num">Tổng Sapo</th><th>Trạng thái</th><th></th></tr>
            </thead>
            <tbody>
              {recon.map(r => (
                <tr key={r.id}>
                  <td className="text-sm">{r.staff}</td>
                  <td className="strong">{r.who}</td>
                  <td className="tnum text-sm">{r.ref}</td>
                  <td className="num strong">{fmt.vndFull(r.crm)}</td>
                  <td className="num">{r.sapo != null ? fmt.vndFull(r.sapo) : <span className="fg-muted">—</span>}</td>
                  <td>
                    {r.status === 'matched'  && <Tag variant="success" dot>Đã khớp</Tag>}
                    {r.status === 'pending'  && <Tag variant="warning" dot>Chờ khớp</Tag>}
                    {r.status === 'mismatch' && <Tag variant="danger" dot>Lệch {fmt.vndFull(Math.abs(r.crm - r.sapo))}</Tag>}
                  </td>
                  <td style={{textAlign:'right'}}>
                    {r.status === 'mismatch' && <button className="btn btn-secondary btn-sm" onClick={() => window.tvsDemo('Khớp thủ công')}>Khớp thủ công</button>}
                    {r.status === 'pending' && <button className="btn btn-ghost btn-sm" onClick={() => window.tvsDemo('Kiểm tra Sapo')}>Kiểm tra</button>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div style={{padding:'var(--space-3) var(--space-5)',background:'var(--bg-soft)',borderTop:'1px solid var(--border-1)'}}>
          <div className="text-xs fg-muted">Quy tắc: khớp theo <b>mã đơn Sapo</b> nhập lúc ghi nhận → nếu không có, khớp theo <b>SĐT + tổng tiền ± 5% + cùng ngày</b>. Lệch tiền → giữ số Sapo, báo nhân viên xác nhận.</div>
        </div>
      </Card>

      {/* Khách trùng */}
      <Card pad={false} className="mb-4">
        <CardHeader title="Khách trùng cần gộp"
          sub="Cùng SĐT nhưng tồn tại 2 bản ghi — giữ bản Sapo làm gốc, chuyển ghi chú/follow-up từ bản CRM sang"
          actions={dupes.length > 0 ? <Tag variant="danger">{dupes.length} cặp</Tag> : <Tag variant="success" dot>Sạch</Tag>}/>
        <div className="card-pad">
          {dupes.map(d => (
            <div key={d.id} style={{border:'1px solid var(--border-1)',borderRadius:'var(--radius-md)',padding:'var(--space-4)',marginBottom:'var(--space-3)'}}>
              <div className="row mb-3">
                <Icon name="phone" size={14} style={{color:'var(--fg-muted)'}}/>
                <span className="tnum strong fg-1">{d.phone}</span>
                <Tag variant="danger" style={{marginLeft:8}}>Trùng SĐT</Tag>
              </div>
              <div className="grid grid-2 mb-3">
                <div style={{padding:'10px 12px',background:'rgba(6,167,125,0.06)',border:'1px solid rgba(6,167,125,0.25)',borderRadius:'var(--radius-sm)'}}>
                  <div className="text-xs fg-muted mb-1">NGUỒN SAPO (GIỮ LÀM GỐC)</div>
                  <div className="strong fg-1">{d.sapo.name}</div>
                  <div className="text-xs fg-muted tnum">{d.sapo.code} · {d.sapo.orders} đơn</div>
                </div>
                <div style={{padding:'10px 12px',background:'var(--bg-soft)',borderRadius:'var(--radius-sm)',border:'1px solid var(--border-1)'}}>
                  <div className="text-xs fg-muted mb-1">BẢN CRM (SẼ GỘP VÀO)</div>
                  <div className="strong fg-1">{d.crm.name}</div>
                  <div className="text-xs fg-muted tnum">{d.crm.code} · {d.crm.orders} đơn ghi nhận tay</div>
                </div>
              </div>
              <div className="row gap-2">
                <button className="btn btn-cta btn-sm" onClick={() => doMerge(d)}>
                  <Icon name="check" size={12}/>Đồng bộ giống sapo
                </button>
                <button className="btn btn-secondary btn-sm" onClick={() => doMerge(d)}>Tạo khách mới</button>
              </div>
            </div>
          ))}
          {dupes.length === 0 && (
            <div className="empty" style={{padding:'var(--space-6)'}}>
              <div className="icon-wrap"><Icon name="check" size={20}/></div>
              <div className="text-sm">{merged.length > 0 ? `Đã xử lý ${merged.length} cặp trùng — dữ liệu sạch!` : 'Không có khách trùng'}</div>
            </div>
          )}
        </div>
      </Card>

      {/* Nhật ký sync */}
      <Card pad={false}>
        <CardHeader title="Nhật ký đồng bộ" sub="24 giờ gần nhất"/>
        <div className="table-wrap">
          <table className="tbl">
            <thead><tr><th>Thời gian</th><th>Loại</th><th className="num">Bản ghi</th><th>Kết quả</th></tr></thead>
            <tbody>
              {[
                ['14:22','Đơn hàng + khách (webhook)', 8,  'ok'],
                ['14:10','Tồn kho (cron 15 phút)',     412,'ok'],
                ['13:55','Đơn hàng + khách (webhook)', 12, 'ok'],
                ['13:40','Tồn kho (cron 15 phút)',     412,'ok'],
                ['03:00','Đồng bộ toàn bộ (cron đêm)', 22480,'ok'],
                ['02:45','Đồng bộ toàn bộ (retry)',    0,  'fail'],
              ].map((r, i) => (
                <tr key={i}>
                  <td className="tnum strong">{r[0]}</td>
                  <td className="text-sm">{r[1]}</td>
                  <td className="num tnum">{r[2].toLocaleString('vi-VN')}</td>
                  <td>{r[3] === 'ok' ? <Tag variant="success" dot>Thành công</Tag> : <Tag variant="danger" dot>Lỗi — đã retry OK</Tag>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </>
  );
}

Object.assign(window, { SapoSyncBadge, SapoSyncTab });