/* eslint-disable @typescript-eslint/no-explicit-any */
import { useForm } from "@inertiajs/react"
import { useState } from "react"
import { FiX } from "react-icons/fi"
import styles from "./buy-signal.module.scss"
import { capitalizeFirstLetter } from "@/lib/utils/capitalise-first-letter"
import {usePage} from "@inertiajs/react"

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

interface Props {
  closeModal: () => void
  plan: any
  walletBalance: number
}

type Cycle = "monthly" | "quarterly" | "yearly"

const BuySignalSubscriptionModal = ({
  closeModal,
  plan,
  walletBalance,
}: Props) => {
  const { post, processing, setData } = useForm<{
    signal_plan_id: number
    billing_cycle: Cycle
  }>({
    signal_plan_id: plan.id,
    billing_cycle: "monthly",
  })

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

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

  const [cycle, setCycle] = useState<Cycle>("monthly")

  const prices: Record<Cycle, number> = {
    monthly: plan.monthly_price ?? 0,
    quarterly: plan.quarterly_price ?? 0,
    yearly: plan.yearly_price ?? 0,
  }

  const amount = prices[cycle]

  const submit = () => {
    setData("signal_plan_id", plan.id)
    setData("billing_cycle", cycle)

    post(route("signal.subscribe", plan), {
      preserveScroll: true,
      onSuccess: closeModal,
    })
  }

  return (
    <div
      className={styles.subscription}
      onClick={closeModal}
    >
      <div
        className={styles.subscription__content}
        onClick={(e) => e.stopPropagation()}
      >
        <button
          type="button"
          className={styles.subscription__close}
          onClick={closeModal}
        >
          <FiX />
        </button>

        <div className={styles.subscription__header}>
          <span className={styles.subscription__badge}>
            Signal Subscription
          </span>

          <h2>{plan.name}</h2>

          <p>
            Select a billing cycle and activate your
            premium trading signals subscription.
          </p>
        </div>

        <div className={styles.subscription__wallet}>
          <span>Available Balance</span>

          <strong>
            {currency?.currency_symbol}{formatMoneyComplete(walletBalance)}
          </strong>
        </div>

        <div className={styles.subscription__section}>
          <span className={styles.subscription__label}>
            Billing Cycle
          </span>

          <div className={styles.subscription__cycles}>
            {(
              ["monthly", "quarterly", "yearly"] as const
            ).map((item) => (
              <button
                key={item}
                type="button"
                onClick={() => setCycle(item)}
                className={
                  cycle === item
                    ? styles.subscription__cycleActive
                    : styles.subscription__cycle
                }
              >
                <small>
                  {capitalizeFirstLetter(item)}
                </small>

                <strong>
                  {currency?.currency_symbol}{formatMoneyComplete(prices[item])}
                </strong>
              </button>
            ))}
          </div>
        </div>

        {/* <div className={styles.subscription__summary}>
          <div className={styles.subscription__row}>
            <span>Plan</span>
            <strong>{plan.name}</strong>
          </div>

          <div className={styles.subscription__row}>
            <span>Cycle</span>
            <strong>
              {capitalizeFirstLetter(cycle)}
            </strong>
          </div>

          <div
            className={`${styles.subscription__row} ${styles.subscription__rowTotal}`}
          >
            <span>Total</span>
            <h3>${amount.toLocaleString()}</h3>
          </div>
        </div> */}

        <div className={styles.subscription__notice}>
          <p>
            Subscription fees are deducted directly
            from your TraderPlus wallet balance.
          </p>
        </div>

        <button
          type="button"
          className={styles.subscription__submit}
          disabled={
            processing || walletBalance < amount
          }
          onClick={submit}
        >
          {processing
            ? "Processing..."
            : "Confirm Subscription"}
        </button>

        {walletBalance < amount && (
          <div className={styles.subscription__error}>
            Insufficient balance available for this
            subscription.
          </div>
        )}
      </div>
    </div>
  )
}

export default BuySignalSubscriptionModal