/* AAU CRM — Conversation Intelligence (Enablement & AI)
   Vòng lặp tự học: hội thoại → pattern → tri thức → gợi ý sale → làm giàu kho. */

function ciSpark(data, color, w = 72, h = 26) {
  const max = Math.max(...data), min = Math.min(...data), rng = (max - min) || 1;
  const pts = data.map((v, i) => `${(i / (data.length - 1)) * (w - 2) + 1},${h - 3 - ((v - min) / rng) * (h - 6)}`);
  const last = pts[pts.length - 1].split(',');
  return (
    <svg width={w} height={h} style={{ display: 'block' }}>
      <polyline points={pts.join(' ')} fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={last[0]} cy={last[1]} r="2.3" fill={color} />
    </svg>
  );
}

function CoverageBadge({ c }) {
  const map = { covered: { t: 'success', l: 'Đã phủ' }, partial: { t: 'warning', l: 'Một phần' }, gap: { t: 'critical', l: 'Lỗ hổng' } };
  const m = map[c] || map.gap;
  return <Badge tone={m.t} dot>{m.l}</Badge>;
}

function TrendChip({ v, suffix = '%' }) {
  const up = v >= 0;
  return <span className="row aic g2" style={{ fontSize: 11, fontWeight: 700, color: up ? '#0e7c4a' : '#b42318' }}><Icon name={up ? 'arrowUp' : 'arrowDown'} size={11} />{Math.abs(v)}{suffix}</span>;
}

const KIcon = { script: 'flow', asset: 'paperclip', kb: 'book' };
function KnowledgeChip({ k }) {
  return <span className="tag" style={{ fontSize: 11.5 }}><Icon name={KIcon[k.t]} size={12} color="#573b8a" />{k.name}</span>;
}

function CatDot({ cat, size = 26 }) {
  const m = INTEL.catMeta[cat];
  return <span className="center" style={{ width: size, height: size, borderRadius: 8, background: m.color + '1c', color: m.color, flexShrink: 0 }}><Icon name={m.icon} size={size * 0.55} /></span>;
}

/* ---------- Loop strip ---------- */
function LoopStrip() {
  return (
    <Card className="mb16" pad>
      <div className="row aic g6 mb4"><Icon name="refresh" size={15} color="#573b8a" /><span className="t13 fw7">Vòng lặp tri thức</span><span className="t12 subtle">— mỗi hội thoại làm kho thông minh hơn</span></div>
      <div className="row aic" style={{ gap: 0, overflowX: 'auto', paddingTop: 6 }}>
        {INTEL.loop.map((n, i) => (
          <React.Fragment key={n.id}>
            <div className="col aic" style={{ minWidth: 116, textAlign: 'center', gap: 4, padding: '4px 2px' }}>
              <span className="center" style={{ width: 40, height: 40, borderRadius: 11, background: 'var(--p-magic-bg)', color: '#573b8a' }}><Icon name={n.icon} size={19} /></span>
              <span className="t18 fw7 tnum" style={{ lineHeight: 1.1 }}>{n.value}</span>
              <span className="t12 fw6">{n.label}</span>
              <span className="t11 subtle">{n.sub}</span>
            </div>
            {i < INTEL.loop.length - 1 && <Icon name="arrowRight" size={16} color="#c4b5e8" />}
          </React.Fragment>
        ))}
      </div>
    </Card>
  );
}

