import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { 
  Button, 
  Card, 
  Form, 
  Input, 
  message, 
  Spin, 
  Space, 
  Alert,
  Modal,
  Descriptions,
  Tag,
  Select,
  Radio,
  InputNumber,
  Row,
  Col,
  Divider
} from 'antd';
import { 
  ArrowLeftOutlined, 
  RobotOutlined, 
  CheckOutlined,
  DownloadOutlined,
  EditOutlined,
  UnorderedListOutlined,
  EyeOutlined
} from '@ant-design/icons';
import { storage } from '../utils/indexedDB';
import { Novel, NovelGenerationParams, ChapterOutline } from '../types';
import { useOllama } from '../contexts/OllamaContext';
import { NovelSettingManager } from '../utils/novelSettingManager';

const { TextArea } = Input;
const { Option } = Select;

// 小说题材选项
const NOVEL_GENRES = [
  '穿越',
  '都市', 
  '修仙',
  '武侠',
  '玄幻',
  '科幻',
  '言情',
  '历史',
  '游戏',
  '灵异',
  '军事',
  '悬疑',
  '其他'
];

// 字数选项
const WORD_COUNT_OPTIONS = [
  { label: '5万字 (短篇)', value: 50000 },
  { label: '10万字 (中篇)', value: 100000 },
  { label: '20万字 (长篇)', value: 200000 },
  { label: '30万字 (超长篇)', value: 300000 },
  { label: '50万字 (史诗篇)', value: 500000 },
  { label: '100万字 (巨著)', value: 1000000 }
];

