// AI Sales & Bot — Enquiry Inbox, Bot Conversations, Lead Pipeline
const { useState: useStateAi, useRef: useRefAi, useEffect: useEffectAi } = React;

function ChannelBadge({ channel }) {
  const map = {
    'WhatsApp': { icon: 'Whatsapp', color: '#25D366', bg: 'rgba(37,211,102,.1)' },
    'Website': { icon: 'Globe', color: 'var(--navy)', bg: 'rgba(27,58,107,.1)' },
    'WeChat': { icon: 'WeChat', color: '#06AD56', bg: 'rgba(6,173,86,.1)' }
  };
  const m = map[channel] || map['Website'];
  const IconComp = Icon[m.icon];
  return (
    <span className="badge no-dot" style={{ background: m.bg, color: m.color, fontSize: 11 }}>
      <IconComp size={11} stroke={2} /> {channel}
    </span>
  );
}

function PriorityDot({ p }) {
  const color = p === 'high' ? 'var(--danger)' : p === 'med' ? 'var(--warning)' : 'var(--muted)';
  return <span className="status-dot" style={{ background: color }}></span>;
}

// === ENQUIRY INBOX ===
function EnquiryInbox({ t, lang }) {
  const D = window.MJC_DATA;
  const [selected, setSelected] = useStateAi(D.ENQUIRIES[0]);
  const [statusFilter, setStatusFilter] = useStateAi('all');
  const [channelFilter, setChannelFilter] = useStateAi('all');
  const [sortBy, setSortBy] = useStateAi({ key: 'received', dir: 'desc' });

  const filtered = D.ENQUIRIES.filter(e =>
    (statusFilter === 'all' || e.status === statusFilter) &&
    (channelFilter === 'all' || e.channel === channelFilter)
  );

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">{t('ai_sales_title')}</h1>
          <div className="page-subtitle">{t('ai_sales_sub')}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost"><Icon.Download size={15} /> {t('export')}</button>
          <button className="btn btn-gold"><Icon.Plus size={15} /> {t('new_enquiry')}</button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 'var(--gap)', minHeight: 600 }}>
        {/* Left: Inbox list */}
        <div className="table-wrap" style={{ display: 'flex', flexDirection: 'column' }}>
          <div className="table-toolbar">
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap', flex: 1 }}>
              <select className="field-select" style={{ height: 32, fontSize: 12 }} value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}>
                <option value="all">{lang === 'zh' ? '全部状态' : 'All status'}</option>
                <option value="new">{t('new')}</option>
                <option value="contacted">{t('contacted')}</option>
                <option value="quoted">{t('quoted')}</option>
                <option value="converted">{t('converted')}</option>
                <option value="lost">{t('lost')}</option>
              </select>
              <select className="field-select" style={{ height: 32, fontSize: 12 }} value={channelFilter} onChange={(e) => setChannelFilter(e.target.value)}>
                <option value="all">{t('all_channels')}</option>
                <option value="WhatsApp">WhatsApp</option>
                <option value="Website">Website</option>
                <option value="WeChat">WeChat</option>
              </select>
              <span className="muted" style={{ fontSize: 12, marginLeft: 'auto' }}>{filtered.length} {lang === 'zh' ? '条' : 'enquiries'}</span>
            </div>
          </div>
          <div style={{ overflowY: 'auto', flex: 1 }}>
            {filtered.map((e, i) => (
              <div key={i}
                   onClick={() => setSelected(e)}
                   style={{
                     padding: '14px 18px',
                     borderBottom: '1px solid var(--border)',
                     cursor: 'pointer',
                     background: selected?.id === e.id ? 'var(--bg-alt)' : 'transparent',
                     borderLeft: selected?.id === e.id ? '3px solid var(--gold)' : '3px solid transparent',
                     transition: 'background .12s'
                   }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                  <PriorityDot p={e.priority} />
                  <div className="avatar avatar-sm avatar-teal">{(lang === 'zh' ? e.name_zh : e.name_en).slice(0, 2).toUpperCase()}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{lang === 'zh' ? e.name_zh : e.name_en}</div>
                    <div className="muted" style={{ fontSize: 11.5 }}>{e.id} · {e.received}</div>
                  </div>
                  <StatusBadge status={e.status} t={t} />
                </div>
                <div style={{ display: 'flex', gap: 6, marginBottom: 8, flexWrap: 'wrap' }}>
                  <ChannelBadge channel={e.channel} />
                  <span className="badge no-dot" style={{ background: 'var(--bg-alt)', color: 'var(--ink-soft)', fontSize: 11 }}>{e.intent}</span>
                  <span className="badge no-dot" style={{ background: 'var(--bg-alt)', color: 'var(--ink-soft)', fontSize: 11 }}>{e.pax} pax</span>
                </div>
                <div style={{ fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.5, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
                  <span style={{ color: 'var(--teal)', fontWeight: 600 }}>✦ {t('ai_summary')}: </span>
                  {lang === 'zh' ? e.summary_zh : e.summary_en}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Right: Detail */}
        {selected && (
          <div className="card" style={{ position: 'sticky', top: 0, alignSelf: 'flex-start' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <div className="avatar avatar-lg avatar-teal">{(lang === 'zh' ? selected.name_zh : selected.name_en).slice(0, 2).toUpperCase()}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 16 }}>{lang === 'zh' ? selected.name_zh : selected.name_en}</div>
                <div className="muted" style={{ fontSize: 12 }}>{selected.phone}</div>
              </div>
              <button className="icon-btn"><Icon.More size={16} /></button>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 16 }}>
              <div style={{ padding: 10, borderRadius: 10, background: 'var(--bg)' }}>
                <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '.05em', fontWeight: 600 }}>{t('pax')}</div>
                <div style={{ fontSize: 18, fontWeight: 700, marginTop: 2 }}>{selected.pax}</div>
              </div>
              <div style={{ padding: 10, borderRadius: 10, background: 'var(--bg)' }}>
                <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '.05em', fontWeight: 600 }}>Budget</div>
                <div style={{ fontSize: 14, fontWeight: 700, marginTop: 4, color: 'var(--gold)' }}>{selected.budget}</div>
              </div>
              <div style={{ padding: 10, borderRadius: 10, background: 'var(--bg)' }}>
                <div className="muted" style={{ fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '.05em', fontWeight: 600 }}>Channel</div>
                <div style={{ marginTop: 6 }}><ChannelBadge channel={selected.channel} /></div>
              </div>
            </div>

            <div className="ai-surface" style={{ padding: 14, marginBottom: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                <span className="ai-badge"><Icon.Sparkle size={11} stroke={2.5} /> AI {lang === 'zh' ? '分析' : 'Analysis'}</span>
              </div>
              <div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--ink)', position: 'relative', zIndex: 1 }}>
                {lang === 'zh' ? selected.summary_zh : selected.summary_en}
              </div>
              <div style={{ marginTop: 12, display: 'flex', gap: 6, flexWrap: 'wrap', position: 'relative', zIndex: 1 }}>
                <span className="badge no-dot" style={{ background: '#fff', color: 'var(--teal)', border: '1px solid var(--teal-glow)', fontSize: 11 }}>Intent: {selected.intent}</span>
                <span className="badge no-dot" style={{ background: '#fff', color: 'var(--teal)', border: '1px solid var(--teal-glow)', fontSize: 11 }}>
                  {selected.priority === 'high' ? (lang === 'zh' ? '高优先级' : 'High Priority') : selected.priority === 'med' ? (lang === 'zh' ? '中优先级' : 'Medium') : (lang === 'zh' ? '低优先级' : 'Low')}
                </span>
              </div>
            </div>

            <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
              <button className="btn btn-teal" style={{ flex: 1 }}><Icon.Send size={14} /> {lang === 'zh' ? '回复' : 'Reply'}</button>
              <button className="btn btn-ghost"><Icon.Phone size={14} /></button>
              <button className="btn btn-ghost"><Icon.Eye size={14} /> {t('view_transcript')}</button>
            </div>

            <div className="divider"></div>

            <div style={{ marginBottom: 10, fontSize: 12, fontWeight: 600, color: 'var(--ink-soft)' }}>{t('quick_reply')}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {[
                lang === 'zh' ? '感谢咨询!我们 30 分钟内会回复' : 'Thanks for your enquiry — replying within 30 min',
                lang === 'zh' ? '请问您倾向的出发日期?' : 'What dates work best for your group?',
                lang === 'zh' ? '我们的中文导游可以全程陪同' : 'Our Mandarin-speaking guide can accompany you'
              ].map((q, i) => (
                <button key={i} style={{ textAlign: 'left', padding: '8px 12px', border: '1px solid var(--border)', borderRadius: 8, background: '#fff', fontSize: 12.5, color: 'var(--ink-soft)' }}>
                  {q}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// === BOT CONVERSATIONS ===
function BotConversations({ t, lang }) {
  const D = window.MJC_DATA;
  const [playing, setPlaying] = useStateAi(false);
  const [visibleIdx, setVisibleIdx] = useStateAi(D.BOT_TRANSCRIPT.length);
  const [speed, setSpeed] = useStateAi(1);

  useEffectAi(() => {
    if (!playing) return;
    if (visibleIdx >= D.BOT_TRANSCRIPT.length) {
      setPlaying(false);
      return;
    }
    const timer = setTimeout(() => setVisibleIdx(v => v + 1), 1200 / speed);
    return () => clearTimeout(timer);
  }, [playing, visibleIdx, speed]);

  const replay = () => {
    setVisibleIdx(0);
    setPlaying(true);
  };

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">{lang === 'zh' ? '机器人对话' : 'Bot Conversations'}</h1>
          <div className="page-subtitle">{lang === 'zh' ? '查看 AI 与客户的对话,意图与提取的预订数据。' : 'AI conversation transcripts, detected intent, and extracted booking data.'}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost"><Icon.Download size={15} /> {t('export')}</button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr 1fr', gap: 'var(--gap)' }}>
        {/* Conversation list */}
        <div className="card" style={{ padding: 0 }}>
          <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border)' }}>
            <div style={{ fontWeight: 600, fontSize: 13 }}>{lang === 'zh' ? '今日对话' : 'Today\'s Conversations'} <span className="muted" style={{ fontWeight: 400, marginLeft: 4 }}>(24)</span></div>
          </div>
          <div style={{ maxHeight: 540, overflowY: 'auto' }}>
            {D.ENQUIRIES.slice(0, 5).map((c, i) => (
              <div key={i} style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)', cursor: 'pointer', background: i === 0 ? 'var(--bg-alt)' : 'transparent', borderLeft: i === 0 ? '3px solid var(--gold)' : '3px solid transparent' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div className="avatar avatar-sm avatar-teal">{(lang === 'zh' ? c.name_zh : c.name_en).slice(0,2)}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 12.5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{lang === 'zh' ? c.name_zh : c.name_en}</div>
                    <div className="muted" style={{ fontSize: 11 }}>{c.received} · 6 {t('messages')}</div>
                  </div>
                  <ChannelBadge channel={c.channel} />
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Chat viewer */}
        <div className="card" style={{ display: 'flex', flexDirection: 'column', padding: 0, overflow: 'hidden' }}>
          <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div className="avatar avatar-teal">ZW</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: 13 }}>{lang === 'zh' ? '张伟先生' : 'Mr. Zhang Wei'}</div>
              <div className="muted" style={{ fontSize: 11 }}>WhatsApp · +86 138 0013 8000</div>
            </div>
            <button className="btn btn-ghost btn-sm" onClick={replay}>
              {playing ? <Icon.Pause size={13} /> : <Icon.Play size={13} />} {playing ? (lang === 'zh' ? '暂停' : 'Pause') : (lang === 'zh' ? '重播' : 'Replay')}
            </button>
            <select className="field-select" style={{ height: 28, fontSize: 11, padding: '0 8px' }} value={speed} onChange={(e) => setSpeed(Number(e.target.value))}>
              <option value="0.5">0.5x</option>
              <option value="1">1x</option>
              <option value="2">2x</option>
            </select>
          </div>
          <div style={{ flex: 1, overflowY: 'auto', padding: '18px', background: 'var(--bg)', minHeight: 420, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {D.BOT_TRANSCRIPT.slice(0, visibleIdx).map((m, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: m.from === 'bot' ? 'flex-start' : 'flex-end' }}>
                <div style={{ maxWidth: '75%' }}>
                  {m.from === 'bot' && (
                    <div style={{ fontSize: 10.5, color: 'var(--teal)', fontWeight: 600, marginBottom: 3, display: 'flex', alignItems: 'center', gap: 4 }}>
                      <Icon.Sparkle size={10} stroke={2.5} /> AI BOT
                    </div>
                  )}
                  <div style={{
                    padding: '10px 14px',
                    borderRadius: m.from === 'bot' ? '14px 14px 14px 4px' : '14px 14px 4px 14px',
                    background: m.from === 'bot' ? 'linear-gradient(135deg, #fff 0%, #F0FAFC 100%)' : 'var(--navy)',
                    color: m.from === 'bot' ? 'var(--ink)' : '#fff',
                    border: m.from === 'bot' ? '1px solid var(--teal-glow)' : 'none',
                    fontSize: 13,
                    lineHeight: 1.5,
                    boxShadow: 'var(--shadow-sm)'
                  }}>
                    {lang === 'zh' ? m.text_zh : m.text_en}
                  </div>
                  <div className="muted" style={{ fontSize: 10.5, marginTop: 4, textAlign: m.from === 'bot' ? 'left' : 'right' }}>{m.t}</div>
                </div>
              </div>
            ))}
            {playing && visibleIdx < D.BOT_TRANSCRIPT.length && (
              <div style={{ alignSelf: 'flex-start', padding: '10px 14px', borderRadius: '14px 14px 14px 4px', background: '#fff', border: '1px solid var(--teal-glow)', display: 'flex', gap: 4 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--teal)', opacity: .4, animation: 'pulse 1.2s infinite' }}></span>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--teal)', opacity: .6, animation: 'pulse 1.2s infinite .2s' }}></span>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--teal)', opacity: .8, animation: 'pulse 1.2s infinite .4s' }}></span>
              </div>
            )}
          </div>
        </div>

        {/* AI-extracted data */}
        <div className="ai-surface">
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 12 }}>
            <span className="ai-badge"><Icon.Sparkle size={11} stroke={2.5} /> {lang === 'zh' ? '提取数据' : 'Extracted'}</span>
          </div>
          <div style={{ position: 'relative', zIndex: 1 }}>
            {[
              { label: lang === 'zh' ? '客户姓名' : 'Customer', value: lang === 'zh' ? '张伟' : 'Zhang Wei', conf: 0.98 },
              { label: lang === 'zh' ? '联系方式' : 'Contact', value: '+86 138 0013 8000', conf: 0.99 },
              { label: lang === 'zh' ? '出行日期' : 'Travel Dates', value: '23-27 Jun 2026', conf: 0.95 },
              { label: lang === 'zh' ? '人数' : 'Pax', value: '4 adults + 2 kids', conf: 0.97 },
              { label: lang === 'zh' ? '目的地' : 'Destinations', value: 'Genting + KL', conf: 0.92 },
              { label: lang === 'zh' ? '预算' : 'Budget', value: 'RM 11,340 (6 × RM 1,890)', conf: 0.88 },
              { label: lang === 'zh' ? '语言偏好' : 'Language', value: lang === 'zh' ? '中文' : 'Mandarin', conf: 0.94 }
            ].map((row, i) => (
              <div key={i} style={{ padding: '10px 0', borderBottom: '1px solid rgba(13,106,122,.12)' }}>
                <div style={{ fontSize: 10.5, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '.05em', fontWeight: 600 }}>{row.label}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 3 }}>
                  <div style={{ fontSize: 13, fontWeight: 500, flex: 1 }}>{row.value}</div>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--teal)', background: 'rgba(13,106,122,.1)', padding: '1px 5px', borderRadius: 4 }}>
                    {(row.conf * 100).toFixed(0)}%
                  </span>
                </div>
              </div>
            ))}
            <button className="btn btn-gold" style={{ width: '100%', justifyContent: 'center', marginTop: 14 }}>
              <Icon.Plus size={14} /> {lang === 'zh' ? '创建预订' : 'Create Booking'}
            </button>
          </div>
        </div>
      </div>
      <style>{`@keyframes pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }`}</style>
    </div>
  );
}

