import { useState, useEffect } from 'react'
import { FaWallet, FaCheckCircle } from 'react-icons/fa'
import ReactDOM from 'react-dom'
import { useWallet } from '@razorlabs/razorkit'
import './GoGoWalletButton.css'

// Storage key for signed wallets (removed signing functionality as requested)
const SIGNED_WALLETS_KEY = 'gogo_signed_wallets'

// Helper functions for managing signed wallets
const getSignedWallets = (): string[] => {
  try {
    const stored = localStorage.getItem(SIGNED_WALLETS_KEY)
    return stored ? JSON.parse(stored) : []
  } catch {
    return []
  }
}

const isWalletSigned = (address: string): boolean => {
  return getSignedWallets().includes(address)
}

// Simple alert function (replacing useAlert dependency)
const showAlert = (message: string, type: 'success' | 'error' | 'info' = 'info') => {
  console.log(`${type.toUpperCase()}: ${message}`)
}

// Wallet selection modal
const WalletModal = ({
  isOpen,
  onClose,
  onWalletSelected,
  wallets,
  configuredWallets,
}: {
  isOpen: boolean
  onClose: () => void
  onWalletSelected: (walletName: string) => void
  wallets: any[]
  configuredWallets: any[]
}) => {
  const [error, setError] = useState<string | null>(null)

  if (!isOpen) return null
  
  const allWallets = [...configuredWallets, ...wallets]
  const availableWallets = allWallets.filter((wallet, index, self) =>
    index === self.findIndex((w) => w.name === wallet.name)
  )

  // Handle wallet selection
  const handleWalletSelected = async (walletName: string) => {
    try {
      await onWalletSelected(walletName)
      showAlert('Wallet connected', 'success')
      onClose()
    } catch (e) {
      showAlert('Wallet connection failed', 'error')
      setError('Wallet connection failed')
    }
  }

  // Modal UI with GOGO styling
  return (
    <div className="gogo-wallet-modal-overlay">
      <div className="gogo-wallet-modal-container">
        <div className="gogo-wallet-modal-background"></div>
        <div className="gogo-wallet-modal-content">
          <div className="gogo-wallet-modal-header">
            <h3 className="gogo-wallet-modal-title">Connect to GOGO</h3>
            <button onClick={onClose} className="gogo-wallet-modal-close">&times;</button>
          </div>
          <p className="gogo-wallet-modal-subtitle">
            Connect with one of available wallet providers or create a new wallet.
          </p>
          <div className="gogo-wallet-list">
            <h4 className="gogo-wallet-list-title">Select Wallet</h4>
            <div className="gogo-wallet-items">
              {availableWallets?.map((wallet) => {
                const isWalletReady = wallet.installed !== false && (wallet.installed || wallet.name === 'Razor')
                return (
                  <div
                    key={wallet.name}
                    className="gogo-wallet-item"
                    onClick={() => {
                      if (isWalletReady) {
                        handleWalletSelected(wallet.name)
                      } else {
                        showAlert('Wallet not installed. Please install and try again.', 'error')
                        if (wallet.name === 'Razor') {
                          window.open('https://chromewebstore.google.com/detail/razor-wallet/fdcnegogpncmfejlffnofpngdiejii', '_blank')
                        } else if (wallet.downloadUrl?.browserExtension) {
                          window.open(wallet.downloadUrl.browserExtension, '_blank')
                        } else {
                          window.open(`https://www.google.com/search?q=${wallet.name}+wallet+install`, '_blank')
                        }
                      }
                    }}
                  >
                    <div className="gogo-wallet-info">
                      {wallet.iconUrl ? (
                        <img src={wallet.iconUrl} alt={wallet.name} width={32} height={32} 
                          className="gogo-wallet-icon" />
                      ) : (
                        <span className="gogo-wallet-icon-fallback">{wallet.name === 'Razor' ? '⚡' : '🔮'}</span>
                      )}
                      <span className="gogo-wallet-name">{wallet.name}</span>
                    </div>
                  </div>
                )
              })}
            </div>
            {availableWallets.length === 0 && (
              <div className="gogo-wallet-no-wallets">
                <p>No wallets detected. Please install a supported wallet extension.</p>
              </div>
            )}
            {error && (
              <div className="gogo-wallet-error">
                {error}
              </div>
            )}
          </div>
          
          <div className="gogo-wallet-terms">
            <p>
              By connecting your wallet, you agree to our{' '}
              <a href="#" className="gogo-wallet-terms-link">Term of Use</a>
              {' '}and{' '}
              <a href="#" className="gogo-wallet-terms-link">Privacy Policy</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}

// Main wallet button component with modal
const GoGoWalletButton = () => {
  const { select, disconnect, configuredWallets, detectedWallets, account, name, connected } = useWallet()
  const [showModal, setShowModal] = useState(false)
  const [modalKey, setModalKey] = useState(0)
  const [walletSigned, setWalletSigned] = useState(false)
  const [showDropdown, setShowDropdown] = useState(false)

  // Check if current wallet is signed when account changes
  useEffect(() => {
    if (account) {
      setWalletSigned(isWalletSigned(account.address))
    } else {
      setWalletSigned(false)
    }
  }, [account])

  // Handle wallet connect
  const handleConnect = async (walletName: string) => {
    try {
      await select(walletName)
    } catch (e) {
      showAlert('Wallet connection error', 'error')
    }
  }

  // Handle wallet disconnect
  const handleDisconnect = async () => {
    try {
      await disconnect()
      setModalKey((k) => k + 1)
      setWalletSigned(false)
      setShowModal(false)
      setShowDropdown(false)
      showAlert('Wallet disconnected', 'info')
    } catch (e) {
      showAlert('Network error on disconnect', 'error')
    }
  }

  // Handle connected wallet click
  const handleConnectedWalletClick = (e: React.MouseEvent) => {
    e.stopPropagation()
    setShowDropdown(!showDropdown)
  }

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as HTMLElement
      const walletContainer = target.closest('.gogo-wallet-container')
      
      if (!walletContainer && showDropdown) {
        setShowDropdown(false)
      }
    }

    if (showDropdown) {
      document.addEventListener('click', handleClickOutside)
    }

    return () => {
      document.removeEventListener('click', handleClickOutside)
    }
  }, [showDropdown])

  // Open modal
  const handleOpenModal = () => {
    if (!connected) {
      setModalKey((k) => k + 1)
      setShowModal(true)
    }
  }

  // Truncate address for display
  const truncateAddress = (address: string) => `${address.slice(0, 6)}...${address.slice(-4)}`


  // Get icon for connected wallet
  const getWalletIcon = () => {
    const allWallets = [...configuredWallets, ...detectedWallets]
    const wallet = allWallets.find((w) => w.name === name)
    if (wallet && wallet.iconUrl) {
      return <img src={wallet.iconUrl} alt={wallet.name} width={18} height={18} 
        className="gogo-wallet-connected-icon" />
    }
    return <span className="gogo-wallet-icon-fallback">{name === 'Razor' ? '⚡' : '🔮'}</span>
  }

  return (
    <div className="gogo-wallet-container">
      <button
        className={`gogo-wallet-header-btn ${connected ? 'connected' : ''}`}
        onClick={connected ? handleConnectedWalletClick : handleOpenModal}
      >
        <div className="gogo-wallet-btn-content">
          {connected && account ? (
            <>
              {getWalletIcon()}
              <span className={`gogo-wallet-address ${connected ? 'connected' : ''}`}>
                {truncateAddress(account.address)}
              </span>
              {walletSigned && (
                <FaCheckCircle color="#22c55e" size={12} title="Wallet verified" />
              )}
              <span className="gogo-wallet-dropdown-arrow">▼</span>
            </>
          ) : (
            <>
              <FaWallet size={16} />
              <span>Connect to GOGO</span>
            </>
          )}
        </div>
      </button>

      {connected && showDropdown && (
        <div className="gogo-wallet-dropdown" onClick={(e) => e.stopPropagation()}>
          <button 
            className="gogo-wallet-dropdown-item"
            onClick={handleDisconnect}
          >
            <span>Disconnect</span>
          </button>
        </div>
      )}

      {typeof window !== 'undefined' && showModal && ReactDOM.createPortal(
        <WalletModal
          key={modalKey}
          isOpen={showModal}
          onClose={() => setShowModal(false)}
          onWalletSelected={handleConnect}
          wallets={detectedWallets}
          configuredWallets={configuredWallets}
        />, document.body
      )}
    </div>
  )
}

export default GoGoWalletButton