/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from './wallet.module.scss'
import { Link, usePage, router } from '@inertiajs/react'
import PageIntro from '@/components/dashboard/PageIntro'
import TransactionCard from '@/components/dashboard/TransactionCard'
import UserDashboardLayout from '@/layouts/user_dashboard_layout'
import NoResults from '@/components/dashboard/NoResults'
import { IoWallet } from 'react-icons/io5'
import { FaEyeSlash, FaRegEye, FaPiggyBank } from 'react-icons/fa6'
import { BsSendFill } from 'react-icons/bs'
import { useEffect, useState } from 'react'
import Pagination from '@/components/shared/Pagination'
import { usePaginatedData } from '@/hooks/use-paginated-data'
import currencyData from "../../../../data/countries-currencies.json";
import { formatMoneyComplete } from '@/lib/utils/format-money'

// ------------------ TYPES ------------------
type Transaction = { id: number | string; type: string; category: string }
type Pagination = { page: number; totalPages: number; perPage: number; total: number }


// Extend React.FC for Inertia pages
type PageWithLayout<P = Record<string, unknown>> = React.FC<P> & {
  layout?: (page: React.ReactNode) => React.ReactNode
}

// Skeleton Transaction Card
const SkeletonTransaction: React.FC = () => (
  <div className={styles['transactions__card--skeleton']}>
    <div className={styles['skeleton__line']} style={{ width: '50%' }} />
    <div className={styles['skeleton__line']} style={{ width: '30%' }} />
    <div className={styles['skeleton__line']} style={{ width: '80%' }} />
  </div>
)

const Wallet: PageWithLayout = () => {
  const { transactions, filters, auth, appSettings } =
    usePage().props as unknown as any

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

  const { loading: isLoading, setLoading, handlePageChange } = usePaginatedData(10)

  const txData = transactions?.data || []
  const [showFilters, setShowFilters] = useState(!!(filters?.startDate || filters?.endDate))
  const [toggleActive, setToggleActive] = useState(1)
  const [hideAmount, setHideAmount] = useState(false)
  const [startDate, setStartDate] = useState(filters?.startDate || '')
  const [endDate, setEndDate] = useState(filters?.endDate || '')

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 500)
    return () => clearTimeout(timer)
  }, [])

  // Toggle wallet visibility
  const toggleHideAmount = () => setHideAmount((prev) => !prev)

  // Filter transactions for tabs
  const filteredTransactions: Record<number, Transaction[]> = {
    1: txData,
    2: txData.filter((t: any) => t.type === 'deposit'),
    3: txData.filter((t: any) => t.type === 'withdrawal'),
    4: txData.filter((t: any) => t.type === 'trade'),
  }

  const renderTransactions = () =>
    filteredTransactions[toggleActive]?.map((t) => <TransactionCard key={t.id} transaction={t} />)

  // Apply date filters
  const applyFilters = () => {
    router.get(
      '/dashboard/wallet',
      { page: 1, startDate, endDate },
      { preserveState: true, preserveScroll: true }
    )
  }

  // // Format numbers: only if >= 500,000 -> K
  // const formatBalance = (value: number) => {
  //   if (value >= 500_000) {
  //     return `${(value / 1000).toFixed(value % 1000 === 0 ? 0 : 1)}K`
  //   }
  //   return value.toLocaleString()
  // }

  return (
    <div className={styles['transactions']}>
      <PageIntro
        title="My Wallet"
        description="View all your wallet related transactions"
      />

      {/* Summary Section */}
      <div className={styles.card}>
        {/* LEFT: Balance */}
        <div className={styles.card__left}>
          <div className={styles.card__title}>
            <h4>Wallet</h4>
            <span onClick={toggleHideAmount} title={hideAmount ? 'Show balance' : 'Hide balance'}>
              {hideAmount ? <FaRegEye /> : <FaEyeSlash />}
            </span>
          </div>
          <h2 className={styles.card__amount}>
            {hideAmount ? (
              '********'
            ) : (
              <span className={styles.amountValue}>
                <span className={styles.currency}>{currency?.currency_symbol}{formatMoneyComplete(auth?.user?.balance ?? 0)}</span>
              </span>
            )}
          </h2>
        </div>

        {/* RIGHT: Actions */}
        <div className={styles.card__right}>
          <Link href="/dashboard/deposits" className={`${styles.actionBtn} ${styles.fund}`}>
            <FaPiggyBank /> Deposit
          </Link>
          <Link href="/dashboard/withdrawals" className={`${styles.actionBtn} ${styles.withdraw}`}>
            <IoWallet /> Withdraw
          </Link>
          <Link href="/dashboard/transfers" className={`${styles.actionBtn} ${styles.transfer}`}>
            <BsSendFill /> Transfer
          </Link>
        </div>
      </div>

      {/* Filter Toggle Button */}
      {/* <button className={styles.filterToggleBtn} onClick={() => setShowFilters(!showFilters)}>
        <FaFilter /> &nbsp; {showFilters ? 'Hide Filters' : 'Apply Date Filter'}
      </button> */}

      {/* Date Filters */}
      {showFilters && (
        <div className={styles.filterSection}>
          <input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
          <input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} />
          <button onClick={applyFilters}>Apply</button>
        </div>
      )}

      {/* Transactions Section */}
      <div className={styles['transactions__transactions']}>
        {/* Tabs */}
        {/* <div className={styles['transactions__transactions__tab']}>
          {['All Transactions', 'Deposits', 'Withdrawals', 'Trades Related'].map((label, index) => {
            const idx = index + 1
            return (
              <div
                key={idx}
                onClick={() => setToggleActive(idx)}
                className={
                  toggleActive === idx
                    ? styles['transactions__transactions__tab--item--active']
                    : styles['transactions__transactions__tab--item']
                }
              >
                {label}
              </div>
            )
          })}
        </div> */}

        {/* Skeleton while loading */}
        {isLoading ? (
          <>
            {Array.from({ length: 5 }).map((_, i) => (
              <SkeletonTransaction key={i} />
            ))}
          </>
        ) : filteredTransactions[toggleActive]?.length > 0 ? (
          <>
            {renderTransactions()}

            {/* Pagination */}
            <div className={styles['attend__pagination']}>
              {transactions?.data?.length > 0 && transactions?.links?.length > 0 && (
                <Pagination links={transactions?.links} onChange={handlePageChange} />
              )}
            </div>
          </>
        ) : (
          <NoResults
            title="No Transactions"
            description="Oops! It seems you are yet to make any transactions"
          />
        )}
      </div>
    </div>
  )
}

Wallet.layout = (page) => <UserDashboardLayout title="Dashboard">{page}</UserDashboardLayout>

export default Wallet