interface UpdateInvestmentModalProps {
  closeModal: () => void;
  plan: {
    id: number | string;
    amount_invested?: string | number;
    profit_earned?: string | number;
    start_date?: string;
    end_date?: string;
  };
}

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

const UpdateInvestmentModal = ({ closeModal, plan }: UpdateInvestmentModalProps) => {
  const { data, setData, put, processing, errors, reset } = useForm({
    amount_invested: plan?.amount_invested ?? "",
    profit_earned: plan?.profit_earned ?? "",
    start_date: plan?.start_date ?? "",
    end_date: plan?.end_date ?? "",
  });

  // Handle form submission
  const updateInvestment = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    put(`/investments/${plan.id}`, {
      preserveScroll: true,
      onSuccess: () => {
        reset();
        closeModal();
      },
    });
  };

  return (
    <div className={styles["update"]}>
      <div className={styles["update__content"]}>
        <div onClick={closeModal} className={styles["update__content--close"]}>
          Close
        </div>

        <div className={styles["update__content--details"]}>
          <div className={styles["update__content--details--header"]}>
            <div className={styles["update__content--details--header--helper"]}>
              Update
            </div>
            <h2>Update Investment</h2>
            <p>
              Modify investment details such as amount, profit, and duration.
            </p>
          </div>

          <form onSubmit={updateInvestment}>
            {/* Amount invested */}
            <div>
              <label htmlFor="amount_invested">Amount Invested *</label>
              <input
                type="number"
                id="amount_invested"
                placeholder="Enter amount"
                value={data.amount_invested}
                onChange={(e) => setData("amount_invested", e.target.value)}
              />
              {errors.amount_invested && (
                <small className={styles["error"]}>{errors.amount_invested}</small>
              )}
            </div>

            {/* Profit earned */}
            <div>
              <label htmlFor="profit_earned">Profit Earned *</label>
              <input
                type="number"
                id="profit_earned"
                placeholder="Enter profit"
                value={data.profit_earned}
                onChange={(e) => setData("profit_earned", e.target.value)}
              />
              {errors.profit_earned && (
                <small className={styles["error"]}>{errors.profit_earned}</small>
              )}
            </div>

            {/* Start date */}
            <div>
              <label htmlFor="start_date">Start Date *</label>
              <input
                type="date"
                id="start_date"
                value={data.start_date}
                onChange={(e) => setData("start_date", e.target.value)}
              />
              {errors.start_date && (
                <small className={styles["error"]}>{errors.start_date}</small>
              )}
            </div>

            {/* End date */}
            <div>
              <label htmlFor="end_date">End Date *</label>
              <input
                type="date"
                id="end_date"
                value={data.end_date}
                onChange={(e) => setData("end_date", e.target.value)}
              />
              {errors.end_date && (
                <small className={styles["error"]}>{errors.end_date}</small>
              )}
            </div>

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

export default UpdateInvestmentModal;