/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./plan-item.module.scss"
import { BsArrowRight } from "react-icons/bs"
import { useState, useEffect } from "react"
import PaymentMethodsModal from "../Modals/PaymentMethodsModal"
import { Link, usePage } from "@inertiajs/react"
import { CheckCircle } from "lucide-react"
import { BiSolidEdit } from "react-icons/bi"
import { MdDelete } from "react-icons/md"
import AddTradingPlan from "@/components/admin/Modals/AddTradingPlan"
import DeleteConfirmationModal from "@/components/admin/Modals/DeleteConfirmationModal"

import currencyData from "../../../../data/countries-currencies.json";
import { formatMoneyComplete } from '@/lib/utils/format-money'

const PlanItem = ({ plan }: any) => {
  const { name, roi, duration, min_amount, max_amount, id } = plan
  const [paymentMethod, setPaymentMethod] = useState(false)
  const [deleteModal, setDeleteModal] = useState(false)
  const [updateModal, setUpdateModal] = useState(false)
  const [isAdmin, setIsAdmin] = useState(false)

  // ✅ Get current Inertia page info safely
  const { url } = usePage()

  const { appSettings } = usePage().props as any

  const currency = currencyData.find(
    (item) => item.currency_code === appSettings?.base_currency
  )

  // Toggle Modals
  const handleModalClose = () => setPaymentMethod(!paymentMethod)
  const toggleDeleteModal = () => setDeleteModal(!deleteModal)
  const toggleUpdateModal = () => setUpdateModal(!updateModal)

  // ✅ Detect admin route
  useEffect(() => {
    setIsAdmin(url === "/admin/trading-plans")
  }, [url])

  return (
    <>
      {paymentMethod && (
        <PaymentMethodsModal plan={plan} handleModalClose={handleModalClose} />
      )}

      {updateModal && (
        <AddTradingPlan
          type="update"
          closeModal={toggleUpdateModal}
          plan={plan}
        />
      )}

      {deleteModal && (
        <DeleteConfirmationModal 
          closeModal={toggleDeleteModal}
          deleteUrl={ route("admin_trading_plans_delete", plan?.id) }
          title="Delete Trading Plan"
          description="You are about to delete this trading plan and it will no longer be available to your users. Please confirm before proceeding."
        />
      )}

      <div className={styles["plan__item"]}>
        <span>Active</span>

        <div className={styles["plan__item--header"]}>
          <h3>{name}</h3>
          <div className={styles["plan__item--header--name"]}>
            <h1>{currency?.currency_symbol}{formatMoneyComplete(min_amount)}</h1>
            <h4>Minimum</h4>
          </div>
        </div>

        <div className={styles["plan__item--details"]}>
          <div className={styles["plan__item--details--item"]}>
            <h6>Min Deposit</h6>
            <h6>{currency?.currency_symbol}{formatMoneyComplete(min_amount)}</h6>
          </div>

          <div className={styles["plan__item--details--item"]}>
            <h6>Max Deposit</h6>
            <h6>{currency?.currency_symbol}{formatMoneyComplete(max_amount)}</h6>
          </div>

          <div className={styles["plan__item--details--item"]}>
            <h6>Base Currency</h6>
            <h6>{currency?.currency_code}</h6>
          </div>

          <div className={styles["plan__item--details--item"]}>
            <h6>Returns (ROI)</h6>
            <h6>{roi}%</h6>
          </div>

          <div className={styles["plan__item--details--item"]}>
            <h6>Duration</h6>
            <h6>{duration}</h6>
          </div>

          <div className={styles["plan__item--details--item"]}>
            <h6>Leverage</h6>
            <h6>1:100</h6>
          </div>

          <div className={styles["plan__item--details--item"]}>
            <h6>Full Time Support</h6>
            <h6>
              <CheckCircle color="#F79318" size="1.2rem" />
            </h6>
          </div>

          {isAdmin ? (
            <div className={styles["plan__item--details--buttons"]}>
              <div
                onClick={toggleUpdateModal}
                className={styles["plan__item--details--buttons--edit"]}
              >
                Update &nbsp; <BiSolidEdit />
              </div>
              <div
                onClick={toggleDeleteModal}
                className={styles["plan__item--details--buttons--delete"]}
              >
                Delete &nbsp; <MdDelete />
              </div>
            </div>
          ) : (
            <Link href={ `/dashboard/plan-summary/${id}` }>
              Invest Now <BsArrowRight />
            </Link>
          )}
        </div>
      </div>
    </>
  )
}

export default PlanItem