import React, { useState, useEffect } from 'react';
import { 
  Card, 
  Button, 
  Space, 
  Typography, 
  Tag, 
  Modal, 
  Form, 
  Input, 
  Select, 
  message,
  Row,
  Col,
  Popconfirm,
  Divider
} from 'antd';
import { 
  PlusOutlined, 
  EditOutlined, 
  DeleteOutlined, 
  ThunderboltOutlined,
  CodeOutlined,
  BulbOutlined,
  RobotOutlined,
  BookOutlined,
  EditOutlined as EditIcon
} from '@ant-design/icons';

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

interface Skill {
  id: string;
  name: string;
  description: string;
  category: string;
  prompt: string;
  examples: string;
  createdAt: string;
  updatedAt: string;
}

const SkillsPage: React.FC = () => {
  const [skills, setSkills] = useState<Skill[]>([]);
  const [loading, setLoading] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);
  const [editingSkill, setEditingSkill] = useState<Skill | null>(null);
  const [form] = Form.useForm();

  useEffect(() => {
    loadSkills();
  }, []);

  const loadSkills = async () => {
    setLoading(true);
    try {
      // 这里将来可以连接到实际的数据库
      // 现在先使用模拟数据
      const mockSkills: Skill[] = [
        {
          id: '1',
          name: '小说设定生成',
          description: '根据用户的小说创意，自动生成完整的小说设定，包括角色、世界观、故事大纲等',
          category: '创作辅助',
          prompt: '你是一个专业的小说设定助手。根据用户提供的小说创意，生成详细的小说设定，包括：1. 故事大纲（150字内）2. 主要角色设定（至少3个角色）3. 世界观背景 4. 核心冲突 5. 情节发展建议',
          examples: '用户输入：写一个现代都市修仙小说\n\n生成结果：\n故事大纲：普通程序员意外获得修仙传承，在现代都市中一边工作一边修炼，逐渐发现都市中隐藏的修仙世界...',
          createdAt: '2024-01-15',
          updatedAt: '2024-01-15'
        },
        {
          id: '2',
          name: '章节内容创作',
          description: '根据章节标题和细纲，自动创作具体的章节内容，保持风格连贯和情节合理',
          category: '内容创作',
          prompt: '你是一个专业的小说作家。根据提供的章节标题、细纲和前文内容，创作符合要求的章节内容。要求：1. 严格遵守细纲要求 2. 保持人物性格一致 3. 语言生动流畅 4. 字数控制在900-1200字',
          examples: '章节标题：第一章 意外穿越\n细纲：主角意外穿越到修仙世界，获得神秘传承\n前文：无\n\n生成结果：林明醒来时，发现自己躺在一片陌生的森林中...',
          createdAt: '2024-01-16',
          updatedAt: '2024-01-16'
        },
        {
          id: '3',
          name: '角色对话优化',
          description: '优化小说中的人物对话，使其更符合角色性格和场景氛围',
          category: '内容优化',
          prompt: '你是一个对话优化专家。根据提供的对话内容和角色设定，优化对话表达，使其：1. 更符合角色性格 2. 更贴合场景氛围 3. 语言更自然流畅 4. 保持原有意思不变',
          examples: '原对话："你是什么人？"林明问。\n优化后："你是谁？"林明的声音里带着警惕，眼神紧盯着对方...',
          createdAt: '2024-01-17',
          updatedAt: '2024-01-17'
        },
        {
          id: '4',
          name: '情节建议生成',
          description: '为小说创作提供情节发展建议，帮助解决创作瓶颈',
          category: '创作辅助',
          prompt: '你是一个创意写作顾问。根据用户提供的当前情节和创作瓶颈，提供3-5个情节发展建议，每个建议都要：1. 符合故事逻辑 2. 具有戏剧冲突 3. 推动情节发展 4. 保持人物一致性',
          examples: '当前情节：主角刚刚获得修仙传承，但不知道如何修炼\n\n建议1：安排一位神秘导师，指点主角入门...\n建议2：主角在修炼过程中遇到困难，需要寻找资源...',
          createdAt: '2024-01-18',
          updatedAt: '2024-01-18'
        },
        {
          id: '5',
          name: '文笔风格调整',
          description: '调整小说的文笔风格，如简洁、华丽、幽默等不同风格',
          category: '内容优化',
          prompt: '你是一个文笔风格调整专家。根据用户指定的风格要求，调整文本的表达方式。可选风格：简洁明快、华丽优美、幽默风趣、严肃深沉等。要求保持原意不变，只改变表达方式。',
          examples: '原文：他走进了房间，看到了一个人坐在那里。\n简洁风格：他进屋，见一人独坐。\n华丽风格：他缓步入室，目光所及，见一人静坐其间...',
          createdAt: '2024-01-19',
          updatedAt: '2024-01-19'
        },
        {
          id: '6',
          name: '章节大纲生成',
          description: '为指定章节生成详细的章节大纲，包括主要情节、转折点、人物发展等',
          category: '创作辅助',
          prompt: '你是一个章节大纲专家。根据小说总体设定和章节要求，生成详细的章节大纲。大纲应包含：1. 章节主题 2. 主要情节发展 3. 重要转折点 4. 人物心理变化 5. 与前后章节的衔接',
          examples: '小说：都市修仙\n章节：第5章\n要求：主角首次展示修仙能力\n\n大纲：章节主题：初露锋芒\n主要情节：主角在公司遇到危机，情急之下使用修仙能力...',
          createdAt: '2024-01-20',
          updatedAt: '2024-01-20'
        }
      ];
      
      setSkills(mockSkills);
    } catch (error) {
      message.error('加载技能列表失败');
    } finally {
      setLoading(false);
    }
  };

  const handleAdd = () => {
    setEditingSkill(null);
    form.resetFields();
    setModalVisible(true);
  };

  const handleEdit = (skill: Skill) => {
    setEditingSkill(skill);
    form.setFieldsValue(skill);
    setModalVisible(true);
  };

  const handleDelete = async (id: string) => {
    try {
      // 这里将来连接到实际的数据库删除操作
      setSkills(skills.filter(skill => skill.id !== id));
      message.success('技能删除成功');
    } catch (error) {
      message.error('删除技能失败');
    }
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      
      if (editingSkill) {
        // 编辑模式
        const updatedSkill: Skill = {
          ...editingSkill,
          ...values,
          updatedAt: new Date().toISOString().split('T')[0]
        };
        setSkills(skills.map(skill => 
          skill.id === editingSkill.id ? updatedSkill : skill
        ));
        message.success('技能更新成功');
      } else {
        // 新增模式
        const newSkill: Skill = {
          id: Date.now().toString(),
          ...values,
          createdAt: new Date().toISOString().split('T')[0],
          updatedAt: new Date().toISOString().split('T')[0]
        };
        setSkills([...skills, newSkill]);
        message.success('技能添加成功');
      }
      
      setModalVisible(false);
      form.resetFields();
    } catch (error) {
      message.error('表单验证失败');
    }
  };

  const getCategoryIcon = (category: string) => {
    switch (category) {
      case '创作辅助':
        return <BulbOutlined style={{ color: '#faad14', fontSize: '20px' }} />;
      case '内容创作':
        return <EditIcon style={{ color: '#52c41a', fontSize: '20px' }} />;
      case '内容优化':
        return <CodeOutlined style={{ color: '#1890ff', fontSize: '20px' }} />;
      default:
        return <ThunderboltOutlined style={{ color: '#8c8c8c', fontSize: '20px' }} />;
    }
  };

  const getCategoryColor = (category: string) => {
    switch (category) {
      case '创作辅助':
        return 'orange';
      case '内容创作':
        return 'green';
      case '内容优化':
        return 'blue';
      default:
        return 'default';
    }
  };

  return (
    <div>
      <div style={{ marginBottom: '24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <Title level={2} style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '12px' }}>
            <ThunderboltOutlined style={{ color: '#1890ff' }} />
            技能管理
          </Title>
          <Text type="secondary" style={{ marginTop: '8px', display: 'block' }}>
            管理和配置 AI 智能体的各种创作技能
          </Text>
        </div>
        <Button 
          type="primary" 
          icon={<PlusOutlined />}
          onClick={handleAdd}
          size="large"
        >
          新建技能
        </Button>
      </div>

      <div style={{ marginBottom: '16px' }}>
        <Row gutter={16}>
          <Col span={8}>
            <Card 
              size="small"
              style={{ background: '#f0f9ff', border: '1px solid #91d5ff' }}
            >
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#1890ff' }}>
                  {skills.length}
                </div>
                <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
                  总技能数
                </div>
              </div>
            </Card>
          </Col>
          <Col span={8}>
            <Card 
              size="small"
              style={{ background: '#f6ffed', border: '1px solid #b7eb8f' }}
            >
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#52c41a' }}>
                  {skills.filter(s => s.category === '创作辅助').length}
                </div>
                <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
                  创作辅助
                </div>
              </div>
            </Card>
          </Col>
          <Col span={8}>
            <Card 
              size="small"
              style={{ background: '#fff9e6', border: '1px solid #ffe58f' }}
            >
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#faad14' }}>
                  {skills.filter(s => s.category === '内容创作' || s.category === '内容优化').length}
                </div>
                <div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
                  内容处理
                </div>
              </div>
            </Card>
          </Col>
        </Row>
      </div>

      {loading ? (
        <div style={{ textAlign: 'center', padding: '50px' }}>
          加载中...
        </div>
      ) : (
        <div style={{ 
          display: 'grid', 
          gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))', 
          gap: '16px' 
        }}>
          {skills.map((skill) => (
            <Card
              key={skill.id}
              hoverable
              style={{ 
                borderRadius: '12px',
                height: '100%',
                display: 'flex',
                flexDirection: 'column'
              }}
              actions={[
                <Button 
                  key="edit"
                  type="text" 
                  icon={<EditOutlined />}
                  onClick={() => handleEdit(skill)}
                >
                  编辑
                </Button>,
                <Popconfirm
                  key="delete"
                  title="确认删除"
                  description="确定要删除这个技能吗？"
                  onConfirm={() => handleDelete(skill.id)}
                  okText="确定"
                  cancelText="取消"
                >
                  <Button 
                    type="text" 
                    danger
                    icon={<DeleteOutlined />}
                  >
                    删除
                  </Button>
                </Popconfirm>
              ]}
            >
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', marginBottom: '16px' }}>
                  <div style={{ 
                    width: '48px', 
                    height: '48px', 
                    borderRadius: '8px',
                    background: '#f0f9ff',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    marginRight: '12px'
                  }}>
                    {getCategoryIcon(skill.category)}
                  </div>
                  <div style={{ flex: 1 }}>
                    <Title level={4} style={{ margin: 0, marginBottom: '8px' }}>
                      {skill.name}
                    </Title>
                    <Tag color={getCategoryColor(skill.category)}>
                      {skill.category}
                    </Tag>
                  </div>
                </div>

                <Paragraph 
                  ellipsis={{ rows: 2 }} 
                  style={{ 
                    color: '#666',
                    marginBottom: '16px',
                    minHeight: '44px'
                  }}
                >
                  {skill.description}
                </Paragraph>

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

                <div style={{ fontSize: '12px', color: '#999' }}>
                  <div style={{ marginBottom: '4px' }}>
                    <BookOutlined style={{ marginRight: '4px' }} />
                    提示词模板：{skill.prompt.length} 字符
                  </div>
                  {skill.examples && (
                    <div>
                      <BulbOutlined style={{ marginRight: '4px' }} />
                      包含示例
                    </div>
                  )}
                  <div style={{ marginTop: '4px' }}>
                    更新时间：{skill.updatedAt}
                  </div>
                </div>
              </div>
            </Card>
          ))}
        </div>
      )}

      {skills.length === 0 && !loading && (
        <div style={{ 
          textAlign: 'center', 
          padding: '100px 0',
          color: '#999'
        }}>
          <RobotOutlined style={{ fontSize: '64px', color: '#d9d9d9', marginBottom: '16px' }} />
          <div>还没有技能，点击上方按钮创建第一个技能吧！</div>
        </div>
      )}

      <Modal
        title={
          <Space>
            <ThunderboltOutlined style={{ color: '#1890ff' }} />
            {editingSkill ? '编辑技能' : '新建技能'}
          </Space>
        }
        open={modalVisible}
        onOk={handleSubmit}
        onCancel={() => setModalVisible(false)}
        width={800}
        okText="确定"
        cancelText="取消"
      >
        <Form
          form={form}
          layout="vertical"
          style={{ marginTop: '24px' }}
        >
          <Form.Item
            name="name"
            label="技能名称"
            rules={[{ required: true, message: '请输入技能名称' }]}
          >
            <Input placeholder="例如：小说设定生成" />
          </Form.Item>

          <Form.Item
            name="category"
            label="技能分类"
            rules={[{ required: true, message: '请选择技能分类' }]}
          >
            <Select placeholder="选择分类">
              <Select.Option value="创作辅助">创作辅助</Select.Option>
              <Select.Option value="内容创作">内容创作</Select.Option>
              <Select.Option value="内容优化">内容优化</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="description"
            label="技能描述"
            rules={[{ required: true, message: '请输入技能描述' }]}
          >
            <TextArea 
              placeholder="简单描述这个技能的功能和用途" 
              rows={2}
            />
          </Form.Item>

          <Form.Item
            name="prompt"
            label="提示词模板"
            rules={[{ required: true, message: '请输入提示词模板' }]}
          >
            <TextArea 
              placeholder="输入 AI 使用的提示词模板，可以使用变量占位符" 
              rows={6}
              style={{ fontFamily: 'monospace' }}
            />
          </Form.Item>

          <Form.Item
            name="examples"
            label="使用示例"
          >
            <TextArea 
              placeholder="输入使用示例，帮助用户理解如何使用这个技能" 
              rows={4}
            />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default SkillsPage;