import { useRef, useState } from "react";
import { App, Button, Space, Tag } from "antd";
import { PlusOutlined, UploadOutlined } from "@ant-design/icons";
import { ProTable, type ProColumns, type ActionType } from "@ant-design/pro-components";
import { useTranslation } from "react-i18next";
import { Access } from "@/components/Access";
import { getCodeMappingPage, deleteCodeMapping } from "@/api/mdm/coding-system";
import type { CodeMappingVO } from "@/types/mdm/coding-system";
import { CODE_MAPPING_STATUS, CODE_MAPPING_TRANSITION, CODING_SCOPE_OPTIONS } from "@/types/mdm/coding-system";
import CodeMappingDrawer from "./components/CodeMappingDrawer";

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

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

  const handleDelete = (record: CodeMappingVO) => {
    modal.confirm({
      title: t("deleteConfirm"),
      okType: "danger",
      content: t("deleteMappingConfirmContent"),
      onOk: async () => {
        await deleteCodeMapping(record.id);
        message.success(tc("success"));
        reload();
      },
    });
  };

  const columns: ProColumns<CodeMappingVO>[] = [
    {
      title: t("oldCode"),
      dataIndex: "oldCode",
      width: 180,
      ellipsis: true,
    },
    {
      title: "",
      key: "arrow",
      width: 50,
      search: false,
      render: () => <span style={{ color: "#999" }}>→</span>,
    },
    {
      title: t("newCode"),
      dataIndex: "newCode",
      width: 200,
      ellipsis: true,
    },
    {
      title: t("entityType"),
      dataIndex: "entityType",
      valueType: "select",
      valueEnum: Object.fromEntries(CODING_SCOPE_OPTIONS.map((s) => [s, { text: s }])),
      width: 100,
    },
    {
      title: t("effectDate"),
      dataIndex: "effectDate",
      search: false,
      width: 110,
    },
    {
      title: t("expireDate"),
      dataIndex: "expireDate",
      search: false,
      width: 110,
    },
    {
      title: t("reason"),
      dataIndex: "reason",
      search: false,
      ellipsis: true,
      width: 140,
    },
    {
      title: t("status"),
      dataIndex: "status",
      valueType: "select",
      valueEnum: {
        0: { text: t("enable"), status: "Success" },
        1: { text: t("expired"), status: "Default" },
      },
      width: 80,
      render: (_, record) => {
        const item = CODE_MAPPING_STATUS[record.status as keyof typeof CODE_MAPPING_STATUS];
        return item ? <Tag color={item.color}>{t(item.label as "enable" | "expired")}</Tag> : "-";
      },
    },
    {
      title: t("transition"),
      dataIndex: "transition",
      search: false,
      width: 90,
      render: (_, record) => {
        const item = CODE_MAPPING_TRANSITION[record.transition as keyof typeof CODE_MAPPING_TRANSITION];
        return item ? <Tag color={item.color}>{item.label}</Tag> : "-";
      },
    },
    {
      title: tc("operation"),
      key: "action",
      fixed: "right",
      search: false,
      width: 120,
      render: (_, record) => (
        <Space>
          <Access code="mdm:coding-system:mapping:delete">
            <a style={{ color: "#ff4d4f" }} onClick={() => handleDelete(record)}>
              {tc("delete")}
            </a>
          </Access>
        </Space>
      ),
    },
  ];

  return (
    <>
      <ProTable<CodeMappingVO>
        columns={columns}
        actionRef={actionRef}
        rowKey="id"
        headerTitle={t("mappingList")}
        scroll={{ x: 1200 }}
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        request={async (params: any) => {
          const { current, pageSize, ...rest } = params;
          const { data } = await getCodeMappingPage({
            pageNo: current ?? 1,
            pageSize: pageSize ?? 10,
            ...rest,
          });
          return { data: data.list, total: data.total, success: true };
        }}
        pagination={{ defaultPageSize: 10, showSizeChanger: true }}
        search={{ labelWidth: "auto" }}
        toolBarRender={() => [
          <Access code="mdm:coding-system:mapping:create" key="add">
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => setDrawerOpen(true)}
            >
              {t("createMapping")}
            </Button>
          </Access>,
          <Button key="import" icon={<UploadOutlined />}>
            {t("import")}
          </Button>,
        ]}
      />

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

export default CodeMappingPage;