/* AAU CRM — Enablement & AI */

function AssetLibrary() {
  const [type, setType] = useState('all');
  const [upload, setUpload] = useState(false);
  const typeLabel = { brochure: 'Brochure', testimonial: 'Testimonial', pricing: 'Bảng giá', case: 'Case study', deck: 'Pitch deck', photo: 'Hình lớp' };
  const typeIcon = { brochure: 'fileText', testimonial: 'play', pricing: 'dollar', case: 'book', deck: 'layers', photo: 'eye' };
  const assets = AAU.assets.filter(a => type === 'all' || a.type === type);
  return (
    <div className="page wide">
      <PageHead title="Asset Library" subtitle="Tài nguyên bán hàng — gắn khóa học, versioning, theo dõi mức dùng"
        actions={<Button variant="primary" icon="plus" onClick={() => setUpload(true)}>Upload asset</Button>} />
      <div className="row aic g8 mb16"><PillTabs value={type} onChange={setType} options={[{ value: 'all', label: 'Tất cả' }, ...Object.entries(typeLabel).map(([v, l]) => ({ value: v, label: l }))]} /></div>
      <div className="grid gc4">
        {assets.map(a => (
          <Card key={a.id} pad>
            <div className="center" style={{ height: 110, borderRadius: 10, background: 'var(--p-bg-surface-tertiary)', marginBottom: 12, color: '#8a8a8a' }}><Icon name={typeIcon[a.type]} size={34} /></div>
            <div className="row jcsb aic"><Badge tone="neutral">{typeLabel[a.type]}</Badge><span className="t11 subtle">v{a.version}</span></div>
            <div className="t13 fw6 mt8" style={{ minHeight: 38 }}>{a.name}</div>
            <div className="t12 subtle">{a.course ? AAU.courseById(a.course)?.name : 'Dùng chung'} · {a.format}</div>
            <div className="divider mt12 mb12" />
            <div className="row jcsb aic">
              <div className="col" style={{ gap: 1 }}>
                <span className="t11 subtle">Dùng {a.usage} lần</span>
                <span className="t11 fw7 row aic g2" style={{ color: '#0e7c4a' }} title="Mức đẩy deal tiến stage khi gửi asset này (đo từ hiệu quả hội thoại)"><Icon name="arrowUp" size={10} />đẩy deal +{a.lift}%</span>
              </div>
              <div className="row g4"><IconButton name="eye" size={15} /><IconButton name="download" size={15} /></div>
            </div>
          </Card>
        ))}
      </div>
      {upload && (
        <Modal title="Upload asset mới" onClose={() => setUpload(false)} footer={<><Button onClick={() => setUpload(false)}>Hủy</Button><Button variant="primary">Upload</Button></>}>
          <div className="col g16">
            <div className="center" style={{ border: '2px dashed var(--p-border-hover)', borderRadius: 12, padding: 32, color: '#8a8a8a', flexDirection: 'column', gap: 8 }}><Icon name="download" size={28} /><span className="t13">Kéo file vào đây hoặc bấm để chọn</span></div>
            <div className="grid gc2 g16">
              <Field label="Loại"><Select value="brochure" onChange={() => {}} options={Object.entries(typeLabel).map(([v, l]) => ({ value: v, label: l }))} /></Field>
              <Field label="Gắn khóa"><Select value="" onChange={() => {}} options={[{ value: '', label: 'Dùng chung' }, ...AAU.courses.map(c => ({ value: c.id, label: c.name }))]} /></Field>
            </div>
            <Field label="Tags"><Input placeholder="VD: chốt deal, phản đối giá…" /></Field>
          </div>
        </Modal>
      )}
    </div>
  );
}

