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';
import { useLanguageStore } from '../../store/languageStore';

const { Title, Paragraph, Text } = Typography;

const AboutPage: React.FC = () => {
  const { t, currentLanguage } = useLanguageStore();

  return (
    <div style={{ padding: 24 }}>
      <div style={{ marginBottom: 24 }}>
        <Title level={3} style={{ marginBottom: 8 }}>{t('about.title')}</Title>
        <Paragraph type="secondary">{t('about.description')}</Paragraph>
      </div>

      <Row gutter={24}>
        <Col span={16}>
          <Card title={<><InfoCircleOutlined /> {t('about.systemInfo')}</>}>
            <Descriptions bordered column={2}>
              <Descriptions.Item label={t('about.systemName')}>{t('about.systemNameValue')}</Descriptions.Item>
              <Descriptions.Item label={t('about.version')}>{t('about.versionValue')}</Descriptions.Item>
              <Descriptions.Item label={t('about.devTeam')}>{t('about.devTeamValue')}</Descriptions.Item>
              <Descriptions.Item label={t('about.onlineDate')}>{t('about.onlineDateValue')}</Descriptions.Item>
              <Descriptions.Item label={t('about.techArchitecture')}>
                <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={t('about.deployEnv')}>
                <Tag color="cyan">{t('about.deployEnvValue')}</Tag>
              </Descriptions.Item>
              <Descriptions.Item label={t('about.frontend')}>{t('about.frontendValue')}</Descriptions.Item>
              <Descriptions.Item label={t('about.backend')}>{t('about.backendValue')}</Descriptions.Item>
            </Descriptions>
          </Card>

          <Card title={<><CheckCircleOutlined /> {t('about.modules')}</>} style={{ marginTop: 24 }}>
            <Row gutter={[16, 16]}>
              <Col span={8}>
                <Card size="small" style={{ textAlign: 'center' }}>
                  <Title level={5}>{t('menu.projects')}</Title>
                  <Text type="secondary">项目创建、进度跟踪、合同管理</Text>
                </Card>
              </Col>
              <Col span={8}>
                <Card size="small" style={{ textAlign: 'center' }}>
                  <Title level={5}>{t('menu.financeManagement')}</Title>
                  <Text type="secondary">预支、报销、付款申请、核销</Text>
                </Card>
              </Col>
              <Col span={8}>
                <Card size="small" style={{ textAlign: 'center' }}>
                  <Title level={5}>{t('menu.procurement')}</Title>
                  <Text type="secondary">商品管理、供应商管理</Text>
                </Card>
              </Col>
              <Col span={8}>
                <Card size="small" style={{ textAlign: 'center' }}>
                  <Title level={5}>{t('menu.partners')}</Title>
                  <Text type="secondary">供应商、分包商、客户管理</Text>
                </Card>
              </Col>
              <Col span={8}>
                <Card size="small" style={{ textAlign: 'center' }}>
                  <Title level={5}>{t('menu.construction')}</Title>
                  <Text type="secondary">施工日志、里程碑管理</Text>
                </Card>
              </Col>
              <Col span={8}>
                <Card size="small" style={{ textAlign: 'center' }}>
                  <Title level={5}>{t('menu.budgetQuotation')}</Title>
                  <Text type="secondary">项目预算、报价管理</Text>
                </Card>
              </Col>
            </Row>
          </Card>
        </Col>

        <Col span={8}>
          <Card title={<><CloudServerOutlined /> {t('about.serverStatus')}</>}>
            <div style={{ marginBottom: 16 }}>
              <Text type="secondary">{t('about.cpuUsage')}</Text>
              <Progress percent={45} status="active" />
            </div>
            <div style={{ marginBottom: 16 }}>
              <Text type="secondary">{t('about.memoryUsage')}</Text>
              <Progress percent={60} strokeColor="#52c41a" />
            </div>
            <div style={{ marginBottom: 16 }}>
              <Text type="secondary">{t('about.diskSpace')}</Text>
              <Progress percent={35} strokeColor="#1890ff" />
            </div>
            <Divider />
            <Descriptions column={1} size="small">
              <Descriptions.Item label={t('about.serverIp')}>43.161.248.209</Descriptions.Item>
              <Descriptions.Item label={t('about.os')}>{t('about.osValue')}</Descriptions.Item>
              <Descriptions.Item label={t('about.nodeVersion')}>v22.22.1</Descriptions.Item>
            </Descriptions>
          </Card>

          <Card title={<><DatabaseOutlined /> {t('about.databaseStatus')}</>} style={{ marginTop: 24 }}>
            <div style={{ textAlign: 'center', padding: 20 }}>
              <CheckCircleOutlined style={{ fontSize: 48, color: '#52c41a' }} />
              <Title level={4} style={{ margin: '16px 0 8px' }}>{t('about.running')}</Title>
              <Text type="secondary">PostgreSQL 15</Text>
            </div>
            <Divider />
            <Descriptions column={1} size="small">
              <Descriptions.Item label={t('about.dbName')}>company_finance_db</Descriptions.Item>
              <Descriptions.Item label={t('about.connectionStatus')}>{t('about.normal')}</Descriptions.Item>
              <Descriptions.Item label={t('about.lastBackup')}>2026-03-19 00:00</Descriptions.Item>
            </Descriptions>
          </Card>
        </Col>
      </Row>

      <Card style={{ marginTop: 24, background: '#f6ffed', borderColor: '#b7eb8f' }}>
        <Text>{t('about.footer')}</Text>
      </Card>
    </div>
  );
};

export default AboutPage;