import { useEffect, useState } from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { Layout, Menu, Typography, Button, Space } from 'antd';
import type { MenuProps } from 'antd';
import {
  DashboardOutlined,
  UserOutlined,
  ShoppingOutlined,
  ShopOutlined,
  TeamOutlined,
  GiftOutlined,
  CarOutlined,
  SafetyOutlined,
  LogoutOutlined,
  CloudUploadOutlined,
  FileTextOutlined,
} from '@ant-design/icons';
import { clearAuth, request, type HqProfile } from '../lib/api';

const { Header, Sider, Content } = Layout;

const MENU_ITEMS: MenuProps['items'] = [
  { key: '/', icon: <DashboardOutlined />, label: '概览' },
  { key: '/users', icon: <UserOutlined />, label: '用户' },
  {
    key: 'products-group',
    icon: <ShoppingOutlined />,
    label: '商品',
    children: [
      { key: '/products', label: '商品列表' },
      { key: '/product-detail-templates', label: '详情模板' },
    ],
  },
  { key: '/orders', icon: <ShoppingOutlined />, label: '订单' },
  { key: '/resources', icon: <CloudUploadOutlined />, label: 'OSS 资源库' },
  {
    key: 'stores-group',
    icon: <ShopOutlined />,
    label: '门店',
    children: [
      { key: '/stores', label: '门店列表' },
      { key: '/store-accounts', label: '门店账户' },
      { key: '/store-media', label: '门店资源' },
    ],
  },
  {
    key: 'partners-group',
    icon: <TeamOutlined />,
    label: '开城',
    children: [
      { key: '/partners', label: '开城合伙人' },
      { key: '/cities', label: '开城城市' },
      { key: '/partner-accounts', label: '开城合伙人账户' },
    ],
  },
  {
    key: 'benefit-group',
    icon: <GiftOutlined />,
    label: '好客权益',
    children: [
      { key: '/benefit/coupons', label: '权益券' },
      { key: '/benefit/ledgers', label: '流水' },
      { key: '/redeem-records', label: '核销记录' },
      { key: '/redeem/debug', label: '核销调试' },
      { key: '/store-payouts', label: '门店打款' },
    ],
  },
  { key: '/partner-bills', icon: <TeamOutlined />, label: '合伙人结算' },
  { key: '/tickets', icon: <CarOutlined />, label: '工单中心' },
  {
    key: 'logs-group',
    icon: <FileTextOutlined />,
    label: '日志',
    children: [
      { key: '/logs/users', label: '用户日志' },
      { key: '/logs/hq', label: 'HQ 操作日志' },
      { key: '/logs/third-party', label: '第三方日志' },
    ],
  },
  {
    key: 'deliveries-group',
    icon: <CarOutlined />,
    label: '配送单',
    children: [
      { key: '/deliveries', label: '配送单列表' },
      { key: '/deliveries/xiaofeixia', label: '小飞侠联调' },
    ],
  },
  { key: '/hq-accounts', icon: <SafetyOutlined />, label: 'HQ账户' },
];

export default function AdminLayout() {
  const navigate = useNavigate();
  const location = useLocation();
  const [profile, setProfile] = useState<HqProfile | null>(null);

  useEffect(() => {
    request<HqProfile>('/admin/auth/me').then(setProfile).catch(() => {});
  }, []);

  function logout() {
    clearAuth();
    navigate('/login');
  }

  const selectedKey = location.pathname;

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider breakpoint="lg" collapsedWidth={64} theme="dark" width={220}>
        <div style={{ padding: '16px', color: '#fff', fontWeight: 600 }}>杜康 HQ</div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[selectedKey]}
          defaultOpenKeys={['products-group', 'stores-group', 'partners-group', 'benefit-group', 'logs-group', 'deliveries-group']}
          items={MENU_ITEMS}
          onClick={({ key }) => {
            if (key.startsWith('/')) navigate(key);
          }}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            background: '#fff',
            padding: '0 24px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            borderBottom: '1px solid #f0f0f0',
          }}
        >
          <Typography.Title level={4} style={{ margin: 0 }}>
            管理后台
          </Typography.Title>
          <Space>
            <span>{profile?.name || '—'}</span>
            <span style={{ color: '#999' }}>{profile?.adminRole}</span>
            <Button type="text" icon={<LogoutOutlined />} onClick={logout}>
              退出
            </Button>
          </Space>
        </Header>
        <Content style={{ margin: 24 }}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
}