'use client'

import { useState } from 'react'
import { AnalysisResult } from '../lib/ai-analysis'

interface AutomatedAnalysisProps {
  onAnalysisComplete?: (analysis: AnalysisResult) => void
}

export default function AutomatedAnalysisPanel({ onAnalysisComplete }: AutomatedAnalysisProps) {
  const [isAnalyzing, setIsAnalyzing] = useState(false)
  const [symbol, setSymbol] = useState('SOLUSD')
  const [timeframe, setTimeframe] = useState('5')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [analysis, setAnalysis] = useState<AnalysisResult | null>(null)
  const [error, setError] = useState('')

  const handleAnalyze = async () => {
    if (!email || !password) {
      setError('Please provide TradingView email and password')
      return
    }

    setIsAnalyzing(true)
    setError('')
    setAnalysis(null)

    try {
      const response = await fetch('/api/automated-analysis', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          symbol,
          timeframe,
          credentials: {
            email,
            password,
          },
          action: 'capture_and_analyze'
        })
      })

      const result = await response.json()

      if (!result.success) {
        throw new Error(result.error || 'Analysis failed')
      }

      const analysisResult = result.data.analysis
      setAnalysis(analysisResult)
      
      if (onAnalysisComplete) {
        onAnalysisComplete(analysisResult)
      }

    } catch (err) {
      console.error('Analysis error:', err)
      setError(err instanceof Error ? err.message : 'Analysis failed')
    } finally {
      setIsAnalyzing(false)
    }
  }

  const handleMultipleAnalysis = async () => {
    if (!email || !password) {
      setError('Please provide TradingView email and password')
      return
    }

    setIsAnalyzing(true)
    setError('')
    setAnalysis(null)

    try {
      const response = await fetch('/api/automated-analysis', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          symbols: [symbol],
          timeframes: ['5', '15', '60'],
          credentials: {
            email,
            password,
          },
          action: 'capture_multiple'
        })
      })

      const result = await response.json()

      if (!result.success) {
        throw new Error(result.error || 'Multiple analysis failed')
      }

      // Show results from all timeframes
      console.log('Multiple analysis results:', result.data.results)
      
      // Use the first successful analysis for display
      const firstSuccessful = result.data.results.find((r: any) => r.analysis !== null)
      if (firstSuccessful) {
        setAnalysis(firstSuccessful.analysis)
        if (onAnalysisComplete) {
          onAnalysisComplete(firstSuccessful.analysis)
        }
      }

    } catch (err) {
      console.error('Multiple analysis error:', err)
      setError(err instanceof Error ? err.message : 'Multiple analysis failed')
    } finally {
      setIsAnalyzing(false)
    }
  }

  return (
    <div className="bg-gray-900 border border-gray-700 rounded-lg p-6 space-y-4">
      <h2 className="text-xl font-bold text-white mb-4">Automated TradingView Analysis</h2>
      
      {/* Configuration */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-gray-300 mb-2">
            Symbol
          </label>
          <select
            value={symbol}
            onChange={(e) => setSymbol(e.target.value)}
            className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white"
            disabled={isAnalyzing}
          >
            <option value="SOLUSD">SOL/USD</option>
            <option value="BTCUSD">BTC/USD</option>
            <option value="ETHUSD">ETH/USD</option>
            <option value="ADAUSD">ADA/USD</option>
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-300 mb-2">
            Timeframe
          </label>
          <select
            value={timeframe}
            onChange={(e) => setTimeframe(e.target.value)}
            className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white"
            disabled={isAnalyzing}
          >
            <option value="5">5 min</option>
            <option value="15">15 min</option>
            <option value="60">1 hour</option>
            <option value="240">4 hour</option>
            <option value="1440">1 day</option>
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-300 mb-2">
            TradingView Email
          </label>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white"
            placeholder="your.email@example.com"
            disabled={isAnalyzing}
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-300 mb-2">
            TradingView Password
          </label>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white"
            placeholder="••••••••"
            disabled={isAnalyzing}
          />
        </div>
      </div>

      {/* Action Buttons */}
      <div className="flex space-x-4">
        <button
          onClick={handleAnalyze}
          disabled={isAnalyzing || !email || !password}
          className="flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white font-medium py-2 px-4 rounded-md transition-colors"
        >
          {isAnalyzing ? 'Analyzing...' : 'Analyze Current Chart'}
        </button>

        <button
          onClick={handleMultipleAnalysis}
          disabled={isAnalyzing || !email || !password}
          className="flex-1 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white font-medium py-2 px-4 rounded-md transition-colors"
        >
          {isAnalyzing ? 'Analyzing...' : 'Multi-Timeframe Analysis'}
        </button>
      </div>

      {/* Status */}
      {isAnalyzing && (
        <div className="bg-blue-900/20 border border-blue-700 rounded-md p-4">
          <div className="flex items-center space-x-2">
            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-400"></div>
            <span className="text-blue-400">
              Logging into TradingView and capturing chart...
            </span>
          </div>
        </div>
      )}

      {/* Error Display */}
      {error && (
        <div className="bg-red-900/20 border border-red-700 rounded-md p-4">
          <p className="text-red-400">{error}</p>
        </div>
      )}

      {/* Analysis Results */}
      {analysis && (
        <div className="bg-gray-800 border border-gray-600 rounded-md p-4 space-y-3">
          <h3 className="text-lg font-semibold text-white">Analysis Results</h3>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <span className="text-sm text-gray-400">Sentiment:</span>
              <p className={`font-medium ${
                analysis.marketSentiment === 'BULLISH' ? 'text-green-400' :
                analysis.marketSentiment === 'BEARISH' ? 'text-red-400' :
                'text-yellow-400'
              }`}>
                {analysis.marketSentiment}
              </p>
            </div>
            
            <div>
              <span className="text-sm text-gray-400">Recommendation:</span>
              <p className={`font-medium ${
                analysis.recommendation === 'BUY' ? 'text-green-400' :
                analysis.recommendation === 'SELL' ? 'text-red-400' :
                'text-yellow-400'
              }`}>
                {analysis.recommendation}
              </p>
            </div>
            
            <div>
              <span className="text-sm text-gray-400">Confidence:</span>
              <p className="font-medium text-white">{analysis.confidence}%</p>
            </div>
          </div>

          <div>
            <span className="text-sm text-gray-400">Summary:</span>
            <p className="text-white">{analysis.summary}</p>
          </div>

          {analysis.entry && (
            <div>
              <span className="text-sm text-gray-400">Entry:</span>
              <p className="text-green-400">${analysis.entry.price}</p>
              <p className="text-sm text-gray-300">{analysis.entry.rationale}</p>
            </div>
          )}

          {analysis.stopLoss && (
            <div>
              <span className="text-sm text-gray-400">Stop Loss:</span>
              <p className="text-red-400">${analysis.stopLoss.price}</p>
              <p className="text-sm text-gray-300">{analysis.stopLoss.rationale}</p>
            </div>
          )}

          {analysis.takeProfits && (
            <div>
              <span className="text-sm text-gray-400">Take Profits:</span>
              {analysis.takeProfits.tp1 && (
                <p className="text-blue-400">TP1: ${analysis.takeProfits.tp1.price} - {analysis.takeProfits.tp1.description}</p>
              )}
              {analysis.takeProfits.tp2 && (
                <p className="text-blue-400">TP2: ${analysis.takeProfits.tp2.price} - {analysis.takeProfits.tp2.description}</p>
              )}
            </div>
          )}

          <div>
            <span className="text-sm text-gray-400">Reasoning:</span>
            <p className="text-gray-300 text-sm">{analysis.reasoning}</p>
          </div>
        </div>
      )}
    </div>
  )
}