import { useState, useEffect, useRef, useMemo } from 'react';
import { List, Button, Modal, Form, Input, Select, message, Empty, Space, Badge, Tag, Card, Tooltip, InputNumber, Progress, Alert, Radio, Descriptions, Collapse } from 'antd';
import { EditOutlined, FileTextOutlined, ThunderboltOutlined, LockOutlined, DownloadOutlined, SettingOutlined, FundOutlined, SyncOutlined, CheckCircleOutlined, CloseCircleOutlined, RocketOutlined, StopOutlined, InfoCircleOutlined, CaretRightOutlined } from '@ant-design/icons';
import { useStore } from '../store';
import { useChapterSync } from '../store/hooks';
import { projectApi, writingStyleApi } from '../services/api';
import type { Chapter, ChapterUpdate, ApiError, WritingStyle, AnalysisTask, ExpansionPlanData } from '../types';
import ChapterAnalysis from '../components/ChapterAnalysis';
import { SSELoadingOverlay } from '../components/SSELoadingOverlay';

const { TextArea } = Input;

export default function Chapters() {
  const { currentProject, chapters, setCurrentChapter, setCurrentProject } = useStore();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isEditorOpen, setIsEditorOpen] = useState(false);
  const [isContinuing, setIsContinuing] = useState(false);
  const [isGenerating, setIsGenerating] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [form] = Form.useForm();
  const [editorForm] = Form.useForm();
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
  const contentTextAreaRef = useRef<any>(null);
  const [writingStyles, setWritingStyles] = useState<WritingStyle[]>([]);
  const [selectedStyleId, setSelectedStyleId] = useState<number | undefined>();
  const [targetWordCount, setTargetWordCount] = useState<number>(3000);
  const [analysisVisible, setAnalysisVisible] = useState(false);
  const [analysisChapterId, setAnalysisChapterId] = useState<string | null>(null);
  // 分析任务状态管理
  const [analysisTasksMap, setAnalysisTasksMap] = useState<Record<string, AnalysisTask>>({});
  const pollingIntervalsRef = useRef<Record<string, number>>({});
  
  // 单章节生成进度状态
  const [singleChapterProgress, setSingleChapterProgress] = useState(0);
  const [singleChapterProgressMessage, setSingleChapterProgressMessage] = useState('');
  
  // 批量生成相关状态
  const [batchGenerateVisible, setBatchGenerateVisible] = useState(false);
  const [batchGenerating, setBatchGenerating] = useState(false);
  const [batchTaskId, setBatchTaskId] = useState<string | null>(null);
  const [batchProgress, setBatchProgress] = useState<{
    status: string;
    total: number;
    completed: number;
    current_chapter_number: number | null;
    estimated_time_minutes?: number;
  } | null>(null);
  const batchPollingIntervalRef = useRef<number | null>(null);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const {
    refreshChapters,
    updateChapter,
    generateChapterContentStream
  } = useChapterSync();

  useEffect(() => {
    if (currentProject?.id) {
      refreshChapters();
      loadWritingStyles();
      loadAnalysisTasks();
      checkAndRestoreBatchTask();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentProject?.id]);

  // 清理轮询定时器
  useEffect(() => {
    return () => {
      Object.values(pollingIntervalsRef.current).forEach(interval => {
        clearInterval(interval);
      });
      if (batchPollingIntervalRef.current) {
        clearInterval(batchPollingIntervalRef.current);
      }
    };
  }, []);

  // 加载所有章节的分析任务状态
  const loadAnalysisTasks = async () => {
    if (!chapters || chapters.length === 0) return;
    
    const tasksMap: Record<string, AnalysisTask> = {};
    
    for (const chapter of chapters) {
      // 只查询有内容的章节
      if (chapter.content && chapter.content.trim() !== '') {
        try {
          const response = await fetch(`/api/chapters/${chapter.id}/analysis/status`);
          if (response.ok) {
            const task: AnalysisTask = await response.json();
            tasksMap[chapter.id] = task;
            
            // 如果任务正在运行，启动轮询
            if (task.status === 'pending' || task.status === 'running') {
              startPollingTask(chapter.id);
            }
          }
        } catch (error) {
          // 404或其他错误表示没有分析任务，忽略
          console.debug(`章节 ${chapter.id} 暂无分析任务`);
        }
      }
    }
    
    setAnalysisTasksMap(tasksMap);
  };

  // 启动单个章节的任务轮询
  const startPollingTask = (chapterId: string) => {
    // 如果已经在轮询，先清除
    if (pollingIntervalsRef.current[chapterId]) {
      clearInterval(pollingIntervalsRef.current[chapterId]);
    }
    
    const interval = window.setInterval(async () => {
      try {
        const response = await fetch(`/api/chapters/${chapterId}/analysis/status`);
        if (!response.ok) return;
        
        const task: AnalysisTask = await response.json();
        
        setAnalysisTasksMap(prev => ({
          ...prev,
          [chapterId]: task
        }));
        
        // 任务完成或失败，停止轮询
        if (task.status === 'completed' || task.status === 'failed') {
          clearInterval(pollingIntervalsRef.current[chapterId]);
          delete pollingIntervalsRef.current[chapterId];
          
          if (task.status === 'completed') {
            message.success(`章节分析完成`);
          } else if (task.status === 'failed') {
            message.error(`章节分析失败: ${task.error_message || '未知错误'}`);
          }
        }
      } catch (error) {
        console.error('轮询分析任务失败:', error);
      }
    }, 2000);
    
    pollingIntervalsRef.current[chapterId] = interval;
    
    // 5分钟超时
    setTimeout(() => {
      if (pollingIntervalsRef.current[chapterId]) {
        clearInterval(pollingIntervalsRef.current[chapterId]);
        delete pollingIntervalsRef.current[chapterId];
      }
    }, 300000);
  };

  const loadWritingStyles = async () => {
    if (!currentProject?.id) return;
    
    try {
      const response = await writingStyleApi.getProjectStyles(currentProject.id);
      setWritingStyles(response.styles);
      
      // 设置默认风格为初始选中
      const defaultStyle = response.styles.find(s => s.is_default);
      if (defaultStyle) {
        setSelectedStyleId(defaultStyle.id);
      }
    } catch (error) {
      console.error('加载写作风格失败:', error);
      message.error('加载写作风格失败');
    }
  };

  // 检查并恢复批量生成任务
  const checkAndRestoreBatchTask = async () => {
    if (!currentProject?.id) return;
    
    try {
      const response = await fetch(`/api/chapters/project/${currentProject.id}/batch-generate/active`);
      if (!response.ok) return;
      
      const data = await response.json();
      
      if (data.has_active_task && data.task) {
        const task = data.task;
        
        // 恢复任务状态
        setBatchTaskId(task.batch_id);
        setBatchProgress({
          status: task.status,
          total: task.total,
          completed: task.completed,
          current_chapter_number: task.current_chapter_number,
        });
        setBatchGenerating(true);
        setBatchGenerateVisible(true);
        
        // 启动轮询
        startBatchPolling(task.batch_id);
        
        message.info('检测到未完成的批量生成任务，已自动恢复');
      }
    } catch (error) {
      console.error('检查批量生成任务失败:', error);
    }
  };

  if (!currentProject) return null;

  const canGenerateChapter = (chapter: Chapter): boolean => {
    if (chapter.chapter_number === 1) {
      return true;
    }
    
    const previousChapters = chapters.filter(
      c => c.chapter_number < chapter.chapter_number
    );
    
    return previousChapters.every(c => c.content && c.content.trim() !== '');
  };

  const getGenerateDisabledReason = (chapter: Chapter): string => {
    if (chapter.chapter_number === 1) {
      return '';
    }
    
    const previousChapters = chapters.filter(
      c => c.chapter_number < chapter.chapter_number
    );
    
    const incompleteChapters = previousChapters.filter(
      c => !c.content || c.content.trim() === ''
    );
    
    if (incompleteChapters.length > 0) {
      const numbers = incompleteChapters.map(c => c.chapter_number).join('、');
      return `需要先完成前置章节：第 ${numbers} 章`;
    }
    
    return '';
  };

  const handleOpenModal = (id: string) => {
    const chapter = chapters.find(c => c.id === id);
    if (chapter) {
      form.setFieldsValue(chapter);
      setEditingId(id);
      setIsModalOpen(true);
    }
  };

  const handleSubmit = async (values: ChapterUpdate) => {
    if (!editingId) return;
    
    try {
      await updateChapter(editingId, values);
      message.success('章节更新成功');
      setIsModalOpen(false);
      form.resetFields();
    } catch {
      message.error('操作失败');
    }
  };

  const handleOpenEditor = (id: string) => {
    const chapter = chapters.find(c => c.id === id);
    if (chapter) {
      setCurrentChapter(chapter);
      editorForm.setFieldsValue({
        title: chapter.title,
        content: chapter.content,
      });
      setEditingId(id);
      setIsEditorOpen(true);
    }
  };

  const handleEditorSubmit = async (values: ChapterUpdate) => {
    if (!editingId || !currentProject) return;
    
    try {
      await updateChapter(editingId, values);
      
      // 刷新项目信息以更新总字数统计
      const updatedProject = await projectApi.getProject(currentProject.id);
      setCurrentProject(updatedProject);
      
      message.success('章节保存成功');
      setIsEditorOpen(false);
    } catch {
      message.error('保存失败');
    }
  };

  const handleGenerate = async () => {
    if (!editingId) return;

    try {
      setIsContinuing(true);
      setIsGenerating(true);
      setSingleChapterProgress(0);
      setSingleChapterProgressMessage('准备开始生成...');
      
      const result = await generateChapterContentStream(
        editingId,
        (content) => {
          editorForm.setFieldsValue({ content });
          
          if (contentTextAreaRef.current) {
            const textArea = contentTextAreaRef.current.resizableTextArea?.textArea;
            if (textArea) {
              textArea.scrollTop = textArea.scrollHeight;
            }
          }
        },
        selectedStyleId,
        targetWordCount,
        (progressMsg, progressValue) => {
          // 进度回调
          setSingleChapterProgress(progressValue);
          setSingleChapterProgressMessage(progressMsg);
        }
      );
      
      message.success('AI创作成功，正在分析章节内容...');
      
      // 如果返回了分析任务ID，启动轮询
      if (result?.analysis_task_id) {
        const taskId = result.analysis_task_id;
        setAnalysisTasksMap(prev => ({
          ...prev,
          [editingId]: {
            has_task: true,
            task_id: taskId,
            chapter_id: editingId,
            status: 'pending',
            progress: 0
          }
        }));
        
        // 启动轮询
        startPollingTask(editingId);
      }
    } catch (error) {
      const apiError = error as ApiError;
      message.error('AI创作失败：' + (apiError.response?.data?.detail || apiError.message || '未知错误'));
    } finally {
      setIsContinuing(false);
      setIsGenerating(false);
      setSingleChapterProgress(0);
      setSingleChapterProgressMessage('');
    }
  };

  const showGenerateModal = (chapter: Chapter) => {
    const previousChapters = chapters.filter(
      c => c.chapter_number < chapter.chapter_number
    ).sort((a, b) => a.chapter_number - b.chapter_number);

    const selectedStyle = writingStyles.find(s => s.id === selectedStyleId);

    const modal = Modal.confirm({
      title: 'AI创作章节内容',
      width: 700,
      centered: true,
      content: (
        <div style={{ marginTop: 16 }}>
          <p>AI将根据以下信息创作本章内容：</p>
          <ul>
            <li>章节大纲和要求</li>
            <li>项目的世界观设定</li>
            <li>相关角色信息</li>
            <li><strong>前面已完成章节的内容（确保剧情连贯）</strong></li>
            {selectedStyle && (
              <li><strong>写作风格：{selectedStyle.name}</strong></li>
            )}
            <li><strong>目标字数：{targetWordCount}字</strong></li>
          </ul>
          
          {previousChapters.length > 0 && (
            <div style={{
              marginTop: 16,
              padding: 12,
              background: '#f0f5ff',
              borderRadius: 4,
              border: '1px solid #adc6ff'
            }}>
              <div style={{ marginBottom: 8, fontWeight: 500, color: '#1890ff' }}>
                📚 将引用的前置章节（共{previousChapters.length}章）：
              </div>
              <div style={{ maxHeight: 150, overflowY: 'auto' }}>
                {previousChapters.map(ch => (
                  <div key={ch.id} style={{ padding: '4px 0', fontSize: 13 }}>
                    ✓ 第{ch.chapter_number}章：{ch.title} ({ch.word_count || 0}字)
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 8, fontSize: 12, color: '#666' }}>
                💡 AI会参考这些章节内容，确保情节连贯、角色状态一致
              </div>
            </div>
          )}
          
          <p style={{ color: '#ff4d4f', marginTop: 16, marginBottom: 0 }}>
            ⚠️ 注意：此操作将覆盖当前章节内容
          </p>
        </div>
      ),
      okText: '开始创作',
      okButtonProps: { danger: true },
      cancelText: '取消',
      onOk: async () => {
        modal.update({
          okButtonProps: { danger: true, loading: true },
          cancelButtonProps: { disabled: true },
          closable: false,
          maskClosable: false,
          keyboard: false,
        });
        
        try {
          if (!selectedStyleId) {
            message.error('请先选择写作风格');
            modal.update({
              okButtonProps: { danger: true, loading: false },
              cancelButtonProps: { disabled: false },
              closable: true,
              maskClosable: true,
              keyboard: true,
            });
            return;
          }
          await handleGenerate();
          modal.destroy();
        } catch (error) {
          modal.update({
            okButtonProps: { danger: true, loading: false },
            cancelButtonProps: { disabled: false },
            closable: true,
            maskClosable: true,
            keyboard: true,
          });
        }
      },
      onCancel: () => {
        if (isGenerating) {
          message.warning('AI正在创作中，请等待完成');
          return false;
        }
      },
    });
  };

  const getStatusColor = (status: string) => {
    const colors: Record<string, string> = {
      'draft': 'default',
      'writing': 'processing',
      'completed': 'success',
    };
    return colors[status] || 'default';
  };

  const getStatusText = (status: string) => {
    const texts: Record<string, string> = {
      'draft': '草稿',
      'writing': '创作中',
      'completed': '已完成',
    };
    return texts[status] || status;
  };

  const sortedChapters = [...chapters].sort((a, b) => a.chapter_number - b.chapter_number);

  // 按大纲分组章节
  const groupedChapters = useMemo(() => {
    const groups: Record<string, {
      outlineId: string | null;
      outlineTitle: string;
      outlineOrder: number;
      chapters: Chapter[];
    }> = {};

    sortedChapters.forEach(chapter => {
      const key = chapter.outline_id || 'uncategorized';
      
      if (!groups[key]) {
        groups[key] = {
          outlineId: chapter.outline_id || null,
          outlineTitle: chapter.outline_title || '未分类章节',
          outlineOrder: chapter.outline_order ?? 999,
          chapters: []
        };
      }
      
      groups[key].chapters.push(chapter);
    });

    // 转换为数组并按大纲顺序排序
    return Object.values(groups).sort((a, b) => a.outlineOrder - b.outlineOrder);
  }, [sortedChapters]);

  const handleExport = () => {
    if (chapters.length === 0) {
      message.warning('当前项目没有章节，无法导出');
      return;
    }
    
    Modal.confirm({
      title: '导出项目章节',
      content: `确定要将《${currentProject.title}》的所有章节导出为TXT文件吗？`,
      centered: true,
      okText: '确定导出',
      cancelText: '取消',
      onOk: () => {
        try {
          projectApi.exportProject(currentProject.id);
          message.success('开始下载导出文件');
        } catch {
          message.error('导出失败，请重试');
        }
      },
    });
  };

  const handleShowAnalysis = (chapterId: string) => {
    setAnalysisChapterId(chapterId);
    setAnalysisVisible(true);
  };

  // 批量生成函数
  const handleBatchGenerate = async (values: {
    startChapterNumber: number;
    count: number;
    enableAnalysis: boolean;
    styleId?: number;
    targetWordCount?: number;
  }) => {
    if (!currentProject?.id) return;
    
    // 使用批量生成对话框中选择的风格和字数，如果没有选择则使用默认值
    const styleId = values.styleId || selectedStyleId;
    const wordCount = values.targetWordCount || targetWordCount;
    
    if (!styleId) {
      message.error('请选择写作风格');
      return;
    }
    
    try {
      setBatchGenerating(true);
      
      const response = await fetch(`/api/chapters/project/${currentProject.id}/batch-generate`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          start_chapter_number: values.startChapterNumber,
          count: values.count,
          enable_analysis: values.enableAnalysis,
          style_id: styleId,
          target_word_count: wordCount,
        }),
      });
      
      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.detail || '创建批量生成任务失败');
      }
      
      const result = await response.json();
      setBatchTaskId(result.batch_id);
      setBatchProgress({
        status: 'running',
        total: result.chapters_to_generate.length,
        completed: 0,
        current_chapter_number: values.startChapterNumber,
        estimated_time_minutes: result.estimated_time_minutes,
      });
      
      message.success(`批量生成任务已创建，预计需要 ${result.estimated_time_minutes} 分钟`);
      
      // 开始轮询任务状态
      startBatchPolling(result.batch_id);
      
    } catch (error: any) {
      message.error('创建批量生成任务失败：' + (error.message || '未知错误'));
      setBatchGenerating(false);
      setBatchGenerateVisible(false);
    }
  };

  // 轮询批量生成任务状态
  const startBatchPolling = (taskId: string) => {
    if (batchPollingIntervalRef.current) {
      clearInterval(batchPollingIntervalRef.current);
    }
    
    const poll = async () => {
      try {
        const response = await fetch(`/api/chapters/batch-generate/${taskId}/status`);
        if (!response.ok) return;
        
        const status = await response.json();
        setBatchProgress({
          status: status.status,
          total: status.total,
          completed: status.completed,
          current_chapter_number: status.current_chapter_number,
        });
        
        // 任务完成或失败，停止轮询
        if (status.status === 'completed' || status.status === 'failed' || status.status === 'cancelled') {
          if (batchPollingIntervalRef.current) {
            clearInterval(batchPollingIntervalRef.current);
            batchPollingIntervalRef.current = null;
          }
          
          setBatchGenerating(false);
          
          if (status.status === 'completed') {
            message.success(`批量生成完成！成功生成 ${status.completed} 章`);
            // 刷新章节列表
            refreshChapters();
            loadAnalysisTasks();
          } else if (status.status === 'failed') {
            message.error(`批量生成失败：${status.error_message || '未知错误'}`);
          } else if (status.status === 'cancelled') {
            message.warning('批量生成已取消');
          }
          
          // 延迟关闭对话框，让用户看到最终状态
          setTimeout(() => {
            setBatchGenerateVisible(false);
            setBatchTaskId(null);
            setBatchProgress(null);
          }, 2000);
        }
      } catch (error) {
        console.error('轮询批量生成状态失败:', error);
      }
    };
    
    // 立即执行一次
    poll();
    
    // 每2秒轮询一次
    batchPollingIntervalRef.current = window.setInterval(poll, 2000);
  };

  // 取消批量生成
  const handleCancelBatchGenerate = async () => {
    if (!batchTaskId) return;
    
    try {
      const response = await fetch(`/api/chapters/batch-generate/${batchTaskId}/cancel`, {
        method: 'POST',
      });
      
      if (!response.ok) {
        throw new Error('取消失败');
      }
      
      message.success('批量生成已取消');
    } catch (error: any) {
      message.error('取消失败：' + (error.message || '未知错误'));
    }
  };

  // 打开批量生成对话框
  const handleOpenBatchGenerate = () => {
    // 找到第一个未生成的章节
    const firstIncompleteChapter = sortedChapters.find(
      ch => !ch.content || ch.content.trim() === ''
    );
    
    if (!firstIncompleteChapter) {
      message.info('所有章节都已生成内容');
      return;
    }
    
    // 检查该章节是否可以生成
    if (!canGenerateChapter(firstIncompleteChapter)) {
      const reason = getGenerateDisabledReason(firstIncompleteChapter);
      message.warning(reason);
      return;
    }
    
    setBatchGenerateVisible(true);
  };

  // 渲染分析状态标签
  const renderAnalysisStatus = (chapterId: string) => {
    const task = analysisTasksMap[chapterId];
    
    if (!task) {
      return null;
    }
    
    switch (task.status) {
      case 'pending':
        return (
          <Tag icon={<SyncOutlined spin />} color="processing">
            等待分析
          </Tag>
        );
      case 'running':
        return (
          <Tag icon={<SyncOutlined spin />} color="processing">
            分析中 {task.progress}%
          </Tag>
        );
      case 'completed':
        return (
          <Tag icon={<CheckCircleOutlined />} color="success">
            已分析
          </Tag>
        );
      case 'failed':
        return (
          <Tooltip title={task.error_message}>
            <Tag icon={<CloseCircleOutlined />} color="error">
              分析失败
            </Tag>
          </Tooltip>
        );
      default:
        return null;
    }
  };

  // 显示展开规划详情
  const showExpansionPlanModal = (chapter: Chapter) => {
    if (!chapter.expansion_plan) return;
    
    try {
      const planData: ExpansionPlanData = JSON.parse(chapter.expansion_plan);
      
      Modal.info({
        title: (
          <Space>
            <InfoCircleOutlined style={{ color: '#1890ff' }} />
            <span>第{chapter.chapter_number}章展开规划</span>
          </Space>
        ),
        width: 800,
        content: (
          <div style={{ marginTop: 16 }}>
            <Descriptions column={1} size="small" bordered>
              <Descriptions.Item label="章节标题">
                <strong>{chapter.title}</strong>
              </Descriptions.Item>
              <Descriptions.Item label="情感基调">
                <Tag color="blue">{planData.emotional_tone}</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="冲突类型">
                <Tag color="orange">{planData.conflict_type}</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="预估字数">
                <Tag color="green">{planData.estimated_words}字</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="叙事目标">
                {planData.narrative_goal}
              </Descriptions.Item>
              <Descriptions.Item label="关键事件">
                <Space direction="vertical" size="small" style={{ width: '100%' }}>
                  {planData.key_events.map((event, idx) => (
                    <div key={idx} style={{ padding: '4px 0' }}>
                      <Tag color="purple">{idx + 1}</Tag> {event}
                    </div>
                  ))}
                </Space>
              </Descriptions.Item>
              <Descriptions.Item label="涉及角色">
                <Space wrap>
                  {planData.character_focus.map((char, idx) => (
                    <Tag key={idx} color="cyan">{char}</Tag>
                  ))}
                </Space>
              </Descriptions.Item>
              {planData.scenes && planData.scenes.length > 0 && (
                <Descriptions.Item label="场景规划">
                  <Space direction="vertical" size="small" style={{ width: '100%' }}>
                    {planData.scenes.map((scene, idx) => (
                      <Card key={idx} size="small" style={{ backgroundColor: '#fafafa' }}>
                        <div style={{ marginBottom: 4 }}>
                          <strong>📍 地点：</strong>{scene.location}
                        </div>
                        <div style={{ marginBottom: 4 }}>
                          <strong>👥 角色：</strong>
                          <Space size="small" wrap style={{ marginLeft: 8 }}>
                            {scene.characters.map((char, charIdx) => (
                              <Tag key={charIdx}>{char}</Tag>
                            ))}
                          </Space>
                        </div>
                        <div>
                          <strong>🎯 目的：</strong>{scene.purpose}
                        </div>
                      </Card>
                    ))}
                  </Space>
                </Descriptions.Item>
              )}
            </Descriptions>
            <Alert
              message="提示"
              description="这些是AI在大纲展开时生成的规划信息，可以作为创作章节内容时的参考。"
              type="info"
              showIcon
              style={{ marginTop: 16 }}
            />
          </div>
        ),
        okText: '关闭',
      });
    } catch (error) {
      console.error('解析展开规划失败:', error);
      message.error('展开规划数据格式错误');
    }
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{
        position: 'sticky',
        top: 0,
        zIndex: 10,
        backgroundColor: '#fff',
        padding: isMobile ? '12px 0' : '16px 0',
        marginBottom: isMobile ? 12 : 16,
        borderBottom: '1px solid #f0f0f0',
        display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        gap: isMobile ? 12 : 0,
        justifyContent: 'space-between',
        alignItems: isMobile ? 'stretch' : 'center'
      }}>
        <h2 style={{ margin: 0, fontSize: isMobile ? 18 : 24 }}>章节管理</h2>
        <Space direction={isMobile ? 'vertical' : 'horizontal'} style={{ width: isMobile ? '100%' : 'auto' }}>
          <Button
            type="primary"
            icon={<RocketOutlined />}
            onClick={handleOpenBatchGenerate}
            disabled={chapters.length === 0}
            block={isMobile}
            size={isMobile ? 'middle' : 'middle'}
            style={{ background: '#722ed1', borderColor: '#722ed1' }}
          >
            批量生成
          </Button>
          <Button
            type="default"
            icon={<DownloadOutlined />}
            onClick={handleExport}
            disabled={chapters.length === 0}
            block={isMobile}
            size={isMobile ? 'middle' : 'middle'}
          >
            导出为TXT
          </Button>
          {!isMobile && <Tag color="blue">章节由大纲管理，请在大纲页面添加/删除</Tag>}
        </Space>
      </div>

      <div style={{ flex: 1, overflowY: 'auto' }}>
        {chapters.length === 0 ? (
          <Empty description="还没有章节，开始创作吧！" />
        ) : (
          <Collapse
            bordered={false}
            defaultActiveKey={groupedChapters.map((_, idx) => idx.toString())}
            expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
            style={{ background: 'transparent' }}
          >
            {groupedChapters.map((group, groupIndex) => (
              <Collapse.Panel
                key={groupIndex.toString()}
                header={
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <Tag color={group.outlineId ? 'blue' : 'default'} style={{ margin: 0 }}>
                      {group.outlineId ? `📖 大纲 ${group.outlineOrder}` : '📝 未分类'}
                    </Tag>
                    <span style={{ fontWeight: 600, fontSize: 16 }}>
                      {group.outlineTitle}
                    </span>
                    <Badge
                      count={`${group.chapters.length} 章`}
                      style={{ backgroundColor: '#52c41a' }}
                    />
                    <Badge
                      count={`${group.chapters.reduce((sum, ch) => sum + (ch.word_count || 0), 0)} 字`}
                      style={{ backgroundColor: '#1890ff' }}
                    />
                  </div>
                }
                style={{
                  marginBottom: 16,
                  background: '#fff',
                  borderRadius: 8,
                  border: '1px solid #f0f0f0',
                }}
              >
                <List
                  dataSource={group.chapters}
                  renderItem={(item) => (
                    <List.Item
                      style={{
                        padding: '16px 0',
                        borderRadius: 8,
                        transition: 'background 0.3s ease',
                        flexDirection: isMobile ? 'column' : 'row',
                        alignItems: isMobile ? 'flex-start' : 'center',
                      }}
                      actions={isMobile ? undefined : [
                  <Button
                    icon={<EditOutlined />}
                    onClick={() => handleOpenEditor(item.id)}
                  >
                    编辑内容
                  </Button>,
                  (() => {
                    const task = analysisTasksMap[item.id];
                    const isAnalyzing = task && (task.status === 'pending' || task.status === 'running');
                    const hasContent = item.content && item.content.trim() !== '';
                    
                    return (
                      <Tooltip
                        title={
                          !hasContent ? '请先生成章节内容' :
                          isAnalyzing ? '分析进行中，请稍候...' :
                          ''
                        }
                      >
                        <Button
                          icon={isAnalyzing ? <SyncOutlined spin /> : <FundOutlined />}
                          onClick={() => handleShowAnalysis(item.id)}
                          disabled={!hasContent || isAnalyzing}
                          loading={isAnalyzing}
                        >
                          {isAnalyzing ? '分析中' : '查看分析'}
                        </Button>
                      </Tooltip>
                    );
                  })(),
                  <Button
                    type="text"
                    icon={<SettingOutlined />}
                    onClick={() => handleOpenModal(item.id)}
                  >
                    修改信息
                  </Button>,
                      ]}
                    >
                      <div style={{ width: '100%' }}>
                        <List.Item.Meta
                          avatar={!isMobile && <FileTextOutlined style={{ fontSize: 32, color: '#1890ff' }} />}
                          title={
                            <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 4 : 8, flexWrap: 'wrap', fontSize: isMobile ? 14 : 16 }}>
                              <span>
                                第{item.chapter_number}章：{item.title}
                              </span>
                              <Tag color={getStatusColor(item.status)}>{getStatusText(item.status)}</Tag>
                              <Badge count={`${item.word_count || 0}字`} style={{ backgroundColor: '#52c41a' }} />
                              {renderAnalysisStatus(item.id)}
                              {item.expansion_plan && (
                                <Tooltip title="已有展开规划，点击信息图标查看详情">
                                  <Tag icon={<CheckCircleOutlined />} color="blue">
                                    已展开
                                  </Tag>
                                </Tooltip>
                              )}
                              {!canGenerateChapter(item) && (
                                <Tooltip title={getGenerateDisabledReason(item)}>
                                  <Tag icon={<LockOutlined />} color="warning">
                                    需前置章节
                                  </Tag>
                                </Tooltip>
                              )}
                              {item.expansion_plan && (
                                <Tooltip title="查看展开规划详情">
                                  <InfoCircleOutlined
                                    style={{ color: '#1890ff', cursor: 'pointer', fontSize: 16 }}
                                    onClick={(e) => {
                                      e.stopPropagation();
                                      showExpansionPlanModal(item);
                                    }}
                                  />
                                </Tooltip>
                              )}
                            </div>
                          }
                          description={
                            item.content ? (
                              <div style={{ marginTop: 8, color: 'rgba(0,0,0,0.65)', lineHeight: 1.6, fontSize: isMobile ? 12 : 14 }}>
                                {item.content.substring(0, isMobile ? 80 : 150)}
                                {item.content.length > (isMobile ? 80 : 150) && '...'}
                              </div>
                            ) : (
                              <span style={{ color: 'rgba(0,0,0,0.45)', fontSize: isMobile ? 12 : 14 }}>暂无内容</span>
                            )
                          }
                        />
                        
                        {isMobile && (
                          <Space style={{ marginTop: 12, width: '100%', justifyContent: 'flex-end' }} wrap>
                            <Button
                              type="text"
                              icon={<EditOutlined />}
                              onClick={() => handleOpenEditor(item.id)}
                              size="small"
                              title="编辑内容"
                            />
                            {(() => {
                              const task = analysisTasksMap[item.id];
                              const isAnalyzing = task && (task.status === 'pending' || task.status === 'running');
                              const hasContent = item.content && item.content.trim() !== '';
                              
                              return (
                                <Tooltip
                                  title={
                                    !hasContent ? '请先生成章节内容' :
                                    isAnalyzing ? '分析中' :
                                    '查看分析'
                                  }
                                >
                                  <Button
                                    type="text"
                                    icon={isAnalyzing ? <SyncOutlined spin /> : <FundOutlined />}
                                    onClick={() => handleShowAnalysis(item.id)}
                                    size="small"
                                    disabled={!hasContent || isAnalyzing}
                                    loading={isAnalyzing}
                                  />
                                </Tooltip>
                              );
                            })()}
                            <Button
                              type="text"
                              icon={<SettingOutlined />}
                              onClick={() => handleOpenModal(item.id)}
                              size="small"
                              title="修改信息"
                            />
                          </Space>
                        )}
                      </div>
                    </List.Item>
                  )}
                />
              </Collapse.Panel>
            ))}
          </Collapse>
        )}
      </div>

      <Modal
        title={editingId ? '编辑章节信息' : '添加章节'}
        open={isModalOpen}
        onCancel={() => setIsModalOpen(false)}
        footer={null}
        centered={!isMobile}
        width={isMobile ? 'calc(100% - 32px)' : 520}
        style={isMobile ? {
          top: 20,
          paddingBottom: 0,
          maxWidth: 'calc(100vw - 32px)',
          margin: '0 16px'
        } : undefined}
        styles={{
          body: {
            maxHeight: isMobile ? 'calc(100vh - 150px)' : 'calc(80vh - 110px)',
            overflowY: 'auto'
          }
        }}
      >
        <Form form={form} layout="vertical" onFinish={handleSubmit}>
          <Form.Item
            label="章节标题"
            name="title"
            tooltip="章节标题由大纲管理，建议在大纲页面统一修改"
          >
            <Input placeholder="输入章节标题" disabled />
          </Form.Item>

          <Form.Item
            label="章节序号"
            name="chapter_number"
            tooltip="章节序号由大纲的顺序决定，无法修改。请在大纲页面使用上移/下移功能调整顺序"
          >
            <Input type="number" placeholder="章节排序序号" disabled />
          </Form.Item>

          <Form.Item label="状态" name="status">
            <Select placeholder="选择状态">
              <Select.Option value="draft">草稿</Select.Option>
              <Select.Option value="writing">创作中</Select.Option>
              <Select.Option value="completed">已完成</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item>
            <Space style={{ float: 'right' }}>
              <Button onClick={() => setIsModalOpen(false)}>取消</Button>
              <Button type="primary" htmlType="submit">
                更新
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="编辑章节内容"
        open={isEditorOpen}
        onCancel={() => {
          if (isGenerating) {
            message.warning('AI正在创作中，请等待完成后再关闭');
            return;
          }
          setIsEditorOpen(false);
        }}
        closable={!isGenerating}
        maskClosable={!isGenerating}
        keyboard={!isGenerating}
        width={isMobile ? 'calc(100% - 32px)' : '85%'}
        centered={!isMobile}
        style={isMobile ? {
          top: 20,
          paddingBottom: 0,
          maxWidth: 'calc(100vw - 32px)',
          margin: '0 16px'
        } : undefined}
        styles={{
          body: {
            maxHeight: isMobile ? 'calc(100vh - 150px)' : 'calc(100vh - 110px)',
            overflowY: 'auto',
            padding: isMobile ? '16px 12px' : '8px'
          }
        }}
        footer={null}
      >
        <Form form={editorForm} layout="vertical" onFinish={handleEditorSubmit}>
          <Form.Item
            label="章节标题"
            tooltip="章节标题由大纲统一管理，建议在大纲页面修改以保持一致性"
          >
            <Space.Compact style={{ width: '100%' }}>
              <Form.Item
                name="title"
                noStyle
              >
                <Input size="large" disabled style={{ flex: 1 }} />
              </Form.Item>
              {editingId && (() => {
                const currentChapter = chapters.find(c => c.id === editingId);
                const canGenerate = currentChapter ? canGenerateChapter(currentChapter) : false;
                const disabledReason = currentChapter ? getGenerateDisabledReason(currentChapter) : '';
                
                return (
                  <Tooltip title={!canGenerate ? disabledReason : '根据大纲和前置章节内容创作'}>
                    <Button
                      type="primary"
                      icon={canGenerate ? <ThunderboltOutlined /> : <LockOutlined />}
                      onClick={() => currentChapter && showGenerateModal(currentChapter)}
                      loading={isContinuing}
                      disabled={!canGenerate}
                      danger={!canGenerate}
                      size="large"
                      style={{ fontWeight: 'bold' }}
                    >
                      {isMobile ? 'AI创作' : 'AI创作章节内容'}
                    </Button>
                  </Tooltip>
                );
              })()}
            </Space.Compact>
          </Form.Item>

          <Form.Item
            label="写作风格"
            tooltip="选择AI创作时使用的写作风格，可在写作风格菜单中管理"
            required
          >
            <Select
              placeholder="请选择写作风格"
              value={selectedStyleId}
              onChange={setSelectedStyleId}
              size="large"
              disabled={isGenerating}
              style={{ width: '100%' }}
              status={!selectedStyleId ? 'error' : undefined}
            >
              {writingStyles.map(style => (
                <Select.Option key={style.id} value={style.id}>
                  {style.name}
                  {style.is_default && ' (默认)'}
                  {style.description && ` - ${style.description}`}
                </Select.Option>
              ))}
            </Select>
            {!selectedStyleId && (
              <div style={{ color: '#ff4d4f', fontSize: 12, marginTop: 4 }}>
                请选择写作风格
              </div>
            )}
          </Form.Item>

          <Form.Item
            label="目标字数"
            tooltip="AI生成章节时的目标字数，实际生成字数可能略有偏差"
          >
            <InputNumber
              min={500}
              max={10000}
              step={100}
              value={targetWordCount}
              onChange={(value) => setTargetWordCount(value || 3000)}
              size="large"
              disabled={isGenerating}
              style={{ width: '100%' }}
              formatter={(value) => `${value} 字`}
              parser={(value) => value?.replace(' 字', '') as any}
            />
            <div style={{ color: '#666', fontSize: 12, marginTop: 4 }}>
              建议范围：500-10000字，默认3000字
            </div>
          </Form.Item>

          <Form.Item label="章节内容" name="content">
            <TextArea
              ref={contentTextAreaRef}
              rows={isMobile ? 12 : 20}
              placeholder="开始写作..."
              style={{ fontFamily: 'monospace', fontSize: isMobile ? 12 : 14 }}
              disabled={isGenerating}
            />
          </Form.Item>

          <Form.Item>
            <Space style={{ width: '100%', justifyContent: 'flex-end', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'stretch' : 'center' }}>
              <Space style={{ width: isMobile ? '100%' : 'auto' }}>
                <Button
                  onClick={() => {
                    if (isGenerating) {
                      message.warning('AI正在创作中，请等待完成后再关闭');
                      return;
                    }
                    setIsEditorOpen(false);
                  }}
                  block={isMobile}
                  disabled={isGenerating}
                >
                  取消
                </Button>
                <Button
                  type="primary"
                  htmlType="submit"
                  block={isMobile}
                  disabled={isGenerating}
                >
                  保存章节
                </Button>
              </Space>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      {analysisChapterId && (
        <ChapterAnalysis
          chapterId={analysisChapterId}
          visible={analysisVisible}
          onClose={() => {
            setAnalysisVisible(false);
            
            // 延迟500ms后刷新该章节的分析状态，给后端足够时间完成数据库写入
            if (analysisChapterId) {
              const chapterIdToRefresh = analysisChapterId;
              
              setTimeout(() => {
                fetch(`/api/chapters/${chapterIdToRefresh}/analysis/status`)
                  .then(response => {
                    if (response.ok) {
                      return response.json();
                    }
                    throw new Error('获取状态失败');
                  })
                  .then((task: AnalysisTask) => {
                    setAnalysisTasksMap(prev => ({
                      ...prev,
                      [chapterIdToRefresh]: task
                    }));
                    
                    // 如果任务正在运行，启动轮询
                    if (task.status === 'pending' || task.status === 'running') {
                      startPollingTask(chapterIdToRefresh);
                    }
                  })
                  .catch(error => {
                    console.error('刷新分析状态失败:', error);
                    // 如果查询失败，再延迟尝试一次
                    setTimeout(() => {
                      fetch(`/api/chapters/${chapterIdToRefresh}/analysis/status`)
                        .then(response => response.ok ? response.json() : null)
                        .then((task: AnalysisTask | null) => {
                          if (task) {
                            setAnalysisTasksMap(prev => ({
                              ...prev,
                              [chapterIdToRefresh]: task
                            }));
                            if (task.status === 'pending' || task.status === 'running') {
                              startPollingTask(chapterIdToRefresh);
                            }
                          }
                        })
                        .catch(err => console.error('第二次刷新失败:', err));
                    }, 1000);
                  });
              }, 500);
            }
            
            setAnalysisChapterId(null);
          }}
        />
      )}

      {/* 批量生成对话框 */}
      <Modal
        title={
          <Space>
            <RocketOutlined style={{ color: '#722ed1' }} />
            <span>批量生成章节内容</span>
          </Space>
        }
        open={batchGenerateVisible}
        onCancel={() => {
          if (batchGenerating) {
            Modal.confirm({
              title: '确认取消',
              content: '批量生成正在进行中，确定要取消吗？',
              okText: '确定取消',
              cancelText: '继续生成',
              onOk: () => {
                handleCancelBatchGenerate();
                setBatchGenerateVisible(false);
              },
            });
          } else {
            setBatchGenerateVisible(false);
          }
        }}
        footer={null}
        width={600}
        centered
        closable={!batchGenerating}
        maskClosable={!batchGenerating}
      >
        {!batchGenerating ? (
          <Form
            layout="vertical"
            onFinish={handleBatchGenerate}
            initialValues={{
              startChapterNumber: sortedChapters.find(ch => !ch.content || ch.content.trim() === '')?.chapter_number || 1,
              count: 5,
              enableAnalysis: false,
              styleId: selectedStyleId,
              targetWordCount: 3000,
            }}
          >
            <Alert
              message="批量生成说明"
              description={
                <ul style={{ margin: '8px 0 0 0', paddingLeft: 20 }}>
                  <li>严格按章节序号顺序生成，不可跳过</li>
                  <li>所有章节使用相同的写作风格和目标字数</li>
                  <li>任一章节失败则终止后续生成</li>
                </ul>
              }
              type="info"
              showIcon
              style={{ marginBottom: 16 }}
            />

            <Form.Item
              label="起始章节"
              name="startChapterNumber"
              rules={[{ required: true, message: '请选择起始章节' }]}
            >
              <Select placeholder="选择起始章节" size="large">
                {sortedChapters
                  .filter(ch => !ch.content || ch.content.trim() === '')
                  .filter(ch => canGenerateChapter(ch))
                  .map(ch => (
                    <Select.Option key={ch.id} value={ch.chapter_number}>
                      第{ch.chapter_number}章：{ch.title}
                    </Select.Option>
                  ))}
              </Select>
            </Form.Item>

            <Form.Item
              label="生成数量"
              name="count"
              rules={[{ required: true, message: '请选择生成数量' }]}
            >
              <Radio.Group buttonStyle="solid" size="large">
                <Radio.Button value={5}>5章</Radio.Button>
                <Radio.Button value={10}>10章</Radio.Button>
                <Radio.Button value={15}>15章</Radio.Button>
                <Radio.Button value={20}>20章</Radio.Button>
              </Radio.Group>
            </Form.Item>

            <Form.Item
              label="写作风格"
              name="styleId"
              rules={[{ required: true, message: '请选择写作风格' }]}
              tooltip="批量生成时所有章节使用相同的写作风格"
            >
              <Select
                placeholder="请选择写作风格"
                size="large"
                showSearch
                optionFilterProp="children"
              >
                {writingStyles.map(style => (
                  <Select.Option key={style.id} value={style.id}>
                    {style.name}
                    {style.is_default && ' (默认)'}
                    {style.description && ` - ${style.description}`}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>

            <Form.Item
              label="目标字数"
              tooltip="AI生成章节时的目标字数，实际生成字数可能略有偏差"
            >
              <Form.Item
                name="targetWordCount"
                rules={[{ required: true, message: '请设置目标字数' }]}
                noStyle
              >
                <InputNumber
                  min={500}
                  max={10000}
                  step={100}
                  size="large"
                  style={{ width: '100%' }}
                  formatter={(value) => `${value} 字`}
                  parser={(value) => value?.replace(' 字', '') as any}
                />
              </Form.Item>
              <div style={{ color: '#666', fontSize: 12, marginTop: 4 }}>
                建议范围：500-10000字，默认3000字
              </div>
            </Form.Item>

            <Form.Item
              label="同步分析"
              name="enableAnalysis"
              tooltip="开启后每章生成完立即分析，会增加约50%耗时，但能提升后续章节质量"
            >
              <Radio.Group>
                <Radio value={false}>
                  <Space direction="vertical" size={0}>
                    <span>不分析（推荐）</span>
                    <span style={{ fontSize: 12, color: '#666' }}>生成更快，后续可手动分析</span>
                  </Space>
                </Radio>
                <Radio value={true}>
                  <Space direction="vertical" size={0}>
                    <span>同步分析</span>
                    <span style={{ fontSize: 12, color: '#ff9800' }}>增加约50%耗时，提升质量</span>
                  </Space>
                </Radio>
              </Radio.Group>
            </Form.Item>

            <Form.Item>
              <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
                <Button onClick={() => setBatchGenerateVisible(false)}>
                  取消
                </Button>
                <Button type="primary" htmlType="submit" icon={<RocketOutlined />}>
                  开始批量生成
                </Button>
              </Space>
            </Form.Item>
          </Form>
        ) : (
          <div>
            <div style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span>生成进度：</span>
                <span>
                  <strong style={{ color: '#1890ff', fontSize: 18 }}>
                    {batchProgress?.completed || 0} / {batchProgress?.total || 0}
                  </strong>
                  章
                </span>
              </div>
              <Progress
                percent={batchProgress ? Math.round((batchProgress.completed / batchProgress.total) * 100) : 0}
                status={batchProgress?.status === 'failed' ? 'exception' : 'active'}
                strokeColor={{
                  '0%': '#722ed1',
                  '100%': '#1890ff',
                }}
              />
            </div>

            {batchProgress?.current_chapter_number && (
              <Alert
                message={`正在生成第 ${batchProgress.current_chapter_number} 章...`}
                type="info"
                showIcon
                icon={<SyncOutlined spin />}
                style={{ marginBottom: 16 }}
              />
            )}

            {batchProgress?.estimated_time_minutes && batchProgress.completed === 0 && (
              <div style={{ marginBottom: 16, color: '#666', fontSize: 13 }}>
                ⏱️ 预计耗时：约 {batchProgress.estimated_time_minutes} 分钟
              </div>
            )}

            <Alert
              message="温馨提示"
              description={
                <ul style={{ margin: '8px 0 0 0', paddingLeft: 20 }}>
                  <li>批量生成需要一定时间，可以切换到其他页面</li>
                  <li>关闭页面后重新打开，会自动恢复任务进度</li>
                  <li>可以随时点击"取消任务"按钮中止生成</li>
                </ul>
              }
              type="warning"
              showIcon
              style={{ marginBottom: 16 }}
            />

            <div style={{ textAlign: 'center' }}>
              <Button
                danger
                icon={<StopOutlined />}
                onClick={() => {
                  Modal.confirm({
                    title: '确认取消',
                    content: '确定要取消批量生成吗？已生成的章节将保留。',
                    okText: '确定取消',
                    cancelText: '继续生成',
                    okButtonProps: { danger: true },
                    onOk: handleCancelBatchGenerate,
                  });
                }}
              >
                取消任务
              </Button>
            </div>
          </div>
        )}
      </Modal>

      {/* 单章节生成进度显示 */}
      <SSELoadingOverlay
        loading={isGenerating}
        progress={singleChapterProgress}
        message={singleChapterProgressMessage}
      />
    </div>
  );
}