import { useState } from 'react'
import { useAccount } from 'wagmi'

export default function BridgeForm() {
  const { address } = useAccount()
  const [amount, setAmount] = useState('')
  const [recipient, setRecipient] = useState(address || '')
  const [assetType, setAssetType] = useState<'ETH' | 'WETH'>('ETH')
  const [loading, setLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!address) {
      alert('Please connect your wallet')
      return
    }

    setLoading(true)
    try {
      // Bridge logic would go here
      console.log('Bridging:', { amount, recipient, assetType })
      alert('Bridge transaction submitted!')
    } catch (error) {
      console.error('Bridge error:', error)
      alert('Bridge failed')
    } finally {
      setLoading(false)
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4 p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold">Bridge Transfer</h2>
      
      <div>
        <label htmlFor="bridge-form-asset-type" className="block text-sm font-medium mb-2">Asset Type</label>
        <select
          id="bridge-form-asset-type"
          name="assetType"
          value={assetType}
          onChange={(e) => setAssetType(e.target.value as 'ETH' | 'WETH')}
          className="w-full p-2 border rounded"
        >
          <option value="ETH">ETH</option>
          <option value="WETH">WETH</option>
        </select>
      </div>

      <div>
        <label htmlFor="bridge-form-amount" className="block text-sm font-medium mb-2">Amount</label>
        <input
          id="bridge-form-amount"
          name="amount"
          type="number"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
          placeholder="0.0"
          className="w-full p-2 border rounded"
          required
        />
      </div>

      <div>
        <label htmlFor="bridge-form-recipient" className="block text-sm font-medium mb-2">Recipient Address</label>
        <input
          id="bridge-form-recipient"
          name="recipient"
          type="text"
          value={recipient}
          onChange={(e) => setRecipient(e.target.value)}
          placeholder="0x..."
          className="w-full p-2 border rounded"
          required
        />
      </div>

      <button
        type="submit"
        disabled={loading || !address}
        className="w-full px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
      >
        {loading ? 'Processing...' : 'Bridge'}
      </button>
    </form>
  )
}

