import { useMutation } from "@tanstack/react-query";
import type { FormInstance } from "antd";
import { Button, Form, Modal } from "antd";
import { SquarePlus } from "lucide-react";
import React, {
  Children,
  isValidElement,
  useImperativeHandle,
  useState,
} from "react";
import { useTranslation } from "react-i18next";
import { Button as ShadcnButton } from "~/components/ui/button";
import { ErrorHandle } from "~/service/config/error";

export interface PFormProps {
  onAddSuccess?: () => void; // 添加成功回调
  onEditSuccess?: (data: any) => void; // 编辑成功回调
  ref: React.RefObject<EditSheetImpl | null>; // 控制反转
}

// 步骤配置
export interface StepConfig {
  title: string; // 步骤标题
  fields: string[]; // 该步骤包含的字段名
}

interface EditSheetProps {
  title: string; // 标题
  description?: string; // 描述
  children: React.ReactNode; // 表单内容
  trigger?: React.ReactNode; // 触发器按钮
  mutation: {
    // api 请求
    add: (values: any) => Promise<any>;
    edit: (id: string, values: any) => Promise<any>;
  };
  onSuccess?: {
    // 成功回调
    add?: () => void;
    edit?: (data: any) => void;
  };
  ref?: React.Ref<EditSheetImpl>;
  form: FormInstance; // Ant Design Form 实例
  width?: number | string; // Modal 宽度，默认 520
  steps?: StepConfig[]; // 步骤配置，如果不提供则自动分组
  fieldsPerStep?: number; // 每步字段数，默认 2
}

export interface EditSheetImpl {
  edit: (values: any) => void; // 编辑时传入表单的值，打开弹窗
}

/**
 * 统一的多步骤表单编辑弹窗组件
 * 支持新增和编辑两种模式，通过 form 中是否有 id 字段区分
 * 自动将表单字段按每 3 个分组为一个步骤
 */