// === LEAD PIPELINE (Kanban) ===
function LeadPipeline({ t, lang }) {
  const D = window.MJC_DATA;
  const STAGES = ['new', 'contacted', 'quoted', 'converted', 'lost'];

  // Build full lead map
  const allLeads = {};
  D.ENQUIRIES.forEach(e => { allLeads[e.id] = e; });
  Object.entries(D.EXTRA_LEADS).forEach(([id, l]) => {
    allLeads[id] = { id, ...l, status: STAGES.find(s => D.PIPELINE[s]?.includes(id)) || 'new', priority: 'med', received: 'today' };
  });

  const [pipeline, setPipeline] = useStateAi(D.PIPELINE);
  const [dragId, setDragId] = useStateAi(null);
  const [dragOverStage, setDragOverStage] = useStateAi(null);

  const onDragStart = (id) => setDragId(id);
  const onDragOver = (e, stage) => {
    e.preventDefault();
    setDragOverStage(stage);
  };
  const onDragLeave = () => setDragOverStage(null);
  const onDrop = (e, stage) => {
    e.preventDefault();
    if (!dragId) return;
    const newPipeline = { ...pipeline };
    Object.keys(newPipeline).forEach(s => {
      newPipeline[s] = newPipeline[s].filter(id => id !== dragId);
    });
    newPipeline[stage] = [dragId, ...newPipeline[stage]];
    setPipeline(newPipeline);
    setDragId(null);
    setDragOverStage(null);
  };
  const onDragEnd = () => { setDragId(null); setDragOverStage(null); };

  const stageColor = {
    new: 'var(--gold)', contacted: 'var(--teal)', quoted: 'var(--warning)',
    converted: 'var(--success)', lost: 'var(--muted)'
  };

  return (
    <div>
      <div className="page-header">
        <div>
          <h1 className="page-title">{lang === 'zh' ? '销售管道' : 'Lead Pipeline'}</h1>
          <div className="page-subtitle">{lang === 'zh' ? '拖拽线索卡片至任意阶段以更新状态。' : 'Drag lead cards between stages to update status.'}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost"><Icon.Filter size={15} /> {t('filter')}</button>
          <button className="btn btn-gold"><Icon.Plus size={15} /> {t('new_enquiry')}</button>
        </div>
      </div>

      <div className="kanban">
        {STAGES.map(stage => {
          const ids = pipeline[stage] || [];
          const value = ids.reduce((sum, id) => {
            const l = allLeads[id];
            if (!l) return sum;
            const num = parseInt((l.budget || '').replace(/[^0-9]/g, '')) || 0;
            return sum + num;
          }, 0);
          return (
            <div key={stage}
                 className="kanban-col"
                 onDragOver={(e) => onDragOver(e, stage)}
                 onDragLeave={onDragLeave}
                 onDrop={(e) => onDrop(e, stage)}
                 style={{
                   outline: dragOverStage === stage ? `2px dashed ${stageColor[stage]}` : 'none',
                   outlineOffset: -2
                 }}>
              <div className="kanban-col-header" style={{ alignItems: 'flex-start' }}>
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <span className="status-dot" style={{ background: stageColor[stage] }}></span>
                    <span style={{ textTransform: 'uppercase', letterSpacing: '.05em', fontSize: 11 }}>{t(stage)}</span>
                    <span className="kanban-col-count">{ids.length}</span>
                  </div>
                  <div className="muted" style={{ fontSize: 11, marginTop: 4, fontWeight: 400 }}>
                    RM {value.toLocaleString()}
                  </div>
                </div>
                <button className="icon-btn"><Icon.More size={14} /></button>
              </div>
              {ids.map(id => {
                const lead = allLeads[id];
                if (!lead) return null;
                return (
                  <div key={id}
                       className={`kanban-card ${dragId === id ? 'dragging' : ''}`}
                       draggable
                       onDragStart={() => onDragStart(id)}
                       onDragEnd={onDragEnd}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                      <div className="avatar avatar-sm avatar-teal">{(lang === 'zh' ? lead.name_zh : lead.name_en).slice(0,2)}</div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontWeight: 600, fontSize: 12.5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                          {lang === 'zh' ? lead.name_zh : lead.name_en}
                        </div>
                        <div className="muted mono" style={{ fontSize: 10.5 }}>{lead.id}</div>
                      </div>
                      <PriorityDot p={lead.priority || 'med'} />
                    </div>
                    <div style={{ display: 'flex', gap: 4, marginBottom: 8, flexWrap: 'wrap' }}>
                      <span className="badge no-dot" style={{ background: 'var(--bg-alt)', color: 'var(--ink-soft)', fontSize: 10.5 }}>{lead.intent}</span>
                      <span className="badge no-dot" style={{ background: 'var(--bg-alt)', color: 'var(--ink-soft)', fontSize: 10.5 }}>{lead.pax} pax</span>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--gold)' }}>{lead.budget}</span>
                      <ChannelBadge channel={lead.channel} />
                    </div>
                  </div>
                );
              })}
              {ids.length === 0 && (
                <div style={{ padding: '24px 12px', textAlign: 'center', color: 'var(--muted)', fontSize: 11.5, border: '1.5px dashed var(--border-strong)', borderRadius: 10 }}>
                  {lang === 'zh' ? '拖入线索' : 'Drop lead here'}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.EnquiryInbox = EnquiryInbox;
window.BotConversations = BotConversations;
window.LeadPipeline = LeadPipeline;