// ===========================================================
// 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 kéo dữ liệu qua API (đồng bộ tay hoặc job nền của máy chủ).
// ===========================================================

const { useState, useEffect } = React;
const D = window.TVS_DATA || {};

// ----- Badge nhỏ ở sidebar (dưới tên tài khoản) — tiến độ đồng bộ THẬT, poll /api/sync/status.
// Đồng bộ toàn bộ lịch sử (nút "Đồng bộ lại để gán user") chạy nhiều phút ở server (không chờ
// được trong 1 request) nên badge này là nơi DUY NHẤT thấy nó đang chạy tới đâu / xong chưa.
function SapoSyncBadge() {
  const [status, setStatus] = useState(null); // { running, progress, states }
  const live = !!(window.TVS_API && window.TVS_API.isAuthed());

  const loadStatus = () => {
    if (!live) return;
    window.TVS_API.syncStatus().then(setStatus).catch(() => {});
  };

  useEffect(() => {
    loadStatus();
    // Đang chạy -> poll dồn dập (2s) để thấy % nhích; rảnh -> poll vừa phải (15s) để không bỏ lỡ
    // lúc 1 lần đồng bộ khác (job nền, người khác bấm) vừa bắt đầu/kết thúc.
    const t = setInterval(loadStatus, status && status.running ? 2000 : 15000);
    return () => clearInterval(t);
  }, [live, status && status.running]);

  const allState = status ? (status.states || []).find(s => s.entity === '__all__') : null;
  const syncAt = allState && allState.lastSyncAt;
  const relTime = (iso) => {
    const m = Math.round((Date.now() - new Date(iso).getTime()) / 60000);
    if (m < 1) return 'vừa xong';
    if (m < 60) return `${m} phút trước`;
    const h = Math.round(m / 60);
    if (h < 24) return `${h} giờ trước`;
    return `${Math.round(h / 24)} ngày trước`;
  };

  const running = status && status.running;
  const progress = status && status.progress;
  const labelText = running
    ? `Đang đồng bộ...${progress && progress.pct != null ? ` ${progress.pct}%` : ''}`
    : syncAt ? `Đồng bộ gần nhất ${relTime(syncAt)}` : 'Sapo · Chưa có dữ liệu đồng bộ';
  const subText = running ? (progress && progress.message) : null;
  const titleText = syncAt ? `Đồng bộ Sapo lần cuối: ${new Date(syncAt).toLocaleString('vi-VN')}` : 'Chưa có dữ liệu đồng bộ';

  return (
    <div className="sidebar-sync" title={titleText}>
      <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)}
        .sidebar-sync .dot.running{background:var(--vs-light-blue);box-shadow:0 0 0 3px rgba(65,182,230,0.25);animation:sidebarSyncPulse 1.2s ease-in-out infinite}
        @keyframes sidebarSyncPulse{0%,100%{opacity:1}50%{opacity:0.35}}
        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${running ? ' running' : ''}`}/>
      <span className="lbl" style={{whiteSpace:'normal',lineHeight:1.3}}>
        {labelText}
        {subText && <div style={{opacity:0.75,marginTop:2}}>{subText}</div>}
      </span>
    </div>
  );
}

// ----- Trạng thái đồng bộ Sapo (gắn trong Cài đặt → Kết nối & Nhập dữ liệu) -----
// 28/09/2026: chỉ hiện dữ liệu THẬT từ GET /api/sync/status — bỏ số cứng ("+38", "312", "14:22 — 10 phút
// trước"), bỏ bảng đối soát / khách trùng / nhật ký mẫu. Hàng chờ khớp = khách tạo tay trong CRM chưa có trên Sapo.
const __SYNC_ENTITY = { __all__: 'Toàn bộ', locations: 'Chi nhánh', products: 'Sản phẩm', customers: 'Khách hàng', orders: 'Đơn hàng', inventory: 'Tồn kho', stocks: 'Tồn kho', pricelists: 'Bảng giá' };
function SapoSyncTab() {
  const [syncInfo, setSyncInfo] = useState(null);
  const [err, setErr] = useState(null);
  const [syncing, setSyncing] = useState(false);
  const load = () => window.TVS_API.syncStatus().then((s) => { setSyncInfo(s); setErr(null); }).catch((e) => setErr(e.message));
  useEffect(() => { load(); }, []);
  const states = (syncInfo && syncInfo.states) || [];
  const allState = states.find((s) => s.entity === '__all__');
  const lastAt = allState && allState.lastSyncAt;
  const pending = (syncInfo && syncInfo.pendingMerges) || [];
  const hasError = allState && allState.lastStatus === 'error';
  const fmtAt = (iso) => iso ? window.tvsVnDateTime(iso) : 'Chưa đồng bộ lần nào';
  const countsOf = (s) => { try { const c = s.counts ? JSON.parse(s.counts) : null; if (!c) return ''; return Object.entries(c).filter(([, v]) => typeof v === 'number' && isFinite(v)).map(([k, v]) => `${({ synced: 'đồng bộ', skipped: 'bỏ qua', updated: 'cập nhật', created: 'tạo mới' })[k] || k} ${Number(v).toLocaleString('vi-VN')}`).join(' · '); } catch (_) { return ''; } };

  const runRealSync = async () => {
    setSyncing(true);
    try {
      const start = await window.TVS_API.syncNow();
      if (!start || !start.ok) { window.tvsToast(start?.error || 'Không đồng bộ được — thử lại sau', 'error'); setSyncing(false); return; }
      window.tvsToast('Đã bắt đầu đồng bộ đơn hàng…');
      const final = await window.TVS_API.waitForSyncDone();
      setSyncInfo(final);
      const st = (final.states || []).find((s) => s.entity === '__all__');
      window.tvsToast(st?.lastStatus === 'error' ? 'Lỗi đồng bộ: ' + (st.error || '') : 'Đã đồng bộ Sapo → CRM', st?.lastStatus === 'error' ? 'error' : undefined);
    } catch (e) { window.tvsToast('Lỗi đồng bộ: ' + e.message, 'error'); }
    setSyncing(false);
  };

  return (
    <>
      <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: hasError ? 'rgba(191,9,35,0.08)' : 'rgba(6,167,125,0.10)',display:'flex',alignItems:'center',justifyContent:'center'}}>
            <Icon name="refresh" size={24} style={{color: hasError ? 'var(--status-sale)' : 'var(--status-success)'}}/>
          </div>
          <div style={{flex:1,minWidth:220}}>
            <div className="row gap-2" style={{flexWrap:'wrap'}}>
              <h3 style={{margin:0,fontSize:'var(--t-md)',color:'var(--fg-1)'}}>Đồng bộ Sapo → CRM</h3>
              {syncInfo && (syncInfo.running ? <Tag variant="info" dot>Đang chạy</Tag> : hasError ? <Tag variant="danger" dot>Lần cuối bị lỗi</Tag> : lastAt ? <Tag variant="success" dot>Lần cuối thành công</Tag> : <Tag variant="outline" dot>Chưa đồng bộ</Tag>)}
            </div>
            <div className="text-sm fg-muted mt-1">
              Lần cuối: <b className="fg-1">{syncInfo ? fmtAt(lastAt) : (err ? '—' : 'Đang tải…')}</b>
              {syncInfo && syncInfo.running && syncInfo.progress && syncInfo.progress.message ? <> · {syncInfo.progress.message}</> : null}
            </div>
            {hasError && allState.error && <div className="text-xs mt-1" style={{color:'var(--status-sale)'}}>{allState.error}</div>}
            {err && <div className="text-xs mt-1" style={{color:'var(--status-sale)'}}>Chưa tải được trạng thái: {err}</div>}
          </div>
          <button className="btn btn-cta" onClick={runRealSync} disabled={syncing || (syncInfo && syncInfo.running)}><Icon name="refresh" size={14}/>{syncing ? 'Đang đồng bộ…' : 'Đồng bộ đơn mới ngay'}</button>
        </div>
        {states.filter((s) => s.entity !== '__all__' && s.entity !== 'backup').length > 0 && (
          <>
            <div className="divider"/>
            <div className="table-wrap">
              <table className="tbl">
                <thead><tr><th>Dữ liệu</th><th>Lần cuối</th><th>Kết quả</th><th>Số bản ghi</th></tr></thead>
                <tbody>
                  {states.filter((s) => s.entity !== '__all__' && s.entity !== 'backup').map((s) => (
                    <tr key={s.entity}>
                      <td className="strong">{__SYNC_ENTITY[s.entity] || s.entity}</td>
                      <td className="text-sm tnum">{fmtAt(s.lastSyncAt)}</td>
                      <td>{s.lastStatus === 'error' ? <Tag variant="danger" dot>Lỗi</Tag> : s.lastStatus === 'running' ? <Tag variant="info" dot>Đang chạy</Tag> : s.lastStatus ? <Tag variant="success" dot>Thành công</Tag> : <span className="fg-muted">—</span>}{s.lastStatus === 'error' && s.error ? <div className="text-xs" style={{color:'var(--status-sale)'}}>{s.error}</div> : null}</td>
                      <td className="text-xs fg-muted">{countsOf(s) || '—'}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </>
        )}
      </Card>

      <Card pad={false} className="mb-4">
        <CardHeader title="Khách tạo trong CRM đang chờ khớp Sapo"
          sub="Khách nhân viên tự thêm (chưa có trên Sapo) — mỗi lần đồng bộ, hệ thống tự gộp theo SĐT khi Sapo có khách trùng"
          actions={syncInfo ? (pending.length ? <Tag variant="warning">{pending.length} khách</Tag> : <Tag variant="success" dot>Không có</Tag>) : null}/>
        {pending.length > 0 ? (
          <div className="table-wrap">
            <table className="tbl">
              <thead><tr><th>Khách</th><th>SĐT</th><th>Tạo lúc</th></tr></thead>
              <tbody>
                {pending.slice(0, 100).map((p) => (
                  <tr key={p.id}>
                    <td className="strong">{p.name || '—'}</td>
                    <td className="tnum text-sm">{window.tvsShowPhone(p.phone) || '—'}</td>
                    <td className="text-sm">{fmtAt(p.createdAt)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <div className="card-pad text-sm fg-muted">{syncInfo ? 'Không có khách nào đang chờ khớp.' : 'Đang tải…'}</div>
        )}
      </Card>
    </>
  );
}

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