import { useRef, useState } from 'react';
import { App, Button, Space, Tag } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { ProTable, type ProColumns, type ActionType } from '@ant-design/pro-components';
import { useTranslation } from 'react-i18next';
import { getVariableDictPage, disableVariableDict } from '@/api/mdm/coding-system';
import type { VariableDictVO } from '@/types/mdm/coding-system';
import { VARIABLE_DICT_STATUS } from '@/types/mdm/coding-system';
import VariableDictDrawer from './components/VariableDictDrawer';

const VariableDictPage: React.FC = () => {
  const { t } = useTranslation('mdm/coding-system');
  const { t: tc } = useTranslation('common');
  const { message, modal: appModal } = App.useApp();
  const actionRef = useRef<ActionType>(null);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [editId, setEditId] = useState<number | null>(null);

  const reload = () => actionRef.current?.reload();

  const handleDisable = async (record: VariableDictVO) => {
    appModal.confirm({
      title: tc('tip'),
      content: `确认停用变量「${record.key}」吗？`,
      onOk: async () => {
        await disableVariableDict(record.id);
        message.success(tc('success'));
        reload();
      },
    });
  };

  const columns: ProColumns<VariableDictVO>[] = [
    {
      title: t('variableKey'),
      dataIndex: 'key',
      width: 160,
    },
    {
      title: t('variableName'),
      dataIndex: 'name',
      width: 120,
    },
    {
      title: t('variableDesc'),
      dataIndex: 'desc',
      ellipsis: true,
      search: false,
      width: 220,
    },
    {
      title: t('variableScope'),
      dataIndex: 'scope',
      valueType: 'select',
      valueEnum: {
        通用: { text: '通用' },
        物料: { text: '物料' },
        设备: { text: '设备' },
        客户: { text: '客户' },
        '合金主数据': { text: '合金主数据' },
        组织: { text: '组织' },
        产品族: { text: '产品族' },
      },
      width: 110,
      render: (_, r) => <Tag color="cyan">{r.scope}</Tag>,
    },
    {
      title: t('variableExample'),
      dataIndex: 'example',
      width: 100,
      search: false,
    },
    {
      title: t('status'),
      dataIndex: 'status',
      valueType: 'select',
      valueEnum: {
        0: { text: t('enable'), status: 'Success' },
        1: { text: tc('disable'), status: 'Error' },
      },
      width: 80,
      render: (_, record) => {
        const item = VARIABLE_DICT_STATUS[record.status as keyof typeof VARIABLE_DICT_STATUS];
        return item ? <Tag color={item.color}>{t(item.label as 'enable')}</Tag> : '-';
      },
    },
    {
      title: tc('operation'),
      key: 'action',
      fixed: 'right',
      search: false,
      width: 120,
      render: (_, record) => (
        <Space size="small">
          <Button
            type="link"
            size="small"
            onClick={() => {
              setEditId(record.id);
              setDrawerOpen(true);
            }}
          >
            {tc('edit')}
          </Button>
          {record.status === 0 && (
            <Button type="link" size="small" danger onClick={() => handleDisable(record)}>
              {tc('disable')}
            </Button>
          )}
        </Space>
      ),
    },
  ];

  return (
    <>
      <ProTable<VariableDictVO>
        columns={columns}
        actionRef={actionRef}
        rowKey="id"
        headerTitle={t('variableList')}
        scroll={{ x: 1000 }}
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        request={async (params: any) => {
          const { current, pageSize, ...rest } = params;
          const { data } = await getVariableDictPage({
            pageNo: current ?? 1,
            pageSize: pageSize ?? 10,
            ...rest,
          });
          return { data: data.list, total: data.total, success: true };
        }}
        pagination={{ defaultPageSize: 10 }}
        search={{ labelWidth: 'auto' }}
        toolBarRender={() => [
          <Button
            key="add"
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => {
              setEditId(null);
              setDrawerOpen(true);
            }}
          >
            {t('addVariable')}
          </Button>,
        ]}
      />

      <VariableDictDrawer
        open={drawerOpen}
        id={editId}
        onSuccess={() => {
          setDrawerOpen(false);
          reload();
        }}
        onClose={() => setDrawerOpen(false)}
      />
    </>
  );
};

export default VariableDictPage;