/* ---------- Pattern detail drawer ---------- */
function PatternDrawer({ p, auto, onClose }) {
  const m = INTEL.catMeta[p.cat];
  return (
    <Drawer width={520} title="Chi tiết pattern" onClose={onClose} footer={<><Button onClick={onClose}>Đóng</Button><Button variant="primary" icon={p.coverage === 'gap' ? 'plus' : 'edit'} onClick={() => navigate('/enablement/scripts')}>{p.coverage === 'gap' ? 'Tạo kịch bản cho pattern' : 'Sửa kịch bản gắn pattern'}</Button></>}>
      <div className="col g20">
        <div className="row aic g12">
          <CatDot cat={p.cat} size={42} />
          <div className="f1">
            <div className="t17 fw7">{p.label}</div>
            <div className="row aic g8 mt4"><span className="badge" style={{ background: m.color + '1c', color: m.color }}>{m.label}</span><span className="t12 subtle">Hay gặp ở · {p.stage}</span></div>
          </div>
        </div>

        <div className="grid gc3 g12">
          <div className="kpi" style={{ padding: 12 }}><div className="kl">Tần suất / tuần</div><div className="kv tnum" style={{ fontSize: 22 }}>{p.freq}</div><TrendChip v={p.trend} /></div>
          <div className="kpi" style={{ padding: 12 }}><div className="kl">Win-rate khi xử lý</div><div className="kv tnum" style={{ fontSize: 22 }}>{p.win}%</div><Progress value={p.win} color={p.win >= 60 ? '#0e7c4a' : p.win >= 40 ? '#b45309' : '#b42318'} /></div>
          <div className="kpi" style={{ padding: 12 }}><div className="kl">Độ phủ</div><div className="mt4"><CoverageBadge c={p.coverage} /></div><div className="t11 subtle mt6">{p.autoLinked ? 'AI đã tự gắn' : 'Chưa gắn'}</div></div>
        </div>

        <div>
          <div className="t12 fw7 subtle mb6">CÂU KHÁCH THƯỜNG NÓI (mẫu AI gom)</div>
          <div className="col g8">
            {p.snippets.map((s, i) => (
              <div key={i} className="row g8" style={{ padding: '9px 11px', borderRadius: 10, background: 'var(--p-bg-surface-secondary)' }}>
                <span className="badge neutral" style={{ flexShrink: 0, fontSize: 10 }}>{s.who}</span>
                <span className="t13" style={{ lineHeight: 1.45 }}>{s.text}</span>
              </div>
            ))}
          </div>
        </div>

        <div>
          <div className="t12 fw7 subtle mb6">TRI THỨC ĐANG GẮN</div>
          {p.knowledge.length ? <div className="row g6 wrap">{p.knowledge.map((k, i) => <KnowledgeChip key={i} k={k} />)}</div>
            : <div className="col g8"><div className="callout-soft" style={{ color: '#b42318' }}><Icon name="alert" size={14} />Chưa có tri thức nào — đây là lỗ hổng. AI đã đưa vào hàng đợi đề xuất.</div><div><Button size="sm" variant="secondary" icon="plus" onClick={() => navigate('/enablement/scripts')}>Tạo kịch bản lấp lỗ hổng</Button></div></div>}
        </div>

        <div style={{ padding: 12, borderRadius: 11, background: 'var(--p-magic-bg)', border: '1px solid var(--p-magic-border)' }}>
          <div className="row aic g6 mb4"><Icon name="sparkles" size={14} color="#573b8a" /><span className="t12 fw7" style={{ color: '#573b8a' }}>HƯỚNG XỬ LÝ TỐT NHẤT (AI học từ deal thắng)</span></div>
          <div className="t13" style={{ color: '#3d2a63', lineHeight: 1.5 }}>{p.best}</div>
        </div>

        <div className="callout-soft">
          <Icon name="inbox" size={14} />Khi AI bắt được pattern này trong Inbox, sale sẽ thấy gợi ý {auto ? 'kèm script đã gắn sẵn (tự động)' : 'kèm đề xuất script (chờ duyệt)'}.
          <Button size="sm" variant="plain" onClick={() => navigate('/inbox')}>Mở Inbox</Button>
        </div>
      </div>
    </Drawer>
  );
}