export function EditSheet({
  title,
  description,
  children,
  trigger,
  mutation,
  onSuccess,
  ref,
  form,
  width = 520,
  steps: customSteps,
  fieldsPerStep = 2,
}: EditSheetProps) {
  const { t } = useTranslation("common");
  const [open, setOpen] = useState(false);
  const [currentStep, setCurrentStep] = useState(0);

  // 解析 children 中的 Form.Item，提取字段信息
  const parseFormItems = () => {
    const items: { name: string; element: React.ReactNode; hidden: boolean }[] =
      [];

    const traverse = (node: React.ReactNode) => {
      Children.forEach(node, (child) => {
        if (isValidElement(child)) {
          // 检查是否是 Form.Item
          if (
            child.type === Form.Item ||
            (child.type as any)?.displayName === "FormItem"
          ) {
            const props = child.props as any;
            const name = props.name;
            const hidden = props.hidden === true;

            if (name) {
              items.push({ name, element: child, hidden });
            }
          }
          // 递归处理子元素
          if ((child.props as { children?: React.ReactNode })?.children) {
            traverse((child.props as { children?: React.ReactNode }).children);
          }
        }
      });
    };

    traverse(children);
    return items;
  };

  const formItems = parseFormItems();

  // 过滤出可见的表单项（用于分步）
  const visibleItems = formItems.filter((item) => !item.hidden);
  // 隐藏的表单项（始终渲染）
  const hiddenItems = formItems.filter((item) => item.hidden);

  // 自动生成步骤配置（每步 fieldsPerStep 个字段，最多 3 步）
  const generateSteps = (): StepConfig[] => {
    if (customSteps) return customSteps;

    const stepsConfig: StepConfig[] = [];
    const totalItems = visibleItems.length;

    // 按 fieldsPerStep 分组，最多 3 步
    for (
      let i = 0;
      i < totalItems && stepsConfig.length < 3;
      i += fieldsPerStep
    ) {
      const stepItems = visibleItems.slice(i, i + fieldsPerStep);
      stepsConfig.push({
        title: `${t("step")} ${stepsConfig.length + 1}`,
        fields: stepItems.map((item) => item.name),
      });
    }

    return stepsConfig;
  };

  const stepsConfig = generateSteps();
  const totalSteps = stepsConfig.length;
  const isMultiStep = totalSteps > 1;

  // 获取当前步骤应该显示的字段
  const getCurrentStepFields = (): string[] => {
    if (!isMultiStep) return visibleItems.map((item) => item.name);
    return stepsConfig[currentStep]?.fields || [];
  };

  // 判断当前是编辑模式还是新增模式
  const isEditMode = () => {
    const values = form.getFieldsValue();
    return !!values.id;
  };

  useImperativeHandle(ref, () => ({
    edit(values: any) {
      console.log("🚀 ~ edit ~ values:", values);
      form.setFieldsValue(values);
      setCurrentStep(0);
      setOpen(true);
    },
  }));

  const { mutateAsync, isPending } = useMutation({
    mutationFn: async (values: any) => {
      if (values.id) {
        return await mutation.edit(values.id, values);
      }
      return await mutation.add(values);
    },
    onSuccess(data, variables) {
      if (variables.id) {
        onSuccess?.edit?.(data.data);
      } else {
        onSuccess?.add?.();
      }
      handleClose();
    },
    onError: ErrorHandle,
  });

  // 验证当前步骤的字段
  const validateCurrentStep = async (): Promise<boolean> => {
    const currentFields = getCurrentStepFields();
    try {
      await form.validateFields(currentFields);
      return true;
    } catch {
      return false;
    }
  };

  // 下一步
  const handleNext = async () => {
    const isValid = await validateCurrentStep();
    if (isValid && currentStep < totalSteps - 1) {
      setCurrentStep(currentStep + 1);
    }
  };

  // 上一步
  const handlePrev = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1);
    }
  };

  const handleSubmit = async () => {
    try {
      // 最后一步时验证所有字段
      const values = await form.validateFields();
      await mutateAsync(values);
    } catch (error) {
      console.log("表单验证失败:", error);
    }
  };

  const handleClose = () => {
    setOpen(false);
    setCurrentStep(0);
    // 延迟重置表单，避免关闭动画时内容闪烁
    setTimeout(() => {
      form.resetFields();
    }, 200);
  };

  const handleCancel = () => {
    handleClose();
  };

  // 打开弹窗（用于新增模式）
  const handleOpen = () => {
    form.resetFields();
    setCurrentStep(0);
    setOpen(true);
  };

  // 渲染触发按钮
  const renderTrigger = () => {
    if (trigger === null) {
      return null;
    }

    const defaultTrigger = (
      <ShadcnButton onClick={handleOpen}>
        <SquarePlus className="mr-2 h-4 w-4" />
        {t("add")}
      </ShadcnButton>
    );

    if (trigger) {
      if (React.isValidElement(trigger)) {
        return React.cloneElement(trigger as React.ReactElement<any>, {
          onClick: (e: React.MouseEvent) => {
            const originalOnClick = (trigger as React.ReactElement<any>).props
              ?.onClick;
            if (originalOnClick) {
              originalOnClick(e);
            }
            handleOpen();
          },
        });
      }
      return (
        <div
          onClick={handleOpen}
          style={{ display: "inline-block", cursor: "pointer" }}
        >
          {trigger}
        </div>
      );
    }

    return defaultTrigger;
  };

  // 渲染表单内容
  const renderFormContent = () => {
    const currentFields = getCurrentStepFields();

    return (
      <>
        {/* 隐藏字段始终渲染 */}
        {hiddenItems.map((item) => (
          <div key={item.name} style={{ display: "none" }}>
            {item.element}
          </div>
        ))}

        {/* 可见字段根据当前步骤显示/隐藏 */}
        {visibleItems.map((item) => {
          const isCurrentStep = currentFields.includes(item.name);
          return (
            <div
              key={item.name}
              style={{ display: isCurrentStep ? "block" : "none" }}
            >
              {item.element}
            </div>
          );
        })}
      </>
    );
  };

  // 渲染底部按钮
  const renderFooter = () => {
    if (!isMultiStep) {
      // 单步骤模式
      return [
        <Button key="cancel" onClick={handleCancel}>
          {t("cancel")}
        </Button>,
        <Button
          key="submit"
          type="primary"
          loading={isPending}
          onClick={handleSubmit}
        >
          {isEditMode() ? t("save") : t("add")}
        </Button>,
      ];
    }

    // 多步骤模式（无取消按钮）
    const isFirstStep = currentStep === 0;
    const isLastStep = currentStep === totalSteps - 1;

    return [
      !isFirstStep && (
        <Button key="prev" onClick={handlePrev}>
          {t("prev_step")}
        </Button>
      ),
      isLastStep ? (
        <Button
          key="submit"
          type="primary"
          loading={isPending}
          onClick={handleSubmit}
        >
          {isEditMode() ? t("save") : t("add")}
        </Button>
      ) : (
        <Button key="next" type="primary" onClick={handleNext}>
          {t("next_step")}
        </Button>
      ),
    ].filter(Boolean);
  };

  return (
    <>
      {renderTrigger()}

      <Modal
        title={title}
        open={open}
        onCancel={handleCancel}
        width={width}
        footer={renderFooter()}
        destroyOnHidden={false}
        maskClosable={false}
      >
        {description && (
          <p className="text-gray-500 text-sm mb-4">{description}</p>
        )}

        <Form form={form} layout="vertical" size="large">
          {renderFormContent()}
        </Form>
      </Modal>
    </>
  );
}