import { useMemo } from 'react';
import type { ReactNode } from 'react';
import { App as AntdApp, Alert, Card, Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import AuthButton from '@/components/AuthButton';
import { PERMISSION } from '@/constants/permissions';
import { appRoutes, type AppRouteItem } from '@/router/routeConfig';
import './MenuPermission.scss';

interface MenuNode {
  key: string;
  title: string;
  path: string;
  permission: string;
  type: '目录' | '菜单';
  icon?: ReactNode;
  children?: MenuNode[];
}

function toMenuData(routes: AppRouteItem[]): MenuNode[] {
  return routes.map((route) => ({
    key: route.path,
    title: route.title,
    path: route.path,
    permission: route.permission ?? '-',
    type: route.children?.length ? '目录' : '菜单',
    icon: route.icon,
    children: route.children ? toMenuData(route.children) : undefined,
  }));
}

export default function MenuPermission() {
  const { message } = AntdApp.useApp();
  // appRoutes 与当前页面存在模块循环引用，放在渲染期读取可避免模块初始化的 TDZ
  const dataSource = useMemo(() => toMenuData(appRoutes), []);

  const columns: TableProps<MenuNode>['columns'] = [
    {
      title: '菜单名称',
      dataIndex: 'title',
      width: 240,
      render: (value: string, record) => (
        <span className="menu-name">
          {record.icon}
          <span>{value}</span>
        </span>
      ),
    },
    {
      title: '路由路径',
      dataIndex: 'path',
      width: 220,
      render: (value: string) => <code className="menu-code">{value}</code>,
    },
    {
      title: '权限标识',
      dataIndex: 'permission',
      width: 240,
      render: (value: string) =>
        value === '-' ? (
          <span className="text-muted">-</span>
        ) : (
          <code className="menu-code">{value}</code>
        ),
    },
    {
      title: '类型',
      dataIndex: 'type',
      width: 90,
      render: (value: MenuNode['type']) => (
        <Tag color={value === '目录' ? 'purple' : 'blue'} bordered={false}>
          {value}
        </Tag>
      ),
    },
    {
      title: '状态',
      key: 'status',
      width: 90,
      render: () => (
        <Tag color="green" bordered={false}>
          启用
        </Tag>
      ),
    },
    {
      title: '操作',
      key: 'action',
      width: 110,
      render: (_value, record) => (
        <AuthButton
          type="link"
          size="small"
          permission={PERMISSION.PERMISSION_EDIT}
          onClick={() => message.info(`演示：编辑「${record.title}」的菜单配置`)}
        >
          编辑
        </AuthButton>
      ),
    },
  ];

  return (
    <div className="menu-permission-page">
      <div className="page-header">
        <div>
          <h1 className="page-header__title">菜单权限</h1>
          <p className="page-header__desc">
            菜单由路由配置自动生成，支持两级、三级嵌套；无权限的菜单会自动从侧边栏隐藏。
          </p>
        </div>
        <div className="page-header__actions">
          <Space wrap>
            <AuthButton
              permission={PERMISSION.PERMISSION_EDIT}
              onClick={() => message.info('演示：打开新增菜单弹窗')}
            >
              新增菜单
            </AuthButton>
            <AuthButton
              type="primary"
              permission={PERMISSION.PERMISSION_EDIT}
              onClick={() => message.success('菜单权限配置已保存（演示）')}
            >
              保存配置
            </AuthButton>
          </Space>
        </div>
      </div>

      <Alert
        className="menu-permission-alert"
        type="info"
        showIcon
        message="路由即菜单"
        description="所有页面统一在 src/router/routeConfig.tsx 中配置 path、title、permission 与组件，侧边栏、面包屑以及路由守卫都会读取同一份配置。"
      />

      <Card className="table-card" variant="borderless">
        <Table<MenuNode>
          rowKey="key"
          columns={columns}
          dataSource={dataSource}
          pagination={false}
          defaultExpandAllRows
          scroll={{ x: 900 }}
        />
      </Card>
    </div>
  );
}