/**
 * ImpersonationMode Component - Wallet impersonation UI
 */

import { useState } from 'react'
import { useAdmin } from '../../contexts/AdminContext'
import { validateAddress } from '../../utils/security'
import toast from 'react-hot-toast'

export default function ImpersonationMode() {
  const { impersonationAddress, setImpersonationAddress, isImpersonating } = useAdmin()
  const [inputAddress, setInputAddress] = useState('')
  const [isValidating, setIsValidating] = useState(false)

  const handleEnableImpersonation = async () => {
    if (!inputAddress.trim()) {
      toast.error('Please enter an address')
      return
    }

    setIsValidating(true)
    const validation = validateAddress(inputAddress.trim())

    if (!validation.valid) {
      toast.error(validation.error || 'Invalid address')
      setIsValidating(false)
      return
    }

    if (validation.checksummed) {
      setImpersonationAddress(validation.checksummed)
      toast.success(`Impersonating address: ${validation.checksummed.slice(0, 10)}...`)
      setInputAddress('')
    }
    setIsValidating(false)
  }

  const handleDisableImpersonation = () => {
    setImpersonationAddress(null)
    toast.success('Impersonation disabled')
  }

  return (
    <div className="bg-black/20 rounded-xl p-6 border border-white/10">
      <h2 className="text-xl font-bold text-white mb-4">Wallet Impersonation</h2>
      <p className="text-white/70 text-sm mb-4">
        Impersonate any Ethereum address to test admin functions or view contract state from a different perspective.
      </p>

      {isImpersonating ? (
        <div className="space-y-4">
          <div className="bg-yellow-500/20 border border-yellow-500/50 rounded-lg p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-yellow-200 font-semibold mb-1">Currently Impersonating</p>
                <p className="font-mono text-yellow-200 text-sm">{impersonationAddress}</p>
              </div>
              <button
                onClick={handleDisableImpersonation}
                className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-semibold transition-colors"
              >
                Disable
              </button>
            </div>
          </div>
          <p className="text-white/60 text-xs">
            ⚠️ All admin functions will be executed as if called from this address. Use with caution.
          </p>
        </div>
      ) : (
        <div className="space-y-4">
          <div>
            <label className="block text-white/70 text-sm mb-2">Enter Address or ENS Name</label>
            <div className="flex gap-2">
              <input
                type="text"
                value={inputAddress}
                onChange={(e) => setInputAddress(e.target.value)}
                placeholder="0x... or name.eth"
                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"
                onKeyPress={(e) => {
                  if (e.key === 'Enter') {
                    handleEnableImpersonation()
                  }
                }}
              />
              <button
                onClick={handleEnableImpersonation}
                disabled={isValidating || !inputAddress.trim()}
                className="px-6 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white rounded-lg font-semibold transition-colors"
              >
                {isValidating ? 'Validating...' : 'Enable'}
              </button>
            </div>
          </div>
          <p className="text-white/60 text-xs">
            💡 This allows you to test admin functions from any address without needing that address's private key.
          </p>
        </div>
      )}
    </div>
  )
}
