import { useRef } from "react";
import { Button, Space, Tag, Typography } from "antd";
import { SyncOutlined } from "@ant-design/icons";
import { ProTable, type ProColumns, type ActionType } from "@ant-design/pro-components";
import { useTranslation } from "react-i18next";
import { getSyncRecordPage, retrySync } from "@/api/mdm/coding-system";
import type { SyncRecordVO } from "@/types/mdm/coding-system";

const { Text } = Typography;

const SyncPage: React.FC = () => {
  const { t } = useTranslation("mdm/coding-system");
  const { t: tc } = useTranslation("common");
  const actionRef = useRef<ActionType>(null);

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

  const handleRetry = async (id: number) => {
    await retrySync(id);
    reload();
  };

  const columns: ProColumns<SyncRecordVO>[] = [
    {
      title: t("ruleCode"),
      dataIndex: "ruleCode",
      width: 150,
      ellipsis: true,
    },
    {
      title: t("ruleName"),
      dataIndex: "ruleName",
      ellipsis: true,
      width: 180,
    },
    {
      title: t("externalSystem"),
      dataIndex: "system",
      valueType: "select",
      valueEnum: { SAP: { text: "SAP" }, SRM: { text: "SRM" } },
      width: 80,
      render: (_, r) => <Tag color="purple">{r.system}</Tag>,
    },
    {
      title: t("syncStatus"),
      dataIndex: "status",
      valueType: "select",
      valueEnum: {
        "成功": { text: t("success"), status: "Success" },
        "失败": { text: t("failed"), status: "Error" },
        "进行中": { text: t("inProgress"), status: "Processing" },
        "待同步": { text: t("pendingSync"), status: "Default" },
      },
      width: 90,
      render: (_, r) => {
        const colors: Record<string, string> = { "成功": "success", "失败": "error", "进行中": "processing", "待同步": "default" };
        return <Tag color={colors[r.status] || "default"}>{t(r.status as "success" | "failed" | "inProgress" | "pendingSync")}</Tag>;
      },
    },
    {
      title: t("syncTime"),
      dataIndex: "time",
      width: 150,
      search: false,
    },
    {
      title: t("trigger"),
      dataIndex: "trigger",
      width: 80,
      search: false,
      render: (_, r) => <Tag color={r.trigger === "手动" ? "blue" : "cyan"}>{r.trigger}</Tag>,
    },
    {
      title: t("retryCount"),
      dataIndex: "retryCount",
      width: 80,
      search: false,
      render: (_, r) =>
        r.retryCount > 0 ? (
          <Tag color="orange">{r.retryCount}次</Tag>
        ) : (
          <Text type="secondary">0</Text>
        ),
    },
    {
      title: t("failReason"),
      dataIndex: "reason",
      ellipsis: true,
      search: false,
      width: 180,
      render: (_, r) =>
        r.reason && r.reason !== "-" ? (
          <Text type="danger" style={{ fontSize: 12 }}>
            {r.reason}
          </Text>
        ) : (
          <Text type="secondary">-</Text>
        ),
    },
    {
      title: tc("operation"),
      key: "action",
      fixed: "right",
      search: false,
      width: 120,
      render: (_, record) => (
        <Space size="small">
          {record.status === "失败" && (
            <Button type="link" size="small" style={{ color: "#fa8c16" }} onClick={() => handleRetry(record.id)}>
              {t("syncRetry")}
            </Button>
          )}
          {record.status === "待同步" && (
            <Button type="link" size="small" onClick={() => handleRetry(record.id)}>
              {t("syncManual")}
            </Button>
          )}
        </Space>
      ),
    },
  ];

  return (
    <ProTable<SyncRecordVO>
      columns={columns}
      actionRef={actionRef}
      rowKey="id"
      headerTitle={t("syncList")}
      scroll={{ x: 1300 }}
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      request={async (params: any) => {
        const { current, pageSize, ...rest } = params;
        const { data } = await getSyncRecordPage({
          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={() => [
        <Button key="refresh" icon={<SyncOutlined />} onClick={reload}>
          刷新
        </Button>,
      ]}
    />
  );
};

export default SyncPage;