import { useState, type ReactNode } from 'react'
import {
  Avatar,
  Breadcrumb,
  Button,
  Dropdown,
  Layout,
  Menu,
  Space,
  Tag,
  Typography,
  type MenuProps,
} from 'antd'
import {
  AccountBookOutlined,
  BellOutlined,
  CustomerServiceOutlined,
  DashboardOutlined,
  FileDoneOutlined,
  LogoutOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  SettingOutlined,
  ShareAltOutlined,
  ShopOutlined,
  ShoppingCartOutlined,
  TeamOutlined,
} from '@ant-design/icons'
import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom'

import { BrandLogo } from '@/components/BrandLogo'
import { getAdminBasePath, getAdminLoginPath } from '@/shared/api/adminClient'
import { useAdminSessionStore } from '@/stores/adminSession'

const { Sider, Header, Content } = Layout

interface NavItem {
  key: string
  label: string
  permission?: string
}

interface NavGroup {
  key: string
  label: string
  icon: ReactNode
  children: NavItem[]
}

const allNavGroups: NavGroup[] = [
  {
    key: 'workspace',
    label: '工作台',
    icon: <DashboardOutlined />,
    children: [{ key: '/', label: '仪表盘', permission: 'dashboard:view' }],
  },
  {
    key: 'trade',
    label: '交易',
    icon: <ShoppingCartOutlined />,
    children: [
      { key: '/orders', label: '订单管理', permission: 'order:list' },
      { key: '/orders/refund-review', label: '退款审核', permission: 'order:close' },
      { key: '/pickup', label: '线下提号', permission: 'order:pickup' },
      { key: '/disputes', label: '申诉仲裁', permission: 'dispute:view' },
    ],
  },
  {
    key: 'listings',
    label: '商品',
    icon: <ShopOutlined />,
    children: [
      { key: '/listings', label: '商品管理', permission: 'listing:view' },
      { key: '/listings/review', label: '商品审核', permission: 'listing:approve' },
    ],
  },
  {
    key: 'users',
    label: '用户',
    icon: <TeamOutlined />,
    children: [{ key: '/users', label: '用户管理', permission: 'user:view' }],
  },
  {
    key: 'finance',
    label: '财务',
    icon: <AccountBookOutlined />,
    children: [
      { key: '/finance', label: '财务看板', permission: 'wallet:view' },
      { key: '/finance/details', label: '资金明细', permission: 'wallet:view' },
      { key: '/finance/disbursements', label: '资金出款', permission: 'wallet:view' },
      { key: '/payments', label: '支付流水', permission: 'wallet:view' },
      { key: '/wallet-ledger', label: '钱包流水', permission: 'wallet:view' },
      {
        key: '/finance/operating-expenses',
        label: '运营开支',
        permission: 'finance:operating_expense',
      },
      { key: '/withdrawals', label: '提现审核', permission: 'withdrawal:list' },
    ],
  },
  {
    key: 'distribution',
    label: '分销',
    icon: <ShareAltOutlined />,
    children: [
      { key: '/distribution/dashboard', label: '分销看板', permission: 'distribution:site_view' },
      { key: '/distribution/sites', label: '站点管理', permission: 'distribution:site_view' },
      { key: '/distribution/orders', label: '分销订单', permission: 'distribution:order_view' },
      {
        key: '/distribution/settlements',
        label: '结算批次',
        permission: 'distribution:settlement_view',
      },
      { key: '/distribution/users', label: '分销用户', permission: 'distribution:site_view' },
      {
        key: '/distribution/announcements',
        label: '站点公告',
        permission: 'distribution:announcement_view',
      },
      { key: '/distribution/listings', label: '分销商品', permission: 'distribution:account_view' },
      {
        key: '/distribution/payment-channels',
        label: '支付通道',
        permission: 'distribution:payment_view',
      },
      { key: '/distribution/wallet', label: '站点钱包', permission: 'distribution:settlement_view' },
      { key: '/distribution/rules', label: '规则版本', permission: 'distribution:rule_view' },
      { key: '/distribution/qrcodes', label: '二维码池', permission: 'qrcode:view' },
      { key: '/distribution/sms', label: '站点短信', permission: 'distribution:site_view' },
      { key: '/distribution/invitation', label: '邀请返利', permission: 'distribution:site_view' },
    ],
  },
  {
    key: 'operations',
    label: '运营',
    icon: <BellOutlined />,
    children: [{ key: '/announcements', label: '公告管理', permission: 'announcement:view' }, { key: '/tracking-links', label: '推广追踪', permission: 'ad_tracking:manage' }],
  },
  {
    key: 'support',
    label: '客服',
    icon: <CustomerServiceOutlined />,
    children: [
      { key: '/chat-support-groups', label: '客服群组', permission: 'chat:manage' },
      { key: '/chats', label: '客服会话', permission: 'chat:view' },
      { key: '/manual-entries', label: '手工录单', permission: 'cs_manual_entry:view' },
      { key: '/chat-quick-replies', label: '快捷回复', permission: 'chat:view' },
    ],
  },
  {
    key: 'system',
    label: '系统',
    icon: <SettingOutlined />,
    children: [
      { key: '/system-configs', label: '系统配置', permission: 'system_config:view' },
      { key: '/roles', label: '角色权限', permission: 'role:manage' },
      { key: '/admin-users', label: '管理员账号', permission: 'admin_user:manage' },
      { key: '/payment-configs', label: '支付配置', permission: 'payment_config:list' },
      { key: '/audit-logs', label: '审计日志', permission: 'audit_log:view' },
    ],
  },
]