function ScriptFlowBuilder() {
  const nodes = [
    { id: 'n1', sit: 'Khách hỏi giá', tip: 'Báo giá kèm giá trị + ưu đãi early-bird. Hỏi quy mô để map khóa.', asset: 'Bảng giá Q2', branches: ['Đồng ý → n4', 'Phân vân → n2', 'So sánh đối thủ → n3'] },
    { id: 'n2', sit: 'Khách phân vân', tip: 'Đưa case study cùng ngành, mời tham gia buổi học thử.', asset: 'Case study Tâm Hotel', branches: ['Quan tâm → n4', 'Im lặng → n5'] },
    { id: 'n3', sit: 'So sánh đối thủ', tip: 'Nhấn mạnh USP: thực chiến, mentor 1-1, cộng đồng PEACH.', asset: 'So sánh AAU vs đối thủ', branches: ['Thuyết phục → n4'] },
    { id: 'n4', sit: 'Sẵn sàng chốt', tip: 'Chốt lịch khai giảng, gửi link thanh toán cọc giữ chỗ.', asset: 'Link đăng ký', branches: ['Won 🎉'] },
    { id: 'n5', sit: 'Khách im lặng', tip: 'Follow-up sau 2 ngày với nội dung giá trị, không spam.', asset: 'Nội dung nurture', branches: ['Quay lại → n1'] },
  ];
  return (
    <div className="page wide">
      <PageHead breadcrumb={[{ label: 'Enablement & AI' }, { label: 'Script Flow' }]} title="Script Flow Builder" subtitle="Nơi soạn lời giải cho từng pattern — mỗi node ứng với một tình huống AI phát hiện, sale thấy gợi ý ngay trong Inbox"
        actions={<><Button icon="target" onClick={() => navigate('/enablement/intelligence')}>Pattern Radar</Button><Button icon="eye">Preview như Inbox</Button><Button variant="primary" icon="plus">Tạo flow</Button></>} />
      <div className="callout-soft mb16"><Icon name="refresh" size={14} color="#573b8a" /><span>Lỗ hổng tri thức từ <b>Pattern Radar</b> chảy về đây để soạn kịch bản. Khi script chạy tốt, win-rate được học ngược lại trong Conversation Intelligence.</span></div>
      <div className="row aic g8 mb16"><span className="t13 muted">Flow:</span><Select value="f1" onChange={() => {}} options={[{ value: 'f1', label: 'Chốt khóa Nhượng quyền F&B' }, { value: 'f2', label: 'Tư vấn khóa Vận hành' }]} style={{ width: 280 }} /><Badge tone="info">Gắn stage: Đàm phán</Badge></div>
      <div className="grid gc3">
        {nodes.map(n => (
          <Card key={n.id} pad>
            <div className="row aic g8 mb8"><span className="badge magic">{n.id}</span><span className="t14 fw7">{n.sit}</span></div>
            <div className="t12 muted mb12">{n.tip}</div>
            <span className="tag mb12"><Icon name="paperclip" size={13} />{n.asset}</span>
            <div className="divider mt8 mb8" />
            <div className="t11 fw7 subtle mb6">NHÁNH PHẢN HỒI</div>
            <div className="col g6">{n.branches.map((b, i) => <div key={i} className="row aic g6 t12" style={{ padding: '5px 9px', borderRadius: 7, background: 'var(--p-bg-surface-tertiary)' }}><Icon name="arrowRight" size={12} color="#7c3aed" />{b}</div>)}</div>
          </Card>
        ))}
      </div>
    </div>
  );
}

