KẾT QUẢ CUỘC GỌI

{dispo.map(d => ( ))}

GHI CHÚ

setNote(e.target.value)} placeholder="Tóm tắt nội dung trao đổi, cam kết tiếp theo…" style={{ resize: 'none' }} />
          </div>
          <div className="row aic g8 t12 subtle"><Icon name="checkCircle" size={14} color="#0e7c4a" />Tự động ghi vào hội thoại + Timeline hồ sơ 360°. Chọn "Hẹn gọi lại" sẽ snooze hội thoại.</div>
        </div>
      )}
    </Modal>
  );
}

function InboxEmptyState() {
  return (
    <div className="page wide">
      <PageHead title="Hội thoại" subtitle="Hộp thư hợp nhất các kênh chat" />
      <EmptyState icon="inbox" title="Chưa có hội thoại nào"
        desc="Đã xoá sạch dữ liệu chat. Vào 'Nguồn kết nối' → thêm kênh thật + nối CQA (CQA_DB_DSN) + Đồng bộ để kéo tin nhắn Zalo thật về đây." />
    </div>
  );
}

// Wrapper: chặn crash khi chưa có hội thoại nào (sau khi wipe / trước khi nối real data).
function UnifiedInbox() {
  if (!AAU.conversations || Object.keys(AAU.conversations).length === 0) return <InboxEmptyState />;
  return <UnifiedInboxBody />;
}

const conv = store[selId];
  const lead = leadOf(conv);
  const cm = meta[selId];
  const sales = AAU.users.filter(u => u.role === 'sales');

useEffect(() => { setAiMode(store[selId].aiMode); setComposerTab('reply'); }, [selId]);
  useEffect(() => { setCopilot(aiMode === 'copilot' ? pb.reply : ''); }, [selId, aiMode]);
  useEffect(() => { if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight; }, [selId, conv.messages.length, cm.notes.length]);

function patchMeta(id, p) { setMeta(m => ({ ...m, [id]: { ...m[id], ...p } })); }

const triageTabs = [
    { v: 'all', l: 'Tất cả', f: c => meta[c.id].status !== 'done' },
    { v: 'unread', l: 'Chưa đọc', f: c => c.unread > 0 && meta[c.id].status !== 'done' },
    { v: 'mine', l: 'Của tôi', f: c => meta[c.id].owner === ME_ID && meta[c.id].status !== 'done' },
    { v: 'unassigned', l: 'Chưa gán', f: c => !meta[c.id].owner && meta[c.id].status !== 'done' },
    { v: 'overdue', l: 'Quá hạn SLA', f: c => leadOf(c).sla === 'bad' && meta[c.id].status !== 'done' },
    { v: 'snoozed', l: 'Snooze', f: c => meta[c.id].status === 'snoozed' },
    { v: 'done', l: 'Xong', f: c => meta[c.id].status === 'done' },
  ];
  const triF = triageTabs.find(t => t.v === triage).f;

const acctOf = (c) => c.accountName || c.account || c.page || '';
  // nhóm kênh: Social (FB/IG/TikTok) · Zalo (OA + cá nhân) — 1 Inbox, lọc theo nhóm
  const CH_GROUPS = { 'g:social': ['fb', 'instagram', 'tiktok'], 'g:zalo': ['zalo', 'zalo_personal'] };
  const chMatch = (c) => canSeeCh(c.channel)
    && (chFilter === 'all' || c.channel === chFilter || (CH_GROUPS[chFilter] && CH_GROUPS[chFilter].includes(c.channel)));
  // tài khoản khả dụng theo kênh/nhóm đang lọc (phân biệt từng nguồn, vd 2 số Zalo cá nhân)
  const acctOptions = [...new Set(convList.filter(chMatch).map(acctOf).filter(Boolean))];
  const filtered = convList
    .filter(triF)
    .filter(c => chMatch(c)
      && (acctFilter === 'all' || acctOf(c) === acctFilter)
      && (!q || leadOf(c).name.toLowerCase().includes(q.toLowerCase())))
    .sort((a, b) => new Date(b.lastAt) - new Date(a.lastAt));

// keyboard shortcuts: J/K navigate, E mark done
  useEffect(() => {
    function onKeyG(e) {
      if (/input|textarea|select/i.test(e.target.tagName)) return;
      const ids = filtered.map(c => c.id); const i = ids.indexOf(selId);
      if (e.key === 'j' && i < ids.length - 1) { setSelId(ids[i + 1]); }
      else if (e.key === 'k' && i > 0) { setSelId(ids[i - 1]); }
      else if (e.key === 'e') { patchMeta(selId, { status: 'done' }); }
    }
    window.addEventListener('keydown', onKeyG);
    return () => window.removeEventListener('keydown', onKeyG);
  }, [filtered, selId]);

// A — auto-refresh: định kỳ kéo /conversations, gộp tin mới (theo id) vào store +
  // cập nhật danh sách trái. Không clobber tin optimistic/note đang có.
  useEffect(() => {
    if (!(window.API && window.API.enabled && window.API.get)) return;
    let alive = true;
    const pull = () => window.API.get('/conversations').then(server => {
      if (!alive || !server) return;
      const list = Array.isArray(server) ? server : Object.values(server);
      list.forEach(sc => { AAU.conversations[sc.id] = { ...(AAU.conversations[sc.id] || {}), ...sc }; });
      // lead mới (auto-tạo từ chat) chưa có trong AAU.leads → refresh để panel + kanban điền
      const haveLead = new Set((AAU.leads || []).map(l => l.id));
      if (list.some(sc => sc.leadId && !haveLead.has(sc.leadId)) && window.API.refreshLeads) window.API.refreshLeads().catch(() => { });
      setMeta(m => { let ch = false; const nm = { ...m }; list.forEach(sc => { if (!nm[sc.id]) { const l = leadOf(sc); nm[sc.id] = { owner: l.assignedTo || '', labels: [], status: 'open', snoozeLabel: '', notes: [] }; ch = true; } }); return ch ? nm : m; });
      setStore(prev => {
        const next = { ...prev }; let ch = false;
        list.forEach(sc => {
          const loc = prev[sc.id];
          if (!loc) { next[sc.id] = sc; ch = true; return; }
          const have = new Set((loc.messages || []).map(m => m.id));
          const add = (sc.messages || []).filter(m => !have.has(m.id));
          if (add.length || sc.unread !== loc.unread || sc.lastAt !== loc.lastAt || sc.leadId !== loc.leadId) {
            next[sc.id] = { ...loc, leadId: sc.leadId || loc.leadId, linked: !!(sc.leadId || loc.leadId), name: sc.name || loc.name, messages: [...(loc.messages || []), ...add].sort((a, b) => new Date(a.at) - new Date(b.at)), lastAt: sc.lastAt || loc.lastAt, unread: sc.unread };
            ch = true;
          }
        });
        return ch ? next : prev;
      });
    }).catch(() => { });
    const iv = setInterval(pull, 30000);
    return () => { alive = false; clearInterval(iv); };
  }, []);

