import React, { useEffect, useState } from 'react';
import { Table, Button, Modal, Form, Input, Space, message, Switch, Select, TreeSelect, Tooltip, InputNumber } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import * as AntdIcons from '@ant-design/icons';
import { getMenuTree, createMenu, updateMenu, deleteMenu } from './service';
import IconSelect from '@/components/IconSelect';

const MenuPage: React.FC = () => {
  const [menus, setMenus] = useState<MenuDTO[]>([]);
  const [menuTreeData, setMenuTreeData] = useState<MenuDTO[]>([]);
  const [modalVisible, setModalVisible] = useState(false);
  const [iconSelectVisible, setIconSelectVisible] = useState(false);
  const [editingMenu, setEditingMenu] = useState<MenuDTO | null>(null);
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();

  const fetchData = async () => {
    try {
      setLoading(true);
      const [menuList, treeData] = await Promise.all([
        getMenuTree(),
        getMenuTreeWithoutButtons()
      ]);
      setMenus(menuList);
      setMenuTreeData(treeData);
    } catch (error) {
      console.error('获取菜单列表失败:', error);
      message.error('获取菜单列表失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  const getIcon = (iconName: string | undefined) => {
    if (!iconName) return null;
    const iconKey = `${iconName.charAt(0).toUpperCase() + iconName.slice(1)}Outlined`;
    const IconComponent = (AntdIcons as any)[iconKey];
    return IconComponent ? <IconComponent /> : null;
  };

  const handleAdd = () => {
    setEditingMenu(null);
    form.resetFields();
    form.setFieldsValue({
      type: MenuTypeEnum.MENU,
      sort: 0,
      hidden: false,
      enabled: true
    });
    setModalVisible(true);
  };

  const handleEdit = (record: MenuDTO) => {
    setEditingMenu(record);
    form.setFieldsValue({
      ...record,
      parentId: record.parentId === 0 ? undefined : record.parentId
    });
    setModalVisible(true);
  };

  const handleDelete = async (id: number) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这个菜单吗？',
      onOk: async () => {
        try {
          await deleteMenu(id);
          message.success('删除成功');
          fetchData();
        } catch (error) {
          message.error('删除失败');
        }
      },
    });
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      const submitData = {
        ...values,
        parentId: values.parentId || 0
      };

      if (editingMenu) {
        await updateMenu(editingMenu.id, submitData);
        message.success('更新成功');
      } else {
        await createMenu(submitData);
        message.success('创建成功');
      }
      setModalVisible(false);
      fetchData();
    } catch (error) {
      message.error('操作失败');
    }
  };

  const getTreeSelectData = (menus: MenuDTO[]) => {
    const treeData = menus.map(menu => ({
      title: menu.name,
      value: menu.id,
      children: menu.children?.map(child => ({
        title: child.name,
        value: child.id,
        disabled: editingMenu?.id === child.id
      }))
    }));

    return treeData;
  };

  const columns = [
    {
      title: '菜单名称',
      dataIndex: 'name',
      key: 'name',
      width: '200px',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      width: '100px',
      render: (type: MenuTypeEnum) => MenuTypeNames[type],
    },
    {
      title: '权限标识',
      dataIndex: 'permission',
      key: 'permission',
      width: '150px',
    },
    {
      title: '路由地址',
      dataIndex: 'path',
      key: 'path',
      width: '150px',
    },
    {
      title: '组件路径',
      dataIndex: 'component',
      key: 'component',
      width: '150px',
    },
    {
      title: '排序',
      dataIndex: 'sort',
      key: 'sort',
      width: '80px',
    },
    {
      title: '状态',
      dataIndex: 'enabled',
      key: 'enabled',
      width: '80px',
      render: (enabled: boolean) => (
        <Switch checked={enabled} disabled />
      ),
    },
    {
      title: '操作',
      key: 'action',
      width: '150px',
      render: (_: any, record: MenuDTO) => (
        <Space>
          <Button 
            type="link" 
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Button 
            type="link" 
            danger 
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record.id)}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div style={{ padding: '24px' }}>
      <div style={{ marginBottom: 16 }}>
        <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
          新增菜单
        </Button>
      </div>

      <Table
        loading={loading}
        columns={columns}
        dataSource={menus}
        rowKey="id"
        pagination={false}
        size="middle"
        bordered
      />

      <Modal
        title={editingMenu ? '编辑菜单' : '新增菜单'}
        open={modalVisible}
        onOk={handleSubmit}
        onCancel={() => setModalVisible(false)}
        width={600}
        destroyOnClose
      >
        <Form
          form={form}
          layout="vertical"
          initialValues={{ type: MenuTypeEnum.MENU, sort: 0 }}
        >
          <Form.Item
            name="name"
            label="菜单名称"
            rules={[{ required: true, message: '请输入菜单名称' }]}
          >
            <Input placeholder="请输入菜单名称" />
          </Form.Item>

          <Form.Item
            name="type"
            label="菜单类型"
            rules={[{ required: true, message: '请选择菜单类型' }]}
          >
            <Select>
              <Select.Option value={MenuTypeEnum.DIRECTORY}>目录</Select.Option>
              <Select.Option value={MenuTypeEnum.MENU}>菜单</Select.Option>
              <Select.Option value={MenuTypeEnum.BUTTON}>按钮</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="parentId"
            label={
              <span>
                上级菜单
                <Tooltip title="不选择则为顶级菜单">
                  <QuestionCircleOutlined style={{ marginLeft: 4 }} />
                </Tooltip>
              </span>
            }
          >
            <TreeSelect
              treeData={getTreeSelectData(menuTreeData)}
              placeholder="不选择则为顶级菜单"
              allowClear
              treeDefaultExpandAll
              showSearch
              treeNodeFilterProp="title"
            />
          </Form.Item>

          {form.getFieldValue('type') !== MenuTypeEnum.BUTTON && (
            <>
              <Form.Item
                name="path"
                label={
                  <span>
                    路由地址
                    <Tooltip title="目录示例: /system 菜单示例: /system/user">
                      <QuestionCircleOutlined style={{ marginLeft: 4 }} />
                    </Tooltip>
                  </span>
                }
                rules={[{ required: true, message: '请输入路由地址' }]}
              >
                <Input placeholder="请输入路由地址" />
              </Form.Item>

              <Form.Item
                name="component"
                label={
                  <span>
                    组件路径
                    <Tooltip title="目录固定值: LAYOUT 菜单示例: /System/User/index">
                      <QuestionCircleOutlined style={{ marginLeft: 4 }} />
                    </Tooltip>
                  </span>
                }
                rules={[{ required: true, message: '请输入组件路径' }]}
              >
                <Input placeholder="请输入组件路径" />
              </Form.Item>

              <Form.Item
                name="icon"
                label="图标"
              >
                <Input
                  placeholder="请选择图标"
                  readOnly
                  onClick={() => setIconSelectVisible(true)}
                  suffix={form.getFieldValue('icon') && getIcon(form.getFieldValue('icon'))}
                />
              </Form.Item>
            </>
          )}

          {form.getFieldValue('type') === MenuTypeEnum.BUTTON && (
            <Form.Item
              name="permission"
              label={
                <span>
                  权限标识
                  <Tooltip title="示例: system:user:add">
                    <QuestionCircleOutlined style={{ marginLeft: 4 }} />
                  </Tooltip>
                </span>
              }
              rules={[{ required: true, message: '请输入权限标识' }]}
            >
              <Input placeholder="请输入权限标识" />
            </Form.Item>
          )}

          <Form.Item
            name="sort"
            label="显示排序"
            rules={[{ required: true, message: '请输入显示排序' }]}
          >
            <InputNumber style={{ width: '100%' }} min={0} placeholder="请输入显示排序" />
          </Form.Item>

          <Form.Item
            name="hidden"
            label="是否隐藏"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>
        </Form>
      </Modal>

      <IconSelect
        visible={iconSelectVisible}
        onCancel={() => setIconSelectVisible(false)}
        value={form.getFieldValue('icon')}
        onChange={value => {
          form.setFieldValue('icon', value);
          setIconSelectVisible(false);
        }}
      />
    </div>
  );
};

export default MenuPage;