/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import React from "react";
import { useForm, router } from "@inertiajs/react";
import styles from "./process-withdrawal.module.scss";
import { useState } from "react";


interface ProcessWithdrawalModalProps {
  closeModal: any;
  withdrawal: any;
}

const ProcessWithdrawalModal: React.FC<ProcessWithdrawalModalProps> = ({
  closeModal,
  withdrawal,
}) => {
  const { data, setData, processing, } = useForm({
    status: withdrawal?.status || "",
    amount: withdrawal?.amount || 0,
  });

  const [loading, setLoading] = useState(false)

  // ✅ Handle processing of withdrawal
const handleProcessDeposit = () => {
    setLoading(true)
    router.put(`/admin/withdrawals/confirm/${withdrawal?.id}`, {}, {
      onSuccess: () => closeModal(),
      onFinish: () => setLoading(false),
      onError: (errors) => console.error(errors),
    })
  }

  return (
    <div className={styles["confirm__modal"]}>
      <div className={styles["confirm__modal__content"]}>
        {/* Close Button */}
        <div
          onClick={closeModal}
          className={styles["confirm__modal__content--close"]}
        >
          Close
        </div>

        {/* Modal Details */}
        <div className={styles["confirm__modal__content--details"]}>
          <div className={styles["confirm__modal__content--details--header"]}>
            <div
              className={
                styles["confirm__modal__content--details--header--helper"]
              }
            >
              Confirmation
            </div>

            <h2>Process Withdrawal Request</h2>
            <p>
              You can process this withdrawal request by either approving or
              rejecting it. The user will be notified automatically.
            </p>

            {/* ✅ Form */}
            <form onSubmit={handleProcessDeposit}>
              <div>
                <label htmlFor="amount">Requested amount *</label>
                <input
                  disabled
                  type="number"
                  id="amount"
                  value={data.amount}
                  onChange={(e) => setData("amount", Number(e.target.value))}
                />
              </div>

              <div>
                <label htmlFor="status">Select status *</label>
                <select
                  id="status"
                  value={data.status}
                  onChange={(e) => setData("status", e.target.value)}
                  required
                >
                  <option value="">-- Select status --</option>
                  <option value="approved">Approved</option>
                </select>
              </div>

              <button type="submit" disabled={processing}>
                {loading ? "Processing..." : "Confirm Action"}
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProcessWithdrawalModal;