/* AAU CRM — Hàng đợi "Nghi trùng" (identity resolution).
   Gợi ý cặp lead có thể là 1 người (cùng SĐT/email, hoặc tên giống + khác kênh —
   vd MKT chat FB lấy SĐT → Sales add Zalo, tên FB ≠ tên Zalo). Sales QUYẾT:
   Gộp (1 contact, giữ alias) hoặc "Không phải" (không gợi lại). KHÔNG tự gộp ca mơ hồ. */
function DuplicateReview() {
  const live = !!(window.API && window.API.enabled);
  const [pairs, setPairs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [busy, setBusy] = useState('');

  const reload = () => {
    if (!live || !window.API.suspectedDuplicates) { setLoading(false); return; }
    setLoading(true);
    window.API.suspectedDuplicates().then(r => { setPairs((r && r.pairs) || []); }).catch(() => setPairs([])).finally(() => setLoading(false));
  };
  useEffect(() => { reload(); }, [live]);

  const chLabel = (ch) => (AAU.channels && AAU.channels[ch] || {}).label || ch;
  const chColor = (ch) => (AAU.channels && AAU.channels[ch] || {}).color || '#8a8f98';

  const keyOf = (p) => p.a.id + '|' + p.b.id;
  const merge = async (p) => {
    if (!window.confirm(`Gộp "${p.a.name}" và "${p.b.name}" thành 1 contact? (giữ lead tiến xa hơn, tên kia thành bí danh)`)) return;
    setBusy('mg:' + keyOf(p));
    try {
      await window.API.mergeLeads(p.a.id, p.b.id);
      if (window.API.refreshLeads) await window.API.refreshLeads();
      reload();
    } catch (e) { window.alert('Gộp lỗi: ' + ((e && e.message) || '')); }
    finally { setBusy(''); }
  };
  const notDup = async (p) => {
    setBusy('nd:' + keyOf(p));
    try { await window.API.markNotDuplicate(p.a.id, p.b.id); setPairs(ps => ps.filter(x => keyOf(x) !== keyOf(p))); }
    catch (e) { window.alert('Lỗi: ' + ((e && e.message) || '')); }
    finally { setBusy(''); }
  };

  const LeadCol = ({ l }) => (
    <div className="f1" style={{ minWidth: 0 }}>
      <div className="row aic g8">
        <span className="center" style={{ width: 26, height: 26, borderRadius: 6, background: chColor(l.channel), color: '#fff', fontSize: 10, fontWeight: 700, flexShrink: 0 }}>{(AAU.channels && AAU.channels[l.channel] || {}).short || '?'}</span>
        <div style={{ minWidth: 0 }}>
          <div className="t13 fw6 ellipsis">{l.name || '(chưa có tên)'}</div>
          <div className="t11 subtle">{chLabel(l.channel)}{l.phone ? ' · ' + l.phone : ' · chưa có SĐT'}</div>
        </div>
      </div>
      <div className="row g6 mt6 t11 subtle"><span>Stage: {stageName(l.stage)}</span>{l.assignedTo && <span>· {(AAU.users || []).find(u => u.id === l.assignedTo)?.name || l.assignedTo}</span>}</div>
    </div>
  );

  return (
    <div className="page wide">
      <PageHead title="Nghi trùng (hợp nhất danh tính)" subtitle="Cặp lead có thể là 1 người — sales quyết Gộp hoặc Không phải. Giải ca MKT chat FB → Sales add Zalo (tên 2 kênh khác nhau)."
        actions={<Button icon="refresh" onClick={reload} disabled={loading}>Tải lại</Button>} />

      {!live ? (
        <Card><div className="row aic g8 t13 muted" style={{ padding: 8 }}><Icon name="alert" size={15} color="#b06f00" /><span>Bật LIVE (mở app với <code>?api=…</code>) để xem cặp nghi trùng từ backend.</span></div></Card>
      ) : loading ? (
        <Card><div className="t13 muted center" style={{ padding: 24 }}>Đang quét cặp nghi trùng…</div></Card>
      ) : pairs.length === 0 ? (
        <Card><EmptyState icon="checkCircle" title="Không có cặp nào nghi trùng" desc="Mọi contact đang sạch — không tìm thấy lead nào chung SĐT/email hay tên giống khác kênh." /></Card>
      ) : (
        <>
          <div className="t12 subtle mb12">{pairs.length} cặp nghi trùng · <b style={{ color: '#c4320a' }}>{pairs.filter(p => p.confidence === 'cao').length} độ tin CAO</b></div>
          <div className="col g10">
            {pairs.map(p => (
              <Card key={keyOf(p)} pad={false}>
                <div style={{ padding: 14 }}>
                  <div className="row aic g8 mb10">
                    <Badge tone={p.confidence === 'cao' ? 'critical' : 'warning'} dot>{p.confidence === 'cao' ? 'Độ tin CAO' : 'Độ tin vừa'}</Badge>
                    {(p.signals || []).map((s, i) => <span key={i} className="badge" style={{ fontSize: 10.5, background: 'var(--p-bg-surface-secondary)', color: 'var(--p-text-subdued)' }}>{s}</span>)}
                  </div>
                  <div className="row aic g12">
                    <LeadCol l={p.a} />
                    <Icon name="arrowRight" size={16} color="#9ca3af" />
                    <LeadCol l={p.b} />
                    <div className="row g8" style={{ flexShrink: 0 }}>
                      <Button size="sm" variant="primary" icon="users" onClick={() => merge(p)} disabled={busy === 'mg:' + keyOf(p)}>{busy === 'mg:' + keyOf(p) ? 'Đang gộp…' : 'Gộp'}</Button>
                      <Button size="sm" variant="plain" onClick={() => notDup(p)} disabled={busy === 'nd:' + keyOf(p)}>Không phải</Button>
                    </div>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </>
      )}
    </div>
  );
}