const NovelGenerate: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [novel, setNovel] = useState<Novel | null>(null);
  const [loading, setLoading] = useState(false);
  const [generating, setGenerating] = useState(false);
  const [generatedSettings, setGeneratedSettings] = useState<any>(null);
  const [previewVisible, setPreviewVisible] = useState(false);
  const [editModalVisible, setEditModalVisible] = useState(false);
  const [editForm] = Form.useForm();
  const [form] = Form.useForm();
  const [chapterListVisible, setChapterListVisible] = useState(false);
  const [editingChapter, setEditingChapter] = useState<ChapterOutline | null>(null);
  const [chapterEditModalVisible, setChapterEditModalVisible] = useState(false);
  const [chapterEditForm] = Form.useForm();
  const [viewingChapter, setViewingChapter] = useState<ChapterOutline | null>(null);
  const [chapterViewModalVisible, setChapterViewModalVisible] = useState(false);
  const [forceUpdate, setForceUpdate] = useState(0); // 添加强制更新状态
  const { chat } = useOllama();

  // 辅助函数：生成模块名称
  const getModuleName = (index: number): string => {
    const moduleNames = ['起始阶段', '发展阶段', '转折阶段', '高潮阶段', '解决阶段', '结局阶段'];
    return moduleNames[index % moduleNames.length];
  };

  // 辅助函数：生成模块描述
  const getModuleDescription = (index: number): string => {
    const descriptions = [
      '开篇设定，引入主要冲突和人物',
      '情节推进，矛盾升级，人物成长',
      '故事转折，新的挑战和机遇',
      '核心冲突爆发，达到最高潮',
      '矛盾逐步解决，铺垫结局',
      '收尾总结，主题升华'
    ];
    return descriptions[index % descriptions.length];
  };

  // 辅助函数：生成章节范围
  const getChapterRange = (moduleIndex: number, totalChapters: number, totalModules: number): string => {
    const chaptersPerModule = Math.ceil(totalChapters / totalModules);
    const start = moduleIndex * chaptersPerModule + 1;
    const end = Math.min((moduleIndex + 1) * chaptersPerModule, totalChapters);
    return `${start}-${end}`;
  };

  useEffect(() => {
    if (id) {
      loadNovel();
    }
  }, [id]);

  const loadNovel = async () => {
    if (!id) return;
    
    try {
      setLoading(true);
      const novels = await storage.getNovels();
      const currentNovel = novels.find((n: Novel) => n.id === id);
      
      if (!currentNovel) {
        message.error('小说不存在');
        navigate('/novels');
        return;
      }
      
      setNovel(currentNovel);
      
      if (currentNovel.generatedSettings) {
        setGeneratedSettings(currentNovel.generatedSettings);
      }
      
      form.setFieldsValue({
        title: currentNovel.title,
        genre: currentNovel.genre === '未分类' ? undefined : currentNovel.genre,
        targetWordCount: currentNovel.generatedSettings?.targetWordCount || 50000,
        customRequirements: ''
      });
    } catch (error) {
      message.error('加载数据失败');
    } finally {
      setLoading(false);
    }
  };

  const handleGenerateSettings = async () => {
    if (!novel) return;

    try {
      const values = await form.validateFields();
      setGenerating(true);
      
      const params: NovelGenerationParams = {
        title: values.title,
        genre: values.genre || '未分类',
        customRequirements: values.customRequirements
      };

      // 计算章节数量和每章字数（每章900-1200字，平均1050字）
      const avgWordsPerChapter = 1050; // 平均每章字数
      const targetWordCount = params.targetWordCount || 50000;
      const chapterCount = Math.round(targetWordCount / avgWordsPerChapter); // 5万字约48章
      const wordsPerChapterMin = 900;  // 最少字数
      const wordsPerChapterMax = 1200; // 最多字数
      const moduleCount = params.preferredModuleCount || Math.max(3, Math.round(chapterCount / 15)); // 每15章左右一个模块

      // 只生成基础设定，不包含任何章节规划
      message.info({ content: '正在生成基础设定...', duration: 2 });
      
      const basePrompt = `请为小说《${params.title}》${params.genre ? `（${params.genre}题材）` : ''}生成基础创作设定。

## 📏 篇幅要求
- **总目标字数**：${targetWordCount.toLocaleString()}字
- **章节数量**：${chapterCount}章
- **每章字数**：${wordsPerChapterMin}-${wordsPerChapterMax}字（平均${avgWordsPerChapter}字）
- **模块划分**：${moduleCount}个模块

${params.customRequirements ? `## 🎯 特殊要求\n${params.customRequirements}\n\n` : ''}

请按照以下格式生成基础设定：

## 📖 故事大纲
简要描述整个故事的核心情节和主题（150字以内）

## 🏗️ 情节结构
按模块划分整个故事的结构：${Array.from({length: moduleCount}, (_, i) => `
- 模块${i + 1}：${getModuleName(i)}（第${getChapterRange(i, chapterCount, moduleCount)}章）- ${getModuleDescription(i)}`).join('')}

## 👥 人物设定
主要人物的详细设定，包括：
- 主角：姓名、性格、背景、目标、能力特长（150字内）
- 配角：重要配角设定（至少3个，每个100字内）
- 反派：对立角色设定（100字内）

请开始生成基础设定：`;

      const baseResponse = await chat(basePrompt, `小说《${novel.title}》的基础设定生成`);
      
      // 解析基础设定
      const baseSettings = parseBaseSettings(baseResponse);
      
      // 生成初始的章节规划结构（完全空的章节列表）
      const initialSettings = {
        storyOutline: baseSettings.storyOutline,
        plotStructure: baseSettings.plotStructure,
        characters: baseSettings.characters,
        targetWordCount: targetWordCount,
        chapterCount: chapterCount,
        moduleCount: moduleCount,
        chapters: [] as any[], // 完全空的章节列表
        chapterOutline: ''
      };
      
      setGeneratedSettings(initialSettings);
      message.success('基础设定生成成功！现在可以开始手动生成章节标题和细纲。');
      
    } catch (error: any) {
      message.error(error.message || 'AI生成失败，请重试');
    } finally {
      setGenerating(false);
    }
  };

  // 手动生成单个章节规划
  const handleGenerateSingleChapter = async (chapterNumber: number) => {
    if (!novel || !generatedSettings) return;

    try {
      const params = {
        targetWordCount: generatedSettings.targetWordCount,
        chapterCount: generatedSettings.chapterCount,
        moduleCount: generatedSettings.moduleCount,
        avgWordsPerChapter: Math.round(generatedSettings.targetWordCount / generatedSettings.chapterCount),
        wordsPerChapterMin: 900,
        wordsPerChapterMax: 1200
      };

      // 计算当前章节应该属于哪个模块
      const moduleNumber = Math.min(Math.ceil(chapterNumber / Math.ceil(params.chapterCount / params.moduleCount)), params.moduleCount);

      message.info({ content: `正在生成第${chapterNumber}章的标题和细纲...`, duration: 2 });

      // 使用函数式状态更新获取最新的chapters
      const currentChapters = generatedSettings.chapters || [];

      const chapterPrompt = `基于以下小说设定，为第${chapterNumber}章生成详细规划。

## 小说基础设定

### 📖 故事大纲
${generatedSettings.storyOutline}

### 🏗️ 情节结构
${generatedSettings.plotStructure}

### 👥 人物设定
${generatedSettings.characters}

## 章节规划要求

**当前章节**：第${chapterNumber}章（共${params.chapterCount}章）
**所属模块**：模块${moduleNumber}
**每章字数**：${params.wordsPerChapterMin}-${params.wordsPerChapterMax}字

${currentChapters.length > 0 ? `## 前面章节概览\n\n${currentChapters.slice(-3).map((ch: any) => 
  `第${ch.chapterNumber}章：${ch.title}\n细纲：${ch.outline.substring(0, 50)}...`
).join('\n\n')}\n\n` : ''}

请按照以下格式生成第${chapterNumber}章的完整规划：

第${chapterNumber}章：章节标题 - 模块${moduleNumber}
细纲：本章的详细细纲描述，包括主要情节、人物发展、冲突转折等（100-200字）。
预计字数：1050字（范围900-1200字）

⚠️ **重要提醒**：
1. 章节细纲必须控制在100-200字之间，既要详细又不能过长
2. 要与前面章节自然衔接${chapterNumber > 1 ? '（这是后续章节的延续）' : '（这是开篇章节）'}
3. 严格按照格式生成，确保能正确解析

请开始生成第${chapterNumber}章的详细规划：`;

      const chapterResponse = await chat(chapterPrompt, `小说《${novel.title}》第${chapterNumber}章规划`);
      
      // 解析单个章节
      const parsedChapter = parseSingleChapter(chapterResponse, chapterNumber, moduleNumber, params);
      
      // 检查解析是否成功
      if (!parsedChapter || !parsedChapter.title || !parsedChapter.outline) {
        throw new Error('章节解析失败，请重试');
      }
      
      // 使用函数式状态更新，确保基于最新状态
      setGeneratedSettings((prevSettings: any) => {
        const currentChapters = prevSettings.chapters || [];
        
        // 添加到章节列表 - 深拷贝确保引用正确
        const updatedChapters = currentChapters.map((ch: any) => ({ ...ch }));
        
        // 替换或添加章节
        const existingIndex = updatedChapters.findIndex((ch: any) => ch.chapterNumber === chapterNumber);
        if (existingIndex >= 0) {
          updatedChapters[existingIndex] = { ...parsedChapter };
        } else {
          updatedChapters.push({ ...parsedChapter });
        }
        
        // 按章节号排序
        updatedChapters.sort((a: any, b: any) => a.chapterNumber - b.chapterNumber);
        
        // 返回全新的设置对象，确保React检测到变化
        const newSettings = {
          ...prevSettings,
          chapters: updatedChapters,
          // 添加一个时间戳确保对象总是新的
          lastUpdated: Date.now()
        };
        
        // 强制触发UI更新
        setTimeout(() => {
          setForceUpdate(prev => prev + 1);
        }, 50);
        
        return newSettings;
      });
      
      message.success(`第${chapterNumber}章的标题和细纲生成成功！`);
      
    } catch (error: any) {
      message.error(error.message || '章节生成失败，请重试');
    }
  };

  // 批量生成多个章节规划
  const handleGenerateBatchChapters = async (startChapter: number, endChapter: number) => {
    if (!novel || !generatedSettings) return;

    try {
      setGenerating(true);
      
      for (let chapterNum = startChapter; chapterNum <= endChapter; chapterNum++) {
        // 生成单个章节
        await handleGenerateSingleChapter(chapterNum);
        
        // 等待更长时间，确保状态更新和界面渲染完成
        await new Promise(resolve => setTimeout(resolve, 300));
      }
      
      message.success(`第${startChapter}-${endChapter}章的标题和细纲批量生成成功！`);
      
    } catch (error: any) {
      message.error(error.message || '批量生成失败，请重试');
    } finally {
      setGenerating(false);
    }
  };

  // 解析单个章节
  const parseSingleChapter = (response: string, chapterNumber: number, moduleNumber: number, metadata: any) => {
    const lines = response.split('\n');
    let chapter: any = {
      chapterNumber: chapterNumber,
      title: `第${chapterNumber}章`,
      moduleNumber: moduleNumber,
      outline: '',
      estimatedWords: metadata.avgWordsPerChapter
    };

    let foundChapter = false;
    let inOutline = false;

    lines.forEach(line => {
      const trimmedLine = line.trim();
      
      // 匹配章节标题行：第1章：意外穿越 - 模块1
      const chapterMatch = trimmedLine.match(/第(\d+)章[：:]\s*(.+?)\s*[-—]\s*模块(\d+)/);
      if (chapterMatch) {
        const matchedChapterNum = parseInt(chapterMatch[1]);
        if (matchedChapterNum === chapterNumber) {
          chapter.title = chapterMatch[2].trim();
          chapter.moduleNumber = parseInt(chapterMatch[3]);
          foundChapter = true;
        }
      } else if (trimmedLine.includes('细纲：')) {
        // 开始收集细纲内容
        const outlineStart = trimmedLine.indexOf('细纲：') + 3;
        chapter.outline = trimmedLine.substring(outlineStart).trim();
        inOutline = true;
      } else if (trimmedLine.includes('预计字数：')) {
        // 解析字数
        const wordMatch = trimmedLine.match(/(\d+)/);
        if (wordMatch) {
          chapter.estimatedWords = parseInt(wordMatch[1]);
        }
        inOutline = false; // 细纲结束
      } else if (inOutline && trimmedLine && !trimmedLine.includes('第') && !trimmedLine.includes('模块')) {
        // 继续收集细纲内容
        if (chapter.outline) {
          chapter.outline += ' ' + trimmedLine;
        } else {
          chapter.outline = trimmedLine;
        }
      }
    });

    // 如果没有找到章节标题，使用默认值
    if (!foundChapter) {
      console.warn(`章节${chapterNumber}解析失败，使用默认值`);
      chapter.title = `第${chapterNumber}章`;
    }

    // 确保细纲不为空
    if (!chapter.outline) {
      chapter.outline = `第${chapterNumber}章的详细细纲（待补充）`;
    }

    return chapter;
  };

  const parseBaseSettings = (response: string) => {
    const settings: any = {
      storyOutline: '',
      plotStructure: '',
      characters: ''
    };

    const lines = response.split('\n');
    let currentSection = '';
    let content = '';

    lines.forEach(line => {
      if (line.startsWith('## ')) {
        if (currentSection && content) {
          switch(currentSection) {
            case '📖 故事大纲':
            case '故事大纲':
              settings.storyOutline = content.trim();
              break;
            case '🏗️ 情节结构':
            case '情节结构':
              settings.plotStructure = content.trim();
              break;
            case '👥 人物设定':
            case '人物设定':
              settings.characters = content.trim();
              break;
          }
        }
        currentSection = line.replace('## ', '').trim();
        content = '';
      } else if (line.trim()) {
        content += line + '\n';
      }
    });

    // 处理最后一个section
    if (currentSection && content) {
      if (currentSection.includes('故事大纲')) {
        settings.storyOutline = content.trim();
      } else if (currentSection.includes('情节结构')) {
        settings.plotStructure = content.trim();
      } else if (currentSection.includes('人物设定')) {
        settings.characters = content.trim();
      }
    }

    return settings;
  };

  const parseChapterBatch = (response: string, startChapter: number, metadata: any) => {
    const chapters: any[] = [];
    const lines = response.split('\n');
    let currentChapter: any = null;
    let expectedChapterNum = startChapter;

    lines.forEach(line => {
      // 匹配章节标题行：第1章：意外穿越 - 模块1
      const chapterMatch = line.match(/第(\d+)章[：:]\s*(.+?)\s*[-—]\s*模块(\d+)/);
      if (chapterMatch) {
        if (currentChapter && currentChapter.chapterNumber) {
          chapters.push(currentChapter);
        }
        currentChapter = {
          chapterNumber: parseInt(chapterMatch[1]),
          title: chapterMatch[2].trim(),
          moduleNumber: parseInt(chapterMatch[3]),
          outline: '',
          estimatedWords: metadata.avgWordsPerChapter
        };
        expectedChapterNum++;
      } else if (line.includes('细纲：') && currentChapter) {
        currentChapter.outline = line.replace('细纲：', '').trim();
      } else if (line.includes('预计字数：') && currentChapter) {
        const wordMatch = line.match(/(\d+)/);
        if (wordMatch) {
          currentChapter.estimatedWords = parseInt(wordMatch[1]);
        }
      } else if (line.trim() && currentChapter && !line.includes('第') && !line.includes('模块')) {
        if (currentChapter.outline) {
          currentChapter.outline += ' ' + line.trim();
        } else {
          currentChapter.outline = line.trim();
        }
      }
    });

    if (currentChapter && currentChapter.chapterNumber) {
      chapters.push(currentChapter);
    }

    return chapters;
  };

  const handleConfirmSettings = async () => {
    if (!novel || !generatedSettings || !id) return;

    try {
      // 确保保存所有章节信息，包括未生成的章节
      const completeSettings = {
        ...generatedSettings,
        // 确保章节数组包含所有章节的占位符
        chapters: Array.from({ length: generatedSettings.chapterCount }, (_, i) => {
          const chapterNum = i + 1;
          const existingChapter = generatedSettings.chapters?.find((ch: any) => ch.chapterNumber === chapterNum);
          
          // 如果该章节已存在，使用现有数据
          if (existingChapter) {
            return existingChapter;
          }
          
          // 如果该章节不存在，创建占位符
          return {
            chapterNumber: chapterNum,
            title: `第${chapterNum}章（待生成标题）`,
            moduleNumber: Math.min(Math.ceil(chapterNum / Math.ceil(generatedSettings.chapterCount / generatedSettings.moduleCount)), generatedSettings.moduleCount),
            outline: `第${chapterNum}章的细纲（待生成）`,
            estimatedWords: Math.round(generatedSettings.targetWordCount / generatedSettings.chapterCount),
            status: 'pending'
          };
        })
      };

      // 生成并保存设置文件
      const settingFilePath = await NovelSettingManager.generateAndSaveSettingFile(
        novel.title,
        completeSettings
      );

      // 更新小说记录
      await storage.updateNovel(id, {
        generatedSettings: completeSettings,
        settingFilePath,
        outline: completeSettings.storyOutline || novel.outline,
        targetWordCount: completeSettings.targetWordCount
      });

      message.success('设定已保存并生成了配置文件，现在可以开始创作章节！');
      
      // 更新本地状态
      setGeneratedSettings(completeSettings);
      
      // 重新加载数据
      await loadNovel();
      
    } catch (error: any) {
      message.error(error.message || '保存失败，请重试');
    }
  };

  const handleEditSettings = () => {
    if (generatedSettings) {
      editForm.setFieldsValue({
        storyOutline: generatedSettings.storyOutline,
        plotStructure: generatedSettings.plotStructure,
        characters: generatedSettings.characters,
        targetWordCount: generatedSettings.targetWordCount,
        chapterCount: generatedSettings.chapterCount,
        chapterOutline: generatedSettings.chapterOutline
      });
      setEditModalVisible(true);
    }
  };

  const handleSaveEdit = async () => {
    try {
      const values = await editForm.validateFields();
      
      if (!novel?.generatedSettings) return;

      // 更新generatedSettings
      const updatedSettings = {
        ...novel.generatedSettings,
        ...values
      };

      // 保存到数据库
      await storage.updateNovel(novel.id, {
        generatedSettings: updatedSettings
      });

      // 更新本地状态
      setNovel({
        ...novel,
        generatedSettings: updatedSettings
      });
      setGeneratedSettings(updatedSettings);

      setEditModalVisible(false);
      message.success('设定更新成功');
    } catch (error) {
      message.error('保存失败');
    }
  };

  const handleViewChapter = (chapter: ChapterOutline) => {
    setViewingChapter(chapter);
    setChapterViewModalVisible(true);
  };

  const handleEditChapter = (chapter: ChapterOutline) => {
    setEditingChapter(chapter);
    chapterEditForm.setFieldsValue({
      title: chapter.title,
      moduleNumber: chapter.moduleNumber,
      outline: chapter.outline,
      estimatedWords: chapter.estimatedWords
    });
    setChapterEditModalVisible(true);
  };

  const handleSaveChapterEdit = async () => {
    try {
      const values = await chapterEditForm.validateFields();
      
      if (!generatedSettings || !editingChapter) return;

      // 更新章节信息
      const updatedChapters = generatedSettings.chapters.map((chapter: any) => 
        chapter.chapterNumber === editingChapter.chapterNumber
          ? { ...chapter, ...values }
          : chapter
      );

      // 更新generatedSettings
      const updatedSettings = {
        ...generatedSettings,
        chapters: updatedChapters
      };

      setGeneratedSettings(updatedSettings);
      
      // 如果已保存设定，同时更新到数据库
      if (novel?.settingFilePath) {
        await storage.updateNovel(novel.id, {
          generatedSettings: updatedSettings
        });
      }

      setChapterEditModalVisible(false);
      chapterEditForm.resetFields();
      message.success('章节标题和细纲更新成功');
    } catch (error) {
      message.error('保存失败');
    }
  };

  const handleRegenerate = () => {
    setPreviewVisible(false);
    setGeneratedSettings(null);
  };

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <Spin size="large" tip="加载中..." />
      </div>
    );
  }

  if (!novel) {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <Spin size="large" />
      </div>
    );
  }

  return (
    <div>
      <Card
        title={
          <Space>
            <Button 
              icon={<ArrowLeftOutlined />} 
              onClick={() => navigate('/novels')}
              style={{ marginRight: '8px' }}
            />
            <span>AI 生成小说设定</span>
          </Space>
        }
        extra={
          novel.generatedSettings && (
            <Tag color="success">已完善设定</Tag>
          )
        }
        style={{ maxWidth: '800px', margin: '0 auto' }}
      >
        <Alert
          message="AI设定生成"
          description="输入小说基本要求，AI将为您生成完整的故事大纲、人物设定、章节规划等内容。生成的设定将直接在页面上展示。"
          type="info"
          showIcon
          style={{ marginBottom: '16px' }}
        />

        <Form
          form={form}
          layout="horizontal"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <Form.Item
            label="小说名称"
            name="title"
            rules={[{ required: true, message: '请输入小说名称' }]}
          >
            <Input placeholder="请输入小说名称" disabled={!!novel} />
          </Form.Item>

          <Form.Item
            label="题材类型"
            name="genre"
            rules={[{ required: true, message: '请选择题材类型' }]}
          >
            {novel?.genre ? (
              // 已有题材，只做展示
              <div>
                <Tag color="blue" style={{ fontSize: '14px', padding: '4px 12px' }}>
                  {novel.genre}
                </Tag>
                <span style={{ fontSize: '12px', color: '#8c8c8c', marginLeft: '8px' }}>
                  题材已确定
                </span>
              </div>
            ) : (
              // 还没有选择题材，显示选择框
              <Select 
                placeholder="请选择题材类型"
                showSearch
                style={{ width: '100%' }}
              >
                {NOVEL_GENRES.map(genre => (
                  <Option key={genre} value={genre}>
                    {genre}
                  </Option>
                ))}
              </Select>
            )}
          </Form.Item>

          <Form.Item
            label="目标字数"
            name="targetWordCount"
            rules={[{ required: true, message: '请选择目标字数' }]}
          >
            <Radio.Group 
              style={{ width: '100%' }}
              disabled={!!novel?.generatedSettings}
            >
              <Space wrap>
                {WORD_COUNT_OPTIONS.map(option => (
                  <Radio.Button key={option.value} value={option.value}>
                    {option.label}
                  </Radio.Button>
                ))}
              </Space>
            </Radio.Group>
            {novel?.generatedSettings && (
              <div style={{ fontSize: '12px', color: '#ff4d4f', marginTop: '4px' }}>
                字数已固定，不能修改
              </div>
            )}
          </Form.Item>

          <Form.Item
            label="特殊要求"
            name="customRequirements"
          >
            <TextArea 
              rows={2} 
              placeholder="可选：描述您对这部小说的特殊要求或想法"
              disabled={!!novel?.generatedSettings}
            />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 6 }}>
            <Space>
              <Button 
                type="primary" 
                icon={<RobotOutlined />}
                onClick={handleGenerateSettings}
                loading={generating}
                disabled={!!novel?.generatedSettings}
              >
                {generating ? 'AI生成中...' : 'AI生成设定'}
              </Button>
              
              
              {novel.generatedSettings && (
                <Button 
                  type="default"
                  onClick={() => setGeneratedSettings(novel.generatedSettings)}
                >
                  刷新显示
                </Button>
              )}
            </Space>
          </Form.Item>
        </Form>
      </Card>

      {/* 生成的设定内容直接展示 */}
      {generatedSettings && (
        <div style={{ marginTop: '24px', maxWidth: '1200px', margin: '0 auto' }}>
          {/* 设定概览和操作按钮 */}
          <Card 
            title="📊 小说设定已生成" 
            style={{ marginBottom: '16px' }}
            extra={
              <Space>
                <Button 
                  type="primary"
                  icon={<CheckOutlined />}
                  onClick={handleConfirmSettings}
                  disabled={!!novel?.settingFilePath}
                >
                  {novel?.settingFilePath ? '设定已保存' : '确认并保存'}
                </Button>
                <Button 
                  icon={<EditOutlined />}
                  onClick={() => setEditModalVisible(true)}
                >
                  编辑设定
                </Button>
              </Space>
            }
          >
            <Row gutter={16}>
              <Col span={6}>
                <div style={{ textAlign: 'center', padding: '12px', background: '#f0f9ff', borderRadius: '6px' }}>
                  <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#1890ff' }}>
                    {generatedSettings.targetWordCount.toLocaleString()}
                  </div>
                  <div style={{ fontSize: '12px', color: '#666', marginTop: '2px' }}>
                    目标字数
                  </div>
                </div>
              </Col>
              <Col span={6}>
                <div style={{ textAlign: 'center', padding: '12px', background: '#f0f9ff', borderRadius: '6px' }}>
                  <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#1890ff' }}>
                    {generatedSettings.chapterCount}
                  </div>
                  <div style={{ fontSize: '12px', color: '#666', marginTop: '2px' }}>
                    章节数量
                  </div>
                </div>
              </Col>
              <Col span={6}>
                <div style={{ textAlign: 'center', padding: '12px', background: '#f0f9ff', borderRadius: '6px' }}>
                  <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#1890ff' }}>
                    {generatedSettings.moduleCount}
                  </div>
                  <div style={{ fontSize: '12px', color: '#666', marginTop: '2px' }}>
                    模块数量
                  </div>
                </div>
              </Col>
              <Col span={6}>
                <div style={{ textAlign: 'center', padding: '12px', background: '#f0f9ff', borderRadius: '6px' }}>
                  <div style={{ fontSize: '20px', fontWeight: 'bold', color: '#1890ff' }}>
                    {Math.round(generatedSettings.targetWordCount / generatedSettings.chapterCount)}
                  </div>
                  <div style={{ fontSize: '12px', color: '#666', marginTop: '2px' }}>
                    每章字数
                  </div>
                </div>
              </Col>
            </Row>

            <Divider style={{ margin: '16px 0' }} />

            <Row gutter={16}>
              <Col span={12}>
                <div style={{ marginBottom: '12px' }}>
                  <h4 style={{ fontSize: '13px', fontWeight: 'bold', marginBottom: '6px' }}>📖 故事大纲</h4>
                  <div style={{ 
                    padding: '8px', 
                    background: '#f5f5f5', 
                    borderRadius: '4px',
                    lineHeight: '1.6',
                    fontSize: '13px'
                  }}>
                    {generatedSettings.storyOutline || '暂无内容'}
                  </div>
                </div>
              </Col>
              <Col span={12}>
                <div style={{ marginBottom: '12px' }}>
                  <h4 style={{ fontSize: '13px', fontWeight: 'bold', marginBottom: '6px' }}>🏗️ 情节结构</h4>
                  <div style={{ 
                    padding: '8px', 
                    background: '#f5f5f5', 
                    borderRadius: '4px',
                    lineHeight: '1.6',
                    fontSize: '13px',
                    whiteSpace: 'pre-line'
                  }}>
                    {generatedSettings.plotStructure || '暂无内容'}
                  </div>
                </div>
              </Col>
            </Row>

            <div style={{ marginBottom: '12px' }}>
              <h4 style={{ fontSize: '13px', fontWeight: 'bold', marginBottom: '6px' }}>👥 人物设定</h4>
              <div style={{ 
                padding: '8px', 
                background: '#f5f5f5', 
                borderRadius: '4px',
                lineHeight: '1.6',
                fontSize: '13px',
                whiteSpace: 'pre-line',
                maxHeight: '100px',
                overflowY: 'auto'
              }}>
                {generatedSettings.characters || '暂无内容'}
              </div>
            </div>
          </Card>

          {/* 章节列表和操作区域 */}
          <Card 
            title={
              <Space>
                <span>📚 章节规划列表</span>
                <Tag color="blue">{generatedSettings.chapters?.length || 0}/{generatedSettings.chapterCount}章</Tag>
                {novel?.settingFilePath && (
                  <Tag color="success">设定已保存</Tag>
                )}
              </Space>
            }
            style={{ marginBottom: '16px' }}
            extra={
              <Space>
                {generatedSettings.chapters.length < generatedSettings.chapterCount && (
                  <>
                    <Button 
                      icon={<RobotOutlined />}
                      onClick={() => handleGenerateSingleChapter(generatedSettings.chapters.length + 1)}
                      disabled={generating}
                    >
                      生成下一章标题+细纲
                    </Button>
                    <Button 
                      icon={<RobotOutlined />}
                      onClick={() => {
                        const nextChapter = generatedSettings.chapters.length + 1;
                        const endChapter = Math.min(nextChapter + 4, generatedSettings.chapterCount);
                        handleGenerateBatchChapters(nextChapter, endChapter);
                      }}
                      disabled={generating}
                    >
                      批量生成5章标题+细纲
                    </Button>
                  </>
                )}
                <Button 
                  type="primary"
                  icon={<RobotOutlined />}
                  disabled={!novel?.settingFilePath}
                  onClick={() => navigate(`/novels/${id}`)}
                >
                  前往创作
                </Button>
              </Space>
            }
          >
            <Alert
              message="章节标题和细纲规划"
              description={
                <div>
                  <p><strong>工作流程：</strong>先生成章节标题+细纲，后续再基于这些规划生成具体的章节内容。</p>
                  <p>• <strong>单个生成</strong>：点击"生成下一章"生成下一章的标题和细纲</p>
                  <p>• <strong>批量生成</strong>：点击"批量生成5章"一次生成多个章节的标题和细纲</p>
                  <p>• <strong>单独生成</strong>：直接点击下方的章节卡片单独生成某章的标题和细纲</p>
                  <p>• <strong>已规划章节</strong>：显示为绿色，可以查看或编辑标题和细纲</p>
                </div>
              }
              type="info"
              showIcon
              style={{ marginBottom: '16px' }}
            />

            <div style={{ 
              display: 'grid', 
              gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', 
              gap: '12px' 
            }}>
              {Array.from({ length: generatedSettings.chapterCount }, (_, i) => {
                const chapterNum = i + 1;
                const chapter = generatedSettings.chapters?.find((ch: any) => ch.chapterNumber === chapterNum);
                
                return (
                  <Card
                    key={chapterNum}
                    size="small"
                    hoverable
                    style={{ 
                      border: chapter ? '1px solid #52c41a' : '1px solid #f0f0f0',
                      borderRadius: '6px',
                      background: chapter ? '#f6ffed' : 'white'
                    }}
                    actions={[
                      chapter ? (
                        <Button 
                          key="view"
                          type="text"
                          size="small"
                          icon={<EyeOutlined />}
                          onClick={() => handleViewChapter(chapter)}
                        >
                          查看
                        </Button>
                      ) : (
                        <Button 
                          key="generate"
                          type="primary"
                          size="small"
                          icon={<RobotOutlined />}
                          onClick={() => handleGenerateSingleChapter(chapterNum)}
                          disabled={generating}
                        >
                          生成标题+细纲
                        </Button>
                      ),
                      <Button 
                        key="edit"
                        type="text"
                        size="small"
                        icon={<EditOutlined />}
                        onClick={() => chapter ? handleEditChapter(chapter) : null}
                        disabled={!chapter}
                      >
                        编辑
                      </Button>
                    ]}
                  >
                    <Card.Meta
                      title={
                        <Space>
                          <Tag color={chapter ? "green" : "blue"}>第{chapterNum}章</Tag>
                          {chapter?.moduleNumber && (
                            <Tag color="cyan">模块{chapter.moduleNumber}</Tag>
                          )}
                          {chapter?.estimatedWords && (
                            <Tag color="orange">{chapter.estimatedWords}字</Tag>
                          )}
                          {chapter && (
                            <Tag color="success">已生成</Tag>
                          )}
                        </Space>
                      }
                      description={
                        <div>
                          <div style={{ 
                            fontWeight: 500, 
                            marginBottom: '6px',
                            fontSize: '14px',
                            color: '#262626'
                          }}>
                            {chapter?.title || `第${chapterNum}章（待生成标题+细纲）`}
                          </div>
                          <div style={{ 
                            fontSize: '12px', 
                            color: '#666',
                            lineHeight: '1.5',
                            display: '-webkit-box',
                            WebkitLineClamp: 3,
                            WebkitBoxOrient: 'vertical',
                            overflow: 'hidden'
                          }}>
                            {chapter?.outline || '点击下方按钮生成章节标题和细纲...'}
                          </div>
                        </div>
                      }
                    />
                  </Card>
                );
              })}
            </div>
          </Card>
        </div>
      )}

      {/* 编辑设定Modal */}
      <Modal
        title="编辑小说设定"
        open={editModalVisible}
        onCancel={() => setEditModalVisible(false)}
        onOk={handleSaveEdit}
        width={800}
        okText="保存修改"
        cancelText="取消"
      >
        <Form
          form={editForm}
          layout="vertical"
        >
          <Form.Item
            label="故事大纲"
            name="storyOutline"
          >
            <TextArea rows={3} />
          </Form.Item>

          <Form.Item
            label="情节结构"
            name="plotStructure"
          >
            <TextArea rows={4} />
          </Form.Item>

          <Form.Item
            label="人物设定"
            name="characters"
          >
            <TextArea rows={6} />
          </Form.Item>
        </Form>
      </Modal>

      {/* 章节编辑Modal */}
      <Modal
        title={`编辑第${editingChapter?.chapterNumber}章`}
        open={chapterEditModalVisible}
        onCancel={() => setChapterEditModalVisible(false)}
        onOk={handleSaveChapterEdit}
        width={700}
        okText="保存"
        cancelText="取消"
      >
        <Form
          form={chapterEditForm}
          layout="vertical"
        >
          <Form.Item
            label="章节标题"
            name="title"
            rules={[{ required: true, message: '请输入章节标题' }]}
          >
            <Input placeholder="请输入章节标题" />
          </Form.Item>

          <Form.Item
            label="所属模块"
            name="moduleNumber"
          >
            <InputNumber 
              min={1} 
              max={10}
              style={{ width: '100%' }}
              placeholder="请输入模块编号"
            />
          </Form.Item>

          <Form.Item
            label="章节细纲"
            name="outline"
            rules={[
              { required: true, message: '请输入章节细纲' },
              { 
                validator: (_, value) => {
                  if (value && value.length >= 100 && value.length <= 200) {
                    return Promise.resolve();
                  }
                  if (value && value.length < 100) {
                    return Promise.reject(new Error('细纲不能少于100字'));
                  }
                  if (value && value.length > 200) {
                    return Promise.reject(new Error('细纲不能超过200字'));
                  }
                  return Promise.resolve();
                }
              }
            ]}
            extra="建议100-200字，当前字数会实时显示"
          >
            <TextArea 
              rows={6} 
              placeholder="请输入本章的详细细纲（100-200字）..."
              showCount
              maxLength={200}
            />
          </Form.Item>

          <Form.Item
            label="预计字数"
            name="estimatedWords"
          >
            <InputNumber 
              min={900} 
              max={1200}
              step={50}
              style={{ width: '100%' }}
              placeholder="请输入预计字数"
            />
          </Form.Item>
        </Form>
      </Modal>

      {/* 查看章节规划详情Modal */}
      <Modal
        title={`第${viewingChapter?.chapterNumber}章规划详情：${viewingChapter?.title}`}
        open={chapterViewModalVisible}
        onCancel={() => setChapterViewModalVisible(false)}
        width={700}
        footer={[
          <Button key="close" onClick={() => setChapterViewModalVisible(false)}>
            关闭
          </Button>,
          <Button 
            key="edit"
            type="primary"
            icon={<EditOutlined />}
            onClick={() => {
              setChapterViewModalVisible(false);
              if (viewingChapter) {
                handleEditChapter(viewingChapter);
              }
            }}
          >
            编辑
          </Button>
        ]}
      >
        {viewingChapter && (
          <div style={{ padding: '16px 0' }}>
            <div style={{ marginBottom: '24px' }}>
              <div style={{ fontSize: '14px', color: '#595959', marginBottom: '8px' }}>
                章节编号
              </div>
              <div style={{ 
                padding: '12px', 
                background: '#f5f5f5', 
                borderRadius: '6px',
                fontSize: '16px',
                fontWeight: 500
              }}>
                第{viewingChapter.chapterNumber}章
              </div>
            </div>

            <div style={{ marginBottom: '24px' }}>
              <div style={{ fontSize: '14px', color: '#595959', marginBottom: '8px' }}>
                章节标题
              </div>
              <div style={{ 
                padding: '12px', 
                background: '#f5f5f5', 
                borderRadius: '6px',
                fontSize: '16px',
                fontWeight: 500
              }}>
                {viewingChapter.title}
              </div>
            </div>

            {viewingChapter.moduleNumber && (
              <div style={{ marginBottom: '24px' }}>
                <div style={{ fontSize: '14px', color: '#595959', marginBottom: '8px' }}>
                  所属模块
                </div>
                <div style={{ 
                  padding: '12px', 
                  background: '#f5f5f5', 
                  borderRadius: '6px'
                }}>
                  <Tag color="cyan">模块{viewingChapter.moduleNumber}</Tag>
                </div>
              </div>
            )}

            <div style={{ marginBottom: '24px' }}>
              <div style={{ fontSize: '14px', color: '#595959', marginBottom: '8px' }}>
                预计字数
              </div>
              <div style={{ 
                padding: '12px', 
                background: '#f5f5f5', 
                borderRadius: '6px'
              }}>
                <Tag color="orange">{viewingChapter.estimatedWords || 1050}字</Tag>
              </div>
            </div>

            <div style={{ marginBottom: '24px' }}>
              <div style={{ fontSize: '14px', color: '#595959', marginBottom: '8px' }}>
                章节细纲
              </div>
              <div style={{ 
                padding: '12px', 
                background: '#f5f5f5', 
                borderRadius: '6px',
                lineHeight: '1.8',
                fontSize: '14px',
                whiteSpace: 'pre-line',
                maxHeight: '300px',
                overflowY: 'auto'
              }}>
                {viewingChapter.outline}
              </div>
              <div style={{ marginTop: '8px', fontSize: '12px', color: '#8c8c8c' }}>
                细纲字数：{viewingChapter.outline?.length || 0}字（建议100-200字）
              </div>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
};

export default NovelGenerate;