import { useRef, useState } from "react";
import { Badge, Button, Modal, Space, Tag, Tabs, Descriptions } from "antd";
import { ProTable, type ProColumns, type ActionType } from "@ant-design/pro-components";
import { useTranslation } from "react-i18next";
import { getApprovalPage } from "@/api/mdm/coding-system";
import type { ApprovalVO } from "@/types/mdm/coding-system";

const ApprovalPage: React.FC = () => {
  const { t } = useTranslation("mdm/coding-system");
  const { t: tc } = useTranslation("common");
  const actionRef = useRef<ActionType>(null);
  const [tab, setTab] = useState("pending");
  const [detailModal, setDetailModal] = useState<ApprovalVO | null>(null);

  const getColumns = (): ProColumns<ApprovalVO>[] => [
    {
      title: t("approvalType"),
      dataIndex: "type",
      width: 80,
      render: (_, r) => {
        const colors: Record<string, string> = { "准入": "blue", "变更": "orange", "注销": "red" };
        return <Tag color={colors[r.type] || "default"}>{r.type}</Tag>;
      },
    },
    {
      title: t("applicant"),
      dataIndex: "applicant",
      width: 80,
      search: false,
    },
    {
      title: t("ruleCode"),
      dataIndex: "ruleCode",
      width: 150,
    },
    {
      title: t("ruleName"),
      dataIndex: "ruleName",
      ellipsis: true,
      width: 180,
    },
    {
      title: t("submitTime"),
      dataIndex: "submitTime",
      width: 150,
      search: false,
    },
    {
      title: t("status"),
      dataIndex: "status",
      width: 80,
      render: (_, r) => {
        const colors: Record<string, string> = { "待审批": "warning", "已通过": "success", "已拒绝": "error" };
        return <Tag color={colors[r.status] || "default"}>{r.status}</Tag>;
      },
    },
    {
      title: t("approver"),
      dataIndex: "approver",
      width: 80,
      search: false,
    },
    {
      title: t("approveTime"),
      dataIndex: "approveTime",
      width: 150,
      search: false,
    },
    {
      title: tc("operation"),
      key: "action",
      fixed: "right" as const,
      search: false,
      width: tab === "pending" ? 180 : 100,
      render: (_, record) => (
        <Space size="small">
          <Button type="link" size="small" onClick={() => setDetailModal(record)}>
            {t("viewDetail")}
          </Button>
          {tab === "pending" && (
            <>
              <Button type="link" size="small" style={{ color: "#52c41a" }}>
                通过
              </Button>
              <Button type="link" size="small" danger>
                拒绝
              </Button>
            </>
          )}
        </Space>
      ),
    },
  ];

  return (
    <>
      <Tabs
        activeKey={tab}
        onChange={setTab}
        items={[
          {
            key: "pending",
            label: (
              <span>
                {t("pendingApproval")}{" "}
                <Badge count={4} size="small" style={{ marginLeft: 4 }} />
              </span>
            ),
            children: (
              <ProTable<ApprovalVO>
                columns={getColumns()}
                actionRef={actionRef}
                rowKey="id"
                headerTitle={t("approvalList")}
                scroll={{ x: 1200 }}
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                request={async (params: any) => {
                  const { current, pageSize } = params;
                  const { data } = await getApprovalPage({
                    pageNo: current ?? 1,
                    pageSize: pageSize ?? 10,
                    tab: "pending",
                  });
                  return { data: data.list, total: data.total, success: true };
                }}
                pagination={{ defaultPageSize: 10 }}
                search={false}
              />
            ),
          },
          {
            key: "processed",
            label: t("processed"),
            children: (
              <ProTable<ApprovalVO>
                columns={getColumns()}
                actionRef={actionRef}
                rowKey="id"
                headerTitle={t("approvalList")}
                scroll={{ x: 1200 }}
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                request={async (params: any) => {
                  const { current, pageSize } = params;
                  const { data } = await getApprovalPage({
                    pageNo: current ?? 1,
                    pageSize: pageSize ?? 10,
                    tab: "processed",
                  });
                  return { data: data.list, total: data.total, success: true };
                }}
                pagination={{ defaultPageSize: 10 }}
                search={false}
              />
            ),
          },
          {
            key: "submitted",
            label: t("submitted"),
            children: (
              <ProTable<ApprovalVO>
                columns={getColumns()}
                actionRef={actionRef}
                rowKey="id"
                headerTitle={t("approvalList")}
                scroll={{ x: 1200 }}
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                request={async (params: any) => {
                  const { current, pageSize } = params;
                  const { data } = await getApprovalPage({
                    pageNo: current ?? 1,
                    pageSize: pageSize ?? 10,
                    tab: "submitted",
                  });
                  return { data: data.list, total: data.total, success: true };
                }}
                pagination={{ defaultPageSize: 10 }}
                search={false}
              />
            ),
          },
        ]}
      />

      {detailModal && (
        <Modal
          title={`${t("approvalType")} — ${detailModal.type} [${detailModal.ruleCode}]`}
          open
          onCancel={() => setDetailModal(null)}
          width={640}
          footer={<Button onClick={() => setDetailModal(null)}>{tc("cancel")}</Button>}
        >
          <Descriptions bordered size="small" column={2}>
            <Descriptions.Item label={t("approvalType")}>
              <Tag color={detailModal.type === "准入" ? "blue" : detailModal.type === "变更" ? "orange" : "red"}>
                {detailModal.type}
              </Tag>
            </Descriptions.Item>
            <Descriptions.Item label={t("applicant")}>{detailModal.applicant}</Descriptions.Item>
            <Descriptions.Item label={t("ruleCode")}>{detailModal.ruleCode}</Descriptions.Item>
            <Descriptions.Item label={t("ruleName")}>{detailModal.ruleName}</Descriptions.Item>
            <Descriptions.Item label={t("submitTime")}>{detailModal.submitTime}</Descriptions.Item>
            <Descriptions.Item label={t("status")}>
              <Tag
                color={
                  detailModal.status === "待审批" ? "warning" : detailModal.status === "已通过" ? "success" : "error"
                }
              >
                {detailModal.status}
              </Tag>
            </Descriptions.Item>
            {detailModal.status !== "待审批" && (
              <>
                <Descriptions.Item label={t("approver")}>{detailModal.approver}</Descriptions.Item>
                <Descriptions.Item label={t("approveTime")}>{detailModal.approveTime}</Descriptions.Item>
                <Descriptions.Item label={t("comment")} span={2}>
                  {detailModal.comment}
                </Descriptions.Item>
              </>
            )}
          </Descriptions>
        </Modal>
      )}
    </>
  );
};

export default ApprovalPage;