import React, { useMemo } from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { Layout, Menu, Button, Avatar, Dropdown } from 'antd';
import {
  DashboardOutlined,
  UnorderedListOutlined,
  HomeOutlined,
  CommentOutlined,
  WalletOutlined,
  SettingOutlined,
  LogoutOutlined,
  UserOutlined,
  CalendarOutlined,
  AuditOutlined,
  PayCircleOutlined,
  AccountBookOutlined,
} from '@ant-design/icons';
import { useAuthStore } from '@/store/auth';

const { Header, Sider, Content } = Layout;

const menuItems = [
  { key: '/dashboard', icon: <DashboardOutlined />, label: '工作台' },
  { key: '/orders', icon: <UnorderedListOutlined />, label: '订单管理' },
  { key: '/rooms', icon: <HomeOutlined />, label: '房源管理' },
  { key: '/room-calendar', icon: <CalendarOutlined />, label: '房量房价' },
  { key: '/reviews', icon: <CommentOutlined />, label: '评价管理' },
  {
    key: '/finance',
    icon: <WalletOutlined />,
    label: '财务管理',
    children: [
      { key: '/finance/settlements', icon: <AuditOutlined />, label: '结算对账' },
      { key: '/finance/withdrawals', icon: <PayCircleOutlined />, label: '收款记录' },
      { key: '/finance/wallet', icon: <AccountBookOutlined />, label: '我的钱包' },
    ],
  },
  { key: '/settings', icon: <SettingOutlined />, label: '店铺设置' },
];

const MainLayout: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { sellerInfo, logout } = useAuthStore();

  const openKeys = useMemo(() => {
    const path = location.pathname;
    if (path.startsWith('/finance')) return ['/finance'];
    return [];
  }, [location.pathname]);

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider width={220} theme="light" style={{ borderRight: '1px solid #f0f0f0' }}>
        <div style={{ height: 64, display: 'flex', alignItems: 'center', justifyContent: 'center', borderBottom: '1px solid #f0f0f0' }}>
          <h2 style={{ margin: 0, color: '#FF6B35', fontSize: 18 }}>品住会商家平台</h2>
        </div>
        <Menu
          mode="inline"
          selectedKeys={[location.pathname]}
          defaultOpenKeys={openKeys}
          items={menuItems}
          onClick={({ key }) => navigate(key)}
          style={{ borderRight: 0 }}
        />
      </Sider>
      <Layout>
        <Header style={{ background: '#fff', padding: '0 24px', display: 'flex', justifyContent: 'flex-end', alignItems: 'center', borderBottom: '1px solid #f0f0f0' }}>
          <Dropdown
            menu={{
              items: [
                { key: 'logout', icon: <LogoutOutlined />, label: '退出登录', onClick: logout },
              ],
            }}
          >
            <Button type="text">
              <Avatar icon={<UserOutlined />} style={{ marginRight: 8 }} />
              {sellerInfo?.contactName || sellerInfo?.phone || '商家'}
            </Button>
          </Dropdown>
        </Header>
        <Content style={{ margin: 24, padding: 24, background: '#fff', borderRadius: 8, minHeight: 360, overflow: 'auto' }}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default MainLayout;