function KnowledgeBase() {
  const [sel, setSel] = useState(AAU.kbArticles[0].id);
  const art = AAU.kbArticles.find(a => a.id === sel);
  return (
    <div className="page wide">
      <PageHead title="Knowledge Base" subtitle="Bài tri thức theo khóa — nguồn cho AI (RAG) trả lời khách"
        actions={<Button variant="primary" icon="plus">Bài mới</Button>} />
      <div className="grid" style={{ gridTemplateColumns: '320px 1fr' }}>
        <Card pad={false}>
          {AAU.kbArticles.map(a => (
            <div key={a.id} onClick={() => setSel(a.id)} style={{ padding: '12px 16px', borderBottom: '1px solid var(--p-border-secondary)', cursor: 'pointer', background: a.id === sel ? 'var(--p-bg-surface-selected)' : '' }}>
              <div className="row jcsb aic"><span className="t13 fw6">{a.title}</span>{a.rag && <Badge tone="magic">RAG</Badge>}</div>
              <div className="t11 subtle mt4">{a.course ? AAU.courseById(a.course)?.name : 'Dùng chung'} · {AAU.fmtDate(a.updated)}</div>
              <div className="row aic g8 mt6"><span className="t11 subtle">Dùng {a.uses} lần</span><span className="t11 fw7 row aic g2" style={{ color: a.lift >= 25 ? '#0e7c4a' : '#8a8a8a' }} title="Mức đẩy deal tiến stage"><Icon name="arrowUp" size={10} />+{a.lift}%</span></div>
            </div>
          ))}
        </Card>
        <Card title={art.title} actions={<><div className="row aic g6"><span className="t12 muted">Nguồn RAG</span><Switch on={art.rag} onChange={() => {}} /></div><Button size="sm" icon="edit">Sửa</Button></>}>
          <div className="row g8 mb16" style={{ flexWrap: 'wrap' }}>
            <div className="kpi" style={{ padding: '8px 12px', minWidth: 120 }}><div className="kl">Lượt dùng</div><div className="kv tnum" style={{ fontSize: 18 }}>{art.uses}</div></div>
            <div className="kpi" style={{ padding: '8px 12px', minWidth: 120 }}><div className="kl">Đẩy deal tiến stage</div><div className="kv tnum" style={{ fontSize: 18, color: art.lift >= 25 ? '#0e7c4a' : 'inherit' }}>+{art.lift}%</div></div>
            <div className="kpi" style={{ padding: '8px 12px', minWidth: 120 }}><div className="kl">Trạng thái RAG</div><div className="mt4">{art.rag ? <Badge tone="magic" dot>Đang dùng cho AI</Badge> : <Badge tone="neutral">Tắt</Badge>}</div></div>
          </div>
          <div className="col g16 t13" style={{ lineHeight: 1.65 }}>
            <div><div className="t12 fw7 subtle mb4">ĐỐI TƯỢNG</div>Chủ/quản lý chuỗi F&B đang cân nhắc mở rộng quy mô.</div>
            <div><div className="t12 fw7 subtle mb4">LỢI ÍCH CHÍNH</div>Hệ thống hóa vận hành, chuẩn SOP, sẵn sàng nhân bản & nhượng quyền.</div>
            <div><div className="t12 fw7 subtle mb4">XỬ LÝ PHẢN ĐỐI</div>"Học phí cao" → so sánh chi phí 1 lần học vs tổn thất do vận hành sai mỗi tháng; nhấn ROI.</div>
            <div><div className="t12 fw7 subtle mb4">FAQ</div>Có học online không? · Có hỗ trợ sau khóa? · Cấp chứng nhận?</div>
            <div><div className="t12 fw7 subtle mb4">SO SÁNH ĐỐI THỦ</div>USP AAU: mentor thực chiến từ PEACH Consulting, cộng đồng chủ F&B, tài liệu template sẵn dùng.</div>
          </div>
        </Card>
      </div>
    </div>
  );
}

