/**
 * WalletBalance Component - Show balances for admin wallets
 */

import { useState } from 'react'
import { useAccount, useBalance } from 'wagmi'
import { CONTRACT_ADDRESSES } from '../../config/contracts'
import { formatEther } from 'viem'
import toast from 'react-hot-toast'

export default function WalletBalance() {
  const { address } = useAccount()
  const [wallets, setWallets] = useState<string[]>([
    CONTRACT_ADDRESSES.mainnet.MAINNET_TETHER,
    CONTRACT_ADDRESSES.mainnet.TRANSACTION_MIRROR,
  ])
  const [newWallet, setNewWallet] = useState('')

  const { data: userBalance } = useBalance({
    address: address,
  })

  const addWallet = () => {
    if (!newWallet || !/^0x[a-fA-F0-9]{40}$/.test(newWallet)) {
      toast.error('Invalid address')
      return
    }
    if (wallets.includes(newWallet)) {
      toast.error('Wallet already added')
      return
    }
    setWallets((prev) => [...prev, newWallet])
    setNewWallet('')
  }

  return (
    <div className="space-y-6">
      <div className="bg-black/20 rounded-xl p-6 border border-white/10">
        <h2 className="text-xl font-bold text-white mb-4">Wallet Balances</h2>

        {address && userBalance && (
          <div className="mb-6 bg-blue-500/20 border border-blue-500/50 rounded-lg p-4">
            <p className="text-blue-200 text-sm mb-1">Your Wallet</p>
            <p className="text-blue-100 font-mono text-sm mb-1">{address}</p>
            <p className="text-blue-200 font-bold text-xl">
              {formatEther(userBalance.value)} {userBalance.symbol}
            </p>
          </div>
        )}

        <div className="space-y-4">
          <div>
            <label className="block text-white/70 text-sm mb-2">Add Wallet Address</label>
            <div className="flex gap-2">
              <input
                type="text"
                value={newWallet}
                onChange={(e) => setNewWallet(e.target.value)}
                placeholder="0x..."
                className="flex-1 px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:border-blue-500 font-mono text-sm"
              />
              <button
                onClick={addWallet}
                className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-colors"
              >
                Add
              </button>
            </div>
          </div>

          <div className="space-y-3">
            {wallets.map((wallet) => (
              <WalletBalanceItem key={wallet} address={wallet} />
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

function WalletBalanceItem({ address }: { address: string }) {
  const { data: balance, isLoading } = useBalance({
    address: address as `0x${string}`,
  })

  return (
    <div className="bg-white/5 rounded-lg p-4 border border-white/10">
      <div className="flex justify-between items-center">
        <div className="flex-1">
          <p className="text-white font-mono text-sm mb-1">{address}</p>
          {isLoading ? (
            <p className="text-white/60 text-xs">Loading...</p>
          ) : balance ? (
            <p className="text-white font-bold">
              {formatEther(balance.value)} {balance.symbol}
            </p>
          ) : (
            <p className="text-white/60 text-xs">Unable to fetch balance</p>
          )}
        </div>
      </div>
    </div>
  )
}