// Tạo Lead từ chat hiện tại → gắn vào pipeline + điền panel.
  function createLeadFromChat() {
    if (!(window.API && window.API.enabled)) { window.alert('Cần chế độ LIVE để tạo lead.'); return; }
    const cid = selId;
    window.API.createLeadFromConv(cid).then(lead => {
      if (!lead || !lead.id) return;
      if (Array.isArray(AAU.leads) && !AAU.leads.some(l => l.id === lead.id)) AAU.leads.unshift(lead);
      if (typeof LeadStore !== 'undefined' && LeadStore.reload) LeadStore.reload();
      AAU.conversations[cid] = { ...(AAU.conversations[cid] || {}), leadId: lead.id, linked: true };
      setStore(s => { const c = s[cid]; if (!c) return s; return { ...s, [cid]: { ...c, leadId: lead.id, linked: true } }; });
    }).catch(e => window.alert('Tạo lead lỗi: ' + (e && e.message || e)));
  }

const lastOutId = [...conv.messages].reverse().find(m => m.dir === 'out')?.id;

// B — gửi ra khách: optimistic 'sending' → patch theo kết quả thật (delivered/failed).
  function send(text) {
    const t = (text ?? draft).trim(); if (!t) return;
    const mid = 'x' + Date.now();
    const liveSend = !!(window.API && window.API.enabled);
    setStore(s => { const n = { ...s }; n[selId] = { ...n[selId], messages: [...n[selId].messages, { id: mid, dir: 'out', at: new Date().toISOString(), by: ME_ID, text: t, ai: aiMode === 'autopilot', status: liveSend ? 'sending' : 'sent' }], unread: 0 }; return n; });
    setDraft(''); setSlash(false); setCopilot('');
    if (liveSend) {
      const cid = selId;
      window.API.sendMessage(cid, t, ME_ID)
        .then(r => setStore(s => { const c = s[cid]; if (!c) return s; return { ...s, [cid]: { ...c, messages: c.messages.map(m => m.id === mid ? { ...m, id: (r && r.id) || mid, status: (r && r.delivered) ? 'delivered' : 'sent', note: r && r.note } : m) } }; }))
        .catch(e => { setStore(s => { const c = s[cid]; if (!c) return s; return { ...s, [cid]: { ...c, messages: c.messages.map(m => m.id === mid ? { ...m, status: 'failed' } : m) } }; }); window.alert('Gửi tới khách thất bại: ' + (e && e.message || e)); });
    }
  }
  function attach(name) {
    setStore(s => { const n = { ...s }; n[selId] = { ...n[selId], messages: [...n[selId].messages, { id: 'x' + Date.now(), dir: 'out', at: new Date().toISOString(), by: ME_ID, attachment: name, status: 'sent' }] }; return n; });
    setAttachMenu(false);
  }
  // gửi tệp THẬT từ máy ra khách: upload → /send kèm attachments. Optimistic bằng
  // blob URL cục bộ, đổi sang URL tự host khi gửi xong (để bền sau refresh).
  const attType = (mime) => mime && mime.startsWith('image/') ? 'image' : mime && mime.startsWith('video/') ? 'video' : mime && mime.startsWith('audio/') ? 'audio' : 'file';
  function sendFiles(files) {
    const list = Array.from(files || []); if (!list.length) return;
    setAttachMenu(false);
    const liveSend = !!(window.API && window.API.enabled && window.API.uploadFile);
    const cid = selId;
    list.forEach(f => {
      const mid = 'x' + Date.now() + Math.floor(Math.random() * 1e4);
      const localUrl = URL.createObjectURL(f);
      const optimistic = { type: attType(f.type), url: localUrl, name: f.name, size: f.size, mime: f.type };
      setStore(s => { const c = s[cid]; if (!c) return s; return { ...s, [cid]: { ...c, messages: [...c.messages, { id: mid, dir: 'out', at: new Date().toISOString(), by: ME_ID, attachments: [optimistic], status: liveSend ? 'sending' : 'sent' }], unread: 0 } }; });
      if (!liveSend) return;
      window.API.uploadFile(f)
        .then(att => window.API.sendMessage(cid, '', ME_ID, [att]).then(() => att))
        .then(att => setStore(s => { const c = s[cid]; if (!c) return s; return { ...s, [cid]: { ...c, messages: c.messages.map(m => m.id === mid ? { ...m, attachments: [att], status: 'delivered' } : m) } }; }))
        .catch(e => { setStore(s => { const c = s[cid]; if (!c) return s; return { ...s, [cid]: { ...c, messages: c.messages.map(m => m.id === mid ? { ...m, status: 'failed' } : m) } }; }); window.alert('Gửi tệp thất bại: ' + (e && e.message || e)); });
    });
  }
  function saveNote() {
    const t = draft.trim(); if (!t) return;
    patchMeta(selId, { notes: [...cm.notes, { id: 'n' + Date.now(), by: ME_ID, at: new Date().toISOString(), text: t }] });
    setDraft('');
  }
  function onKey(e) { if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { e.preventDefault(); composerTab === 'note' ? saveNote() : send(); } }
  function onDraft(v) { setDraft(v); setSlash(composerTab === 'reply' && v.startsWith('/')); }
  function logCall({ duration, disp, note }) {
    const dispMap = { consulted: 'Đã tư vấn xong', callback: 'Hẹn gọi lại', noanswer: 'Không nghe máy', wrong: 'Sai số', refused: 'Từ chối' };
    setStore(s => { const n = { ...s }; n[selId] = { ...n[selId], messages: [...n[selId].messages, { id: 'c' + Date.now(), type: 'call', dir: 'out', at: new Date().toISOString(), by: ME_ID, duration, disp: dispMap[disp], note }] }; return n; });
    if (window.API && window.API.enabled) { const lid = (store[selId] || {}).leadId; if (lid) window.API.logCall({ leadId: lid, duration, agent: ME_ID, verdict: disp }).catch(() => {}); }
    if (disp === 'callback') patchMeta(selId, { status: 'snoozed', snoozeLabel: 'Hẹn gọi lại 3h', labels: [...new Set([...cm.labels, 'callback'])] });
    setCallOpen(false);
  }

// merged thread (messages + internal notes), sorted
  const thread = [
    ...conv.messages.map(m => ({ ...m, _t: m.type === 'call' ? 'call' : 'msg' })),
    ...cm.notes.map(n => ({ ...n, _t: 'note', at: n.at })),
  ].sort((a, b) => new Date(a.at) - new Date(b.at));

const assets = ['Brochure Nhượng quyền F&B', 'Bảng giá Q2/2026', 'Case study chuỗi 6 chi nhánh', 'Lịch khai giảng tháng 6'];
  const aiOpts = [{ value: 'off', label: 'Tắt' }, { value: 'copilot', label: 'Copilot' }, { value: 'autopilot', label: 'Autopilot' }];

