"use client";

import { Alert, Modal, Typography } from "antd";
import { useState } from "react";

type ConfirmActionModalProps = {
  open: boolean;
  title: string;
  okText: string;
  danger?: boolean;
  confirmLoading?: boolean;
  onCancel: () => void;
  onConfirm: () => Promise<void> | void;
};

export function ConfirmActionModal({
  open,
  title,
  okText,
  danger = false,
  confirmLoading = false,
  onCancel,
  onConfirm,
}: ConfirmActionModalProps) {
  const [actionLoading, setActionLoading] = useState(false);
  const [actionError, setActionError] = useState<string>();

  async function confirm() {
    setActionError(undefined);
    setActionLoading(true);
    try {
      await onConfirm();
    } catch (error) {
      setActionError(error instanceof Error ? error.message : "操作失败，请稍后再试");
    } finally {
      setActionLoading(false);
    }
  }

  return (
    <Modal
      open={open}
      title={title}
      okText={okText}
      cancelText="取消"
      okButtonProps={{ danger }}
      confirmLoading={confirmLoading || actionLoading}
      onCancel={onCancel}
      onOk={() => void confirm()}
      afterOpenChange={() => setActionError(undefined)}
      destroyOnHidden
    >
      <Typography.Paragraph type="secondary">
        确认后将立即执行该操作，系统会自动记录管理员、动作和请求 ID。
      </Typography.Paragraph>
      {actionError ? <Alert type="error" showIcon message={actionError} /> : null}
    </Modal>
  );
}