// ============================================================
// AdminLayout — ProLayout 管理后台布局
// ============================================================

import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import ProLayout from '@ant-design/pro-layout'
import {
  DashboardOutlined,
  TeamOutlined,
  CloudServerOutlined,
  ApiOutlined,
  KeyOutlined,
  BarChartOutlined,
  SwapOutlined,
  SettingOutlined,
  FileTextOutlined,
  MessageOutlined,
  RobotOutlined,
  LogoutOutlined,
} from '@ant-design/icons'
import { useAuthStore } from '@/stores/authStore'
import { Avatar, Dropdown, message } from 'antd'
import type { MenuDataItem } from '@ant-design/pro-layout'

const menuConfig: MenuDataItem[] = [
  { path: '/', name: '仪表盘', icon: <DashboardOutlined /> },
  { path: '/accounts', name: '账号管理', icon: <TeamOutlined />, permission: 'account:admin' },
  { path: '/providers', name: '服务商', icon: <CloudServerOutlined />, permission: 'provider:manage' },
  { path: '/models', name: '模型管理', icon: <ApiOutlined />, permission: 'model:read' },
  { path: '/agent-templates', name: 'Agent 模板', icon: <RobotOutlined />, permission: 'model:read' },
  { path: '/api-keys', name: 'API 密钥', icon: <KeyOutlined />, permission: 'admin:full' },
  { path: '/usage', name: '用量统计', icon: <BarChartOutlined />, permission: 'admin:full' },
  { path: '/relay', name: '中转任务', icon: <SwapOutlined />, permission: 'relay:use' },
  { path: '/config', name: '系统配置', icon: <SettingOutlined />, permission: 'config:read' },
  { path: '/prompts', name: '提示词管理', icon: <MessageOutlined />, permission: 'prompt:read' },
  { path: '/logs', name: '操作日志', icon: <FileTextOutlined />, permission: 'admin:full' },
]

function filterMenuByPermission(
  items: MenuDataItem[],
  hasPermission: (p: string) => boolean,
): MenuDataItem[] {
  return items
    .filter((item) => !item.permission || hasPermission(item.permission as string))
    .map(({ permission, ...rest }) => ({
      ...rest,
      children: rest.children ? filterMenuByPermission(rest.children, hasPermission) : undefined,
    }))
}

export default function AdminLayout() {
  const navigate = useNavigate()
  const location = useLocation()
  const { account, hasPermission, logout } = useAuthStore()

  const menuData = filterMenuByPermission(menuConfig, hasPermission)

  const handleLogout = () => {
    logout()
    message.success('已退出登录')
    navigate('/login', { replace: true })
  }

  return (
    <ProLayout
      title="ZCLAW"
      logo={<div style={{ width: 28, height: 28, background: '#1677ff', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700, fontSize: 14 }}>Z</div>}
      layout="mix"
      fixSiderbar
      fixedHeader
      location={{ pathname: location.pathname }}
      menuDataRender={() => menuData}
      menuItemRender={(item, dom) => (
        <div onClick={() => item.path && navigate(item.path)}>{dom}</div>
      )}
      avatarProps={{
        src: undefined,
        title: account?.display_name || account?.username || 'Admin',
        size: 'small',
        render: (_, dom) => (
          <Dropdown
            menu={{
              items: [
                {
                  key: 'logout',
                  icon: <LogoutOutlined />,
                  label: '退出登录',
                  onClick: handleLogout,
                },
              ],
            }}
          >
            {dom}
          </Dropdown>
        ),
      }}
      suppressSiderWhenMenuEmpty
      contentStyle={{ padding: 24 }}
    >
      <Outlet />
    </ProLayout>
  )
}