import { useEffect, useRef, useState } from 'react';
import { Drawer, Form, Input, InputNumber, Radio, Switch, TreeSelect, Button, Space, Row, Col, Card } from 'antd';
import type { DefaultOptionType } from 'antd/es/select';
import { App } from 'antd';
import { getMenu, getMenuList, createMenu, updateMenu } from '@/api/system/menu';
import type { SystemMenu } from '@/api/system/menu';
import { useTranslation } from 'react-i18next';

const DEFAULT_FORM = { type: 1, status: 0, visible: true, keepAlive: true, sort: 0 };

/** Build tree-select data from flat menu list */
function buildMenuTreeSelect(list: SystemMenu[]): DefaultOptionType[] {
  const map = new Map<number, DefaultOptionType>();
  const roots: DefaultOptionType[] = [];

  for (const item of list) {
    map.set(item.id!, {
      value: item.id,
      title: item.name,
      children: [],
    });
  }

  for (const item of list) {
    const node = map.get(item.id!)!;
    if (item.parentId === 0 || !map.has(item.parentId)) {
      roots.push(node);
    } else {
      map.get(item.parentId)!.children.push(node);
    }
  }

  return roots;
}

interface MenuDrawerProps {
  open: boolean;
  id: number | null;
  onSuccess: () => void;
  onClose: () => void;
}

const MenuDrawer: React.FC<MenuDrawerProps> = ({ open, id, onSuccess, onClose }) => {
  const { t } = useTranslation('system/menu');
  const { t: tc } = useTranslation('common');
  const { message } = App.useApp();
  const [form] = Form.useForm();
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [menuTree, setMenuTree] = useState<DefaultOptionType[]>([]);
  // 保留服务端原始字段，避免编辑时丢掉未在表单里出现的字段
  const originData = useRef<Partial<SystemMenu>>({});
  const menuType = Form.useWatch('type', form);
  const isEdit = id != null;

  useEffect(() => {
    if (open) {
      form.resetFields();
      originData.current = {};
      getMenuList().then(({ data }) => setMenuTree(buildMenuTreeSelect(data))).catch(() => { });
      if (id) {
        getMenu(id).then(({ data }) => {
          originData.current = { ...data };
          form.setFieldsValue(data);
        }).catch(() => { });
      } else {
        form.setFieldsValue(DEFAULT_FORM);
      }
    }
  }, [open, id, form]);

  const handleOk = async () => {
    let values: SystemMenu;
    try { values = await form.validateFields(); } catch { return; }
    setConfirmLoading(true);
    try {
      const payload = { ...originData.current, ...values, ...(id != null ? { id } : {}) } as SystemMenu;
      if (isEdit) {
        await updateMenu(payload);
        message.success(tc('success'));
      } else {
        await createMenu(payload);
        message.success(tc('success'));
      }
      onSuccess();
    } finally {
      setConfirmLoading(false);
    }
  };

  return (
    <Drawer
      title={isEdit ? t('editTitle') : t('addTitle')}
      open={open}
      onClose={onClose}
      destroyOnHidden={true}
      size={'30%'}
      closable={{ placement: 'end' }}
      mask={{ closable: false }}
      styles={{ body: { background: '#f5f5f5' } }}
      footer={
        <Space style={{ float: 'right' }}>
          <Button onClick={onClose}>{tc('cancel')}</Button>
          <Button type="primary" loading={confirmLoading} onClick={handleOk}>
            {tc('confirm')}
          </Button>
        </Space>
      }
    >
      <Card style={{ border: 'none' }}>
        <Form form={form} layout="vertical" initialValues={DEFAULT_FORM} autoComplete="off">
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="parentId" label={t('parentName')}>
                <TreeSelect
                  placeholder={t('parentPlaceholder')}
                  treeData={menuTree}
                  treeDefaultExpandAll
                  allowClear
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="type" label={t('type')}>
                <Radio.Group>
                  <Radio value={1}>{t('typeDir')}</Radio>
                  <Radio value={2}>{t('typeMenu')}</Radio>
                  <Radio value={3}>{t('typeButton')}</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="name"
                label={t('name')}
                rules={[{ required: true, message: t('namePlaceholder') }]}
              >
                <Input placeholder={t('namePlaceholder')} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="sort" label={t('sort')}>
                <InputNumber min={0} style={{ width: '100%' }} />
              </Form.Item>
            </Col>
          </Row>

          {menuType !== 3 && (
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item name="path" label={t('path')}>
                  <Input placeholder={t('pathPlaceholder')} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item name="icon" label={t('icon')}>
                  <Input placeholder={t('iconPlaceholder')} />
                </Form.Item>
              </Col>
            </Row>
          )}

          <Row gutter={16}>
            {menuType === 2 && (
              <Col span={12}>
                <Form.Item name="component" label={t('component')}>
                  <Input placeholder={t('componentPlaceholder')} />
                </Form.Item>
              </Col>
            )}
            <Col span={12}>
              <Form.Item name="permission" label={t('permission')}>
                <Input placeholder={t('permissionPlaceholder')} />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="status" label={t('status')}>
                <Radio.Group>
                  <Radio value={0}>{tc('enable')}</Radio>
                  <Radio value={1}>{tc('disable')}</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
          </Row>

          {(menuType !== 3 || menuType === 2) && (
            <Row gutter={16}>
              {menuType !== 3 && (
                <Col span={12}>
                  <Form.Item name="visible" label={t('visible')} valuePropName="checked">
                    <Switch />
                  </Form.Item>
                </Col>
              )}
              {menuType === 2 && (
                <Col span={12}>
                  <Form.Item name="keepAlive" label={t('keepAlive')} valuePropName="checked">
                    <Switch />
                  </Form.Item>
                </Col>
              )}
            </Row>
          )}
        </Form>
      </Card>
    </Drawer>
  );
};

export default MenuDrawer;