import React, { useMemo } from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { Layout, Menu, Button, Avatar, Dropdown } from 'antd';
import {
  DashboardOutlined,
  ShopOutlined,
  TeamOutlined,
  UnorderedListOutlined,
  WalletOutlined,
  GiftOutlined,
  SettingOutlined,
  LogoutOutlined,
  UserOutlined,
  HomeOutlined,
  AuditOutlined,
  PayCircleOutlined,
  FundOutlined,
  TrophyOutlined,
  DollarOutlined,
  StarOutlined,
  BarChartOutlined,
  TagOutlined,
  CreditCardOutlined,
} from '@ant-design/icons';
import { useAuthStore } from '@/store/auth';

const { Header, Sider, Content } = Layout;

const menuItems = [
  { key: '/dashboard', icon: <DashboardOutlined />, label: '数据概览' },
  { key: '/merchants', icon: <ShopOutlined />, label: '商家管理' },
  { key: '/room-audit', icon: <HomeOutlined />, label: '房源审核' },
  { key: '/users', icon: <TeamOutlined />, label: '用户管理' },
  { key: '/orders', icon: <UnorderedListOutlined />, label: '订单管理' },
  { key: '/order-statistics', icon: <BarChartOutlined />, label: '订单统计' },
  { key: '/reviews', icon: <StarOutlined />, label: '评价管理' },
  {
    key: '/finance',
    icon: <WalletOutlined />,
    label: '财务管理',
    children: [
      { key: '/finance/dashboard', icon: <DashboardOutlined />, label: '财务总览' },
      { key: '/finance/platform-wallet', icon: <WalletOutlined />, label: '平台钱包' },
      { key: '/finance/platform-transactions', icon: <UnorderedListOutlined />, label: '交易记录' },
      { key: '/finance/bank-cards', icon: <CreditCardOutlined />, label: '银行卡管理' },
      { key: '/finance/accounts', icon: <TeamOutlined />, label: '账户管理' },
      { key: '/finance/settlements', icon: <AuditOutlined />, label: '结算管理' },
      { key: '/finance/withdrawals', icon: <PayCircleOutlined />, label: '提现审核' },
      { key: '/finance/earnings', icon: <FundOutlined />, label: '收益分析' },
      { key: '/finance/service-fees', icon: <DollarOutlined />, label: '服务费统计' },
    ],
  },
  { key: '/invite', icon: <TrophyOutlined />, label: '邀请返现' },
  { key: '/coupons', icon: <TagOutlined />, label: '优惠券管理' },
  { key: '/promotions', icon: <GiftOutlined />, label: '推广管理' },
  { key: '/settings', icon: <SettingOutlined />, label: '系统设置' },
];

const MainLayout: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { userInfo, 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="dark">
        <div style={{ height: 64, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <h2 style={{ margin: 0, color: '#fff', fontSize: 18 }}>品住会官方平台</h2>
        </div>
        <Menu
          theme="dark"
          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 }} />
              {userInfo?.name || '管理员'}
            </Button>
          </Dropdown>
        </Header>
        <Content style={{ margin: 24, padding: 24, background: '#fff', borderRadius: 8, minHeight: 360, overflow: 'auto' }}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default MainLayout;
