import React from 'react';
import { Card, Row, Col, Button, Tabs } from 'antd';
import { UserOutlined, TeamOutlined, SettingOutlined, LockOutlined, BellOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { TabPane } = Tabs;

const Settings: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div className="settings">
      <div className="page-header">
        <h1>设置</h1>
      </div>

      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Button
              type="primary"
              block
              icon={<UserOutlined />}
              onClick={() => navigate('/settings/profile')}
            >
              个人设置
            </Button>
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Button
              type="primary"
              block
              icon={<TeamOutlined />}
              onClick={() => navigate('/settings/tenant')}
            >
              租户设置
            </Button>
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Button
              type="primary"
              block
              icon={<UserOutlined />}
              onClick={() => navigate('/settings/users')}
            >
              用户管理
            </Button>
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Button
              type="primary"
              block
              icon={<LockOutlined />}
            >
              安全设置
            </Button>
          </Card>
        </Col>
      </Row>

      <Tabs defaultActiveKey="overview">
        <TabPane tab="设置概览" key="overview">
          <Row gutter={16}>
            <Col span={12}>
              <Card title="账户信息">
                <div style={{ textAlign: 'center', padding: '50px 0' }}>
                  <p>账户信息设置</p>
                </div>
              </Card>
            </Col>
            <Col span={12}>
              <Card title="通知设置">
                <div style={{ textAlign: 'center', padding: '50px 0' }}>
                  <p>通知设置</p>
                </div>
              </Card>
            </Col>
          </Row>
        </TabPane>

        <TabPane tab="个人设置" key="profile">
          <div style={{ textAlign: 'center', padding: '50px 0' }}>
            <Button type="primary" onClick={() => navigate('/settings/profile')}>
              查看个人设置
            </Button>
          </div>
        </TabPane>

        <TabPane tab="租户设置" key="tenant">
          <div style={{ textAlign: 'center', padding: '50px 0' }}>
            <Button type="primary" onClick={() => navigate('/settings/tenant')}>
              查看租户设置
            </Button>
          </div>
        </TabPane>

        <TabPane tab="用户管理" key="users">
          <div style={{ textAlign: 'center', padding: '50px 0' }}>
            <Button type="primary" onClick={() => navigate('/settings/users')}>
              查看用户管理
            </Button>
          </div>
        </TabPane>
      </Tabs>
    </div>
  );
};

export default Settings;