/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useState, useEffect } from "react"
import styles from "./add-plan.module.scss"
import { useForm, router } from "@inertiajs/react"
import formatNumber from "@/lib/utils/formatMoney"

interface TradingPlan {
  id?: number
  name: string
  min_amount: string | number
  max_amount: string | number
  roi: number;
  duration: string
  leverage: string
  base_currency: string
}

interface AddTradingPlanProps {
  closeModal: () => void
  type: "add" | "update"
  plan: any
}

const AddTradingPlan: React.FC<AddTradingPlanProps> = ({
  closeModal,
  type,
  plan,
}) => {
  const { data, setData, post, put, reset, processing } = useForm<TradingPlan>({
    name: plan?.name || "",
    min_amount: plan?.min_amount || "",
    max_amount: plan?.max_amount || "",
    roi: plan?.roi || "",
    duration: plan?.duration || "",
    leverage: plan?.leverage || "1:100",
    base_currency: plan?.base_currency || "USD",
  })

  const [formattedAmount, setFormattedAmount] = useState("")
  const [formattedMax, setformattedMax] = useState("")

  /**
   * ⭐ Prefill formatted values when editing a plan
   */
  useEffect(() => {
    if (plan) {
      if (plan.min_amount) {
        setFormattedAmount(formatNumber(plan.min_amount.toString()))
      }
      if (plan.max_amount) {
        setformattedMax(formatNumber(plan.max_amount.toString()))
      }
    }
  }, [plan])

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

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

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

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

        <div className={styles["add__plan__content--details"]}>
          <div className={styles["add__plan__content--details--header"]}>
            <div
              className={styles["add__plan__content--details--header--helper"]}
            >
              {type === "add" ? "Create" : "Update"}
            </div>
            <h2>
              {type === "add"
                ? "Create A New Trading Plan"
                : "Update Trading Plan"}
            </h2>
            <p>
              {type === "add"
                ? "Simply fill out the form to create a new trading plan. It will be available to users on your platform."
                : "Want to update a trading plan? Just update the details and submit. It’s that simple."}
            </p>
          </div>

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

            <div>
              <label>Minimum Deposit *</label>
              <input
                type="text"
                placeholder="Enter minimum amount"
                value={formattedAmount}
                onChange={(e) => {
                  const value = e.target.value
                  const formatted = formatNumber(value)
                  setFormattedAmount(formatted)
                  const rawValue = formatted.replace(/,/g, "")
                  setData("min_amount", rawValue)
                }}
                required
              />
            </div>

            <div>
              <label>Maximum Deposit *</label>
              <input
                type="text"
                placeholder="Enter maximum amount"
                value={formattedMax}
                onChange={(e) => {
                  const value = e.target.value
                  const formatted = formatNumber(value)
                  setformattedMax(formatted)
                  const rawValue = formatted.replace(/,/g, "")
                  setData("max_amount", rawValue)
                }}
                required
              />
            </div>

            <div>
              <label>Return on Investment (%) *</label>
              <input
                type="number"
                placeholder="e.g. 25"
                value={data.roi}
                onChange={(e) => setData("roi", Number(e.target.value))}
                required
              />
            </div>

            <div>
              <label>Duration *</label>
              <input
                type="text"
                placeholder="e.g. 7 Days, 1 Month"
                value={data.duration}
                onChange={(e) => setData("duration", e.target.value)}
                required
              />
            </div>

            <div>
              <label htmlFor="leverage">Leverage *</label>
              <select
                id="leverage"
                value={data.leverage}
                onChange={(e) => setData("leverage", e.target.value)}
                required
              >
                <option value="" disabled>
                  Select leverage
                </option>
                {[100, 200, 300, 400, 500, 600, 700, 800, 900].map((num) => (
                  <option key={num} value={`1:${num}`}>
                    1:{num}
                  </option>
                ))}
              </select>
            </div>

            {/* <div>
              <label>Base Currency *</label>
              <input
                type="text"
                placeholder="e.g. USD"
                value={data.base_currency}
                onChange={(e) => setData("base_currency", e.target.value)}
                required
              />
            </div> */}

            <button type="submit" disabled={processing}>
              {processing
                ? "Please wait..."
                : type === "add"
                ? "Add Trading Plan"
                : "Update Trading Plan"}
            </button>
          </form>
        </div>
      </div>
    </div>
  )
}

export default AddTradingPlan