import { useQuery } from '@tanstack/react-query'
import { walletApi } from '@/api/wallet'
import { Card } from '@/components/common/Card'
import { formatCurrency } from '@/utils/formatters'
import { Wallet, Lock } from 'lucide-react'
import { Loading } from '@/components/common/Loading'
import { useWeb3Wallet } from '@/blockchain/hooks/useWeb3Wallet'
import { BlockchainBadge } from '@/blockchain/components/BlockchainBadge'

export const WalletBalance = () => {
  const { data: wallet, isLoading } = useQuery({
    queryKey: ['wallet'],
    queryFn: walletApi.getWallet,
  })

  // Blockchain integration
  const { walletAddress, isConnected, walletBalance } = useWeb3Wallet()

  if (isLoading) return <Loading />

  if (!wallet) return null

  const totalFunds = parseFloat(wallet.balance) + parseFloat(wallet.escrow)
  const onChainEscrow = wallet.blockchain_escrow || 0 // Placeholder for on-chain escrow amount

  return (
    <Card>
      <div className="space-y-4">
        <h2 className="text-xl font-bold flex items-center gap-2">
          <Wallet size={24} />
          Wallet Balance
        </h2>

        <div className="space-y-3">
          <div className="flex justify-between items-center p-4 bg-primary/10 rounded-lg">
            <span className="text-gray-700 font-medium">Available Balance</span>
            <span className="text-2xl font-bold text-primary">{formatCurrency(wallet.balance)}</span>
          </div>

          <div className="flex justify-between items-center p-4 bg-warning/10 rounded-lg">
            <span className="text-gray-700 font-medium flex items-center gap-2">
              <Lock size={18} />
              Locked in Escrow
            </span>
            <span className="text-xl font-semibold text-warning">{formatCurrency(wallet.escrow)}</span>
          </div>

          <div className="flex justify-between items-center p-4 bg-gray-100 rounded-lg">
            <span className="text-gray-700 font-medium">Total Funds</span>
            <span className="text-xl font-semibold text-gray-900">{formatCurrency(totalFunds)}</span>
          </div>
        </div>

        {/* On-Chain Escrow Section */}
        {isConnected && (
          <div className="mt-6 pt-6 border-t">
            <div className="flex items-center gap-2 mb-3">
              <h3 className="text-lg font-semibold text-gray-900">On-Chain Escrow</h3>
              <BlockchainBadge status="confirmed" variant="compact" />
            </div>

            <div className="space-y-3">
              <div className="flex justify-between items-center p-4 bg-green-50 border border-green-200 rounded-lg">
                <span className="text-gray-700 font-medium">Locked in Smart Contract</span>
                <div className="text-right">
                  <div className="text-lg font-semibold text-green-800">
                    {onChainEscrow} ETH
                  </div>
                  <div className="text-sm text-green-600">
                    ≈ {formatCurrency(onChainEscrow * 2000)}
                  </div>
                </div>
              </div>

              <div className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                <span className="text-sm text-gray-600">Wallet Balance</span>
                <span className="text-sm font-medium text-gray-900">{walletBalance} ETH</span>
              </div>

              {walletAddress && (
                <div className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                  <span className="text-sm text-gray-600">Wallet Address</span>
                  <code className="text-xs text-gray-700 bg-gray-200 px-2 py-1 rounded font-mono">
                    {walletAddress.substring(0, 6)}...{walletAddress.substring(38)}
                  </code>
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </Card>
  )
}