return (
    <div style={{ height: '100%', display: 'grid', gridTemplateColumns: panel ? '340px minmax(440px,1fr) 322px' : '340px minmax(460px,1fr)', minWidth: panel ? 1102 : 800 }}>
      {/* LEFT */}
      <div className="col" style={{ borderRight: '1px solid var(--p-border)', height: '100%', gap: 0, minWidth: 0, overflow: 'hidden' }}>
        <div style={{ padding: '14px 14px 8px' }}>
          <div className="row jcsb aic mb10"><span className="t17 fw7">Hộp thư</span><Badge tone="critical">{convList.filter(c => canSeeCh(c.channel)).reduce((s, c) => s + c.unread, 0)} chưa đọc</Badge></div>
          <div className="row g8 aic">
            <div className="f1"><Input icon="search" placeholder="Tìm khách hàng…" value={q} onChange={setQ} /></div>
            <Select value={chFilter} onChange={v => { setChFilter(v); setAcctFilter('all'); }} options={(() => {
              const social = [['fb', '— FB'], ['instagram', '— IG'], ['tiktok', '— TikTok']].filter(([c]) => canSeeCh(c));
              const zalo = [['zalo', '— Zalo OA'], ['zalo_personal', '— Zalo cá nhân']].filter(([c]) => canSeeCh(c));
              const opts = [{ value: 'all', label: 'Mọi kênh' }];
              if (social.length > 1) opts.push({ value: 'g:social', label: '📱 Social (tất cả)' });
              social.forEach(([c, l]) => opts.push({ value: c, label: l }));
              if (zalo.length > 1) opts.push({ value: 'g:zalo', label: '💬 Zalo (tất cả)' });
              zalo.forEach(([c, l]) => opts.push({ value: c, label: l }));
              return opts;
            })()} style={{ width: 150 }} />
          </div>
          {acctOptions.length > 1 && (
            <div className="row g8 aic mt8">
              <Icon name="user" size={13} color="#8a8f98" />
              <div className="f1"><Select value={acctFilter} onChange={setAcctFilter} options={[{ value: 'all', label: 'Tất cả tài khoản' }, ...acctOptions.map(a => ({ value: a, label: a }))]} style={{ width: '100%' }} /></div>
            </div>
          )}
          <div className="row g6 mt10" style={{ overflowX: 'auto', paddingBottom: 4 }}>
            {triageTabs.map(t => { const n = convList.filter(c => canSeeCh(c.channel)).filter(t.f).length; return (
              <button key={t.v} onClick={() => setTriage(t.v)} className="row aic g4" style={{ flexShrink: 0, fontSize: 11.5, fontWeight: 600, padding: '4px 9px', borderRadius: 7, cursor: 'pointer', border: '1px solid ' + (triage === t.v ? '#1a4fa3' : 'var(--p-border)'), background: triage === t.v ? '#1a4fa3' : '#fff', color: triage === t.v ? '#fff' : 'var(--p-text)' }}>
                {t.l}<span style={{ fontSize: 10, opacity: triage === t.v ? 0.85 : 0.5 }}>{n}</span>
              </button>
            ); })}
          </div>
        </div>
        <div style={{ flex: 1, overflowY: 'auto', borderTop: '1px solid var(--p-border-secondary)' }}>
          {filtered.length === 0 && <div className="t12 muted center" style={{ padding: 30 }}>Không có hội thoại nào.</div>}
          {filtered.map(c => { const l = leadOf(c); const m2 = meta[c.id]; const last = c.messages[c.messages.length - 1]; const sel = c.id === selId; return (
            <div key={c.id} onClick={() => setSelId(c.id)} style={{ display: 'flex', gap: 10, padding: '11px 14px', cursor: 'pointer', background: sel ? 'var(--p-bg-surface-selected)' : 'transparent', borderBottom: '1px solid var(--p-border-secondary)', borderLeft: sel ? '3px solid #1a4fa3' : '3px solid transparent', opacity: m2.status === 'done' ? 0.6 : 1 }}>
              <ChannelAvatar ch={c.channel} name={l.name} color={l.grade === 'A' ? '#0a9e6e' : '#5b6cff'} size={42} />
              <div className="f1" style={{ minWidth: 0 }}>
                <div className="row jcsb aic g6"><span className="t13 fw6 row aic g4" style={{ minWidth: 0, flex: 1 }}><span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{l.name}</span>{l.hot && <HotIcon />}</span><span className="t11 subtle" style={{ flexShrink: 0, whiteSpace: 'nowrap' }}>{relTime(c.lastAt)}</span></div>
                <div className="t12 muted" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{!last ? '—' : last.type === 'call' ? '📞 Cuộc gọi' : (last.dir === 'out' ? 'Bạn: ' : '') + ((last.attachments && last.attachments.length) ? attShortLabel(last.attachments[0]) + (last.text ? ' · ' + last.text : '') : last.attachment ? '📎 ' + last.attachment : (last.text || ''))}</div>
                <div className="row aic g6 mt4" style={{ flexWrap: 'nowrap', minWidth: 0 }}>
                  <div className="row aic g4" style={{ minWidth: 0, flex: 1, overflow: 'hidden' }}>
                    {m2.status === 'snoozed' && <span className="badge info" style={{ fontSize: 9.5, padding: '0 5px', flexShrink: 0 }}><Icon name="clock" size={10} />{m2.snoozeLabel || 'Snooze'}</span>}
                    {m2.status === 'done' && <span className="badge success" style={{ fontSize: 9.5, padding: '0 5px', flexShrink: 0 }}><Icon name="check" size={10} />Xong</span>}
                    {m2.labels.slice(0, 2).map(id => <LabelChip key={id} id={id} small />)}
                    {acctOf(c) && <span className="badge" style={{ fontSize: 9, padding: '0 5px', flexShrink: 1, minWidth: 0, background: ((AAU.channels[c.channel] || {}).color || '#888') + '18', color: (AAU.channels[c.channel] || {}).color || '#888', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} title={((AAU.channels[c.channel] || {}).label || c.channel) + ' · ' + acctOf(c)}>{acctOf(c)}</span>}
                  </div>
                  <span style={{ flexShrink: 0 }}><SLATag sla={l.sla} left={l.slaLeft} /></span>
                  {c.unread > 0 && <span className="ni-badge" style={{ flexShrink: 0 }}>{c.unread}</span>}
                </div>
              </div>
            </div>
          ); })}
        </div>
      </div>

{/* MIDDLE */}
      <div className="col" style={{ height: '100%', minHeight: 0, gap: 0, minWidth: 0 }}>
        <div className="row aic g10" style={{ padding: '11px 18px 9px', borderBottom: '1px solid var(--p-border-secondary)' }}>
          <ChannelAvatar ch={conv.channel} name={lead.name} color={lead.grade === 'A' ? '#0a9e6e' : '#5b6cff'} size={38} />
          <div className="f1" style={{ minWidth: 0 }}><div className="row aic g8"><span className="t15 fw7">{lead.name}</span>{lead.hot && <HotIcon />}<GradeBadge grade={lead.grade} /><SentimentChip s={SENTIMENT[conv.id]} /></div><div className="t12 muted">{lead.company ? lead.company + ' · ' : ''}{(AAU.channels[conv.channel] || {}).label || conv.channel}{(conv.accountName || conv.account) ? ' · ' + (conv.accountName || conv.account) : ''}</div></div>
          <span className={'badge ' + (conv.windowLeft === 'Hết hạn' ? 'critical' : 'info')}><Icon name="clock" size={12} />Cửa sổ {conv.windowLeft}</span>
          <IconButton name="phone" title="Gọi điện" onClick={() => setCallOpen(true)} />
          <IconButton name="user" title="Mở hồ sơ 360°" onClick={() => navigate('/leads/' + lead.id)} />
          <IconButton name="columns" title={panel ? 'Ẩn hồ sơ' : 'Hiện hồ sơ'} onClick={() => setPanel(!panel)} />
        </div>

{/* Toolbar: owner · labels · snooze/done */}
        <div className="row aic g8" style={{ padding: '7px 18px', borderBottom: '1px solid var(--p-border)', position: 'relative', flexWrap: 'wrap' }}>
          <div style={{ position: 'relative' }}>
            <button className="row aic g6" onClick={() => { setAssignMenu(!assignMenu); setLabelMenu(false); }} style={{ cursor: 'pointer', border: '1px solid var(--p-border)', borderRadius: 7, padding: '3px 8px 3px 4px', background: '#fff' }}>
              {cm.owner ? <><Avatar name={AAU.users.find(u => u.id === cm.owner)?.name} color={AAU.users.find(u => u.id === cm.owner)?.color} size={20} /><span className="t12 fw5">{AAU.users.find(u => u.id === cm.owner)?.name}</span></> : <span className="t12 fw6" style={{ padding: '0 4px', color: '#c4320a' }}><Icon name="user" size={13} /> Chưa gán</span>}
              <Icon name="chevronDown" size={13} />
            </button>
            {assignMenu && (
              <div style={{ position: 'absolute', top: '100%', left: 0, zIndex: 30, marginTop: 4, width: 200, background: '#fff', border: '1px solid var(--p-border)', borderRadius: 10, boxShadow: 'var(--p-shadow-popover)', overflow: 'hidden' }}>
                <div className="t11 subtle" style={{ padding: '8px 12px 4px', fontWeight: 700 }}>GÁN PHỤ TRÁCH</div>
                {sales.map(u => (
                  <div key={u.id} className="row aic g8" onClick={() => { patchMeta(selId, { owner: u.id }); setAssignMenu(false); }} style={{ padding: '8px 12px', cursor: 'pointer', background: cm.owner === u.id ? 'var(--p-bg-surface-selected)' : '' }} onMouseEnter={e => { if (cm.owner !== u.id) e.currentTarget.style.background = 'var(--p-bg-surface-hover)'; }} onMouseLeave={e => { if (cm.owner !== u.id) e.currentTarget.style.background = ''; }}>
                    <Avatar name={u.name} color={u.color} size={24} /><span className="t12 fw5 f1">{u.name}</span>{cm.owner === u.id && <Icon name="check" size={14} color="#0e7c4a" />}
                  </div>
                ))}
              </div>
            )}
          </div>
          {cm.labels.map(id => <LabelChip key={id} id={id} onRemove={() => patchMeta(selId, { labels: cm.labels.filter(x => x !== id) })} />)}
          <div style={{ position: 'relative' }}>
            <button className="iconbtn" title="Gắn nhãn" onClick={() => { setLabelMenu(!labelMenu); setAssignMenu(false); }} style={{ width: 26, height: 26 }}><Icon name="tag" size={14} /></button>
            {labelMenu && (
              <div style={{ position: 'absolute', top: '100%', left: 0, zIndex: 30, marginTop: 4, width: 190, background: '#fff', border: '1px solid var(--p-border)', borderRadius: 10, boxShadow: 'var(--p-shadow-popover)', overflow: 'hidden', padding: 6 }}>
                {INBOX_LABELS.map(l => { const on = cm.labels.includes(l.id); return (
                  <div key={l.id} className="row aic g8" onClick={() => patchMeta(selId, { labels: on ? cm.labels.filter(x => x !== l.id) : [...cm.labels, l.id] })} style={{ padding: '7px 8px', cursor: 'pointer', borderRadius: 7 }} onMouseEnter={e => e.currentTarget.style.background = 'var(--p-bg-surface-hover)'} onMouseLeave={e => e.currentTarget.style.background = ''}>
                    <Checkbox on={on} onChange={() => {}} /><LabelChip id={l.id} />
                  </div>
                ); })}
              </div>
            )}
          </div>
          <div className="mla row aic g6">
            {cm.status === 'snoozed'
              ? <Button size="sm" variant="plain" icon="clock" onClick={() => patchMeta(selId, { status: 'open', snoozeLabel: '' })}>Bỏ snooze</Button>
              : <Button size="sm" variant="plain" icon="clock" onClick={() => patchMeta(selId, { status: 'snoozed', snoozeLabel: 'Snooze 3h' })}>Snooze</Button>}
            {cm.status === 'done'
              ? <Button size="sm" variant="secondary" icon="refresh" onClick={() => patchMeta(selId, { status: 'open' })}>Mở lại</Button>
              : <Button size="sm" variant="success" icon="check" onClick={() => patchMeta(selId, { status: 'done' })}>Đánh dấu xong</Button>}
          </div>
        </div>

{['fb', 'instagram', 'zalo'].includes(conv.channel) && (
          botOff[selId] ? (
            <div className="row aic g8" style={{ padding: '8px 18px', background: 'var(--p-success-bg)', borderBottom: '1px solid var(--p-border-secondary)' }}>
              <Icon name="checkCircle" size={15} color="#0e7c4a" />
              <span className="t12" style={{ color: '#0e7c4a' }}>Đã tắt bot tự động {(AAU.channels[conv.channel] || {}).label || conv.channel} — hội thoại do CRM điều khiển, sales trả lời trực tiếp.</span>
              <button className="linkish mla t12 fw6" onClick={() => setBotOff(s => ({ ...s, [selId]: false }))}>Bật lại bot</button>
            </div>
          ) : (
            <div className="row aic g10" style={{ padding: '9px 18px', background: 'var(--p-warning-bg)', borderBottom: '1px solid var(--p-border-secondary)' }}>
              <Icon name="robot" size={16} color="#b06f00" />
              <div className="f1 t12" style={{ color: '#7a4d00' }}><b>Bot tự động {(AAU.channels[conv.channel] || {}).label || conv.channel} đang trả lời.</b> Tắt để chuyển hội thoại về hệ thống chat & sales tiếp quản.</div>
              <Button size="sm" variant="secondary" icon="robot" onClick={() => { setBotOff(s => ({ ...s, [selId]: true })); if (window.API && window.API.enabled) window.API.setAIMode(selId, 'off').catch(() => {}); }}>Tắt bot & nhận hội thoại</Button>
            </div>
          )
        )}

<div ref={bodyRef} style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '18px 18px 8px', background: 'var(--p-bg-surface-secondary)' }}>
          {thread.map(m => {
            if (m._t === 'note') return (
              <div key={m.id} style={{ display: 'flex', justifyContent: 'center', marginBottom: 12 }}>
                <div style={{ maxWidth: '82%', width: '100%', background: '#fff7e0', border: '1px solid #f0d27a', borderRadius: 10, padding: '8px 12px' }}>
                  <div className="row aic g6 mb2"><Icon name="lock" size={12} color="#a06a00" /><span className="t11 fw7" style={{ color: '#8a5a00' }}>NỘI BỘ · {AAU.users.find(u => u.id === m.by)?.name}</span><span className="t11 subtle mla">{relTime(m.at)} trước</span></div>
                  <div className="t13" style={{ lineHeight: 1.45 }}>{m.text.split(/(@[^\s]+(?:\s[A-ZÀ-Ỹ][^\s]*)?)/).map((p, i) => p.startsWith('@') ? <b key={i} style={{ color: '#1a4fa3' }}>{p}</b> : p)}</div>
                </div>
              </div>
            );
            if (m._t === 'call') return (
              <div key={m.id} style={{ display: 'flex', justifyContent: 'center', marginBottom: 12 }}>
                <div className="row aic g8" style={{ background: '#fff', border: '1px solid var(--p-border)', borderRadius: 10, padding: '7px 12px' }}>
                  <span className="center" style={{ width: 26, height: 26, borderRadius: '50%', background: 'var(--p-success-bg)', color: '#0e7c4a' }}><Icon name="phone" size={13} /></span>
                  <div className="t12"><b>Cuộc gọi đi · {m.duration || '—'}</b> · {m.disp}{m.note ? <span className="subtle"> — {m.note}</span> : ''}<div className="t11 subtle">{relTime(m.at)} trước · đã ghi vào hồ sơ 360°</div></div>
                </div>
              </div>
            );
            return (
              <div key={m.id} style={{ display: 'flex', justifyContent: m.dir === 'out' ? 'flex-end' : 'flex-start', marginBottom: 10 }}>
                <div style={{ maxWidth: '70%' }}>
                  {(m.attachments && m.attachments.length) ? (
                    <div className="col g4" style={{ alignItems: m.dir === 'out' ? 'flex-end' : 'flex-start' }}>
                      {m.attachments.map((a, i) => <Attachment key={i} a={a} dir={m.dir} />)}
                      {m.text ? <div style={{ padding: '7px 11px', borderRadius: 12, fontSize: 13, background: m.dir === 'out' ? '#303030' : '#fff', color: m.dir === 'out' ? '#fff' : '#303030', border: m.dir === 'in' ? '1px solid var(--p-border)' : 'none' }}>{m.text}</div> : null}
                    </div>
                  ) : m.image ? (
                    <div className="col g4" style={{ alignItems: m.dir === 'out' ? 'flex-end' : 'flex-start' }}>
                      <a href={m.image} target="_blank" rel="noopener noreferrer" style={{ display: 'block' }}>
                        <img src={m.image} alt="📷 Hình ảnh" loading="lazy" style={{ maxWidth: 230, maxHeight: 280, borderRadius: 12, display: 'block', border: '1px solid var(--p-border)', background: '#f0f0f0', objectFit: 'cover' }} />
                      </a>
                      {m.text ? <div style={{ padding: '7px 11px', borderRadius: 12, fontSize: 13, background: m.dir === 'out' ? '#303030' : '#fff', color: m.dir === 'out' ? '#fff' : '#303030', border: m.dir === 'in' ? '1px solid var(--p-border)' : 'none' }}>{m.text}</div> : null}
                    </div>
                  ) : m.attachment ? (
                    <div className="row aic g8" style={{ padding: '10px 13px', borderRadius: 14, borderBottomRightRadius: 4, background: '#303030', color: '#fff' }}>
                      <span className="center" style={{ width: 34, height: 34, borderRadius: 8, background: 'rgba(255,255,255,.15)' }}><Icon name="paperclip" size={16} /></span>
                      <div><div className="t13 fw6">{m.attachment}</div><div className="t11" style={{ opacity: 0.7 }}>PDF · đã gửi</div></div>
                    </div>
                  ) : (
                    <div style={{ padding: '9px 13px', borderRadius: 14, fontSize: 13.5, lineHeight: 1.45, background: m.dir === 'out' ? (m.ai ? '#ece4ff' : '#303030') : '#fff', color: m.dir === 'out' && !m.ai ? '#fff' : '#303030', border: m.dir === 'in' ? '1px solid var(--p-border)' : 'none', borderBottomRightRadius: m.dir === 'out' ? 4 : 14, borderBottomLeftRadius: m.dir === 'in' ? 4 : 14 }}>{m.text}</div>
                  )}
                  <div className="t11 subtle mt4" style={{ textAlign: m.dir === 'out' ? 'right' : 'left' }}>
                    {m.ai && <span className="badge magic" style={{ fontSize: 9, padding: '0 5px', marginRight: 4 }}>AI</span>}
                    {relTime(m.at)} trước
                    {m.dir === 'out' && m.status === 'sending' && <span style={{ marginLeft: 5 }}>· Đang gửi…</span>}
                    {m.dir === 'out' && m.status === 'failed' && <span style={{ marginLeft: 5, color: '#c4320a' }}>· ⚠ Gửi lỗi</span>}
                    {m.dir === 'out' && m.status === 'delivered' && <span style={{ marginLeft: 5, color: '#0a7d4f' }}>· ✓ Đã gửi tới khách</span>}
                    {m.dir === 'out' && m.id === lastOutId && !['sending', 'failed', 'delivered'].includes(m.status) && <span style={{ marginLeft: 5 }}>· {String(m.id).startsWith('x') || String(m.id).startsWith('c') ? 'Đã gửi' : (conv.linked ? '✓✓ Đã xem' : 'Đã gửi')}</span>}
                  </div>
                </div>
              </div>
            );
          })}
        </div>

