import React, { useState, useEffect } from 'react';
import { 
  Layout, Card, Row, Col, Button, Space, Typography, Tag, 
  Tooltip, Modal, Progress, Spin, App, Descriptions, 
  Avatar, Divider, List, Input, Switch, FloatButton, 
  Tabs, Steps, Checkbox, Pagination, Empty
} from 'antd';
import { 
  DatabaseOutlined, PlusOutlined, DeleteOutlined, EditOutlined, 
  FileTextOutlined, PictureOutlined, SearchOutlined, 
  ArrowLeftOutlined, ArrowRightOutlined, DatabaseFilled, 
  ClockCircleOutlined, UserOutlined, CalendarOutlined,
  CheckCircleOutlined, InfoCircleOutlined, ThunderboltOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import apiClient from '../utils/apiClient';
import { buildApiUrl, API_ENDPOINTS } from '../config/api';
import ContentViewer from '../components/ContentViewer';
import ActionButton from '../components/ActionButton';
import exportService from '../services/exportService';
import tools from '../utils/tools';
import meetingCacheService from '../services/meetingCacheService';

const { Title, Text, Paragraph } = Typography;
const { Sider, Content } = Layout;
const { TextArea } = Input;

const KnowledgeBasePage = ({ user }) => {
  const navigate = useNavigate();
  const { message, modal } = App.useApp();

  const [kbs, setKbs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [selectedKb, setSelectedKb] = useState(null);
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const [showCreateForm, setShowCreateForm] = useState(false);
  
  // 创建流程状态
  const [meetings, setMeetings] = useState([]);
  const [selectedMeetings, setSelectedMeetings] = useState([]);
  const [userPrompt, setUserPrompt] = useState('');
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedTags, setSelectedTags] = useState([]);
  const [availableTags, setAvailableTags] = useState([]);
  const [creating, setGenerating] = useState(false);
  const [createStep, setCreateStep] = useState(0);
  const [meetingsPagination, setMeetingsPagination] = useState({ page: 1, total: 0 });
  const [loadingMeetings, setLoadingMeetings] = useState(false);
  const [availablePrompts, setAvailablePrompts] = useState([]);
  const [selectedPromptId, setSelectedPromptId] = useState(null);
  const [taskProgress, setTaskProgress] = useState(0);

  useEffect(() => {
    fetchAllKbs();
    fetchAvailableTags();
  }, []);

  useEffect(() => {
    if (showCreateForm && createStep === 0) {
      fetchMeetings(meetingsPagination.page);
    }
  }, [searchQuery, selectedTags, showCreateForm, createStep, meetingsPagination.page]);

  const fetchAllKbs = async () => {
    setLoading(true);
    try {
      const res = await apiClient.get(buildApiUrl(API_ENDPOINTS.KNOWLEDGE_BASE.LIST));
      const sorted = res.data.kbs.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
      setKbs(sorted);
      if (sorted.length > 0 && !selectedKb) {
        loadKbDetail(sorted[0].kb_id);
      }
    } finally {
      setLoading(false);
    }
  };

  const loadKbDetail = async (id) => {
    try {
      const res = await apiClient.get(buildApiUrl(API_ENDPOINTS.KNOWLEDGE_BASE.DETAIL(id)));
      setSelectedKb(res.data);
    } catch (e) {}
  };

  const fetchMeetings = async (page = 1) => {
    setLoadingMeetings(true);
    try {
      const params = {
        user_id: user.user_id,
        page,
        search: searchQuery || undefined,
        tags: selectedTags.length > 0 ? selectedTags.join(',') : undefined
      };
      const res = await apiClient.get(buildApiUrl(API_ENDPOINTS.MEETINGS.LIST), { params });
      setMeetings(res.data.meetings || []);
      setMeetingsPagination({ page: res.data.page, total: res.data.total });
    } finally {
      setLoadingMeetings(false);
    }
  };

  const fetchAvailableTags = async () => {
    try {
      const res = await apiClient.get(buildApiUrl(API_ENDPOINTS.TAGS.LIST));
      setAvailableTags(res.data?.slice(0, 10) || []);
    } catch (e) {}
  };

  const fetchPrompts = async () => {
    try {
      const res = await apiClient.get(buildApiUrl(API_ENDPOINTS.PROMPTS.ACTIVE('KNOWLEDGE_TASK')));
      setAvailablePrompts(res.data.prompts || []);
      const def = res.data.prompts?.find(p => p.is_default) || res.data.prompts?.[0];
      if (def) setSelectedPromptId(def.id);
    } catch (e) {}
  };

  const handleStartCreate = () => {
    setShowCreateForm(true);
    setCreateStep(0);
    setSelectedMeetings([]);
    fetchPrompts();
  };

  const handleGenerate = async () => {
    setGenerating(true);
    setTaskProgress(10);
    try {
      const res = await apiClient.post(buildApiUrl(API_ENDPOINTS.KNOWLEDGE_BASE.CREATE), {
        user_prompt: userPrompt,
        source_meeting_ids: selectedMeetings.join(','),
        prompt_id: selectedPromptId
      });
      
      const taskId = res.data.task_id;
      const interval = setInterval(async () => {
        const statusRes = await apiClient.get(buildApiUrl(API_ENDPOINTS.KNOWLEDGE_BASE.TASK_STATUS(taskId)));
        const s = statusRes.data;
        setTaskProgress(s.progress || 20);
        if (s.status === 'completed') {
          clearInterval(interval);
          setGenerating(false);
          setShowCreateForm(false);
          message.success('知识库生成成功');
          fetchAllKbs();
        } else if (s.status === 'failed') {
          clearInterval(interval);
          setGenerating(false);
          message.error('生成失败');
        }
      }, 3000);
    } catch (e) {
      setGenerating(false);
    }
  };

  const handleDelete = (kb) => {
    modal.confirm({
      title: '删除知识库',
      content: `确定要删除 "${kb.title}" 吗？此操作无法撤销。`,
      okText: '删除',
      okType: 'danger',
      onOk: async () => {
        await apiClient.delete(buildApiUrl(API_ENDPOINTS.KNOWLEDGE_BASE.DELETE(kb.kb_id)));
        if (selectedKb?.kb_id === kb.kb_id) setSelectedKb(null);
        fetchAllKbs();
        message.success('删除成功');
      }
    });
  };

  return (
    <div className="kb-page-modern">
      <Layout style={{ background: '#fff', borderRadius: 12, overflow: 'hidden', minHeight: 'calc(100vh - 120px)' }}>
        <Sider 
          width={300} 
          theme="light" 
          collapsed={sidebarCollapsed}
          collapsible 
          onCollapse={setSidebarCollapsed}
          style={{ borderRight: '1px solid #f0f0f0' }}
        >
          <div style={{ padding: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            {!sidebarCollapsed && <Title level={5} style={{ margin: 0 }}>知识库条目</Title>}
            <Button type="primary" shape="circle" icon={<PlusOutlined />} onClick={handleStartCreate} />
          </div>
          
          <div style={{ overflowY: 'auto', height: 'calc(100vh - 200px)' }}>
            <List
              dataSource={kbs}
              renderItem={item => (
                <div 
                  onClick={() => loadKbDetail(item.kb_id)}
                  style={{ 
                    padding: '12px 16px', 
                    cursor: 'pointer',
                    background: selectedKb?.kb_id === item.kb_id ? '#e6f4ff' : 'transparent',
                    borderLeft: selectedKb?.kb_id === item.kb_id ? '4px solid #1677ff' : '4px solid transparent',
                    transition: 'all 0.3s'
                  }}
                >
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <Text strong ellipsis style={{ width: '80%' }}>{item.title}</Text>
                    {selectedKb?.kb_id === item.kb_id && (
                      <Space size={6}>
                        <ActionButton tone="edit" variant="iconSm" tooltip="编辑" icon={<EditOutlined />} onClick={(e) => { e.stopPropagation(); navigate(`/knowledge-base/edit/${item.kb_id}`); }} />
                        <ActionButton tone="delete" variant="iconSm" tooltip="删除" icon={<DeleteOutlined />} onClick={(e) => { e.stopPropagation(); handleDelete(item); }} />
                      </Space>
                    )}
                  </div>
                  <div style={{ marginTop: 4 }}>
                    <Text type="secondary" size="small">
                      <ClockCircleOutlined /> {tools.formatShortDate(item.created_at)}
                    </Text>
                    <Divider type="vertical" />
                    <Text type="secondary" size="small">
                      <DatabaseOutlined /> {item.source_meeting_count} 会议
                    </Text>
                  </div>
                </div>
              )}
            />
          </div>
        </Sider>

        <Content style={{ padding: '24px', background: '#fff' }}>
          {selectedKb ? (
            <>
              <div style={{ marginBottom: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div>
                  <Title level={3}>{selectedKb.title}</Title>
                  <Space wrap>
                    {selectedKb.tags?.map(t => <Tag key={t} color="blue">{t}</Tag>)}
                    <Text type="secondary"><CalendarOutlined /> {tools.formatDate(selectedKb.created_at)}</Text>
                    <Text type="secondary"><UserOutlined /> {selectedKb.created_by_name}</Text>
                  </Space>
                </div>
                <Space>
                  <Button icon={<PictureOutlined />} onClick={() => {}}>导出图片</Button>
                </Space>
              </div>

              <Card size="small" style={{ marginBottom: 24, background: '#f9fafb' }}>
                <Descriptions size="small" column={1}>
                  <Descriptions.Item label="数据源">
                    {selectedKb.source_meetings?.map(m => (
                      <Link key={m.meeting_id} to={`/meetings/${m.meeting_id}`} target="_blank" style={{ marginRight: 12 }}>
                        <Tag icon={<FileTextOutlined />}>{m.title}</Tag>
                      </Link>
                    ))}
                  </Descriptions.Item>
                  {selectedKb.user_prompt && (
                    <Descriptions.Item label="自定义要求">
                      <Text italic>{selectedKb.user_prompt}</Text>
                    </Descriptions.Item>
                  )}
                </Descriptions>
              </Card>

              <ContentViewer
                content={selectedKb.content}
                title={selectedKb.title}
                emptyMessage="内容加载中..."
              />
            </>
          ) : (
            <Empty style={{ marginTop: 100 }} description="请从左侧选择一个知识库查看详情" />
          )}
        </Content>
      </Layout>

      <Modal
        title="创建知识库"
        open={showCreateForm}
        onCancel={() => setShowCreateForm(false)}
        footer={null}
        width={800}
      >
        <Steps current={createStep} items={[{ title: '选择会议' }, { title: '自定义' }]} style={{ marginBottom: 24 }} />
        
        {createStep === 0 ? (
          <div>
            <div style={{ marginBottom: 16, display: 'flex', gap: 12 }}>
              <Input 
                placeholder="搜索会议标题..." 
                prefix={<SearchOutlined />} 
                value={searchQuery}
                onChange={e => setSearchQuery(e.target.value)}
                style={{ width: 250 }}
              />
              <Space wrap>
                {availableTags.map(t => (
                  <Tag.CheckableTag 
                    key={t.id} 
                    checked={selectedTags.includes(t.name)}
                    onChange={checked => setSelectedTags(checked ? [...selectedTags, t.name] : selectedTags.filter(x => x !== t.name))}
                  >
                    {t.name}
                  </Tag.CheckableTag>
                ))}
              </Space>
            </div>

            <List
              loading={loadingMeetings}
              dataSource={meetings}
              renderItem={m => (
                <List.Item actions={[<Checkbox checked={selectedMeetings.includes(m.meeting_id)} onChange={() => {
                  setSelectedMeetings(prev => prev.includes(m.meeting_id) ? prev.filter(id => id !== m.meeting_id) : [...prev, m.meeting_id])
                }} />]}>
                  <List.Item.Meta title={m.title} description={<Space><UserOutlined />{m.creator_username} <Divider type="vertical" /> <CalendarOutlined />{tools.formatMeetingDate(m.created_at)}</Space>} />
                </List.Item>
              )}
            />
            
            <div style={{ marginTop: 16, textAlign: 'right' }}>
              <Pagination 
                size="small" 
                current={meetingsPagination.page} 
                total={meetingsPagination.total} 
                onChange={p => setMeetingsPagination({ ...meetingsPagination, page: p })} 
              />
              <Divider />
              <Button
                type="primary"
                icon={<ArrowRightOutlined />}
                disabled={selectedMeetings.length === 0}
                onClick={() => setCreateStep(1)}
              >
                下一步 (已选 {selectedMeetings.length})
              </Button>
            </div>
          </div>
        ) : (
          <div>
            <Title level={5}>选择总结模版</Title>
            <Space wrap style={{ marginBottom: 16 }}>
              {availablePrompts.map(p => (
                <Tag.CheckableTag key={p.id} checked={selectedPromptId === p.id} onChange={() => setSelectedPromptId(p.id)}>
                  {p.name}
                </Tag.CheckableTag>
              ))}
            </Space>
            
            <Title level={5}>附加要求</Title>
            <TextArea rows={4} placeholder="例如：重点对比不同会议中关于某个项目的进度描述..." value={userPrompt} onChange={e => setUserPrompt(e.target.value)} />
            
            {creating && (
              <div style={{ marginTop: 24 }}>
                <Text>AI 正在整合知识中... {taskProgress}%</Text>
                <Progress percent={taskProgress} status="active" />
              </div>
            )}
            
            <Divider />
            <div style={{ textAlign: 'right' }}>
              <Space>
                <Button icon={<ArrowLeftOutlined />} onClick={() => setCreateStep(0)}>上一步</Button>
                <Button type="primary" icon={<ThunderboltOutlined />} loading={creating} onClick={handleGenerate}>开始生成</Button>
              </Space>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
};

export default KnowledgeBasePage;