const sectionMeta: Record<string, { title: string; description: string }> = {
  '/orders': { title: '订单管理', description: '查看全量订单、交接记录与结账状态。' },
  '/orders/refund-review': { title: '退款审核', description: '审核退款申请并核对资金影响。' },
  '/pickup': { title: '线下提号', description: '管理员线下提号，站内结算或线下打款确认。' },
  '/disputes': { title: '申诉仲裁', description: '处理订单争议、证据与仲裁结果。' },
  '/listings': { title: '商品管理', description: '查看商品、账号资产与上下架状态。' },
  '/listings/review': { title: '商品审核', description: '审核待上架商品与账号截图。' },
  '/users': { title: '用户管理', description: '查看用户、实名状态与交易记录。' },
  '/finance': { title: '财务看板', description: '查看收入、退款、结算与资金趋势。' },
  '/finance/details': { title: '资金明细', description: '按订单核对实付、退款、号主结算与平台净额。' },
  '/payments': { title: '支付流水', description: '核对渠道支付单、回调状态与失败原因。' },
  '/wallet-ledger': { title: '钱包流水', description: '按用户、订单与业务类型核对余额变动。' },
  '/finance/disbursements': { title: '资金出款', description: '查看代管出款、提现与线下出款明细。' },
  '/finance/operating-expenses': { title: '运营开支', description: '登记与核对日常运营支出。' },
  '/withdrawals': { title: '提现审核', description: '审核提现申请与打款确认。' },
  '/distribution/sites': { title: '分销站点', description: '管理分站、规则、结算与站点钱包。' },
  '/distribution/dashboard': { title: '分销看板', description: '查看站点收号、订单、利润与近 7 天趋势。' },
  '/distribution/orders': { title: '分销订单', description: '核对分销订单快照与冷却期释放状态。' },
  '/distribution/settlements': { title: '结算批次', description: '生成人工批次并核对、释放站内份额。' },
  '/distribution/users': { title: '分销用户', description: '查看站点注册客户、下单客户与消费贡献。' },
  '/distribution/announcements': { title: '站点公告', description: '维护分站自己的公告中心与弹窗公告。' },
  '/distribution/listings': { title: '分销商品', description: '查看收货商品并控制账号展示与加价。' },
  '/distribution/payment-channels': { title: '支付通道', description: '为分站绑定主站支付商户配置。' },
  '/distribution/wallet': { title: '站点钱包', description: '查看分站余额、结算进度与提现记录。' },
  '/distribution/rules': { title: '规则版本', description: '维护全局与站点级分账规则版本。' },
  '/distribution/qrcodes': { title: '二维码池', description: '按站点维护发布群二维码池与发放状态。' },
  '/distribution/sms': { title: '站点短信', description: '为分站配置独立短信签名、模板与密钥。' },
  '/distribution/invitation': { title: '邀请返利', description: '配置分站邀请好友的返利比例。' },
  '/announcements': { title: '公告管理', description: '维护主站与分站公告。' },
  '/roles': { title: '角色权限', description: '维护后台角色并分配资源级操作权限。' },
  '/admin-users': { title: '管理员账号', description: '维护后台账号、启用状态与角色绑定。' },
  '/manual-entries': {
    title: '手工录单',
    description: '录入系统外成单编号，用于对账与客服绩效统计。',
  },
  '/chat-quick-replies': {
    title: '快捷回复',
    description: '维护客服会话常用话术与全局可见范围。',
  },
  '/tracking-links': {
    title: '推广追踪',
    description: '管理推广短链、渠道成本与注册下单转化。',
  },
  '/chat-support-groups': {
    title: '客服群组',
    description: '维护客服群与坐席分配，支撑会话分流。',
  },
  '/chats': {
    title: '客服会话',
    description: '按阶段筛选会话、回复用户并转接客服。',
  },
  '/system-configs': { title: '系统配置', description: '维护首页、发布、订单与支付配置。' },
  '/payment-configs': { title: '支付配置', description: '维护主站支付商户、渠道与回调参数。' },
  '/audit-logs': { title: '审计日志', description: '查看高风险操作与变更记录。' },
}