{/* Playbook */}
        <div style={{ borderTop: '1px solid var(--p-border)', background: '#fff' }}>
          <div className="row aic g8" style={{ padding: '8px 18px', cursor: 'pointer' }} onClick={() => setPlaybook(!playbook)}>
            <Icon name="sparkles" size={15} color="#573b8a" /><span className="t12 fw6">Playbook Assistant</span>
            <span className="badge magic" style={{ fontSize: 10 }}>{pb.step}</span>
            <span className="mla"><Icon name={playbook ? 'chevronDown' : 'chevronRight'} size={15} /></span>
          </div>
          {playbook && (
            <div style={{ padding: '0 18px 12px' }}>
              <div className="row aic g8" style={{ padding: '8px 10px', borderRadius: 9, background: detected.color + '12', marginBottom: 10 }}>
                <span className="center" style={{ width: 22, height: 22, borderRadius: 6, background: detected.color + '22', color: detected.color, flexShrink: 0 }}><Icon name="target" size={13} /></span>
                <div className="f1" style={{ minWidth: 0 }}>
                  <div className="t11 fw7" style={{ color: detected.color }}>AI PHÁT HIỆN PATTERN · {detected.cat}</div>
                  <div className="t12" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{detected.label} · win-rate {detected.win}%</div>
                </div>
                <button className="t11 fw6 row aic g2" style={{ flexShrink: 0, color: detected.color, cursor: 'pointer' }} onClick={() => navigate('/enablement/intelligence')}>Xem<Icon name="chevronRight" size={12} /></button>
              </div>
              <div className="t12 muted mb8">{pb.tip}</div>
              <div className="row aic g8 wrap">
                <Button size="sm" variant="secondary" icon="plus" onClick={() => onDraft((draft ? draft + ' ' : '') + pb.reply)}>Chèn script</Button>
                <button className="tag" style={{ cursor: 'pointer' }} onClick={() => attach(pb.asset.split(' + ')[0])}><Icon name="paperclip" size={13} />{pb.asset}</button>
                <Button size="sm" variant="plain" onClick={() => navigate('/enablement/assets')}>Mở Asset Library</Button>
              </div>
            </div>
          )}
        </div>

