/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-explicit-any */

interface IndexProps {
  [key: string]: any;
}

import { useState } from 'react'
import styles from './buy-course.module.scss'
import { router } from '@inertiajs/react'

import { MdClose } from 'react-icons/md'
// import { FaChevronDown } from 'react-icons/fa'

const supportedCryptos: any[] = [
]

interface BuyCourseModalProps {
  onClose: () => void;
  course: any;
}

const BuyCourseModal = ({ onClose, course }: BuyCourseModalProps) => {
  const [method, setMethod] = useState(supportedCryptos[0])
  const [amount, setAmount] = useState(course?.amount)
  const [showDropdown, setShowDropdown] = useState(false)
  const [copied, setCopied] = useState(false)
  const [email, setEmail] = useState("")

  interface formatAmountProps {
  [key: string]: any;
}

const formatAmount = (value: formatAmountProps) => {
    const numeric = value.replace(/[^0-9.]/g, '')
    if (!numeric) return ''
    const parts = numeric.split('.')
    const integer = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    return parts.length > 1 ? `${integer}.${parts[1].slice(0, 2)}` : integer
  }

  interface handleAmountChangeProps {
  [key: string]: any;
}

const handleAmountChange = (e: handleAmountChangeProps) => {
    const raw = e.target.value
    setAmount(formatAmount(raw))
  }

  interface handleMethodSelectProps {
  [key: string]: any;
}

const handleMethodSelect = (crypto: handleMethodSelectProps) => {
    setMethod(crypto)
    setShowDropdown(false)
    setCopied(false)
  }

  interface handleProceedProps {
  [key: string]: any;
}

const handleProceed = () => {
    const numeric = parseFloat(amount.replace(/,/g, ''))
    if (!amount || isNaN(numeric)) return
    window.location.href = `/dashboard/crypto-checkout?method=${method.value}&amount=${numeric}`
  }

  interface handleCopyProps {
  [key: string]: any;
}

const handleCopy = () => {
    navigator.clipboard.writeText(method.address)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  interface handleSubmitProps {
  [key: string]: any;
}

const handleSubmit = () => {
    const numeric = parseFloat(amount.replace(/,/g, ''))
    if (!amount || isNaN(numeric)) return
  
    router.post('/transactions', {
      amount: numeric,
      method: 'crypto',
      channel: method.value,  // <- use selected crypto method
      type: 'credit',
      category: 'deposit',
      status: 'pending'
    })
  }
  

  return (
    <div className={styles.modalOverlay}>
      <div className={styles.modalContent}>
        <button className={styles.closeBtn} onClick={onClose}>
          <MdClose size={22} />
        </button>

        <h2>Buy Course</h2>
        <p>Your wallet balance will be charged. If you have insufficient funds, please deposit funds to your wallet and proceed!</p>

        <div className={styles.inputGroup}>
          <label htmlFor="deposit-amount">Amount in USD</label>
          <input
            required
            id="deposit-amount"
            type="text"
            disabled
            placeholder="Enter amount"
            value={Number(course?.price).toLocaleString("en-US")}
            onChange={handleAmountChange}
            className={styles.amountInput}
          />

            <div style={{ marginTop: "1rem" }}>
              <label>Email Address</label>
              <input
                type="email"
                placeholder="Enter email address"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className={styles.amountInput}
              />
            </div>
        </div>

        <div className={ styles.notice }>
            {/* <MdNotifications size="2.5rem"/> */}
            <p>When you purchase the course, you will also be added to a dedicated group where you get access to premium customer support where necessary.</p>
        </div>

        <small>
          By clicking on the proceed button, you agree to our terms and conditions.
        </small>

        <button className={styles.proceedBtn} onClick={handleSubmit}>
          Proceed to Pay
        </button>
      </div>
    </div>
  )
}

export default BuyCourseModal