function AIChatConfig() {
  const [mode, setMode] = useState('copilot');
  const [autoSched, setAutoSched] = useState(true);
  const handoffs = ['Gặp câu hỏi khó AI không chắc', 'Khách hot hỏi giá / đòi chốt', 'Khách thể hiện bực bội', 'Yêu cầu gặp người thật'];
  return (
    <div className="page wide">
      <PageHead breadcrumb={[{ label: 'Enablement & AI' }, { label: 'AI Chat Config' }]} title="AI Chat Config" subtitle="Cấu hình trợ lý AI giữ nhiệt hội thoại — AI không tự chốt deal" />
      <div className="grid" style={{ gridTemplateColumns: '1fr 1fr' }}>
        <div className="col g16">
          <Card title="Chế độ mặc định">
            <Seg value={mode} onChange={v => { setMode(v); if (window.API && window.API.enabled) window.API.put('/ai-chat-config', { defaultMode: v }).catch(() => {}); }} options={[{ value: 'off', label: 'Tắt' }, { value: 'copilot', label: 'Copilot' }, { value: 'autopilot', label: 'Autopilot' }]} />
            <div className="t12 muted mt12">{mode === 'off' ? 'AI không tham gia. Sale tự trả lời toàn bộ.' : mode === 'copilot' ? 'AI soạn sẵn, sale duyệt & gửi.' : 'AI tự trả lời, handoff khi gặp điều kiện bên dưới.'}</div>
          </Card>
          <Card title="Lịch tự bật Autopilot" actions={<Switch on={autoSched} onChange={setAutoSched} />}>
            <div className={autoSched ? '' : 'subtle'} style={{ opacity: autoSched ? 1 : 0.5 }}>
              <div className="row g16 wrap mb12">
                <Field label="Từ giờ"><Input value="18:00" onChange={() => {}} style={{ width: 90 }} /></Field>
                <Field label="Đến giờ"><Input value="08:30" onChange={() => {}} style={{ width: 90 }} /></Field>
              </div>
              <div className="t12 subtle mb6">Ngày áp dụng</div>
              <div className="row g6 wrap">{['T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'].map(d => <span key={d} className="pill-tab"><button className={d !== 'CN' ? 'on' : ''}>{d}</button></span>)}</div>
              <div className="row aic g8 mt12"><Checkbox on onChange={() => {}} /><span className="t13">Bật cả ngày lễ</span></div>
            </div>
          </Card>
          <Card title="Điều kiện handoff cho người">
            <div className="col g8">{handoffs.map((h, i) => <div key={i} className="row aic g8"><Checkbox on onChange={() => {}} /><span className="t13">{h}</span></div>)}</div>
            <div className="callout-line mt12" style={{ display: 'flex', gap: 8, padding: 10, borderRadius: 9, background: 'var(--p-warning-bg)', color: 'var(--p-warning-text)', fontSize: 12 }}><Icon name="alert" size={14} />Khi handoff, hệ thống tạo task ưu tiên cho sale phụ trách.</div>
          </Card>
        </div>
        <div className="col g16">
          <Card title="Nguồn tri thức (RAG)" subtitle="Quản lý tập trung ở Knowledge Base — đây chỉ hiển thị" actions={<Button size="sm" variant="plain" iconRight="arrowRight" onClick={() => navigate('/enablement/kb')}>Quản lý ở KB</Button>}>
            {(() => { const rag = AAU.kbArticles.filter(a => a.rag); return (
              <>
                <div className="callout-soft mb12"><Icon name="book" size={14} /><span>AI đang dùng <b>{rag.length}/{AAU.kbArticles.length}</b> bài KB làm nguồn trả lời. Bật/tắt nguồn tại Knowledge Base.</span></div>
                <div className="row g6 wrap">{rag.map(a => <span key={a.id} className="tag"><Icon name="book" size={12} color="#573b8a" />{a.title}</span>)}</div>
              </>
            ); })()}
          </Card>
          <Card title="Preview hội thoại thử">
            <div style={{ background: 'var(--p-bg-surface-secondary)', borderRadius: 12, padding: 14 }}>
              <div className="col g10">
                <div style={{ alignSelf: 'flex-start', maxWidth: '80%' }}><div style={{ padding: '8px 12px', borderRadius: 12, background: '#fff', border: '1px solid var(--p-border)', fontSize: 13 }}>Khóa nhượng quyền học phí bao nhiêu?</div></div>
                <div style={{ alignSelf: 'flex-end', maxWidth: '80%' }}><div style={{ padding: '8px 12px', borderRadius: 12, background: '#ece4ff', fontSize: 13 }}>Dạ khóa Nhượng quyền F&B 18.9tr/8 buổi ạ. Anh đang có mấy chi nhánh để em tư vấn lộ trình phù hợp nhé?</div><div className="t11 subtle mt4" style={{ textAlign: 'right' }}><span className="badge magic" style={{ fontSize: 9 }}>AI · RAG</span></div></div>
              </div>
              <div className="row g8 mt12"><Input placeholder="Thử hỏi AI…" value="" onChange={() => {}} /><Button variant="primary" icon="send" /></div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AssetLibrary, ScriptFlowBuilder, KnowledgeBase, AIChatConfig });