"use client";

import React from "react";
import { useForm } from "@inertiajs/react";
import styles from "./process-plan.module.scss";

interface InvestmentPlan {
  id: number;
  status: string;
}

interface ProcessInvestmentModalProps {
  closeModal: () => void;
  plan: InvestmentPlan;
}

const ProcessInvestmentModal: React.FC<ProcessInvestmentModalProps> = ({
  closeModal,
  plan,
}) => {
  const { data, setData, patch, processing, reset } = useForm({
    status: plan?.status || "",
  });

  // Handle submission
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    if (!plan?.id) return;

    patch(`investments/${plan.id}/status`, {
      onSuccess: () => {
        reset();
        closeModal();
      },
    });
  };

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

        <div className={styles["confirm__modal__content--details"]}>
          <div className={styles["confirm__modal__content--details--header"]}>
            <div
              className={
                styles["confirm__modal__content--details--header--helper"]
              }
            >
              Process
            </div>

            <h2>Process Investment</h2>
            <p>
              You are about to update the status. If completed, the user will be able to withdraw their
              capital and profits afterward.
            </p>
          </div>

          <form onSubmit={handleSubmit}>
            <div>
              <label htmlFor="status">Investment Status *</label>
              <select
                id="status"
                value={data.status}
                onChange={(e) => setData("status", e.target.value)}
                required
              >
                <option value="">-- Select status --</option>
                <option value="completed">Completed</option>
                <option value="pending">Pending</option>
                <option value="cancelled">Cancelled</option>
                <option value="failed">Failed</option>
              </select>
            </div>

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

export default ProcessInvestmentModal;