/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from './confirm.module.scss'
import { BsArrowDownLeft, BsArrowUpRight, BsArrowLeft } from 'react-icons/bs'
import { FaDownload } from 'react-icons/fa6'
import { Link } from '@inertiajs/react'
import Receipt from '../../Receipt'
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
import { useRef } from 'react'

// ✅ Type definitions
interface Transaction {
  type: 'credit' | 'debit'
  paymentMethod: 'crypto' | 'fiat'
  // currency: string
  cryptocurrency?: string
  amount: number
  status: string
  date: any
  wallet: string
}

interface ConfirmTransactionProps {
  handleModalClose: () => void
  transaction: Transaction
}

const ConfirmTransaction = ({ handleModalClose, transaction }: ConfirmTransactionProps) => {
  const { type, paymentMethod, cryptocurrency, amount, status, date, wallet } = transaction

  const receiptRef = useRef<HTMLDivElement | null>(null)

  const downloadReceiptScreenshot = async () => {
    const receipt = receiptRef.current
    if (!receipt) return

    // Temporarily make receipt visible for screenshot
    const originalStyles = {
      visibility: receipt.style.visibility,
      position: receipt.style.position,
      left: receipt.style.left,
    }

    receipt.style.visibility = 'visible'
    receipt.style.position = 'absolute'
    receipt.style.left = '-9999px'

    // Small delay to ensure DOM update
    await new Promise((res) => setTimeout(res, 100))

    const canvas = await html2canvas(receipt, {
      scale: 2,
      useCORS: true,
      backgroundColor: '#fff',
    })

    const pdf = new jsPDF('p', 'pt', 'a4')
    const imgData = canvas.toDataURL('image/png')
    const width = 500
    const height = (canvas.height * width) / canvas.width

    pdf.addImage(imgData, 'PNG', 40, 40, width, height)
    pdf.save('receipt.pdf')

    // Restore styles
    receipt.style.visibility = originalStyles.visibility
    receipt.style.position = originalStyles.position
    receipt.style.left = originalStyles.left

    // Close modal after download
    handleModalClose()
  }

  const handleCloseModal = () => {
    window.location.href = '/dashboard/wallet'
  }

  return (
    <>
      {/* Hidden receipt for screenshot */}
      <div style={{ visibility: 'hidden', height: 0, overflow: 'hidden' }}>
        <div ref={receiptRef}>
          <Receipt transaction={transaction} />
        </div>
      </div>

      {/* Modal Content */}
      <div className={styles['dash__modal']}>
        <div className={styles['dash__modal__content']}>
          <div onClick={handleCloseModal} className={styles['dash__modal__content--close']}>
            Close
          </div>

          <div className={styles['dash__modal__content--details']}>
            <div className={styles['dash__modal__content--details--header']}>
              <h2>Transaction Summary</h2>
              <p>
                Thank you for transacting with Traderpluss. Your Traderpluss wallet will be credited in less than an
                hour.
              </p>
            </div>

            {/* Buttons */}
            <div className={styles['dash__modal__content--details--buttons']}>
              <button
                type="button"
                className={styles['dash__modal__content--details--buttons--download']}
                onClick={downloadReceiptScreenshot}
              >
                <span>
                  <FaDownload /> &nbsp; Download Receipt
                </span>
              </button>

              <Link href="/dashboard/home" className={styles['dash__modal__content--details--buttons--back']}>
                <span>
                  <BsArrowLeft /> &nbsp; Back to Dashboard
                </span>
              </Link>
            </div>

            {/* Transaction Icon + Amount */}
            <div className={styles['dash__modal__content--details--helper']}>
              <span
                className={
                  type === 'credit'
                    ? styles['dash__modal__content--details--helper--credit']
                    : styles['dash__modal__content--details--helper--debit']
                }
              >
                {type === 'credit' ? (
                  <BsArrowDownLeft size="1.3rem" color="#2EAB5B" />
                ) : (
                  <BsArrowUpRight size="1.3rem" />
                )}
              </span>
              <h5>{type === 'credit' ? 'Wallet Credited' : 'Wallet Debited'}</h5>
              <h1>
                {type === 'credit' ? '+' : '-'}
                {paymentMethod === 'crypto'
                  ? `${Number(amount).toLocaleString('en-US')}${cryptocurrency || ''}`
                  : `${Number(amount).toLocaleString('en-US')}`}
              </h1>
            </div>

            {/* Transaction Summary Details */}
            <div className={styles['dash__modal__content--details--summary']}>
              <div className={styles['dash__modal__content--details--summary--item']}>
                <h6>Transaction ID</h6>
                <p>8dj3ndjHDk3dk8RCTncQA</p>
              </div>

              <div className={styles['dash__modal__content--details--summary--item']}>
                <h6>Type</h6>
                <span
                  className={
                    type === 'credit'
                      ? styles['dash__modal__content--details--summary--item--credit-type']
                      : styles['dash__modal__content--details--summary--item--debit-type']
                  }
                >
                  {type === 'credit' ? 'Credit Transaction' : 'Debit Transaction'}
                </span>
              </div>

              <div className={styles['dash__modal__content--details--summary--item']}>
                <h6>{paymentMethod === 'fiat' ? 'Account Number' : 'Wallet Address'}</h6>
                <p>{wallet}</p>
              </div>

              <div className={styles['dash__modal__content--details--summary--item']}>
                <h6>User</h6>
                <p>Usuoyibo Achilles Ewomamena</p>
              </div>

              <div className={styles['dash__modal__content--details--summary--item']}>
                <h6>Status</h6>
                <p>{status}</p>
              </div>

              <div className={styles['dash__modal__content--details--summary--item']}>
                <h6>Transaction Date</h6>
                <p>{date}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default ConfirmTransaction