/* ---------- Enrichment queue ---------- */
const ENRICH_META = {
  'create-script': { icon: 'plus', l: 'Tạo kịch bản', color: '#1a4fa3', cta: 'Tạo script', target: '/enablement/scripts' },
  'promote-kb':    { icon: 'arrowUp', l: 'Đẩy lên KB', color: '#0e7c4a', cta: 'Tạo bài KB', target: '/enablement/kb' },
  'update':        { icon: 'edit', l: 'Cập nhật', color: '#b45309', cta: 'Mở để sửa', target: '/enablement/kb' },
  'auto':          { icon: 'bolt', l: 'AI tự động', color: '#573b8a', cta: 'Xem', target: '/enablement/scripts' },
};
function EnrichCard({ item, onAct, done }) {
  const m = ENRICH_META[item.type];
  return (
    <div style={{ padding: 12, borderRadius: 11, border: '1px solid var(--p-border)', background: item.kind === 'auto' ? 'var(--p-magic-bg)' : '#fff' }}>
      <div className="row aic g8 mb6">
        <span className="center" style={{ width: 24, height: 24, borderRadius: 7, background: m.color + '1c', color: m.color, flexShrink: 0 }}><Icon name={m.icon} size={13} /></span>
        <span className="t12 fw7" style={{ color: m.color }}>{m.l}</span>
        {item.kind === 'auto' && <span className="badge magic" style={{ fontSize: 9 }}>ĐANG CHẠY</span>}
        <span className="t11 subtle mla">{item.ev}</span>
      </div>
      <div className="t13 fw6 mb4" style={{ lineHeight: 1.4 }}>{item.title}</div>
      <div className="t12 muted mb10" style={{ lineHeight: 1.45 }}>{item.detail}</div>
      {done ? <span className="row aic g6 t12 fw6" style={{ color: '#0e7c4a' }}><Icon name="check" size={14} />{item.kind === 'auto' ? 'Đã xác nhận' : 'Đã thêm vào kho'}</span>
        : <div className="row g8">
            {item.kind === 'auto'
              ? <><Button size="sm" variant="secondary" icon="check" onClick={onAct}>Giữ nguyên</Button><Button size="sm" variant="plain" onClick={() => navigate(m.target)}>Xem liên kết</Button></>
              : <><Button size="sm" variant="primary" icon={m.icon} onClick={() => navigate(m.target)}>{m.cta}</Button><Button size="sm" variant="plain" onClick={onAct}>Bỏ qua</Button></>}
          </div>}
    </div>
  );
}

