import React from 'react';
import { Outlet, Navigate, useLocation } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import {
  UserOutlined,
  SafetyOutlined,
  FileTextOutlined,
  DatabaseOutlined,
  InfoCircleOutlined,
  ArrowLeftOutlined,
  SettingOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Sider, Content } = Layout;

const AdminLayout: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const menuItems = [
    {
      key: '/admin/users',
      icon: <UserOutlined />,
      label: '用户管理'
    },
    {
      key: '/admin/roles',
      icon: <SafetyOutlined />,
      label: '角色权限'
    },
    {
      key: '/admin/process',
      icon: <SettingOutlined />,
      label: '流程管理'
    },
    {
      key: '/admin/logs',
      icon: <FileTextOutlined />,
      label: '系统日志'
    },
    {
      key: '/admin/backup',
      icon: <DatabaseOutlined />,
      label: '数据备份'
    },
    {
      key: '/admin/about',
      icon: <InfoCircleOutlined />,
      label: '关于系统'
    }
  ];

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider 
        width={220} 
        theme="light"
        style={{ 
          borderRight: '1px solid #f0f0f0',
          background: '#fff'
        }}
      >
        <div style={{ 
          height: 64, 
          display: 'flex', 
          alignItems: 'center', 
          justifyContent: 'center',
          borderBottom: '1px solid #f0f0f0',
          background: '#1890ff',
          color: '#fff',
          fontWeight: 'bold',
          fontSize: 16
        }}>
          系统后台管理
        </div>
        <Menu
          mode="inline"
          selectedKeys={[location.pathname]}
          items={menuItems}
          onClick={({ key }) => navigate(key)}
          style={{ borderRight: 0 }}
        />
        <div style={{ 
          position: 'absolute', 
          bottom: 20, 
          width: '100%', 
          padding: '0 16px' 
        }}>
          <div 
            onClick={() => navigate('/dashboard')}
            style={{ 
              cursor: 'pointer',
              color: '#1890ff',
              display: 'flex',
              alignItems: 'center',
              gap: 8
            }}
          >
            <ArrowLeftOutlined /> 返回前台
          </div>
        </div>
      </Sider>
      <Layout>
        <Content style={{ 
          margin: 0,
          background: '#f5f5f5',
          minHeight: '100vh'
        }}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default AdminLayout;