{/* Composer */}
        <div style={{ borderTop: '1px solid var(--p-border)', padding: '10px 18px 14px', background: '#fff', position: 'relative' }}>
          {/* Copilot draft */}
          {composerTab === 'reply' && aiMode === 'copilot' && copilot && (
            <div style={{ background: 'var(--p-magic-bg)', border: '1px solid var(--p-magic-border)', borderRadius: 12, padding: '10px 12px', marginBottom: 8 }}>
              <div className="row aic g6 mb4"><Icon name="sparkles" size={13} color="#573b8a" /><span className="t11 fw7" style={{ color: '#573b8a' }}>AI GỢI Ý TRẢ LỜI</span><span className="t11 subtle mla">Copilot — bạn duyệt trước khi gửi</span></div>
              <div className="t13" style={{ color: '#3d2a63', lineHeight: 1.45 }}>{copilot}</div>
              <div className="row g8 mt8">
                <Button size="sm" variant="primary" icon="send" onClick={() => send(copilot)}>Gửi ngay</Button>
                <Button size="sm" variant="secondary" icon="edit" onClick={() => { setDraft(copilot); setCopilot(''); }}>Dùng & sửa</Button>
                <Button size="sm" variant="plain" onClick={() => setCopilot('')}>Bỏ</Button>
              </div>
            </div>
          )}
          {slash && (
            <div style={{ position: 'absolute', bottom: '100%', left: 18, right: 18, background: '#fff', borderRadius: 12, boxShadow: 'var(--p-shadow-popover)', overflow: 'hidden', marginBottom: 6 }}>
              <div className="t11 subtle" style={{ padding: '8px 12px 4px', fontWeight: 600 }}>QUICK REPLY · gõ để lọc</div>
              {AAU.replyTemplates.filter(t => t.key.includes(draft.slice(1).toLowerCase()) || t.label.toLowerCase().includes(draft.slice(1).toLowerCase())).map(t => (
                <div key={t.key} onClick={() => send(t.text)} style={{ padding: '9px 12px', cursor: 'pointer', borderTop: '1px solid var(--p-border-secondary)' }} onMouseEnter={e => e.currentTarget.style.background = 'var(--p-bg-surface-hover)'} onMouseLeave={e => e.currentTarget.style.background = ''}>
                  <div className="t12 fw6">/{t.key} · {t.label}</div><div className="t11 muted" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.text}</div>
                </div>
              ))}
            </div>
          )}
          {attachMenu && (
            <div style={{ position: 'absolute', bottom: '100%', left: 18, width: 280, background: '#fff', borderRadius: 12, boxShadow: 'var(--p-shadow-popover)', border: '1px solid var(--p-border)', overflow: 'hidden', marginBottom: 6 }}>
              <div className="row aic g8" onClick={() => fileRef.current && fileRef.current.click()} style={{ padding: '9px 12px', cursor: 'pointer', background: 'var(--p-bg-surface-hover)' }}>
                <Icon name="paperclip" size={14} color="#1a4fa3" /><span className="t12 fw6" style={{ color: '#1a4fa3' }}>Tải tệp từ máy… (ảnh/video/file)</span>
              </div>
              <div className="t11 subtle" style={{ padding: '8px 12px 4px', fontWeight: 700 }}>HOẶC TÀI LIỆU MẪU</div>
              {assets.map(a => (
                <div key={a} className="row aic g8" onClick={() => attach(a)} style={{ padding: '9px 12px', cursor: 'pointer', borderTop: '1px solid var(--p-border-secondary)' }} onMouseEnter={e => e.currentTarget.style.background = 'var(--p-bg-surface-hover)'} onMouseLeave={e => e.currentTarget.style.background = ''}>
                  <Icon name="paperclip" size={14} color="#573b8a" /><span className="t12 fw5">{a}</span>
                </div>
              ))}
            </div>
          )}
          <div className="row aic g10 mb8">
            <Seg value={composerTab} onChange={setComposerTab} options={[{ value: 'reply', label: 'Trả lời khách' }, { value: 'note', label: 'Note nội bộ' }]} />
            {composerTab === 'reply' && <>
              <span className="t12 muted">AI:</span>
              <Seg value={aiMode} onChange={v => { setAiMode(v); setStore(s => ({ ...s, [selId]: { ...s[selId], aiMode: v } })); if (window.API && window.API.enabled) window.API.setAIMode(selId, v).catch(() => {}); }} options={aiOpts} />
              {aiMode === 'autopilot' && <Badge tone="magic" dot>AI tự trả lời</Badge>}
            </>}
            {composerTab === 'note' && <span className="t12" style={{ color: '#a06a00' }}><Icon name="lock" size={12} /> Chỉ nội bộ thấy · gõ @ để nhắc đồng đội</span>}
          </div>
          <input type="file" ref={fileRef} multiple style={{ display: 'none' }} onChange={e => { sendFiles(e.target.files); e.target.value = ''; }} />
          <div className="row g8 aie">
            {composerTab === 'reply' && <IconButton name="paperclip" title="Gửi tài liệu / tệp" onClick={() => setAttachMenu(!attachMenu)} />}
            <textarea className="input" rows={2} placeholder={composerTab === 'note' ? 'Ghi chú nội bộ, @ để nhắc đồng đội…  (⌘/Ctrl+Enter để lưu)' : 'Nhập tin nhắn…  (gõ / để chèn mẫu · ⌘/Ctrl+Enter để gửi)'} value={draft} onChange={e => onDraft(e.target.value)} onKeyDown={onKey} style={{ resize: 'none', background: composerTab === 'note' ? '#fffdf3' : '#fff', borderColor: composerTab === 'note' ? '#f0d27a' : undefined }} />
            {composerTab === 'note'
              ? <Button variant="secondary" icon="check" onClick={saveNote} style={{ height: 38 }}>Lưu</Button>
              : <Button variant="primary" icon="send" onClick={() => send()} style={{ height: 38 }} />}
          </div>
          <div className="t11 subtle mt6">Phím tắt: <b>J/K</b> chuyển hội thoại · <b>E</b> đánh dấu xong</div>
        </div>
      </div>

