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 { Access } from "@/components/Access";
import {
  getCodeRulePage,
  deleteCodeRule,
} from "@/api/mdm/coding-system";
import type { CodeRuleVO } from "@/types/mdm/coding-system";
import { CODE_RULE_STATUS, CODE_RULE_LIFECYCLE, CODING_SCOPE_OPTIONS } from "@/types/mdm/coding-system";
import CodeRuleDrawer from "./components/CodeRuleDrawer";

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

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

  const handleDelete = (record: CodeRuleVO) => {
    modal.confirm({
      title: t("deleteConfirm"),
      okType: "danger",
      content: t("deleteConfirmContent", { name: record.ruleName }),
      onOk: async () => {
        await deleteCodeRule(record.id);
        message.success(tc("success"));
        reload();
      },
    });
  };

  const handleDeleteBatch = () => {
    modal.confirm({
      title: t("deleteConfirm"),
      okType: "danger",
      content: t("deleteConfirmContent", { name: `${selectedRowKeys.length} 条规则` }),
      onOk: async () => {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        await Promise.all(selectedRowKeys.map((id) => deleteCodeRule(id as any)));
        message.success(tc("success"));
        setSelectedRowKeys([]);
        reload();
      },
    });
  };

  const columns: ProColumns<CodeRuleVO>[] = [
    {
      title: t("ruleCode"),
      dataIndex: "ruleCode",
      ellipsis: true,
      width: 160,
    },
    {
      title: t("ruleName"),
      dataIndex: "ruleName",
      ellipsis: true,
      width: 200,
    },
    {
      title: t("scope"),
      dataIndex: "scope",
      valueType: "select",
      valueEnum: Object.fromEntries(CODING_SCOPE_OPTIONS.map((s) => [s, { text: s }])),
      width: 100,
    },
    {
      title: t("formatPattern"),
      dataIndex: "pattern",
      search: false,
      ellipsis: true,
      width: 260,
    },
    {
      title: t("status"),
      dataIndex: "status",
      valueType: "select",
      valueEnum: {
        0: { text: t("enable"), status: "Success" },
        1: { text: t("freeze"), status: "Default" },
        2: { text: t("cancelled"), status: "Error" },
      },
      width: 100,
      render: (_, record) => {
        const item = CODE_RULE_STATUS[record.status as keyof typeof CODE_RULE_STATUS];
        return item ? <Tag color={item.color}>{t(item.label as "enable" | "freeze" | "cancelled")}</Tag> : "-";
      },
    },
    {
      title: t("lifecycleStatus"),
      dataIndex: "lifecycleStatus",
      valueType: "select",
      valueEnum: {
        0: { text: t("draft"), status: "Processing" },
        1: { text: t("pendingApprove"), status: "Warning" },
        2: { text: t("enable"), status: "Success" },
        3: { text: t("revoked"), status: "Error" },
      },
      search: true,
      width: 100,
      render: (_, record) => {
        const item = CODE_RULE_LIFECYCLE[record.lifecycleStatus as keyof typeof CODE_RULE_LIFECYCLE];
        return item ? <Tag color={item.color}>{t(item.label as "draft" | "pendingApprove" | "enable" | "revoked")}</Tag> : "-";
      },
    },
    {
      title: t("createTime"),
      dataIndex: "createTime",
      search: false,
      width: 170,
    },
    {
      title: tc("operation"),
      key: "action",
      fixed: "right",
      search: false,
      width: 200,
      render: (_, record) => (
        <Space>
          <Access code="mdm:coding-system:code-rule:update">
            <a
              onClick={() => {
                setEditId(record.id);
                setDrawerOpen(true);
              }}
            >
              {tc("edit")}
            </a>
          </Access>
          <Access code="mdm:coding-system:code-rule:delete">
            <a style={{ color: "#ff4d4f" }} onClick={() => handleDelete(record)}>
              {tc("delete")}
            </a>
          </Access>
        </Space>
      ),
    },
  ];

  return (
    <>
      <ProTable<CodeRuleVO>
        columns={columns}
        actionRef={actionRef}
        rowKey="id"
        headerTitle={t("ruleList")}
        scroll={{ x: 1300 }}
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        request={async (params: any) => {
          const { current, pageSize, ...rest } = params;
          const { data } = await getCodeRulePage({
            pageNo: current ?? 1,
            pageSize: pageSize ?? 10,
            ...rest,
          });
          return { data: data.list, total: data.total, success: true };
        }}
        pagination={{ defaultPageSize: 10, showSizeChanger: true }}
        search={{ labelWidth: "auto" }}
        rowSelection={{ selectedRowKeys, onChange: setSelectedRowKeys }}
        toolBarRender={() => [
          <Access code="mdm:coding-system:code-rule:create" key="add">
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => {
                setEditId(null);
                setDrawerOpen(true);
              }}
            >
              {tc("create")}
            </Button>
          </Access>,
          selectedRowKeys.length > 0 && (
            <Access code="mdm:coding-system:code-rule:delete" key="batch">
              <Button danger onClick={handleDeleteBatch}>
                {t("batchDelete")}
              </Button>
            </Access>
          ),
        ]}
      />

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

export default CodeRulePage;