import React from 'react';
import { Layout, Typography, Card, Row, Col, Space, Tag, Button } from 'antd';
import { 
  InfoCircleOutlined, 
  RocketOutlined, 
  CodeOutlined, 
  GithubOutlined, 
  ThunderboltOutlined,
  CloudServerOutlined,
  LinkOutlined
} from '@ant-design/icons';
import { designTokens } from '../config/theme';

const { Title, Paragraph, Text } = Typography;

const About = () => {
  const techStack = [
    { name: 'React', version: '18.2.0', icon: <RocketOutlined /> },
    { name: 'Vite', version: '5.2.10', icon: <ThunderboltOutlined /> },
    { name: 'Ant Design', version: '5.17.0', icon: <BuildOutlined /> },
    { name: 'Node.js', version: '20+', icon: <CloudServerOutlined /> },
    { name: 'Express', version: '4.19.2', icon: <ApiOutlined /> },
    { name: 'Sequelize', version: '6.37.3', icon: <DatabaseOutlined /> },
    { name: 'Three.js', version: '0.164.1', icon: <CodepenOutlined /> },
  ];

  const features = [
    { title: '资产管理', desc: '全方位的 IDC 资产登记与追踪' },
    { title: '3D 可视化', desc: '基于 Three.js 的机房机柜 3D 仿真展示' },
    { title: '工单系统', desc: '标准化的故障处理与日常运维流程' },
    { title: '耗材库存', desc: '精细化的备品备件出入库管理' },
    { title: '数据监控', desc: '实时的健康状态检查与性能分析' },
    { title: '自动化备份', desc: '安全的数据备份与一键恢复机制' },
  ];

  return (
    <div style={{ padding: '24px', maxWidth: '1200px', margin: '0 auto' }}>
      {/* Hero Section */}
      <Card 
        style={{ 
          marginBottom: '32px', 
          borderRadius: '16px', 
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          color: '#fff',
          border: 'none',
          overflow: 'hidden',
          position: 'relative'
        }}
      >
        <div style={{ position: 'relative', zIndex: 1, padding: '40px' }}>
          <Title level={1} style={{ color: '#fff', marginBottom: '16px' }}>云睿资产管理系统</Title>
          <Paragraph style={{ color: 'rgba(255,255,255,0.9)', fontSize: '18px', maxWidth: '600px' }}>
            智能数据中心基础设施管理平台，助力企业实现资产全生命周期管理与 3D 可视化运维。
          </Paragraph>
          <div style={{ marginTop: '24px' }}>
            <Tag color="rgba(255,255,255,0.2)" style={{ fontSize: '14px', padding: '4px 12px', border: '1px solid rgba(255,255,255,0.3)', color: '#fff' }}>v1.0.0 Stable</Tag>
          </div>
        </div>
        <div style={{ 
          position: 'absolute', 
          right: '-50px', 
          top: '-50px', 
          opacity: 0.1, 
          fontSize: '300px' 
        }}>
          <CloudServerOutlined />
        </div>
      </Card>

      <Row gutter={[32, 32]}>
        <Col xs={24} md={16}>
          {/* Main Content */}
          <Card title={<Space><InfoCircleOutlined /> 关于平台</Space>} style={{ borderRadius: '12px', height: '100%' }}>
            <Paragraph>
              云睿资产管理系统（YunRui Asset Management System）是一款专为中大型数据中心设计的资产管理解决方案。平台集成了资产台账、3D 仿真、工单运维、耗材管理等核心模块，通过数字化手段解决 IDC 运维中“资产找不着、状态看不见、流程不规范”的痛点。
            </Paragraph>
            <Paragraph>
              系统采用现代化的前后端分离架构，前端基于 React 和 Vite 提供极致的交互体验，后端依托 Node.js 实现高并发的数据处理，结合 3D 渲染技术，为用户提供身临其境的管理体验。
            </Paragraph>
            
            <Title level={4} style={{ marginTop: '24px' }}>核心特性</Title>
            <Row gutter={[16, 16]}>
              {features.map((item, index) => (
                <Col span={12} key={index}>
                  <div style={{ padding: '12px', background: '#f8fafc', borderRadius: '8px' }}>
                    <Text strong>{item.title}</Text>
                    <div style={{ fontSize: '12px', color: '#64748b' }}>{item.desc}</div>
                  </div>
                </Col>
              ))}
            </Row>
          </Card>
        </Col>

        <Col xs={24} md={8}>
          {/* Sidebar Info */}
          <Card title={<Space><CodeOutlined /> 技术栈</Space>} style={{ borderRadius: '12px', marginBottom: '32px' }}>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
              {techStack.map((tech, index) => (
                <Tag key={index} icon={tech.icon} color="blue" style={{ padding: '4px 8px' }}>
                  {tech.name} {tech.version}
                </Tag>
              ))}
            </div>
          </Card>

          <Card 
            title={<Space><RocketOutlined /> 获取源码</Space>} 
            style={{ 
              borderRadius: '12px', 
              background: '#f0f9ff', 
              border: '1px solid #bae6fd' 
            }}
          >
            <Paragraph>
              本项目已由新觅源码库进行标准化定制，提供商业级的高质量源码。
            </Paragraph>
            <Button 
              type="primary" 
              block 
              icon={<LinkOutlined />} 
              href="http://www.xinmi.cloud/" 
              target="_blank"
            >
              访问新觅源码库
            </Button>
          </Card>
        </Col>
      </Row>
      
      <div style={{ textAlign: 'center', marginTop: '48px', color: '#94a3b8' }}>
        <Paragraph>© 2026 云睿资产管理系统 · 基于新觅自动化工作流构建</Paragraph>
      </div>
    </div>
  );
};

// 辅助组件导入定义（模拟 Antd 图标）
const BuildOutlined = RocketOutlined;
const ApiOutlined = CodeOutlined;
const DatabaseOutlined = CodeOutlined;
const CodepenOutlined = RocketOutlined;

export default About;