/* eslint-disable @typescript-eslint/no-explicit-any */
import React from "react";
import styles from "./add-signal.module.scss"
import { useForm, router } from "@inertiajs/react";
import MoneyInput from "@/components/shared/MoneyInput";

interface AddSignalPlanModalProps {
  closeModal: () => void;
  type: "add" | "update";
  plan?: {
    id?: any;
    name?: string;
    monthly_price?: number | string;
    quarterly_price?: number | string;
    yearly_price?: number | string;
    win_percentage?: number | string;
    description?: string;
  };
}

const AddSignalPlanModal: React.FC<AddSignalPlanModalProps> = ({ closeModal, type, plan }) => {
  const { data, setData, post, put, processing, reset } = useForm({
    name: plan?.name || "",
    monthly_price: plan?.monthly_price || "",
    quarterly_price: plan?.quarterly_price || "",
    yearly_price: plan?.yearly_price || "",
    win_percentage: plan?.win_percentage || "",
    description: plan?.description || "",
  });

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (type === "add") {
      post(route("admin.signal-plans.store"), {
        onSuccess: () => {
          reset();
          closeModal();
          router.reload({ only: ["flash"] });
        },
      });
      return;
    }

    if (type === "update" && plan?.id) {
      put(route("admin.signal-plans.update", plan.id), {
        onSuccess: () => {
          reset();
          closeModal();
          router.reload({ only: ["flash"] });
        },
      });
    }
  };

  return (
    <div className={styles["add__signal-plan"]}>
      <div className={styles["add__signal-plan__content"]}>
        <div
          onClick={closeModal}
          className={styles["add__signal-plan__content--close"]}
        >
          Close
        </div>

        <div className={styles["add__signal-plan__content--details"]}>
          <div className={styles["add__signal-plan__content--details--header"]}>
            <div className={styles["add__signal-plan__content--details--header--helper"]}>
              {type === "add" ? "Add Plan" : "Update Plan"}
            </div>

            <h2>
              {type === "add"
                ? "Create Signal Plan"
                : "Update Signal Plan"}
            </h2>

            <p>
              {type === "add"
                ? "Define a subscription plan for your trading signals. Include prices for all durations."
                : "Update the details of this signal plan. Adjust only the fields you want to change."}
            </p>
          </div>

          <form onSubmit={handleSubmit}>
            <div>
              <label htmlFor="name">Plan Name *</label>
              <input
                id="name"
                type="text"
                placeholder="Enter plan name"
                value={data.name}
                onChange={(e) => setData("name", e.target.value)}
                required
              />
            </div>

            <div>
              <label htmlFor="win_percentage">Win Percentage (%) *</label>
              <input
                id="win_percentage"
                type="number"
                placeholder="Enter expected win percentage"
                value={data.win_percentage}
                onChange={(e) => setData("win_percentage", e.target.value)}
                required
              />
            </div>

            <div>
              <label htmlFor="price_monthly">Monthly Price *</label>
              <MoneyInput
                label="Monthly Price *"
                value={data.monthly_price}
                onChange={(value) => setData("monthly_price", value)}
                placeholder="Enter monthly price"
                required
              />
            </div>

            <div>
              <label htmlFor="price_quarterly">Quarterly Price *</label>
              <MoneyInput
                label="Quarterly Price *"
                value={data.quarterly_price}
                onChange={(value) => setData("quarterly_price", value)}
                placeholder="Enter quarterly price"
                required
              />
            </div>

            <div>
              <label htmlFor="price_yearly">Yearly Price *</label>
              <MoneyInput
                label="Yearly Price *"
                value={data.yearly_price}
                onChange={(value) => setData("yearly_price", value)}
                placeholder="Enter yearly price"
                required
              />
            </div>

            <div>
              <label htmlFor="description">Description</label>
              <textarea
                id="description"
                placeholder="Describe the plan benefits..."
                value={data.description}
                onChange={(e) => setData("description", e.target.value)}
              />
            </div>

            <button type="submit" disabled={processing}>
              {processing
                ? "Saving..."
                : type === "add"
                ? "Add Signal Plan"
                : "Update Signal Plan"}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default AddSignalPlanModal;