import { useState, FormEvent } from 'react'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { walletApi } from '@/api/wallet'
import { Modal } from '@/components/common/Modal'
import { Button } from '@/components/common/Button'

interface DepositModalProps {
  isOpen: boolean
  onClose: () => void
}

export const DepositModal = ({ isOpen, onClose }: DepositModalProps) => {
  const queryClient = useQueryClient()
  const [amount, setAmount] = useState('')

  const depositMutation = useMutation({
    mutationFn: walletApi.deposit,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['wallet'] })
      queryClient.invalidateQueries({ queryKey: ['transactions'] })
      setAmount('')
      onClose()
    },
  })

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault()
    depositMutation.mutate(amount)
  }

  return (
    <Modal isOpen={isOpen} onClose={onClose} title="Deposit Funds">
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Amount ($)
          </label>
          <input
            type="number"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            required
            min="0.01"
            max="10000"
            step="0.01"
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
            placeholder="Enter amount"
          />
          <p className="mt-1 text-sm text-gray-500">
            This is a simulated deposit for MVP testing purposes.
          </p>
        </div>

        <div className="flex gap-4">
          <Button type="button" variant="secondary" onClick={onClose} className="flex-1">
            Cancel
          </Button>
          <Button type="submit" className="flex-1" disabled={depositMutation.isPending}>
            {depositMutation.isPending ? 'Processing...' : 'Deposit'}
          </Button>
        </div>
      </form>
    </Modal>
  )
}
