/* eslint-disable @typescript-eslint/no-unused-vars */
import styles from './pay.module.scss'
import { MdCheckCircle } from 'react-icons/md'
import { BsArrowRight } from 'react-icons/bs'
import { useState } from 'react'
import { useForm } from '@inertiajs/react'

interface PaymentMethodsModalProps {
  handleModalClose: () => void
  plan: {
    name: string
    roi: number
    duration: number
    min: number
    max: number
  }
}

const PaymentMethodsModal = ({ handleModalClose, plan }: PaymentMethodsModalProps) => {
  const { name, roi, duration } = plan

  const [method, setMethod] = useState<number>(1)

  const { data, setData, post } = useForm({
    amount: 100,
    package: name,
    roi: roi,
    duration: duration,
  })

  const toggleMethod = (number: number) => {
    setMethod(number)
  }

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

    if (method === 1) {
      // Wallet payment method
      handleModalClose()
      // Example API call:
      // post('/user-active-plan', data)
    } else if (method === 2) {
      // Redirect to crypto checkout
      window.location.href = `/dashboard/crypto-checkout?method=BTC&amount=${data.amount}`
    }
  }

  return (
    <div className={styles['dash__modal']}>
      <div className={styles['dash__modal__content']}>
        <div onClick={handleModalClose} className={styles['dash__modal__content--close']}>
          Close
        </div>

        <form onSubmit={handlePay} className={styles['dash__modal__content--details']}>
          <div className={styles['dash__modal__content--details--header']}>
            <h2>Choose payment method</h2>
            <p>Please select your preferred channel of payment to complete this transaction</p>
          </div>

          <div className={styles['dash__modal__content--details--summary']}>
            {/* Wallet Option */}
            <div
              onClick={() => toggleMethod(1)}
              className={
                method === 1
                  ? styles['dash__modal__content--details--summary--item--active']
                  : styles['dash__modal__content--details--summary--item']
              }
            >
              <div className={styles['dash__modal__content--details--summary--item--top']}>
                <h1>Wallet Option</h1>
                <span>{method === 1 ? <MdCheckCircle fill="#2362FD" size="1.4rem" /> : null}</span>
              </div>
              <p>
                Equivalent of ${Number(data.amount).toLocaleString('en-US')} will be deducted from your wallet balance
              </p>
              {method === 1 ? <small>NB: Your wallet balance is $2,500</small> : null}
            </div>

            {/* Instant Transfer Option */}
            <div
              onClick={() => toggleMethod(2)}
              className={
                method === 2
                  ? styles['dash__modal__content--details--summary--item--active']
                  : styles['dash__modal__content--details--summary--item']
              }
            >
              <div className={styles['dash__modal__content--details--summary--item--top']}>
                <h1>Instant Transfers</h1>
                <span>{method === 2 ? <MdCheckCircle fill="#2362FD" size="1.4rem" /> : null}</span>
              </div>
              <p>
                Pay an equivalent of ${Number(data.amount).toLocaleString('en-US')} into the address details that will
                be shown to you when you proceed
              </p>
            </div>

            {/* Amount Input */}
            <label htmlFor="amount">Amount to invest ($) *</label>
            <input
              type="number"
              id="amount"
              value={data.amount}
              onChange={(e) => setData('amount', Number(e.target.value))}
              placeholder="Please enter the amount to invest"
              min={plan.min}
              max={plan.max}
              required
            />

            <button type="submit">
              Proceed & Pay <BsArrowRight size="1.2rem" />
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}

export default PaymentMethodsModal