{/* RIGHT — Customer 360 */}
      {panel && <Customer360Panel key={lead.id} lead={lead} conv={conv} onCreateLead={createLeadFromChat} />}
      {callOpen && <CallModal lead={lead} onClose={() => setCallOpen(false)} onLog={logCall} />}
    </div>
  );
}

/* Inline-editable key/value row */
function EditRow({ k, value, onChange, editing, type = 'text', suffix }) {
  if (!editing) return <Row360 k={k} v={(value || '—') + (suffix && value ? ' ' + suffix : '')} />;
  return (
    <div className="row jcsb aic g8" style={{ padding: '3px 0' }}>
      <span className="t12 subtle" style={{ flexShrink: 0 }}>{k}</span>
      <input className="input" value={value} type={type} onChange={e => onChange(e.target.value)} style={{ height: 28, fontSize: 12.5, textAlign: 'right', padding: '2px 8px' }} />
    </div>
  );
}

const LEARNER_ROLES = ['Chủ / Founder', 'CEO / Tổng GĐ', 'Quản lý vận hành', 'Quản lý cửa hàng', 'Bếp trưởng', 'Phụ trách Marketing', 'Phụ trách Nhân sự', 'Nhân viên cử đi học'];

/* Multi-value contact list (phone / email) */
function ContactList({ items, onChange, editing, type = 'text', icon }) {
  const [val, setVal] = useState('');
  function add() { const t = val.trim(); if (!t) return; onChange([...items, t]); setVal(''); }
  return (
    <div className="col g4">
      {items.map((it, i) => (
        <div key={i} className="row jcsb aic" style={{ padding: '2px 0' }}>
          <span className="t12 fw5 row aic g6">{i === 0 && <span className="badge neutral" style={{ fontSize: 8.5, padding: '0 4px' }}>chính</span>}{it}</span>
          {editing && items.length > 1 && <span style={{ cursor: 'pointer', opacity: 0.5 }} onClick={() => onChange(items.filter((_, j) => j !== i))}><Icon name="x" size={12} /></span>}
        </div>
      ))}
      {editing && (
        <div className="row g6 mt2">
          <input className="input" type={type} value={val} placeholder={'Thêm ' + (type === 'tel' ? 'SĐT' : 'email') + '…'} onChange={e => setVal(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') add(); }} style={{ height: 28, fontSize: 12.5 }} />
          <Button size="sm" icon="plus" onClick={add} />
        </div>
      )}
    </div>
  );
}

/* Multi-select scrollable course picker */
function CourseMultiSelect({ value, onChange }) {
  const [open, setOpen] = useState(false);
  const courses = AAU.courses.filter(c => c.status === 'active');
  function toggle(id) { onChange(value.includes(id) ? value.filter(x => x !== id) : [...value, id]); }
  return (
    <div style={{ position: 'relative' }}>
      <div className="col g6">
        {value.length === 0 && <span className="t12 muted">Chưa chọn khóa</span>}
        <div className="row g6 wrap">
          {value.map(id => { const c = AAU.courseById(id); if (!c) return null; return (
            <span key={id} className="tag" style={{ background: 'var(--p-info-bg)', color: 'var(--p-info-text)' }}>{c.name}<span className="x" onClick={() => toggle(id)}><Icon name="x" size={11} /></span></span>
          ); })}
        </div>
      </div>
      <button className="btn btn-secondary btn-sm mt6" onClick={() => setOpen(!open)} style={{ width: '100%', justifyContent: 'space-between' }}>
        <span className="row aic g6"><Icon name="plus" size={13} />Thêm khóa quan tâm</span><Icon name={open ? 'chevronDown' : 'chevronRight'} size={13} />
      </button>
      {open && (
        <div style={{ position: 'absolute', top: '100%', left: 0, right: 0, zIndex: 20, marginTop: 4, background: '#fff', border: '1px solid var(--p-border)', borderRadius: 10, boxShadow: 'var(--p-shadow-popover)', maxHeight: 230, overflowY: 'auto' }}>
          {AAU.courseGroups.map(g => {
            const list = courses.filter(c => c.group === g.id); if (!list.length) return null;
            return (
              <div key={g.id}>
                <div className="t11 subtle" style={{ padding: '7px 12px 3px', fontWeight: 700, position: 'sticky', top: 0, background: '#fff' }}>{g.label.toUpperCase()}</div>
                {list.map(c => { const on = value.includes(c.id); return (
                  <div key={c.id} onClick={() => toggle(c.id)} className="row aic g8" style={{ padding: '7px 12px', cursor: 'pointer', background: on ? 'var(--p-bg-surface-selected)' : '' }} onMouseEnter={e => { if (!on) e.currentTarget.style.background = 'var(--p-bg-surface-hover)'; }} onMouseLeave={e => { if (!on) e.currentTarget.style.background = ''; }}>
                    <Checkbox on={on} onChange={() => toggle(c.id)} />
                    <div className="f1"><div className="t12 fw5">{c.name}</div><div className="t11 subtle">{c.code} · {AAU.fmtVNDm(c.price)}</div></div>
                  </div>
                ); })}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

function addPain() { const t = newPain.trim(); if (!t) return; setPains([...pains, t]); setNewPain(''); }

// kiểm tra trùng SĐT ngay khi mở panel (nếu lead đã có SĐT)
  useEffect(() => {
    if (!live || !lead.id || !window.API.checkPhone || !lead.phone) { setDupWarn(null); return; }
    let alive = true;
    window.API.checkPhone(lead.phone, lead.id).then(r => { if (alive) setDupWarn(r && r.duplicate); }).catch(() => { });
    return () => { alive = false; };
  }, [lead.id, lead.phone]);

// LƯU định danh (SĐT/email) THẬT khi bấm ✓ — kèm cảnh báo trùng SĐT
  const saveIdentity = async () => {
    setEditId(false);
    if (!live || !lead.id || !window.API.updateLead) return;
    try {
      const resp = await window.API.updateLead(lead.id, { phone: (phones[0] || '').trim(), email: (emails[0] || '').trim() });
      if (resp && resp.duplicateWarning) setDupWarn(resp.duplicateWarning);
      if (window.API.refreshLeads) await window.API.refreshLeads();
    } catch (e) { window.alert('Lưu SĐT lỗi: ' + ((e && e.message) || '')); }
  };
  const doMerge = async (targetId) => {
    if (!targetId || !window.API.mergeLeads) return;
    try {
      const r = await window.API.mergeLeads(lead.id, targetId);
      if (window.API.refreshLeads) await window.API.refreshLeads();
      setDupWarn(null); setMergeOpen(false);
      window.dispatchEvent(new Event('aau:conversations-changed'));
      if (r && r.keepId) navigate('/leads/' + r.keepId);
    } catch (e) { window.alert('Gộp lỗi: ' + ((e && e.message) || '')); }
  };
  const dismissDup = async () => { if (dupWarn && window.API.markNotDuplicate) { try { await window.API.markNotDuplicate(lead.id, dupWarn.id); } catch (e) { } } setDupWarn(null); };
  const mergeCandidates = (AAU.leads || []).filter(l => l.id !== lead.id && mergeQ.trim() && ((l.name || '').toLowerCase().includes(mergeQ.toLowerCase()) || (l.phone || '').includes(mergeQ))).slice(0, 8);

return (
    <div className="col" style={{ width: 322, flexShrink: 0, borderLeft: '1px solid var(--p-border)', height: '100%', gap: 0, overflowY: 'auto' }}>
      <div style={{ padding: '16px 16px 12px', textAlign: 'center', borderBottom: '1px solid var(--p-border-secondary)' }}>
        <Avatar name={lead.name} color={lead.grade === 'A' ? '#0a9e6e' : '#5b6cff'} size={56} />
        <div className="t15 fw7 mt8">{lead.name}</div>
        <div className="t12 muted">{lead.role} · {lead.company}</div>
        <div className="row jcc g6 mt8"><StageChip stageId={lead.stage} /></div>
        <div className="col jcc g6 mt8" style={{ alignItems: 'center' }}>
          {lead.id
            ? <><span className="badge success" style={{ fontSize: 10 }}><Icon name="checkCircle" size={11} /> Đã link CRM</span><Button size="sm" variant="secondary" icon="user" onClick={() => navigate('/leads/' + lead.id)}>Xem dữ liệu 360°</Button></>
            : <Button size="sm" variant="success" icon="plus" onClick={onCreateLead}>Tạo Lead từ chat</Button>}
        </div>
      </div>

{dupWarn && (
        <div style={{ margin: 12, padding: 10, borderRadius: 10, background: 'var(--p-warning-bg)', border: '1px solid var(--p-warning-border)' }}>
          <div className="row aic g6 mb4"><Icon name="users" size={14} color="#7a4d00" /><span className="t12 fw7" style={{ color: '#7a4d00' }}>Nghi trùng — cùng SĐT</span></div>
          <div className="t12" style={{ color: '#7a4d00' }}>Trùng SĐT với lead <b>{dupWarn.name}</b>{dupWarn.stage ? ' (' + (AAU.stageById(dupWarn.stage)?.name || dupWarn.stage) + ')' : ''}. Cùng 1 người?</div>
          <div className="row g8 mt8"><Button size="sm" variant="primary" icon="users" onClick={() => doMerge(dupWarn.id)}>Gộp làm 1</Button><Button size="sm" variant="plain" onClick={dismissDup}>Không phải</Button></div>
        </div>
      )}

{mergeOpen && (
        <Modal title="Gắn hội thoại vào lead có sẵn" width={460} onClose={() => setMergeOpen(false)}
          footer={<Button variant="plain" onClick={() => setMergeOpen(false)}>Đóng</Button>}>
          <div className="t12 subtle mb8">Tìm lead (theo tên/SĐT) để gộp khách này vào — giữ lead tiến xa hơn, gom tên thành bí danh.</div>
          <Input icon="search" placeholder="Gõ tên hoặc SĐT…" value={mergeQ} onChange={setMergeQ} autoFocus />
          <div className="col g4 mt8" style={{ maxHeight: 300, overflowY: 'auto' }}>
            {mergeQ.trim() && mergeCandidates.length === 0 && <div className="t12 muted center" style={{ padding: 12 }}>Không thấy lead khớp.</div>}
            {mergeCandidates.map(l => (
              <div key={l.id} className="row aic jcsb" style={{ padding: '8px 10px', borderRadius: 8, cursor: 'pointer', border: '1px solid var(--p-border)' }} onClick={() => doMerge(l.id)}>
                <div className="row aic g8"><Avatar name={l.name} size={26} /><div><div className="t13 fw6">{l.name}</div><div className="t11 subtle">{l.phone || 'chưa SĐT'} · {(AAU.channels[l.channel] || {}).label || l.channel}</div></div></div>
                <Button size="sm" variant="primary" icon="users">Gộp</Button>
              </div>
            ))}
          </div>
        </Modal>
      )}

<Section360 title="ĐỊNH DANH" action={<span className="row aic g4">{lead.id && <IconButton name="users" size={13} title="Gắn vào lead có sẵn / gộp" onClick={e => { e.stopPropagation(); setMergeOpen(true); }} />}<IconButton name={editId ? 'check' : 'edit'} size={14} onClick={e => { e.stopPropagation(); editId ? saveIdentity() : setEditId(true); }} /></span>}>
        <div className="t12 subtle mb2 row aic g6">SĐT {!editId && <span className="badge neutral" style={{ fontSize: 9, padding: '0 5px' }}>auto</span>}</div>
        <ContactList items={phones} onChange={setPhones} editing={editId} type="tel" />
        <div className="t12 subtle mb2 mt8">Email</div>
        <ContactList items={emails} onChange={setEmails} editing={editId} type="email" />
        <div className="mt8"><Row360 k="Facebook" v={<a className="linkish">{lead.fb}</a>} auto /><Row360 k="Khu vực" v={lead.region} auto /></div>
      </Section360>
      <Section360 title="KINH DOANH (B2B)" action={<IconButton name={editBiz ? 'check' : 'edit'} size={14} onClick={e => { e.stopPropagation(); setEditBiz(!editBiz); }} />}>
        <EditRow k="Mô hình" value={biz.bizModel} editing={editBiz} onChange={v => setBiz({ ...biz, bizModel: v })} />
        <EditRow k="Ngành" value={biz.industry} editing={editBiz} onChange={v => setBiz({ ...biz, industry: v })} />
        <EditRow k="Quy mô" value={biz.chainSize} editing={editBiz} onChange={v => setBiz({ ...biz, chainSize: v })} />
        <EditRow k="Doanh thu/th" value={biz.revenue} editing={editBiz} onChange={v => setBiz({ ...biz, revenue: v })} />
        {editBiz && <div className="t11 subtle mt6">Lưu vào hồ sơ 360° của khách.</div>}
      </Section360>
      <Section360 title="NHU CẦU" action={<IconButton name={editNeed ? 'check' : 'edit'} size={14} onClick={e => { e.stopPropagation(); setEditNeed(!editNeed); }} />}>
        <div className="t12 subtle mb4">Painpoints</div>
        <div className="col g6">
          {pains.map((p, i) => (
            <span key={i} className="tag">{p}{editNeed && <span className="x" onClick={() => setPains(pains.filter((_, j) => j !== i))}><Icon name="x" size={11} /></span>}</span>
          ))}
          {editNeed && (
            <div className="row g6 mt2">
              <input className="input" value={newPain} placeholder="Thêm painpoint…" onChange={e => setNewPain(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') addPain(); }} style={{ height: 30, fontSize: 12.5 }} />
              <Button size="sm" icon="plus" onClick={addPain} />
            </div>
          )}
        </div>
        <div className="t12 subtle mt12 mb4">Khóa quan tâm <span className="subtle">(chọn 1 hoặc nhiều)</span></div>
        {editNeed
          ? <CourseMultiSelect value={courses} onChange={setCourses} />
          : <div className="row g6 wrap">{courses.length ? courses.map(id => <span key={id} className="badge info">{AAU.courseById(id)?.name}</span>) : <span className="t12 muted">—</span>}</div>}
        <div className="t12 subtle mt12 mb4">Người học</div>
        {editNeed
          ? <Select value={learner} onChange={setLearner} options={[{ value: '', label: '— Chọn người học —' }, ...LEARNER_ROLES.map(r => ({ value: r, label: r }))]} style={{ width: '100%' }} />
          : <span className="t12 fw5">{learner || '—'}</span>}
      </Section360>
      <Section360 title="GỢI Ý TỪ AI (chờ duyệt)">
        <div className="col g8">
          {aiSug.map(s => (
            <div key={s.id} className="row aic g8" style={{ padding: 8, borderRadius: 8, background: applied[s.id] ? 'var(--p-success-bg)' : 'var(--p-magic-bg)' }}>
              <Icon name={applied[s.id] ? 'check' : 'sparkles'} size={14} color={applied[s.id] ? '#0e7c4a' : '#573b8a'} />
              <div className="f1 t12"><b>{s.f}:</b> {s.v}</div>
              {applied[s.id]
                ? <span className="t11 fw6" style={{ color: '#0e7c4a' }}>Đã áp dụng</span>
                : <IconButton name="check" size={14} title="Áp vào hồ sơ" onClick={() => { setApplied({ ...applied, [s.id]: true }); if (s.id === 'role') setLearner('Chủ / Founder'); }} />}
            </div>
          ))}
        </div>
      </Section360>
      <Section360 title="TRẠNG THÁI CRM">
        <Row360 k="SLA" v={<SLATag sla={lead.sla} left={lead.slaLeft} />} />
        <Row360 k="Hot signal" v={lead.hot ? <span className="hot row aic g4"><Icon name="fire" size={13} />Có</span> : 'Không'} />
        <Row360 k="Grade" v={<GradeBadge grade={lead.grade} />} />
        <Row360 k="Deal value" v={AAU.fmtVND(lead.dealValue)} />
        <Row360 k="Qualify" v={Object.values(lead.qualify || {}).filter(Boolean).length + '/4'} />
      </Section360>
    </div>
  );
}

Object.assign(window, { UnifiedInbox, Customer360Panel, ChannelAvatar, CallModal });