/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./signal.module.scss"
import { useState, useEffect } from "react"
import { usePage } from "@inertiajs/react"
import { BiSolidEdit } from "react-icons/bi"
import { MdDelete } from "react-icons/md"
import DeleteConfirmationModal from "@/components/admin/Modals/DeleteConfirmationModal"
import BuySignalSubscriptionModal from "../Modals/BuySignalSubscription"
import AddSignalPlanModal from "@/components/admin/Modals/AddSignalPlanModal"
import { formatMoneyComplete } from "@/lib/utils/format-money"


const SignalPlanCard = ({ signal }: any) => {
  const {
    id,
    name,
    win_percentage,
    description,
    monthly_price,
    quarterly_price,
    yearly_price,
  } = signal

  const { url } = usePage()
  const { auth, appSettings }: any = usePage().props
  const [isAdmin, setIsAdmin] = useState(false)
  const [showBuyModal, setShowBuyModal] = useState(false)
  const [showEditModal, setShowEditModal] = useState(false)
  const [showDeleteModal, setShowDeleteModal] = useState(false)

  useEffect(() => {
    setIsAdmin(url === "/admin/signals")
  }, [url])

  return (
    <>
      {showBuyModal && (
        <BuySignalSubscriptionModal
          walletBalance={auth?.user?.balance}
          plan={signal}
          closeModal={() => setShowBuyModal(!showBuyModal)}
          // closeModal={() => alert("clicked")}
        />
      )}

      {showEditModal && (
        <AddSignalPlanModal
          plan={signal}
          type="update"
          closeModal={() => setShowEditModal(false)}
        />
      )}

      {showDeleteModal && (
        <DeleteConfirmationModal
          closeModal={() => setShowDeleteModal(false)}
          deleteUrl={route("admin.signal-plan.delete", id)}
          title="Delete Signal Plan"
          description={`This will permanently delete "${name}" and it will no longer available for users on the platform.`}
        />
      )}

      <div className={styles.card}>
        <div className={styles.card__glow} />

        <div className={styles.card__top}>
          <div>
            <span className={styles.badge}>
              SIGNAL PLAN
            </span>

            <h3>{name}</h3>
          </div>

          <div className={styles.meta}>
            <span>✓ Verified Win Rate</span>
            <strong>{win_percentage}%</strong>
          </div>
        </div>

        <p className={styles.description}>
          {description}
        </p>

        <div className={styles.pricing}>
          <div className={styles.priceItem}>
            <span>Monthly</span>

            <strong>
              {appSettings?.base_currency}
              {" "}
              {Number(monthly_price).toLocaleString()}
            </strong>
          </div>

          <div className={styles.priceItem}>
            <span>Quarterly</span>

            <strong>
              {appSettings?.base_currency}
              {" "}
              {Number(quarterly_price).toLocaleString()}
            </strong>
          </div>

          <div className={styles.priceItem}>
            <span>Yearly</span>

            <strong>
              {appSettings?.base_currency}
              {" "}
              {formatMoneyComplete(yearly_price)}
            </strong>
          </div>
        </div>

        {!isAdmin ? (
          <button
            className={styles.subscribeBtn}
            onClick={() =>
              setShowBuyModal(true)
            }
          >
            Subscribe Now
          </button>
        ) : (
          <div className={styles.actions}>
            <button
              className={styles.editBtn}
              onClick={() =>
                setShowEditModal(true)
              }
            >
              <BiSolidEdit />
              Update
            </button>

            <button
              className={styles.deleteBtn}
              onClick={() =>
                setShowDeleteModal(true)
              }
            >
              <MdDelete />
              Delete
            </button>
          </div>
        )}
      </div>
    </>
  )
}

export default SignalPlanCard