import React from 'react'
import { Typography, Card, Row, Col, Button, Spin, Alert } from 'antd'
import { Link } from 'react-router-dom'
import { useGlobal } from '@/contexts/GlobalContext';

const { Title, Paragraph } = Typography

const HomePage: React.FC = () => {
  const { currentUser, selectedTenant, loading, error } = useGlobal();

  // 如果全局状态正在加载，显示加载中
  if (loading) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '300px' }}>
        <Spin size="large" tip="加载用户信息中..." />
      </div>
    );
  }
  
  // 如果有错误，显示错误信息
  if (error) {
    return (
      <Alert
        message="加载错误"
        description={error}
        type="error"
        showIcon
      />
    );
  }

  return (
    <div className="page-container">
      <Title level={2} className="page-title">欢迎使用 PwC RA 应用</Title>
      
      <Paragraph>
        这是一个使用 MainLayout、Sidebar 和 Breadcrumb 组件的示例应用。您可以在此基础上进行开发。
      </Paragraph>
      
      <Row gutter={[16, 16]} style={{ marginTop: '24px' }}>
        <Col span={8}>
          <Card title="用户信息" bordered={false}>
            <p><strong>用户名:</strong> {currentUser?.username || '未登录'}</p>
            <p><strong>邮箱:</strong> {currentUser?.email || '未知'}</p>
            <p><strong>当前租户:</strong> {selectedTenant?.name || '未选择'}</p>
          </Card>
        </Col>
        <Col span={8}>
          <Card title="快速导航" bordered={false}>
            <Button type="link" block>
              <Link to="/about">关于页面</Link>
            </Button>
            <Button type="link" block>
              <a href="https://ant.design/" target="_blank" rel="noopener noreferrer">
                Ant Design 文档
              </a>
            </Button>
          </Card>
        </Col>
        <Col span={8}>
          <Card title="帮助信息" bordered={false}>
            <p>如需帮助，请联系管理员。</p>
            <p>版本: 1.0.0</p>
          </Card>
        </Col>
      </Row>
    </div>
  )
}

export default HomePage