trading_bot_v3/components/AIAnalysisPanel.tsx

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

const layouts = (process.env.NEXT_PUBLIC_TRADINGVIEW_LAYOUTS || 'ai,Diy module').split(',').map(l => l.trim())
const timeframes = [
  { label: '1m', value: '1' },
  { label: '5m', value: '5' },
  { label: '15m', value: '15' },
  { label: '1h', value: '60' },
  { label: '4h', value: '240' },
  { label: '1d', value: 'D' },
  { label: '1w', value: 'W' },
  { label: '1M', value: 'M' },
]

const popularCoins = [
  { name: 'Bitcoin', symbol: 'BTCUSD', icon: '₿' },
  { name: 'Ethereum', symbol: 'ETHUSD', icon: 'Ξ' },
  { name: 'Solana', symbol: 'SOLUSD', icon: '◎' },
  { name: 'Sui', symbol: 'SUIUSD', icon: '🔷' },
  { name: 'Avalanche', symbol: 'AVAXUSD', icon: '🔺' },
  { name: 'Cardano', symbol: 'ADAUSD', icon: '♠' },
  { name: 'Polygon', symbol: 'MATICUSD', icon: '🔷' },
  { name: 'Chainlink', symbol: 'LINKUSD', icon: '🔗' },
]

export default function AIAnalysisPanel() {
  const [symbol, setSymbol] = useState('BTCUSD')
  const [selectedLayouts, setSelectedLayouts] = useState<string[]>([layouts[0]])
  const [timeframe, setTimeframe] = useState('60')
  const [loading, setLoading] = useState(false)
  const [result, setResult] = useState<any>(null)
  const [error, setError] = useState<string | null>(null)

  // Helper function to safely render any value
  const safeRender = (value: any): string => {
    if (typeof value === 'string') return value
    if (typeof value === 'number') return value.toString()
    if (Array.isArray(value)) return value.join(', ')
    if (typeof value === 'object' && value !== null) {
      return JSON.stringify(value)
    }
    return String(value)
  }

  const toggleLayout = (layout: string) => {
    setSelectedLayouts(prev => 
      prev.includes(layout) 
        ? prev.filter(l => l !== layout)
        : [...prev, layout]
    )
  }

  const selectCoin = (coinSymbol: string) => {
    setSymbol(coinSymbol)
  }

  const quickAnalyze = async (coinSymbol: string) => {
    setSymbol(coinSymbol)
    setSelectedLayouts([layouts[0]]) // Use first layout
    setLoading(true)
    setError(null)
    setResult(null)

    try {
      const res = await fetch('/api/analyze', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ symbol: coinSymbol, layouts: [layouts[0]], timeframe })
      })
      const data = await res.json()
      if (!res.ok) throw new Error(data.error || 'Unknown error')
      setResult(data)
    } catch (e: any) {
      setError(e.message)
    }
    setLoading(false)
  }

  async function handleAnalyze() {
    setLoading(true)
    setError(null)
    setResult(null)
    
    if (selectedLayouts.length === 0) {
      setError('Please select at least one layout')
      setLoading(false)
      return
    }

    try {
      const res = await fetch('/api/analyze', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ symbol, layouts: selectedLayouts, timeframe })
      })
      const data = await res.json()
      if (!res.ok) throw new Error(data.error || 'Unknown error')
      setResult(data)
    } catch (e: any) {
      setError(e.message)
    }
    setLoading(false)
  }

  return (
    <div className="bg-gray-900 rounded-lg shadow p-6 mb-8">
      <h2 className="text-xl font-bold mb-4 text-white">AI Chart Analysis</h2>
      
      {/* Quick Coin Selection */}
      <div className="mb-6">
        <h3 className="text-sm font-medium text-gray-300 mb-3">Quick Analysis - Popular Coins</h3>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
          {popularCoins.map(coin => (
            <button
              key={coin.symbol}
              onClick={() => quickAnalyze(coin.symbol)}
              disabled={loading}
              className={`p-3 rounded-lg border transition-all ${
                symbol === coin.symbol
                  ? 'border-blue-500 bg-blue-500/20 text-blue-300'
                  : 'border-gray-600 bg-gray-800 text-gray-300 hover:border-gray-500 hover:bg-gray-700'
              } ${loading ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105'}`}
            >
              <div className="text-lg mb-1">{coin.icon}</div>
              <div className="text-xs font-medium">{coin.name}</div>
              <div className="text-xs text-gray-400">{coin.symbol}</div>
            </button>
          ))}
        </div>
      </div>

      {/* Manual Input Section */}
      <div className="border-t border-gray-700 pt-4">
        <h3 className="text-sm font-medium text-gray-300 mb-3">Manual Analysis</h3>
        <div className="flex gap-2 mb-4">
          <input
            className="flex-1 px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none"
            value={symbol}
            onChange={e => setSymbol(e.target.value)}
            placeholder="Symbol (e.g. BTCUSD)"
          />
          <select
            className="px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white focus:border-blue-500 focus:outline-none"
            value={timeframe}
            onChange={e => setTimeframe(e.target.value)}
          >
            {timeframes.map(tf => <option key={tf.value} value={tf.value}>{tf.label}</option>)}
          </select>
          <button 
            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 text-white rounded-md transition-colors" 
            onClick={handleAnalyze} 
            disabled={loading}
          >
            {loading ? 'Analyzing...' : 'Analyze'}
          </button>
        </div>
      </div>
      
      {/* Layout selection */}
      <div className="mb-4">
        <label className="block text-sm font-medium text-gray-300 mb-2">
          Select Layouts for Analysis:
        </label>
        <div className="flex flex-wrap gap-2">
          {layouts.map(layout => (
            <label key={layout} className="flex items-center gap-2 cursor-pointer p-2 rounded-md bg-gray-800 hover:bg-gray-700 transition-colors">
              <input
                type="checkbox"
                checked={selectedLayouts.includes(layout)}
                onChange={() => toggleLayout(layout)}
                className="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500"
              />
              <span className="text-sm text-gray-300">{layout}</span>
            </label>
          ))}
        </div>
        {selectedLayouts.length > 0 && (
          <div className="text-xs text-gray-400 mt-2 p-2 bg-gray-800 rounded">
            Selected: {selectedLayouts.join(', ')}
          </div>
        )}
      </div>
      {error && (
        <div className="bg-red-900/20 border border-red-800 rounded-md p-3 mb-4">
          <div className="text-red-400">
            {error.includes('frame was detached') ? (
              <>
                <strong>TradingView Error:</strong> Chart could not be loaded. Please check your symbol and layout, or try again.<br />
                <span className="text-xs opacity-75">Technical: {error}</span>
              </>
            ) : error.includes('layout not found') ? (
              <>
                <strong>Layout Error:</strong> TradingView layout not found. Please select a valid layout.<br />
                <span className="text-xs opacity-75">Technical: {error}</span>
              </>
            ) : error.includes('Private layout access denied') ? (
              <>
                <strong>Access Error:</strong> The selected layout is private or requires authentication. Try a different layout or check your TradingView login.<br />
                <span className="text-xs opacity-75">Technical: {error}</span>
              </>
            ) : (
              <>
                <strong>Analysis Error:</strong> {error}
              </>
            )}
          </div>
        </div>
      )}
      {loading && (
        <div className="bg-blue-900/20 border border-blue-800 rounded-md p-3 mb-4">
          <div className="flex items-center gap-3 text-blue-300">
            <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
            </svg>
            <span>Analyzing {symbol} chart...</span>
          </div>
        </div>
      )}
      {result && (
        <div className="bg-gray-800 border border-gray-700 rounded-lg p-4 mt-4">
          <h3 className="text-lg font-semibold text-white mb-3">Analysis Results</h3>
          {result.layoutsAnalyzed && (
            <div className="mb-4 text-sm">
              <span className="text-gray-400">Layouts analyzed:</span>
              <span className="ml-2 text-blue-300">{result.layoutsAnalyzed.join(', ')}</span>
            </div>
          )}
          <div className="grid gap-3">
            <div className="bg-gray-900 p-3 rounded">
              <span className="text-gray-400 text-sm">Summary:</span>
              <p className="text-white mt-1">{safeRender(result.summary)}</p>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div className="bg-gray-900 p-3 rounded">
                <span className="text-gray-400 text-sm">Sentiment:</span>
                <p className="text-white mt-1">{safeRender(result.marketSentiment)}</p>
              </div>
              <div className="bg-gray-900 p-3 rounded">
                <span className="text-gray-400 text-sm">Recommendation:</span>
                <p className="text-white mt-1">{safeRender(result.recommendation)}</p>
                <span className="text-blue-300 text-sm">({safeRender(result.confidence)}% confidence)</span>
              </div>
            </div>
            {result.keyLevels && (
              <div className="grid grid-cols-2 gap-3">
                <div className="bg-gray-900 p-3 rounded">
                  <span className="text-gray-400 text-sm">Support Levels:</span>
                  <p className="text-green-300 mt-1">{result.keyLevels.support?.join(', ') || 'None identified'}</p>
                </div>
                <div className="bg-gray-900 p-3 rounded">
                  <span className="text-gray-400 text-sm">Resistance Levels:</span>
                  <p className="text-red-300 mt-1">{result.keyLevels.resistance?.join(', ') || 'None identified'}</p>
                </div>
              </div>
            )}
            
            {/* Enhanced Trading Analysis */}
            {result.entry && (
              <div className="bg-gray-900 p-3 rounded">
                <span className="text-gray-400 text-sm">Entry:</span>
                <p className="text-yellow-300 mt-1">${safeRender(result.entry.price || result.entry)}</p>
                {result.entry.buffer && <p className="text-xs text-gray-400">{safeRender(result.entry.buffer)}</p>}
                {result.entry.rationale && <p className="text-xs text-gray-300 mt-1">{safeRender(result.entry.rationale)}</p>}
              </div>
            )}
            
            {result.stopLoss && (
              <div className="bg-gray-900 p-3 rounded">
                <span className="text-gray-400 text-sm">Stop Loss:</span>
                <p className="text-red-300 mt-1">${safeRender(result.stopLoss.price || result.stopLoss)}</p>
                {result.stopLoss.rationale && <p className="text-xs text-gray-300 mt-1">{safeRender(result.stopLoss.rationale)}</p>}
              </div>
            )}
            
            {result.takeProfits && (
              <div className="bg-gray-900 p-3 rounded">
                <span className="text-gray-400 text-sm">Take Profits:</span>
                {typeof result.takeProfits === 'object' ? (
                  <>
                    {result.takeProfits.tp1 && (
                      <div className="mt-1">
                        <p className="text-green-300">TP1: ${safeRender(result.takeProfits.tp1.price || result.takeProfits.tp1)}</p>
                        {result.takeProfits.tp1.description && <p className="text-xs text-gray-300">{safeRender(result.takeProfits.tp1.description)}</p>}
                      </div>
                    )}
                    {result.takeProfits.tp2 && (
                      <div className="mt-1">
                        <p className="text-green-300">TP2: ${safeRender(result.takeProfits.tp2.price || result.takeProfits.tp2)}</p>
                        {result.takeProfits.tp2.description && <p className="text-xs text-gray-300">{safeRender(result.takeProfits.tp2.description)}</p>}
                      </div>
                    )}
                  </>
                ) : (
                  <p className="text-green-300 mt-1">{safeRender(result.takeProfits)}</p>
                )}
              </div>
            )}
            
            {result.riskToReward && (
              <div className="bg-gray-900 p-3 rounded">
                <span className="text-gray-400 text-sm">Risk to Reward:</span>
                <p className="text-blue-300 mt-1">{safeRender(result.riskToReward)}</p>
              </div>
            )}
            
            {result.confirmationTrigger && (
              <div className="bg-gray-900 p-3 rounded">
                <span className="text-gray-400 text-sm">Confirmation Trigger:</span>
                <p className="text-orange-300 mt-1">{safeRender(result.confirmationTrigger)}</p>
              </div>
            )}
            
            {result.indicatorAnalysis && (
              <div className="bg-gray-900 p-3 rounded">
                <span className="text-gray-400 text-sm">Indicator Analysis:</span>
                {typeof result.indicatorAnalysis === 'object' ? (
                  <div className="mt-1 space-y-1">
                    {result.indicatorAnalysis.rsi && (
                      <div>
                        <span className="text-purple-300 text-xs">RSI:</span>
                        <span className="text-white text-xs ml-2">{safeRender(result.indicatorAnalysis.rsi)}</span>
                      </div>
                    )}
                    {result.indicatorAnalysis.vwap && (
                      <div>
                        <span className="text-cyan-300 text-xs">VWAP:</span>
                        <span className="text-white text-xs ml-2">{safeRender(result.indicatorAnalysis.vwap)}</span>
                      </div>
                    )}
                    {result.indicatorAnalysis.obv && (
                      <div>
                        <span className="text-indigo-300 text-xs">OBV:</span>
                        <span className="text-white text-xs ml-2">{safeRender(result.indicatorAnalysis.obv)}</span>
                      </div>
                    )}
                  </div>
                ) : (
                  <p className="text-white mt-1">{safeRender(result.indicatorAnalysis)}</p>
                )}
              </div>
            )}
            
            <div className="bg-gray-900 p-3 rounded">
              <span className="text-gray-400 text-sm">Reasoning:</span>
              <p className="text-white mt-1">{safeRender(result.reasoning)}</p>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}