import { Typography, Card, Space, Divider, Row, Col, theme, List, Timeline } from 'antd';
import {
  RocketOutlined,
  BulbOutlined,
  TeamOutlined,
  BookOutlined,
  ExperimentOutlined,
  SmileOutlined
} from '@ant-design/icons';

const { Title, Paragraph, Text } = Typography;

export default function About() {
  const { token } = theme.useToken();
  const alphaColor = (color: string, alpha: number) => `color-mix(in srgb, ${color} ${(alpha * 100).toFixed(0)}%, transparent)`;

  const features = [
    {
      icon: <RocketOutlined style={{ fontSize: 24, color: token.colorPrimary }} />,
      title: '智能向导',
      description: 'AI 自动生成小说大纲、角色背景和世界观，为您开启创作之门。',
    },
    {
      icon: <BulbOutlined style={{ fontSize: 24, color: '#fadb14' }} />,
      title: '多模型支持',
      description: '集成 OpenAI、Gemini、Claude 等顶级模型，灵活切换以满足不同创作需求。',
    },
    {
      icon: <TeamOutlined style={{ fontSize: 24, color: '#52c41a' }} />,
      title: '角色与关系管理',
      description: '精细化的角色档案、复杂的人物关系网，让故事角色跃然纸上。',
    },
    {
      icon: <BookOutlined style={{ fontSize: 24, color: '#1890ff' }} />,
      title: '章节精雕细琢',
      description: '支持章节自动生成、润色、续写，AI 辅助您完成每一段精彩故事。',
    },
  ];

  const techStack = [
    { label: '前端框架', value: 'React 18 + Vite' },
    { label: ' UI 组件库', value: 'Ant Design 5' },
    { label: '状态管理', value: 'Zustand' },
    { label: '后端框架', value: 'FastAPI (Python 3.11)' },
    { label: '数据库', value: 'PostgreSQL + Alembic' },
    { label: '部署技术', value: 'Docker + Docker Compose' },
  ];

  return (
    <div style={{ height: '100%', overflowY: 'auto', padding: '24px' }}>
      <div style={{ maxWidth: 1000, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <Title level={1}>关于 墨木灵思</Title>
          <Paragraph style={{ fontSize: 18, color: token.colorTextSecondary }}>
            墨木灵思 (MoMu LingSi) 是一款基于人工智能的智能小说创作助手，旨在帮助创作者更高效、更具创意地完成文学作品。
          </Paragraph>
        </div>

        <Row gutter={[24, 24]}>
          <Col xs={24} md={12}>
            <Card
              title={<Space><SmileOutlined /> 项目愿景</Space>}
              bordered={false}
              style={{ height: '100%', boxShadow: `0 4px 12px ${alphaColor(token.colorText, 0.05)}` }}
            >
              <Paragraph>
                在这个 AI 飞速发展的时代，我们相信技术应该服务于创意。墨木灵思不仅仅是一个写作工具，它更是一个懂你的文学搭子。
              </Paragraph>
              <Paragraph>
                无论是构建宏大的世界观，还是打磨细腻的人物情感，墨木灵思都能为您提供精准的建议与协助，让创作过程变得更加轻松有趣。
              </Paragraph>
            </Card>
          </Col>
          <Col xs={24} md={12}>
            <Card
              title={<Space><ExperimentOutlined /> 核心特性</Space>}
              bordered={false}
              style={{ height: '100%', boxShadow: `0 4px 12px ${alphaColor(token.colorText, 0.05)}` }}
            >
              <List
                dataSource={features}
                renderItem={(item) => (
                  <List.Item style={{ padding: '12px 0' }}>
                    <List.Item.Meta
                      avatar={item.icon}
                      title={item.title}
                      description={item.description}
                    />
                  </List.Item>
                )}
              />
            </Card>
          </Col>
        </Row>

        <Divider />

        <Title level={2} style={{ textAlign: 'center', marginBottom: 32 }}>技术力量</Title>
        <Row gutter={[24, 24]}>
          <Col span={24}>
            <Card bordered={false} style={{ background: alphaColor(token.colorPrimary, 0.02) }}>
              <Row gutter={[16, 16]}>
                {techStack.map((tech, index) => (
                  <Col xs={12} sm={8} key={index}>
                    <div style={{ textAlign: 'center', padding: '16px' }}>
                      <Text type="secondary" style={{ display: 'block', marginBottom: 4 }}>{tech.label}</Text>
                      <Text strong style={{ fontSize: 16 }}>{tech.value}</Text>
                    </div>
                  </Col>
                ))}
              </Row>
            </Card>
          </Col>
        </Row>

        <Divider />

        <Title level={2} style={{ textAlign: 'center', marginBottom: 32 }}>未来路线</Title>
        <div style={{ padding: '0 24px' }}>
          <Timeline
            items={[
              {
                color: 'green',
                children: '2024 - 墨木灵思基础版发布，支持核心 AI 创作流程',
              },
              {
                color: 'blue',
                children: '2025 - 引入更强大的多模型协同引擎，完善角色关系拓扑图',
              },
              {
                children: '2026 - 墨木灵思品牌升级，全站 UI/UX 深度优化',
              },
              {
                color: 'gray',
                children: '未来 - 探索小说到多媒体（漫画、短剧）的 AI 转化路径',
              },
            ]}
          />
        </div>

        <div style={{ textAlign: 'center', marginTop: 64, marginBottom: 32 }}>
          <Paragraph type="secondary">
            © 2026 墨木灵思团队 | <a href="https://www.xinmi.cloud/" target="_blank" rel="noopener noreferrer">了解更多</a>
          </Paragraph>
        </div>
      </div>
    </div>
  );
}