import { Layout, Menu, Typography } from 'antd';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { clearAuth } from '../lib/adminAuth';

const { Header, Content, Sider } = Layout;

export function AdminLayout() {
  const navigate = useNavigate();
  const location = useLocation();

  const selectedKey = location.pathname.startsWith('/users') ? 'users' : 'users';

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider width={220}>
        <div style={{ padding: 16 }}>
          <Typography.Title level={5} style={{ color: 'white', margin: 0 }}>
            Whale Town Admin
          </Typography.Title>
        </div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[selectedKey]}
          items={[
            {
              key: 'users',
              label: '用户管理',
              onClick: () => navigate('/users'),
            },
            {
              key: 'logout',
              label: '退出登录',
              onClick: () => {
                clearAuth();
                navigate('/login');
              },
            },
          ]}
        />
      </Sider>
      <Layout>
        <Header style={{ background: 'white', display: 'flex', alignItems: 'center' }}>
          <Typography.Text>后台管理</Typography.Text>
        </Header>
        <Content style={{ padding: 16 }}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
}