export function AdminLayout() {
  const navigate = useNavigate()
  const location = useLocation()
  const admin = useAdminSessionStore(state => state.admin)
  const logout = useAdminSessionStore(state => state.logout)
  const [collapsed, setCollapsed] = useState(false)

  const basePath = getAdminBasePath()
  const relativePath =
    location.pathname.startsWith(basePath) && location.pathname !== basePath
      ? location.pathname.slice(basePath.length)
      : '/'

  const can = (permission?: string) => {
    if (!permission) return true
    const permissions = admin?.permissions ?? []
    return permissions.includes('*') || permissions.includes(permission)
  }

  const visibleGroups = allNavGroups
    .map(group => ({
      ...group,
      children: group.children.filter(item => can(item.permission)),
    }))
    .filter(group => group.children.length > 0)

  const menuItems: MenuProps['items'] = visibleGroups.map(group => ({
    key: group.key,
    icon: group.icon,
    label: group.label,
    children: group.children.map(item => ({
      key: item.key,
      label: item.label,
    })),
  }))

  const currentLabel =
    visibleGroups.flatMap(group => group.children).find(item => item.key === relativePath)?.label ||
    sectionMeta[relativePath]?.title ||
    (relativePath === '/' ? '仪表盘' : '功能建设中')

  const onLogout = async () => {
    await logout()
    navigate(getAdminLoginPath(), { replace: true })
  }

  return (
    <Layout className="admin-shell">
      <Sider
        className="admin-sider"
        theme="light"
        width={240}
        collapsedWidth={72}
        collapsed={collapsed}
        trigger={null}
      >
        <Link to={basePath} className="admin-sider__brand" aria-label="解忧商行后台首页">
          <BrandLogo height={34} variant="light" />
          {!collapsed ? <span className="admin-sider__phase">OPS · P1</span> : null}
        </Link>

        <Menu
          className="admin-menu"
          mode="inline"
          theme="light"
          inlineCollapsed={collapsed}
          items={menuItems}
          selectedKeys={[relativePath]}
          defaultOpenKeys={visibleGroups.map(group => group.key)}
          onClick={({ key }) => {
            if (key.startsWith('/')) {
              navigate(key === '/' ? basePath : `${basePath}${key}`)
            }
          }}
        />

        {!collapsed ? (
          <div className="admin-sider__foot">
            <Typography.Text type="secondary">解忧商行 · 运营后台</Typography.Text>
            <Typography.Text type="secondary">Phase 2 · 交易与商品</Typography.Text>
          </div>
        ) : null}
      </Sider>

      <Layout className="admin-main">
        <Header className="admin-header">
          <div className="admin-header__left">
            <Button
              type="text"
              className="admin-collapse"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(value => !value)}
              aria-label={collapsed ? '展开侧栏' : '收起侧栏'}
            />
            <Breadcrumb
              items={[
                { title: '解忧商行' },
                { title: currentLabel },
              ]}
            />
          </div>

          <Space size={16}>
            {admin?.roles?.[0] ? <Tag className="admin-role-tag">{admin.roles[0].name}</Tag> : null}
            <Dropdown
              menu={{
                items: [
                  {
                    key: 'account',
                    label: `${admin?.nickname || admin?.username || '管理员'} · ${admin?.username || ''}`,
                    disabled: true,
                  },
                  { type: 'divider' },
                  { key: 'logout', label: '退出后台', icon: <LogoutOutlined />, onClick: onLogout },
                ],
              }}
              placement="bottomRight"
            >
              <Button type="text" className="admin-account">
                <Avatar size={30} className="admin-avatar">
                  {(admin?.nickname || admin?.username || '管').slice(0, 1)}
                </Avatar>
                <span className="admin-account__name">{admin?.nickname || admin?.username}</span>
              </Button>
            </Dropdown>
          </Space>
        </Header>

        <Content className="admin-content">
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  )
}

export function AdminSectionPlaceholder({ title, description }: { title: string; description: string }) {
  return (
    <div className="admin-page">
      <div className="admin-page__head">
        <div>
          <Typography.Text className="admin-page__eyebrow">JIEYOU OPS</Typography.Text>
          <Typography.Title level={2} className="brand-title">
            {title}
          </Typography.Title>
          <Typography.Text type="secondary">{description}</Typography.Text>
        </div>
        <Tag icon={<FileDoneOutlined />} className="admin-phase-tag">
          Phase 1 · 待迁移
        </Tag>
      </div>

      <div className="admin-placeholder-card">
        <span className="admin-placeholder-card__seal">解忧</span>
        <Typography.Title level={4}>这个页面还没开始迁移</Typography.Title>
        <Typography.Paragraph type="secondary">
          当前批次先把后台登录、权限会话、浅色 Shell 和真实仪表盘跑通。{title}
          会在后续批次按统一列表/详情/表单原型迁移，不会直接复用旧站页面。
        </Typography.Paragraph>
        <Button type="primary" onClick={() => window.history.back()}>
          返回上一页
        </Button>
      </div>
    </div>
  )
}

export function getAdminSectionMeta(key: string) {
  return sectionMeta[key]
}