import React, { useState, useEffect, useRef } from 'react';
import { adminAPI } from '@/api';

interface KnowledgeBaseItem {
  id: string;
  name: string;
  user_id: string;
  owner_name?: string;
  description?: string;
  directory_path: string;
  document_count: number;
  knowledge_graph_count: number;
  is_official: boolean;
  status: string;
  external_service_id?: string;
  external_id?: string;
  external_sync_status: string;
  external_config?: any;
  total_storage_bytes?: number;
  total_storage_mb?: number;
  created_at: string;
  updated_at: string;
  doc_stats?: Record<string, { count: number; size: number }>;
  graph_stats?: { nodes: number; edges: number };
}

interface ExternalService {
  id: string; name: string; service_type: string; api_url: string;
  api_key?: string; config?: any; is_enabled: boolean; status: string;
  created_at?: string; updated_at?: string;
}

interface Stats {
  total_knowledge_bases: number; total_documents: number;
  total_storage_bytes: number; total_storage_display: string;
  official_kb: number; user_kb: number; active_kb: number;
  kb_with_graph: number; external_kb: number; recent_kb_7d: number;
  total_graph_nodes: number; total_graph_edges: number;
  doc_status_distribution: Record<string, number>;
  file_type_distribution: Record<string, number>;
}

const SVGIcon: React.FC<{ children: React.ReactNode; size?: number }> = ({ children, size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    {children}
  </svg>
);

const formatSize = (bytes: number) => {
  if (bytes >= 1024 * 1024 * 1024) return (bytes / 1024 / 1024 / 1024).toFixed(1) + ' GB';
  if (bytes >= 1024 * 1024) return (bytes / 1024 / 1024).toFixed(1) + ' MB';
  if (bytes >= 1024) return (bytes / 1024).toFixed(1) + ' KB';
  return bytes + ' B';
};

const Knowledge: React.FC = () => {
  const [knowledgeBases, setKnowledgeBases] = useState<KnowledgeBaseItem[]>([]);
  const [stats, setStats] = useState<Stats | null>(null);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [pageSize] = useState(15);
  const [keyword, setKeyword] = useState('');
  const [filterStatus, setFilterStatus] = useState('');
  const [filterOfficial, setFilterOfficial] = useState('');

  // External Services
  const [extServices, setExtServices] = useState<ExternalService[]>([]);
  const [showExtModal, setShowExtModal] = useState(false);
  const [extForm, setExtForm] = useState({ name: 'Dify 知识库', service_type: 'dify', api_url: 'https://dify.qihuyun.com/v1', api_key: '', dataset_name: 'qihuai' });
  const [extMsg, setExtMsg] = useState('');
  const [ingesting, setIngesting] = useState(false);
  const [ingestResult, setIngestResult] = useState<any>(null);

  // AnySearch global config
  const [anysearchForm, setAnysearchForm] = useState<{ api_key: string; is_enabled: boolean }>({ api_key: '', is_enabled: false });
  const [anysearchLoading, setAnysearchLoading] = useState(false);
  const [anysearchMsg, setAnysearchMsg] = useState('');

  // KB Modal
  const [showModal, setShowModal] = useState(false);
  const [editingKB, setEditingKB] = useState<KnowledgeBaseItem | null>(null);
  const [kbForm, setKBForm] = useState({ name: '', description: '', is_official: false });

  // Detail drawer
  const [showDetail, setShowDetail] = useState(false);
  const [selectedKB, setSelectedKB] = useState<KnowledgeBaseItem | null>(null);
  const [detailDocs, setDetailDocs] = useState<any[]>([]);
  const [detailDocTotal, setDetailDocTotal] = useState(0);

  // Document preview
  const [previewDoc, setPreviewDoc] = useState<any | null>(null);
  const [previewContent, setPreviewContent] = useState<string>('');

  // File upload
  const [uploading, setUploading] = useState(false);
  const [uploadMsg, setUploadMsg] = useState('');
  const fileInputRef = useRef<HTMLInputElement>(null);

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    fetchStats(); fetchKBs(); fetchExtServices();
  }, []);

  useEffect(() => { fetchKBs(); }, [page, keyword, filterStatus, filterOfficial]);

  const fetchStats = async () => {
    try { const res = await adminAPI.getAdminKnowledgeStats(); if (res.code === 0) setStats(res.data); } catch (e) {}
  };

  const fetchKBs = async () => {
    setLoading(true);
    try {
      const params: any = { page, page_size: pageSize };
      if (keyword) params.keyword = keyword;
      if (filterStatus) params.status = filterStatus;
      if (filterOfficial) params.is_official = filterOfficial === 'true';
      const res = await adminAPI.getAdminKnowledge(params);
      if (res.code === 0) {
        setKnowledgeBases(res.data.items || []);
        setTotal(res.data.total || 0);
      }
    } catch (e) {}
    setLoading(false);
  };

  const fetchExtServices = async () => {
    try { const res = await adminAPI.getAdminKnowledgeExtServices(); if (res.code === 0) setExtServices(res.data.items || []); } catch (e) {}
  };

  const fetchAnySearchConfig = async () => {
    try {
      const res = await adminAPI.getAdminAnySearchConfig();
      if (res.code === 0) {
        const d = res.data || {};
        setAnysearchForm({ api_key: d.api_key || '', is_enabled: !!d.is_enabled });
      }
    } catch (e) {}
  };

  const handleSaveAnySearch = async () => {
    setAnysearchLoading(true); setAnysearchMsg('');
    try {
      const res = await adminAPI.saveAdminAnySearchConfig(anysearchForm);
      if (res.code === 0) {
        const conn = res.data?.connection || {};
        setAnysearchMsg(conn.connected ? '✅ 已保存并连接成功' : `⚠️ 已保存但连接失败：${conn.detail || '未知错误'}`);
      } else {
        setAnysearchMsg(`❌ 保存失败：${res.message || '未知错误'}`);
      }
    } catch (e: any) {
      setAnysearchMsg(`❌ 保存失败：${e?.message || '网络错误'}`);
    } finally {
      setAnysearchLoading(false);
    }
  };

  const handleCreateKB = async () => {
    try {
      const res = await adminAPI.createAdminKnowledge(kbForm);
      if (res.code === 0) { setShowModal(false); setKBForm({ name: '', description: '', is_official: false }); fetchKBs(); fetchStats(); }
    } catch (e) {}
  };

  const handleUpdateKB = async () => {
    if (!editingKB) return;
    try {
      const res = await adminAPI.updateAdminKnowledge(editingKB.id, kbForm);
      if (res.code === 0) { setShowModal(false); fetchKBs(); fetchStats(); }
    } catch (e) {}
  };

  const handleDeleteKB = async (id: string) => {
    if (!confirm('确认删除该知识库及其所有文档？此操作不可恢复！')) return;
    try { const res = await adminAPI.deleteAdminKnowledge(id); if (res.code === 0) { fetchKBs(); fetchStats(); } } catch (e) {}
  };

  const handleToggleKB = async (id: string, isActive: boolean) => {
    try { const res = await adminAPI.toggleAdminKnowledge(id, isActive); if (res.code === 0) { fetchKBs(); fetchStats(); } } catch (e) {}
  };

  const handleViewDetail = async (kb: KnowledgeBaseItem) => {
    setSelectedKB(kb); setShowDetail(true);
    try {
      const res = await adminAPI.getAdminKnowledgeDetail(kb.id);
      if (res.code === 0) setSelectedKB(res.data);
      const docRes = await adminAPI.getAdminKnowledgeDocs(kb.id, { page: 1, page_size: 50 });
      if (docRes.code === 0) { setDetailDocs(docRes.data.items || []); setDetailDocTotal(docRes.data.total || 0); }
    } catch (e) {}
  };

  // Document upload
  const handleFileUpload = async (kbId: string, file: File) => {
    setUploading(true);
    setUploadMsg(`正在上传 ${file.name}...`);
    try {
      const formData = new FormData();
      formData.append('file', file);
      // Use raw fetch since adminAPI may not support FormData
      const token = localStorage.getItem('aiflow_token');
      const res = await fetch(`/app/api/admin/knowledge/${kbId}/documents/upload`, {
        method: 'POST',
        headers: { 'Authorization': `Bearer ${token}` },
        body: formData,
      });
      const data = await res.json();
      if (data.code === 0) {
        setUploadMsg(`✅ ${file.name} 上传成功！`);
        handleViewDetail(selectedKB!);
        fetchStats();
      } else {
        setUploadMsg(`❌ 上传失败: ${data.message || '未知错误'}`);
      }
    } catch (e: any) {
      setUploadMsg(`❌ 上传失败: ${e.message || '网络错误'}`);
    } finally {
      setUploading(false);
      setTimeout(() => setUploadMsg(''), 5000);
    }
  };

  // Document preview
  const handlePreviewDoc = async (kbId: string, doc: any) => {
    setPreviewDoc(doc);
    setPreviewContent('加载中...');
    try {
      const token = localStorage.getItem('aiflow_token');
      const res = await fetch(`/app/api/admin/knowledge/${kbId}/documents/${doc.id}/content`, {
        headers: { 'Authorization': `Bearer ${token}` },
      });
      const data = await res.json();
      if (data.code === 0) {
        setPreviewContent(data.data?.content || data.data?.text || '(文档内容为空)');
      } else {
        setPreviewContent(data.message || '无法加载文档内容');
      }
    } catch (e: any) {
      setPreviewContent(`加载失败: ${e.message}`);
    }
  };

  const handleDeleteDoc = async (kbId: string, docId: string) => {
    if (!confirm('确认删除该文档？')) return;
    try { const res = await adminAPI.deleteAdminKnowledgeDoc(kbId, docId); if (res.code === 0) { handleViewDetail(selectedKB!); fetchStats(); } } catch (e) {}
  };

  const handleCreateExtService = async () => {
    try {
      const payload = {
        ...extForm,
        config: { dataset_name: extForm.dataset_name || 'qihuai' },
      };
      const res = await adminAPI.createAdminKnowledgeExtService(payload);
      if (res.code === 0) {
        setShowExtModal(false);
        setExtForm({ name: 'Dify 知识库', service_type: 'dify', api_url: 'https://dify.qihuyun.com/v1', api_key: '', dataset_name: 'qihuai' });
        setExtMsg('');
        fetchExtServices();
      }
    } catch (e: any) { setExtMsg(`添加失败: ${e?.message || '未知错误'}`); }
  };

  const handleDeleteExtService = async (id: string) => {
    if (!confirm('确认删除该外部知识库服务配置？')) return;
    try { const res = await adminAPI.deleteAdminKnowledgeExtService(id); if (res.code === 0) fetchExtServices(); } catch (e) {}
  };

  const handleCheckExtStatus = async (id: string) => {
    try {
      const res = await adminAPI.checkAdminKnowledgeExtStatus(id);
      if (res.code === 0) {
        const d = res.data || {};
        const statusText = d.connected ? (d.usable ? '可通讯且可用 ✅' : '可通讯但不可用 ⚠️') : '不可通讯 ❌';
        alert(`连接状态: ${statusText}\n\n详情: ${d.detail || '无'}`);
        fetchExtServices();
      }
    } catch (e) {}
  };

  const handleIngestPlatform = async () => {
    if (!confirm('将把平台「AI聊天回答 + 用户上传文档」中有价值的内容批量入库到 Dify 知识库（量化后可被 AI 聊天检索复用）。确认执行？')) return;
    setIngesting(true); setIngestResult(null);
    try {
      const token = localStorage.getItem('aiflow_token');
      const res = await fetch(`/app/api/admin/knowledge/external/dify/ingest`, {
        method: 'POST',
        headers: { 'Authorization': `Bearer ${token}` },
      });
      const data = await res.json();
      if (data.code === 0) {
        setIngestResult(data.data);
        setExtMsg(`✅ ${data.message}`);
      } else {
        setExtMsg(`❌ ${data.message || '入库失败'}`);
      }
    } catch (e: any) {
      setExtMsg(`❌ 入库失败: ${e?.message || '网络错误'}`);
    } finally {
      setIngesting(false);
    }
  };

  const statusBadge = (status: string) => {
    const map: Record<string, { color: string; text: string }> = {
      active: { color: '#16A34A', text: '活跃' }, inactive: { color: '#6B7280', text: '禁用' },
      archived: { color: '#F59E0B', text: '归档' }, published: { color: '#16A34A', text: '已发布' },
      pending: { color: '#F59E0B', text: '待审核' }, completed: { color: '#16A34A', text: '完成' },
      processing: { color: '#3B82F6', text: '处理中' }, failed: { color: '#DC2626', text: '失败' },
      uploading: { color: '#3B82F6', text: '上传中' },
    };
    const s = map[status] || { color: '#6B7280', text: status };
    return <span style={{ fontSize: 12, padding: '2px 8px', background: s.color + '18', color: s.color, borderRadius: 4, fontWeight: 500 }}>{s.text}</span>;
  };

  const syncStatusBadge = (status: string) => {
    const map: Record<string, { color: string; text: string }> = {
      none: { color: '#9CA3AF', text: '未同步' }, syncing: { color: '#3B82F6', text: '同步中' },
      synced: { color: '#16A34A', text: '已同步' }, error: { color: '#DC2626', text: '同步错误' },
    };
    const s = map[status] || { color: '#9CA3AF', text: status };
    return <span style={{ fontSize: 11, color: s.color, fontWeight: 500 }}>{s.text}</span>;
  };

  const totalPages = Math.ceil(total / pageSize);

  const statCardDefs = stats ? [
    { label: '知识库总数', value: stats.total_knowledge_bases, color: '#6C63FF' },
    { label: '文档总数', value: stats.total_documents, color: '#219B5E' },
    { label: '存储占用', value: stats.total_storage_display, color: '#E8922C' },
    { label: '官方知识库', value: stats.official_kb, color: '#8B5CF6' },
    { label: '含图谱KB', value: stats.kb_with_graph, color: '#3B82F6' },
    { label: '外部集成', value: stats.external_kb, color: '#EC4899' },
  ] : [];

  return (
    <div style={{ animation: 'fadeIn var(--transition-normal)' }}>
      <h1 className="admin-page-title">知识库管理</h1>

      {/* Stats */}
      {stats && (
        <div className="admin-stats" style={{ marginBottom: 'var(--space-xl)' }}>
          {statCardDefs.map((s, i) => (
            <div key={i} className="admin-stat-card" style={{ padding: 'var(--space-lg)', textAlign: 'center' }}>
              <div style={{ fontSize: 'var(--text-2xl)', fontWeight: 800, color: s.color, fontFamily: 'var(--font-mono)' }}>
                {typeof s.value === 'number' ? s.value.toLocaleString() : s.value}
              </div>
              <div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)', marginTop: 4 }}>{s.label}</div>
            </div>
          ))}
        </div>
      )}

      {/* Toolbar */}
      <div style={{ display: 'flex', gap: 12, marginBottom: 16, alignItems: 'center', flexWrap: 'wrap' }}>
        <input type="text" placeholder="搜索知识库..." value={keyword} onChange={e => setKeyword(e.target.value)}
          style={inputStyle} />
        <select value={filterStatus} onChange={e => setFilterStatus(e.target.value)} style={selectStyle}>
          <option value="">全部状态</option>
          <option value="active">活跃</option>
          <option value="inactive">禁用</option>
        </select>
        <select value={filterOfficial} onChange={e => setFilterOfficial(e.target.value)} style={selectStyle}>
          <option value="">全部来源</option>
          <option value="true">官方</option>
          <option value="false">用户</option>
        </select>
        <button onClick={() => { setEditingKB(null); setKBForm({ name: '', description: '', is_official: false }); setShowModal(true); }}
          style={btnStyle('#6C63FF')}>+ 创建知识库</button>
        <button onClick={() => { setShowExtModal(true); fetchAnySearchConfig(); }} style={btnStyle('#8B5CF6')}>外部服务配置</button>
      </div>

      {/* Table */}
      <div className="admin-card" style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ overflowX: 'auto' }}>
          <table className="admin-table" style={{ marginBottom: 0 }}>
            <thead>
              <tr>
                <th>名称</th><th>来源</th><th>文档数</th><th>存储</th><th>状态</th><th>同步</th><th>创建时间</th><th style={{ textAlign: 'center' }}>操作</th>
              </tr>
            </thead>
            <tbody>
              {loading ? (
                <tr><td colSpan={8} style={{ textAlign: 'center', padding: 40 }}>加载中...</td></tr>
              ) : knowledgeBases.length === 0 ? (
                <tr><td colSpan={8} style={{ textAlign: 'center', padding: 40, color: '#9CA3AF' }}>暂无知识库数据</td></tr>
              ) : knowledgeBases.map(kb => (
                <tr key={kb.id}>
                  <td>
                    <div style={{ fontWeight: 600 }}>{kb.name}</div>
                    {kb.description && <div style={{ fontSize: 11, color: '#9CA3AF', marginTop: 2 }}>{kb.description.substring(0, 60)}</div>}
                  </td>
                  <td>{kb.is_official ? <span style={{ color: '#8B5CF6', fontWeight: 600 }}>官方</span> : <span style={{ color: '#6B7280' }}>{kb.owner_name || '用户'}</span>}</td>
                  <td style={{ fontWeight: 600 }}>{kb.document_count}</td>
                  <td style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>{kb.total_storage_mb || 0} MB</td>
                  <td>{statusBadge(kb.status)}</td>
                  <td>{syncStatusBadge(kb.external_sync_status)}</td>
                  <td style={{ fontSize: 12, color: '#9CA3AF' }}>{kb.created_at?.substring(0, 10)}</td>
                  <td style={{ textAlign: 'center' }}>
                    <button onClick={() => handleViewDetail(kb)} style={btnStyle('#3B82F6', 'small')}>详情</button>
                    <button onClick={() => { setEditingKB(kb); setKBForm({ name: kb.name, description: kb.description || '', is_official: kb.is_official }); setShowModal(true); }} style={{ ...btnStyle('#F59E0B', 'small'), marginLeft: 4 }}>编辑</button>
                    <button onClick={() => handleToggleKB(kb.id, kb.status !== 'active')} style={{ ...btnStyle(kb.status === 'active' ? '#DC2626' : '#16A34A', 'small'), marginLeft: 4 }}>{kb.status === 'active' ? '禁用' : '启用'}</button>
                    <button onClick={() => handleDeleteKB(kb.id)} style={{ ...btnStyle('#DC2626', 'small'), marginLeft: 4 }}>删除</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Pagination */}
      {totalPages > 1 && (
        <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 16, alignItems: 'center' }}>
          <button disabled={page <= 1} onClick={() => setPage(p => p - 1)} style={btnStyle(page <= 1 ? '#D1D5DB' : '#6C63FF', 'small')}>上一页</button>
          <span style={{ fontSize: 13, color: '#6B7280' }}>第 {page}/{totalPages} 页 (共 {total} 条)</span>
          <button disabled={page >= totalPages} onClick={() => setPage(p => p + 1)} style={btnStyle(page >= totalPages ? '#D1D5DB' : '#6C63FF', 'small')}>下一页</button>
        </div>
      )}

      {/* KB Modal */}
      {showModal && (
        <div style={overlayStyle} onClick={() => setShowModal(false)}>
          <div style={modalStyle} onClick={e => e.stopPropagation()}>
            <h3>{editingKB ? '编辑知识库' : '创建知识库'}</h3>
            <div style={{ marginBottom: 12 }}>
              <label style={labelStyle}>名称</label>
              <input value={kbForm.name} onChange={e => setKBForm({ ...kbForm, name: e.target.value })} style={fullInput} />
            </div>
            <div style={{ marginBottom: 12 }}>
              <label style={labelStyle}>描述</label>
              <textarea value={kbForm.description} onChange={e => setKBForm({ ...kbForm, description: e.target.value })} rows={3} style={fullInput} />
            </div>
            <div style={{ marginBottom: 16 }}>
              <label style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8 }}>
                <input type="checkbox" checked={kbForm.is_official} onChange={e => setKBForm({ ...kbForm, is_official: e.target.checked })} />
                官方平台知识库
              </label>
            </div>
            <div style={{ display: 'flex', gap: 12 }}>
              <button onClick={editingKB ? handleUpdateKB : handleCreateKB} style={btnStyle('#6C63FF')}>{editingKB ? '保存' : '创建'}</button>
              <button onClick={() => setShowModal(false)} style={btnStyle('#6B7280')}>取消</button>
            </div>
          </div>
        </div>
      )}

      {/* Detail Drawer */}
      {showDetail && selectedKB && (
        <div style={overlayStyle} onClick={() => setShowDetail(false)}>
          <div style={{ ...drawerStyle }} onClick={e => e.stopPropagation()}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <h3 style={{ margin: 0 }}>{selectedKB.name}</h3>
              <button onClick={() => setShowDetail(false)} style={{ background: 'none', border: 'none', fontSize: 20, cursor: 'pointer', color: '#9CA3AF' }}>✕</button>
            </div>

            <div style={{ marginBottom: 16, padding: 12, background: '#F9FAFB', borderRadius: 8, fontSize: 13 }}>
              <div>来源: {selectedKB.is_official ? '官方' : selectedKB.owner_name || '用户'}</div>
              {selectedKB.description && <div style={{ marginTop: 4 }}>描述: {selectedKB.description}</div>}
              <div style={{ marginTop: 4 }}>状态: {statusBadge(selectedKB.status)} | 文档: {selectedKB.document_count} | 存储: {selectedKB.total_storage_mb || 0} MB</div>
            </div>

            {/* Upload */}
            <div style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                <input type="file" ref={fileInputRef} style={{ display: 'none' }}
                  onChange={e => { const f = e.target.files?.[0]; if (f) handleFileUpload(selectedKB.id, f); e.target.value = ''; }}
                  accept=".pdf,.docx,.doc,.txt,.md,.csv,.json,.xml" />
                <button onClick={() => fileInputRef.current?.click()} disabled={uploading}
                  style={btnStyle(uploading ? '#D1D5DB' : '#219B5E')}>
                  <SVGIcon><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></SVGIcon>
                  {' '}{uploading ? '上传中...' : '上传文档'}
                </button>
                <span style={{ fontSize: 12, color: '#6B7280' }}>支持 PDF / DOCX / TXT / MD / CSV / JSON</span>
              </div>
              {uploadMsg && (
                <div style={{ marginTop: 8, fontSize: 13, color: uploadMsg.startsWith('✅') ? '#16A34A' : '#DC2626', padding: '6px 12px', background: uploadMsg.startsWith('✅') ? '#DCFCE7' : '#FEE2E2', borderRadius: 6 }}>
                  {uploadMsg}
                </div>
              )}
            </div>

            {/* Graph Stats */}
            {selectedKB.graph_stats && (selectedKB.graph_stats.nodes > 0 || selectedKB.graph_stats.edges > 0) && (
              <div style={{ marginBottom: 16, padding: 12, background: '#EEF2FF', borderRadius: 8 }}>
                <h4 style={{ margin: '0 0 8px 0', fontSize: 14 }}>知识图谱</h4>
                <div style={{ fontSize: 13 }}>节点数: {selectedKB.graph_stats.nodes} | 边数: {selectedKB.graph_stats.edges}</div>
              </div>
            )}

            {/* External Integration */}
            {selectedKB.external_service_id && (
              <div style={{ marginBottom: 16, padding: 12, background: '#F5F3FF', borderRadius: 8, fontSize: 13 }}>
                <h4 style={{ margin: '0 0 8px 0', fontSize: 14 }}>外部集成</h4>
                <div>同步状态: {syncStatusBadge(selectedKB.external_sync_status)}</div>
                <div>外部ID: {selectedKB.external_id || '未关联'}</div>
              </div>
            )}

            {/* Documents */}
            <h4 style={{ margin: '0 0 8px 0', fontSize: 14 }}>文档列表 ({detailDocTotal})</h4>
            <div style={{ maxHeight: 400, overflowY: 'auto' }}>
              <table className="admin-table" style={{ marginBottom: 0 }}>
                <thead>
                  <tr>
                    <th>文件名</th><th>类型</th><th>大小</th><th>状态</th><th style={{ textAlign: 'center' }}>操作</th>
                  </tr>
                </thead>
                <tbody>
                  {detailDocs.map(doc => (
                    <tr key={doc.id}>
                      <td style={{ fontSize: 12 }}>{doc.filename || doc.file_name}</td>
                      <td style={{ fontSize: 11 }}><span style={{ padding: '1px 6px', background: '#F3F4F6', borderRadius: 3 }}>{doc.file_type || '-'}</span></td>
                      <td style={{ fontSize: 11, fontFamily: 'var(--font-mono)' }}>{formatSize(doc.file_size || 0)}</td>
                      <td>{statusBadge(doc.status)}</td>
                      <td style={{ textAlign: 'center' }}>
                        <button onClick={() => handlePreviewDoc(selectedKB.id, doc)} style={btnStyle('#3B82F6', 'small')}>预览</button>
                        <button onClick={() => handleDeleteDoc(selectedKB.id, doc.id)} style={{ ...btnStyle('#DC2626', 'small'), marginLeft: 4 }}>删除</button>
                      </td>
                    </tr>
                  ))}
                  {detailDocs.length === 0 && (
                    <tr><td colSpan={5} style={{ textAlign: 'center', padding: 24, color: '#9CA3AF' }}>暂无文档，请上传</td></tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}

      {/* Document Preview Modal */}
      {previewDoc && (
        <div style={overlayStyle} onClick={() => { setPreviewDoc(null); setPreviewContent(''); }}>
          <div style={{ ...drawerStyle, maxWidth: '80vw' }} onClick={e => e.stopPropagation()}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <h3 style={{ margin: 0, fontSize: 16 }}>{previewDoc.filename || previewDoc.file_name}</h3>
              <button onClick={() => { setPreviewDoc(null); setPreviewContent(''); }} style={{ background: 'none', border: 'none', fontSize: 20, cursor: 'pointer', color: '#9CA3AF' }}>✕</button>
            </div>
            <div style={{ fontSize: 12, color: '#6B7280', marginBottom: 12 }}>
              类型: {previewDoc.file_type || '-'} | 大小: {formatSize(previewDoc.file_size || 0)}
            </div>
            <div style={{
              maxHeight: '60vh', overflowY: 'auto', background: '#F9FAFB',
              borderRadius: 8, padding: 16, fontSize: 13, lineHeight: 1.7,
              whiteSpace: 'pre-wrap', wordBreak: 'break-word',
              fontFamily: 'var(--font-mono)', color: '#374151',
              border: '1px solid #E5E7EB',
            }}>
              {previewContent}
            </div>
          </div>
        </div>
      )}

      {/* External Service Modal */}
      {showExtModal && (
        <div style={overlayStyle} onClick={() => setShowExtModal(false)}>
          <div style={{ ...modalStyle, width: 720, maxWidth: '92vw' }} onClick={e => e.stopPropagation()}>
            <h3 style={{ margin: '0 0 20px 0', fontSize: 18 }}>外部知识库服务配置</h3>

            {/* Section 1: Dify 外部服务列表 */}
            <div style={{ marginBottom: 24 }}>
              <h4 style={{ margin: '0 0 12px 0', fontSize: 14, color: '#374151', fontWeight: 600 }}>已接入外部服务</h4>
              {extServices.length > 0 ? (
                <div style={{ border: '1px solid #E5E7EB', borderRadius: 8, overflow: 'hidden' }}>
                  <table className="admin-table" style={{ marginBottom: 0, width: '100%' }}>
                    <thead><tr><th style={{ textAlign: 'left' }}>名称</th><th style={{ textAlign: 'left' }}>类型</th><th style={{ textAlign: 'left' }}>URL</th><th style={{ textAlign: 'left' }}>状态</th><th style={{ textAlign: 'center', width: 120 }}>操作</th></tr></thead>
                    <tbody>
                      {extServices.map(svc => (
                        <tr key={svc.id}>
                          <td>{svc.name}</td>
                          <td><span style={{ fontSize: 12, padding: '2px 8px', background: '#F3F4FF', color: '#8B5CF6', borderRadius: 4 }}>Dify</span></td>
                          <td style={{ fontSize: 12, maxWidth: 220, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{svc.api_url}</td>
                          <td>{statusBadge(svc.status)}</td>
                          <td style={{ textAlign: 'center' }}>
                            <button onClick={() => handleCheckExtStatus(svc.id)} style={btnStyle('#3B82F6', 'small')}>检测</button>
                            <button onClick={() => handleDeleteExtService(svc.id)} style={{ ...btnStyle('#DC2626', 'small'), marginLeft: 6 }}>删除</button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              ) : (
                <div style={{ padding: 16, background: '#F9FAFB', borderRadius: 8, color: '#6B7280', fontSize: 13 }}>暂无外部服务，可在下方添加 Dify 知识库。</div>
              )}
            </div>

            {/* Section 2: Dify 配置表单 */}
            <div style={{ borderTop: '1px solid #E5E7EB', paddingTop: 20, marginBottom: 24 }}>
              <h4 style={{ margin: '0 0 16px 0', fontSize: 14, color: '#374151', fontWeight: 600 }}>配置 Dify 知识库</h4>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <div><label style={labelStyle}>名称</label><input value={extForm.name} onChange={e => setExtForm({ ...extForm, name: e.target.value })} placeholder="如: 生产环境 Dify" style={fullInput} /></div>
                <div><label style={labelStyle}>知识库名称(Dataset)</label><input value={extForm.dataset_name} onChange={e => setExtForm({ ...extForm, dataset_name: e.target.value })} placeholder="如: qihuai" style={fullInput} /></div>
              </div>
              <div style={{ marginTop: 16 }}><label style={labelStyle}>API URL</label><input value={extForm.api_url} onChange={e => setExtForm({ ...extForm, api_url: e.target.value })} placeholder="https://dify.qihuyun.com/v1" style={fullInput} /></div>
              <div style={{ marginTop: 16 }}><label style={labelStyle}>API Key（dataset 密钥）</label><input type="password" value={extForm.api_key} onChange={e => setExtForm({ ...extForm, api_key: e.target.value })} placeholder="dataset-xxxx" style={fullInput} /></div>

              {extMsg && (
                <div style={{ marginTop: 16, fontSize: 13, color: extMsg.startsWith('✅') ? '#16A34A' : '#DC2626', padding: '8px 12px', background: extMsg.startsWith('✅') ? '#DCFCE7' : '#FEE2E2', borderRadius: 6 }}>
                  {extMsg}
                </div>
              )}

              <div style={{ display: 'flex', gap: 12, marginTop: 16, alignItems: 'center' }}>
                <button onClick={handleCreateExtService} style={btnStyle('#8B5CF6')}>保存并测试连接</button>
                <button onClick={handleIngestPlatform} disabled={ingesting} style={btnStyle(ingesting ? '#D1D5DB' : '#219B5E')}>
                  {ingesting ? '入库中...' : '入库平台内容'}
                </button>
              </div>

              {ingestResult && (
                <div style={{ marginTop: 16, fontSize: 13, padding: 12, background: '#F0FDF4', border: '1px solid #BBF7D0', borderRadius: 8 }}>
                  <div style={{ fontWeight: 600, marginBottom: 6 }}>入库结果</div>
                  <div>AI 聊天回答：<b>{ingestResult.chat_answers}</b> 条</div>
                  <div>用户上传文档：<b>{ingestResult.user_docs}</b> 条</div>
                  <div>跳过(过短/空)：{ingestResult.skipped} 条 · 失败：{ingestResult.failed} 条</div>
                </div>
              )}
            </div>

            {/* Section 3: AnySearch 全局固定配置 */}
            <div style={{ borderTop: '1px solid #E5E7EB', paddingTop: 20, marginBottom: 8 }}>
              <h4 style={{ margin: '0 0 16px 0', fontSize: 14, color: '#374151', fontWeight: 600 }}>AnySearch 联网检索（全局配置）</h4>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 16, alignItems: 'end' }}>
                <div>
                  <label style={labelStyle}>API Key</label>
                  <input
                    type="password"
                    value={anysearchForm.api_key}
                    onChange={e => setAnysearchForm({ ...anysearchForm, api_key: e.target.value })}
                    placeholder="as_sk_xxxx"
                    style={fullInput}
                  />
                </div>
                <label style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8, padding: '8px 0', fontWeight: 500, fontSize: 14, color: '#374151', whiteSpace: 'nowrap' }}>
                  <input type="checkbox" checked={anysearchForm.is_enabled} onChange={e => setAnysearchForm({ ...anysearchForm, is_enabled: e.target.checked })} />
                  启用联网检索
                </label>
              </div>

              {anysearchMsg && (
                <div style={{ marginTop: 16, fontSize: 13, color: anysearchMsg.startsWith('✅') ? '#16A34A' : (anysearchMsg.startsWith('⚠️') ? '#D97706' : '#DC2626'), padding: '8px 12px', background: anysearchMsg.startsWith('✅') ? '#DCFCE7' : (anysearchMsg.startsWith('⚠️') ? '#FEF3C7' : '#FEE2E2'), borderRadius: 6 }}>
                  {anysearchMsg}
                </div>
              )}

              <div style={{ display: 'flex', gap: 12, marginTop: 16, alignItems: 'center' }}>
                <button onClick={handleSaveAnySearch} disabled={anysearchLoading} style={btnStyle(anysearchLoading ? '#D1D5DB' : '#8B5CF6')}>
                  {anysearchLoading ? '保存中...' : '保存并测试连接'}
                </button>
                <span style={{ fontSize: 12, color: '#6B7280' }}>配置对平台所有用户生效，AI 聊天将自动注入实时联网结果。</span>
              </div>
            </div>

            {/* Footer */}
            <div style={{ borderTop: '1px solid #E5E7EB', marginTop: 24, paddingTop: 16, display: 'flex', justifyContent: 'flex-end' }}>
              <button onClick={() => setShowExtModal(false)} style={btnStyle('#6B7280')}>关闭</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// Shared styles
const inputStyle: React.CSSProperties = { padding: '8px 12px', border: '1px solid #D1D5DB', borderRadius: 6, fontSize: 13, width: 200, boxSizing: 'border-box' };
const selectStyle: React.CSSProperties = { padding: '8px', border: '1px solid #D1D5DB', borderRadius: 6, fontSize: 13, background: '#fff' };
const fullInput: React.CSSProperties = { width: '100%', padding: '8px 12px', border: '1px solid #D1D5DB', borderRadius: 6, fontSize: 13, boxSizing: 'border-box' };
const labelStyle: React.CSSProperties = { display: 'block', marginBottom: 4, fontWeight: 600, fontSize: 13, color: '#374151' };
const overlayStyle: React.CSSProperties = { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' };
const modalStyle: React.CSSProperties = { background: '#fff', borderRadius: 12, padding: 24, width: 500, maxWidth: '90vw', maxHeight: '90vh', overflow: 'auto' };
const drawerStyle: React.CSSProperties = { background: '#fff', borderRadius: 12, padding: 24, width: 560, maxWidth: '90vw', maxHeight: '85vh', overflow: 'auto' };

const btnStyle = (color: string, size: 'normal' | 'small' = 'normal'): React.CSSProperties => ({
  background: color, color: '#fff', border: 'none', borderRadius: 6, cursor: 'pointer',
  fontSize: size === 'small' ? 12 : 14, padding: size === 'small' ? '4px 10px' : '8px 16px',
  fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 4, whiteSpace: 'nowrap',
});

export default Knowledge;