/* ---------- Main ---------- */
function ConversationIntelligence() {
  const [auto, setAuto] = useState('auto'); // suggest | auto
  const [cat, setCat] = useState('all');
  const [sort, setSort] = useState('freq');
  const [sel, setSel] = useState(null);
  const [enrichDone, setEnrichDone] = useState({});

  const isAuto = auto === 'auto';
  const cats = INTEL.catMeta;
  let rows = INTEL.patterns.filter(p => cat === 'all' || p.cat === cat);
  rows = [...rows].sort((a, b) => sort === 'freq' ? b.freq - a.freq : sort === 'win' ? a.win - b.win : (b.trend - a.trend));

  const gapCount = INTEL.patterns.filter(p => p.coverage === 'gap').length;
  const pendingEnrich = INTEL.enrichQueue.filter(e => e.kind === 'review');

  return (
    <div className="page wide">
      <PageHead breadcrumb={[{ label: 'Enablement & AI' }, { label: 'Conversation Intelligence' }]}
        title="Conversation Intelligence"
        subtitle="AI đọc hội thoại thật, phát hiện pattern, khớp kịch bản/asset/KB rồi gợi ý cho sale — và tự làm giàu kho tri thức theo thời gian."
        actions={<>
          <div className="row aic g8" style={{ padding: '5px 10px', borderRadius: 9, background: 'var(--p-bg-surface-secondary)', whiteSpace: 'nowrap', flexShrink: 0 }}>
            <Icon name="bolt" size={14} color="#573b8a" /><span className="t12 fw6" style={{ whiteSpace: 'nowrap' }}>Làm giàu</span>
            <Seg value={auto} onChange={setAuto} options={[{ value: 'suggest', label: 'Đề xuất' }, { value: 'auto', label: 'Tự động' }]} />
          </div>
          <Button variant="primary" icon="plus" onClick={() => navigate('/enablement/scripts')}>Tạo kịch bản</Button>
        </>} />

      <div className="grid gc4 mb16">
        {INTEL.kpis.map((k, i) => <KPI key={i} {...k} delta={k.delta} deltaDir={k.dir} />)}
      </div>

      <LoopStrip />

      <div className="grid" style={{ gridTemplateColumns: 'minmax(0,1.55fr) minmax(0,1fr)', gap: 16, alignItems: 'start' }}>
        {/* Pattern Radar */}
        <Card title="Pattern Radar" subtitle={`${INTEL.patterns.length} pattern AI bắt được tuần này · ${gapCount} lỗ hổng cần xử lý`}
          actions={<Select value={sort} onChange={setSort} options={[{ value: 'freq', label: 'Sắp xếp: Tần suất' }, { value: 'risk', label: 'Tăng nhanh nhất' }, { value: 'win', label: 'Win-rate thấp nhất' }]} style={{ width: 180 }} />} pad={false}>
          <div className="row g6 wrap" style={{ padding: '12px 16px 4px' }}>
            <PillTabs value={cat} onChange={setCat} options={[{ value: 'all', label: 'Tất cả' }, ...Object.entries(cats).map(([v, m]) => ({ value: v, label: m.short }))]} />
          </div>
          <div>
            {rows.map(p => {
              const m = cats[p.cat];
              return (
                <div key={p.id} onClick={() => setSel(p)} className="ci-row"
                  style={{ display: 'grid', gridTemplateColumns: '26px minmax(0,1fr) 88px 96px 64px 18px', alignItems: 'center', gap: 12, padding: '12px 16px', borderTop: '1px solid var(--p-border-secondary)', cursor: 'pointer' }}>
                  <CatDot cat={p.cat} />
                  <div style={{ minWidth: 0 }}>
                    <div className="row aic g8"><span className="t13 fw6" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.label}</span>{p.isNew && <span className="badge" style={{ fontSize: 9, padding: '0 5px', background: '#fdecea', color: '#c4320a' }}>MỚI</span>}{p.autoLinked && isAuto && <span className="badge magic" style={{ fontSize: 9, padding: '0 5px' }}><Icon name="bolt" size={9} />auto</span>}</div>
                    <div className="t11 subtle mt2">{m.label} · {p.stage}</div>
                  </div>
                  <div className="col" style={{ alignItems: 'flex-start', gap: 1 }}>
                    {ciSpark(p.spark, m.color)}
                    <span className="row aic g4 t11 subtle"><b className="tnum" style={{ color: 'var(--p-text)', fontSize: 12.5 }}>{p.freq}</b><TrendChip v={p.trend} /></span>
                  </div>
                  <div><CoverageBadge c={p.coverage} /></div>
                  <div className="tnum t14 fw7" style={{ color: p.win >= 60 ? '#0e7c4a' : p.win >= 40 ? '#b45309' : '#b42318', textAlign: 'right' }}>{p.win}%</div>
                  <Icon name="chevronRight" size={16} color="#9aa0a6" />
                </div>
              );
            })}
          </div>
          <div className="row aic g16 t11 subtle" style={{ padding: '10px 16px', borderTop: '1px solid var(--p-border-secondary)' }}>
            <span className="row aic g4"><Icon name="bolt" size={11} color="#573b8a" />auto = AI tự gắn script</span>
            <span>Win-rate = tỉ lệ deal tiến stage khi xử lý đúng</span>
          </div>
        </Card>

        {/* Right column */}
        <div className="col g16">
          <Card title="Đề xuất làm giàu" subtitle={`${pendingEnrich.length} việc chờ duyệt · vòng lặp phục vụ ngược cho sale`}
            actions={<Badge tone="magic" dot>AI</Badge>} pad>
            <div className="col g10">
              {INTEL.enrichQueue.map(e => <EnrichCard key={e.id} item={e} done={enrichDone[e.id]} onAct={() => setEnrichDone(d => ({ ...d, [e.id]: true }))} />)}
            </div>
          </Card>

          <Card title="Tự động hóa" pad>
            <div className="col g12">
              <div className="row jcsb aic">
                <div><div className="t13 fw6">AI tự gắn script vào pattern</div><div className="t11 subtle">Liên kết khi độ tương đồng ≥ 0.85 & win-rate ≥ 60%</div></div>
                <Switch on={isAuto} onChange={v => setAuto(v ? 'auto' : 'suggest')} />
              </div>
              <div className="divider" />
              <div className="row jcsb aic">
                <div><div className="t13 fw6">Cảnh báo lỗ hổng tri thức</div><div className="t11 subtle">Báo manager khi pattern mới chưa có lời giải</div></div>
                <Switch on={true} onChange={() => {}} />
              </div>
              <div className="divider" />
              <div className="row jcsb aic">
                <div><div className="t13 fw6">Nhịp review định kỳ</div><div className="t11 subtle">Manager duyệt các liên kết AI đã tự tạo</div></div>
                <Select value="weekly" onChange={() => {}} options={[{ value: 'daily', label: 'Hàng ngày' }, { value: 'weekly', label: 'Hàng tuần' }]} style={{ width: 130 }} />
              </div>
            </div>
          </Card>
        </div>
      </div>

      {/* Effectiveness */}
      <Card className="mt16" title="Hiệu quả tri thức" subtitle="Script & asset nào thực sự đẩy deal tiến lên — cái tốt được ưu tiên gợi ý trước trong Inbox" pad={false}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 90px 120px 130px 90px 70px', alignItems: 'center', gap: 12, padding: '10px 18px', borderBottom: '1px solid var(--p-border)', fontSize: 11, fontWeight: 700, color: 'var(--p-text-secondary)', textTransform: 'uppercase', letterSpacing: '.03em' }}>
          <span>Tri thức</span><span style={{ textAlign: 'right' }}>Lượt dùng</span><span style={{ textAlign: 'right' }}>Khách phản hồi</span><span style={{ textAlign: 'right' }}>Đẩy tiến stage</span><span style={{ textAlign: 'right' }}>Win-rate</span><span style={{ textAlign: 'right' }}>Xu hướng</span>
        </div>
        {INTEL.effectiveness.map(k => (
          <div key={k.id} style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 90px 120px 130px 90px 70px', alignItems: 'center', gap: 12, padding: '11px 18px', borderBottom: '1px solid var(--p-border-secondary)' }}>
            <div className="row aic g8" style={{ minWidth: 0 }}><Icon name={KIcon[k.type]} size={15} color="#573b8a" /><span className="t13 fw6" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{k.name}</span></div>
            <span className="tnum t13" style={{ textAlign: 'right' }}>{k.uses}</span>
            <div style={{ textAlign: 'right' }}><span className="tnum t13">{k.reply}%</span></div>
            <div className="row aic g8" style={{ justifyContent: 'flex-end' }}><div style={{ width: 56 }}><Progress value={k.advance} color="#1a4fa3" /></div><span className="tnum t12" style={{ width: 30, textAlign: 'right' }}>{k.advance}%</span></div>
            <span className="tnum t14 fw7" style={{ textAlign: 'right', color: k.win >= 60 ? '#0e7c4a' : k.win >= 40 ? '#b45309' : '#b42318' }}>{k.win}%</span>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}><TrendChip v={k.trend} /></div>
          </div>
        ))}
      </Card>

      {sel && <PatternDrawer p={sel} auto={isAuto} onClose={() => setSel(null)} />}
    </div>
  );
}

Object.assign(window, { ConversationIntelligence });