"use client"
import React, { useState } from 'react'

interface TradeModalProps {
  isOpen: boolean
  onClose: () => void
  tradeData: {
    symbol: string
    timeframe: string
    entry: string
    tp: string
    sl: string
  } | null
  onExecute: (data: any) => void
}

export default function TradeModal({ isOpen, onClose, tradeData, onExecute }: TradeModalProps) {
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    entry: tradeData?.entry || '',
    tp: tradeData?.tp || '',
    sl: tradeData?.sl || '',
    size: '0.1',
    leverage: '1'
  })

  React.useEffect(() => {
    if (tradeData) {
      setFormData(prev => ({
        ...prev,
        entry: tradeData.entry || '',
        tp: tradeData.tp || '',
        sl: tradeData.sl || ''
      }))
    }
  }, [tradeData])

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    
    try {
      await onExecute({
        symbol: tradeData?.symbol,
        timeframe: tradeData?.timeframe,
        ...formData
      })
    } catch (error) {
      console.error('Trade execution failed:', error)
    } finally {
      setLoading(false)
    }
  }

  if (!isOpen || !tradeData) return null

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
      <div className="bg-gray-900 border border-gray-700 rounded-xl p-6 max-w-md w-full">
        <div className="flex items-center justify-between mb-6">
          <h3 className="text-xl font-bold text-white flex items-center">
            <span className="w-8 h-8 bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center mr-3">
              💰
            </span>
            Execute Trade
          </h3>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-white transition-colors"
          >
            ✕
          </button>
        </div>

        <div className="mb-4 p-3 bg-blue-500/10 border border-blue-500/30 rounded-lg">
          <div className="text-sm text-blue-300">
            <div><strong>Symbol:</strong> {tradeData.symbol}</div>
            <div><strong>Timeframe:</strong> {tradeData.timeframe}</div>
          </div>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-xs font-medium text-gray-400 mb-2">Entry Price</label>
            <input
              type="number"
              step="0.01"
              value={formData.entry}
              onChange={(e) => setFormData(prev => ({ ...prev, entry: e.target.value }))}
              className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-green-500 focus:outline-none"
              placeholder="0.00"
              required
            />
          </div>

          <div>
            <label className="block text-xs font-medium text-gray-400 mb-2">Take Profit</label>
            <input
              type="number"
              step="0.01"
              value={formData.tp}
              onChange={(e) => setFormData(prev => ({ ...prev, tp: e.target.value }))}
              className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-green-500 focus:outline-none"
              placeholder="0.00"
              required
            />
          </div>

          <div>
            <label className="block text-xs font-medium text-gray-400 mb-2">Stop Loss</label>
            <input
              type="number"
              step="0.01"
              value={formData.sl}
              onChange={(e) => setFormData(prev => ({ ...prev, sl: e.target.value }))}
              className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-red-500 focus:outline-none"
              placeholder="0.00"
              required
            />
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-medium text-gray-400 mb-2">Position Size</label>
              <input
                type="number"
                step="0.01"
                value={formData.size}
                onChange={(e) => setFormData(prev => ({ ...prev, size: e.target.value }))}
                className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-cyan-500 focus:outline-none"
                placeholder="0.1"
                required
              />
            </div>

            <div>
              <label className="block text-xs font-medium text-gray-400 mb-2">Leverage</label>
              <select
                value={formData.leverage}
                onChange={(e) => setFormData(prev => ({ ...prev, leverage: e.target.value }))}
                className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white focus:border-cyan-500 focus:outline-none"
              >
                <option value="1">1x</option>
                <option value="2">2x</option>
                <option value="3">3x</option>
                <option value="5">5x</option>
                <option value="10">10x</option>
              </select>
            </div>
          </div>

          <div className="flex space-x-3 mt-6">
            <button
              type="button"
              onClick={onClose}
              className="flex-1 py-2 px-4 bg-gray-700 text-gray-300 rounded-lg hover:bg-gray-600 transition-colors"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={loading}
              className={`flex-1 py-2 px-4 rounded-lg font-medium transition-all ${
                loading
                  ? 'bg-gray-700 text-gray-400 cursor-not-allowed'
                  : 'bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transform hover:scale-[1.02]'
              }`}
            >
              {loading ? (
                <div className="flex items-center justify-center space-x-2">
                  <div className="w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full animate-spin"></div>
                  <span>Executing...</span>
                </div>
              ) : (
                'Execute Trade'
              )}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}