import React from 'react';
import { Card, Typography, Descriptions, Tag, Row, Col, Progress, Divider } from 'antd';
import { 
  CloudServerOutlined, 
  DatabaseOutlined, 
  NodeIndexOutlined,
  CheckCircleOutlined,
  InfoCircleOutlined
} from '@ant-design/icons';

const { Title, Paragraph, Text } = Typography;

const AboutPage: React.FC = () => {
  return (
    <div style={{ padding: 24 }}>
      <div style={{ marginBottom: 24 }}>
        <Title level={3} style={{ marginBottom: 8 }}>关于系统</Title>
        <Paragraph type="secondary">系统信息与版本</Paragraph>
      </div>

      <Row gutter={24}>
        <Col span={16}>
          <Card title={<><InfoCircleOutlined /> 系统信息</>}>
            <Descriptions bordered column={2}>
              <Descriptions.Item label="系统名称">轻远电力老挝ERP</Descriptions.Item>
              <Descriptions.Item label="系统版本">V1.0.0</Descriptions.Item>
              <Descriptions.Item label="开发团队">轻远电力信息技术部</Descriptions.Item>
              <Descriptions.Item label="上线日期">2026年3月</Descriptions.Item>
              <Descriptions.Item label="技术架构">
                <Tag color="blue">React 18</Tag>
                <Tag color="green">Ant Design 5</Tag>
                <Tag color="purple">Node.js</Tag>
                <Tag color="orange">PostgreSQL</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="部署环境">
                <Tag color="cyan">腾讯云服务器</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="前端框架">Vite + React + TypeScript</Descriptions.Item>
              <Descriptions.Item label="后端框架">Express.js + PostgreSQL</Descriptions.Item>
            </Descriptions>
          </Card>

          <Card title={<><CheckCircleOutlined /> 功能模块</>} style={{ marginTop: 24 }}>
            <Row gutter={[16, 16]}>
              <Col span={8}>
                <Card size="small" style={{ textAlign: 'center' }}>
                  <Title level={5}>项目管理</Title>
                  <Text type="secondary">项目创建、进度跟踪、合同管理</Text>
                </Card>
              </Col>
              <Col span={8}>
                <Card size="small" style={{ textAlign: 'center' }}>
                  <Title level={5}>财务管理</Title>
                  <Text type="secondary">预支、报销、付款申请、核销</Text>
                </Card>
              </Col>
              <Col span={8}>
                <Card size="small" style={{ textAlign: 'center' }}>
                  <Title level={5}>采购管理</Title>
                  <Text type="secondary">商品管理、供应商管理</Text>
                </Card>
              </Col>
              <Col span={8}>
                <Card size="small" style={{ textAlign: 'center' }}>
                  <Title level={5}>合作伙伴</Title>
                  <Text type="secondary">供应商、分包商、客户管理</Text>
                </Card>
              </Col>
              <Col span={8}>
                <Card size="small" style={{ textAlign: 'center' }}>
                  <Title level={5}>施工管理</Title>
                  <Text type="secondary">施工日志、里程碑管理</Text>
                </Card>
              </Col>
              <Col span={8}>
                <Card size="small" style={{ textAlign: 'center' }}>
                  <Title level={5}>预算报价</Title>
                  <Text type="secondary">项目预算、报价管理</Text>
                </Card>
              </Col>
            </Row>
          </Card>
        </Col>

        <Col span={8}>
          <Card title={<><CloudServerOutlined /> 服务器状态</>}>
            <div style={{ marginBottom: 16 }}>
              <Text type="secondary">CPU使用率</Text>
              <Progress percent={45} status="active" />
            </div>
            <div style={{ marginBottom: 16 }}>
              <Text type="secondary">内存使用</Text>
              <Progress percent={60} strokeColor="#52c41a" />
            </div>
            <div style={{ marginBottom: 16 }}>
              <Text type="secondary">磁盘空间</Text>
              <Progress percent={35} strokeColor="#1890ff" />
            </div>
            <Divider />
            <Descriptions column={1} size="small">
              <Descriptions.Item label="服务器IP">43.161.248.209</Descriptions.Item>
              <Descriptions.Item label="操作系统">OpenCloudOS 9</Descriptions.Item>
              <Descriptions.Item label="Node版本">v22.22.1</Descriptions.Item>
            </Descriptions>
          </Card>

          <Card title={<><DatabaseOutlined /> 数据库状态</>} style={{ marginTop: 24 }}>
            <div style={{ textAlign: 'center', padding: 20 }}>
              <CheckCircleOutlined style={{ fontSize: 48, color: '#52c41a' }} />
              <Title level={4} style={{ margin: '16px 0 8px' }}>运行正常</Title>
              <Text type="secondary">PostgreSQL 15</Text>
            </div>
            <Divider />
            <Descriptions column={1} size="small">
              <Descriptions.Item label="数据库名">company_finance_db</Descriptions.Item>
              <Descriptions.Item label="连接状态">正常</Descriptions.Item>
              <Descriptions.Item label="最近备份">2026-03-19 00:00</Descriptions.Item>
            </Descriptions>
          </Card>
        </Col>
      </Row>

      <Card style={{ marginTop: 24, background: '#f6ffed', borderColor: '#b7eb8f' }}>
        <Text>© 2026 轻远电力老挝ERP系统 - 版本 V1.0.0</Text>
      </Card>
    </div>
  );
};

export default AboutPage;