import React, { useState, useEffect, useCallback, useRef } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { ArrowUpCircle, ArrowDownCircle, Zap, Brain, TrendingUp, Wallet, Lock, AlertTriangle, ExternalLink } from 'lucide-react';

// Check for Phantom wallet
const getProvider = () => {
  if ('phantom' in window) {
    const provider = window.phantom?.solana;
    
    if (provider?.isPhantom) {
      return provider;
    }
  }
  // Return null if Phantom is not available
  return null;
};

// Fake data generator
const generateChartData = (count = 20, startPrice = 2.5) => {
  let price = startPrice;
  const data = [];
  
  for (let i = 0; i < count; i++) {
    // Random price movement
    const movement = (Math.random() - 0.45) * 0.2;
    price = Math.max(0.1, price + movement);
    
    // Random signal generation (not too frequent)
    const signal = Math.random() > 0.8 ? (Math.random() > 0.5 ? "BUY" : "SELL") : null;
    
    data.push({
      time: new Date(Date.now() - (count - i) * 5000).toISOString().substring(11, 19),
      price: parseFloat(price.toFixed(3)),
      signal
    });
  }
  
  return data;
};

// Generate fake trade data
const generateTradeData = () => {
  const tokens = ['SOL', 'BONK', 'JTO', 'PYTH', 'ORCA', 'RAY', 'SRM', 'MEAN'];
  const token = tokens[Math.floor(Math.random() * tokens.length)];
  const side = Math.random() > 0.7 ? 'SELL' : 'BUY';
  const size = parseFloat((Math.random() * 100 + 20).toFixed(2));
  const price = parseFloat((Math.random() * 5 + 0.5).toFixed(3));
  const profit = side === 'SELL' ? parseFloat((Math.random() * 12 + 1).toFixed(2)) : 0;
  
  return {
    token,
    time: new Date().toISOString().substring(11, 19),
    side,
    size,
    price,
    profit,
    id: Math.random().toString(36).substring(2, 10)
  };
};

export default function TradingBotDashboard() {
  const [walletConnected, setWalletConnected] = useState(false);
  const [walletAddress, setWalletAddress] = useState("");
  const [walletBalance, setWalletBalance] = useState(null);
  const [provider, setProvider] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [statusMessage, setStatusMessage] = useState(null);
  const [statusType, setStatusType] = useState(null);
  const [chartData, setChartData] = useState(generateChartData());
  const [tradeHistory, setTradeHistory] = useState([]);
  const [botEnabled, setBotEnabled] = useState(false);
  const [dailyProfit, setDailyProfit] = useState(324.56);
  const [totalProfit, setTotalProfit] = useState(12468.35);
  const [showTokenError, setShowTokenError] = useState(false);
  const [networkType, setNetworkType] = useState(null);
  
  // Get Phantom provider on component mount
  useEffect(() => {
    const provider = getProvider();
    setProvider(provider);
    
    // Check if we're already connected
    if (provider) {
      provider.on('connect', (publicKey) => {
        setWalletAddress(publicKey.toString());
        setWalletConnected(true);
      });
      
      provider.on('disconnect', () => {
        setWalletAddress("");
        setWalletConnected(false);
        setWalletBalance(null);
      });
      
      // Check if wallet is already connected
      provider.connect({ onlyIfTrusted: true })
        .then(({ publicKey }) => {
          setWalletAddress(publicKey.toString());
          setWalletConnected(true);
          getSolBalance(publicKey.toString());
        })
        .catch(() => {
          // Silently fail - user hasn't connected before
        });
    }
    
    return () => {
      if (provider) {
        provider.disconnect();
      }
    };
  }, []);
  
  // Function to get SOL balance
  const getSolBalance = async (publicKey) => {
    if (!publicKey) return;
    
    setIsLoading(true);
    setStatusMessage("Fetching wallet balance from Solana blockchain...");
    setStatusType("info");
    
    try {
      // Try mainnet endpoints
      const mainnetEndpoints = [
        'https://api.mainnet-beta.solana.com',
        'https://solana-api.projectserum.com',
        'https://rpc.ankr.com/solana'
      ];
      
      // Try all mainnet endpoints
      let balance = null;
      let network = null;
      
      // Function to attempt connection and get balance
      const tryConnection = async (endpoint, networkType) => {
        try {
          const connection = new window.solanaWeb3.Connection(endpoint, 'confirmed');
          const balanceResult = await Promise.race([
            connection.getBalance(new window.solanaWeb3.PublicKey(publicKey)),
            new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), 5000))
          ]);
          
          const solBalance = (balanceResult / 1000000000).toFixed(4);
          return { balance: solBalance, network: networkType, success: true };
        } catch (err) {
          console.error(`Failed with ${endpoint}:`, err);
          return { success: false };
        }
      };
      
      // Try mainnet connections first
      for (const endpoint of mainnetEndpoints) {
        const result = await tryConnection(endpoint, 'mainnet');
        if (result.success) {
          balance = result.balance;
          network = result.network;
          break;
        }
      }
      
      // If mainnet fails, try devnet
      if (!balance) {
        const devnetResult = await tryConnection('https://api.devnet.solana.com', 'devnet');
        if (devnetResult.success) {
          balance = devnetResult.balance;
          network = devnetResult.network;
          setStatusMessage("Using Devnet for balance. This may not reflect your actual Mainnet balance.");
          setStatusType("warning");
        }
      }
      
      // If all real connections fail, use simulated balance
      if (!balance) {
        balance = (Math.random() * 10).toFixed(4);
        network = 'simulated';
        setStatusMessage("Could not fetch real balance. Using simulated balance for demo.");
        setStatusType("error");
      }
      
      setWalletBalance(balance);
      setNetworkType(network);
      setIsLoading(false);
      
      return { balance, network };
    } catch (err) {
      console.error("Error in getSolBalance:", err);
      
      // Simulate a balance for user experience
      const simulatedBalance = (Math.random() * 10).toFixed(4);
      setWalletBalance(simulatedBalance);
      setNetworkType('simulated');
      setStatusMessage("Could not fetch real balance. Using simulated balance for demo.");
      setStatusType("error");
      setIsLoading(false);
      
      return { balance: simulatedBalance, network: 'simulated' };
    }
  };
  
  // Update chart data every 5 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      setChartData(prevData => {
        const newData = [...prevData.slice(1)];
        const lastPrice = newData[newData.length - 1].price;
        const movement = (Math.random() - 0.45) * 0.2;
        const newPrice = Math.max(0.1, lastPrice + movement);
        const signal = Math.random() > 0.8 ? (Math.random() > 0.5 ? "BUY" : "SELL") : null;
        
        newData.push({
          time: new Date().toISOString().substring(11, 19),
          price: parseFloat(newPrice.toFixed(3)),
          signal
        });
        
        return newData;
      });
    }, 5000);
    
    return () => clearInterval(interval);
  }, []);
  
  // Generate fake trades every 20-40 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      if (botEnabled) {
        const newTrade = generateTradeData();
        setTradeHistory(prev => [newTrade, ...prev].slice(0, 10));
        
        if (newTrade.profit > 0) {
          setDailyProfit(prev => parseFloat((prev + newTrade.profit).toFixed(2)));
          setTotalProfit(prev => parseFloat((prev + newTrade.profit).toFixed(2)));
        }
      }
    }, Math.random() * 20000 + 20000);
    
    return () => clearInterval(interval);
  }, [botEnabled]);
  
  // Add a slight random fluctuation to daily profit every minute
  useEffect(() => {
    const interval = setInterval(() => {
      if (botEnabled) {
        const fluctuation = (Math.random() - 0.3) * 10;
        setDailyProfit(prev => parseFloat((prev + fluctuation).toFixed(2)));
        setTotalProfit(prev => parseFloat((prev + fluctuation).toFixed(2)));
      }
    }, 60000);
    
    return () => clearInterval(interval);
  }, [botEnabled]);
  
  // Connect wallet function
  const connectWallet = useCallback(async () => {
    if (!provider) {
      window.open('https://phantom.app/download', '_blank');
      return;
    }
    
    try {
      setIsLoading(true);
      setStatusMessage("Connecting to Phantom wallet...");
      setStatusType("info");
      
      const resp = await provider.connect();
      const publicKey = resp.publicKey.toString();
      setWalletAddress(publicKey);
      setWalletConnected(true);
      
      // Get balance
      await getSolBalance(publicKey);
      
      setStatusMessage("Wallet connected successfully!");
      setStatusType("success");
      setIsLoading(false);
    } catch (err) {
      console.error("Error connecting to Phantom:", err);
      setStatusMessage("Failed to connect: " + err.message);
      setStatusType("error");
      setIsLoading(false);
    }
  }, [provider]);
  
  // Start bot function
  const startBot = useCallback(() => {
    setShowTokenError(true);
  }, []);
  
  const CustomizedDot = (props) => {
    const { cx, cy, payload } = props;
    
    if (payload.signal === "BUY") {
      return (
        <g>
          <circle cx={cx} cy={cy} r={6} fill="#00ff00" />
          <circle cx={cx} cy={cy} r={3} fill="#00ff00" />
        </g>
      );
    } else if (payload.signal === "SELL") {
      return (
        <g>
          <circle cx={cx} cy={cy} r={6} fill="#ff0066" />
          <circle cx={cx} cy={cy} r={3} fill="#ff0066" />
        </g>
      );
    }
    
    return null;
  };
  
  return (
    <div className="flex flex-col min-h-screen bg-gray-900 text-white">
      {/* Header */}
      <header className="bg-black p-4 border-b border-green-500">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <Brain className="text-green-400" size={32} />
            <h1 className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500">
              BelievAI Trading Bot
            </h1>
          </div>
          
          <div>
            {!walletConnected ? (
              <button 
                onClick={connectWallet}
                disabled={isLoading}
                className={`flex items-center space-x-2 ${
                  provider ? 'bg-gradient-to-r from-purple-600 to-blue-500' : 'bg-gray-700'
                } px-4 py-2 rounded-lg font-bold hover:opacity-90 transition-opacity ${
                  isLoading ? 'opacity-70 cursor-not-allowed' : ''
                }`}
              >
                <Wallet size={20} />
                <span>{provider ? 'Connect Phantom' : 'Install Phantom'}</span>
                {isLoading && <span className="ml-2 animate-spin">⟳</span>}
              </button>
            ) : (
              <div className="flex items-center space-x-2 bg-gray-800 px-4 py-2 rounded-lg">
                <div className="h-3 w-3 rounded-full bg-green-500"></div>
                <span className="font-mono">{walletAddress.substring(0, 6)}...{walletAddress.substring(walletAddress.length - 4)}</span>
                {networkType && (
                  <span className={`text-xs px-2 py-1 rounded-full ${
                    networkType === 'mainnet' ? 'bg-green-900 text-green-300' : 
                    networkType === 'devnet' ? 'bg-purple-900 text-purple-300' : 
                    'bg-red-900 text-red-300'
                  }`}>
                    {networkType === 'mainnet' ? 'Mainnet' : 
                     networkType === 'devnet' ? 'Devnet' : 
                     'Simulated'}
                  </span>
                )}
              </div>
            )}
          </div>
        </div>
      </header>
      
      {/* Status message */}
      {statusMessage && (
        <div className={`px-4 py-2 ${
          statusType === 'error' ? 'bg-red-500/20 text-red-300' :
          statusType === 'success' ? 'bg-green-500/20 text-green-300' :
          statusType === 'warning' ? 'bg-yellow-500/20 text-yellow-300' :
          'bg-blue-500/20 text-blue-300'
        }`}>
          <p className="flex items-center">
            {isLoading && <span className="mr-2 animate-spin">⟳</span>}
            {statusMessage}
          </p>
        </div>
      )}
      
      {/* Main content */}
      <main className="flex-grow p-4 grid grid-cols-1 lg:grid-cols-3 gap-4">
        {/* Left column - Stats */}
        <div className="lg:col-span-1 flex flex-col gap-4">
          <div className="bg-gray-800 rounded-xl p-4 border border-gray-700">
            <h2 className="text-xl font-bold mb-4 flex items-center">
              <Zap className="text-yellow-400 mr-2" size={20} />
              Performance Metrics
            </h2>
            
            <div className="grid grid-cols-2 gap-4">
              <div className="bg-gray-900 p-4 rounded-lg">
                <p className="text-gray-400 text-sm">Daily Profit</p>
                <p className="text-green-400 text-2xl font-bold">+${dailyProfit}</p>
                <p className="text-green-500 text-sm">+{(dailyProfit / 1000 * 100).toFixed(2)}%</p>
              </div>
              
              <div className="bg-gray-900 p-4 rounded-lg">
                <p className="text-gray-400 text-sm">Total Profit</p>
                <p className="text-green-400 text-2xl font-bold">+${totalProfit}</p>
                <p className="text-green-500 text-sm">+{(totalProfit / 10000 * 100).toFixed(2)}%</p>
              </div>
              
              <div className="bg-gray-900 p-4 rounded-lg">
                <p className="text-gray-400 text-sm">Win Rate</p>
                <p className="text-white text-2xl font-bold">94.3%</p>
              </div>
              
              <div className="bg-gray-900 p-4 rounded-lg">
                <p className="text-gray-400 text-sm">Avg. Trade Time</p>
                <p className="text-white text-2xl font-bold">2.7 min</p>
              </div>
            </div>
          </div>
          
          <div className="bg-gray-800 rounded-xl p-4 border border-gray-700">
            <h2 className="text-xl font-bold mb-4 flex items-center">
              <TrendingUp className="text-blue-400 mr-2" size={20} />
              Recent Trades
            </h2>
            
            <div className="overflow-y-auto max-h-80">
              <table className="w-full text-sm">
                <thead className="text-gray-400 border-b border-gray-700">
                  <tr>
                    <th className="text-left py-2">Token</th>
                    <th className="text-left py-2">Time</th>
                    <th className="text-left py-2">Side</th>
                    <th className="text-right py-2">Profit</th>
                  </tr>
                </thead>
                <tbody>
                  {tradeHistory.length > 0 ? (
                    tradeHistory.map(trade => (
                      <tr key={trade.id} className="border-b border-gray-700 last:border-0">
                        <td className="py-3 font-medium">{trade.token}</td>
                        <td className="py-3 text-gray-400">{trade.time}</td>
                        <td className="py-3">
                          <span className={`inline-flex items-center ${trade.side === 'BUY' ? 'text-green-400' : 'text-red-400'}`}>
                            {trade.side === 'BUY' ? <ArrowUpCircle size={14} className="mr-1" /> : <ArrowDownCircle size={14} className="mr-1" />}
                            {trade.side}
                          </span>
                        </td>
                        <td className="py-3 text-right">
                          {trade.profit > 0 ? (
                            <span className="text-green-400 font-medium">+${trade.profit}</span>
                          ) : (
                            <span className="text-gray-400">-</span>
                          )}
                        </td>
                      </tr>
                    ))
                  ) : (
                    <tr>
                      <td colSpan="4" className="text-center py-6 text-gray-500">
                        No trades yet. Start the bot to see activity.
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        </div>
        
        {/* Right column - Chart and controls */}
        <div className="lg:col-span-2 flex flex-col gap-4">
          <div className="bg-gray-800 rounded-xl p-4 border border-gray-700">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-xl font-bold">Live Trading Activity</h2>
              <div className="flex items-center space-x-2">
                <div className="flex items-center">
                  <div className="h-2 w-2 rounded-full bg-green-500 mr-1 animate-pulse"></div>
                  <span className="text-xs text-gray-400">LIVE</span>
                </div>
                <select className="bg-gray-700 text-sm px-2 py-1 rounded border border-gray-600">
                  <option>BUMP/SOL</option>
                  <option>DUPE/SOL</option>
                  <option>STARTUP/SOL</option>
                  <option>PIPIQ/SOL</option>
                  <option>Polycule/SOL</option>
                  <option>LAUNCHCOIN/SOL</option>
                </select>
              </div>
            </div>
            
            <div className="h-72">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={chartData}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#333" />
                  <XAxis dataKey="time" tick={{ fill: '#999' }} />
                  <YAxis tick={{ fill: '#999' }} />
                  <Tooltip
                    contentStyle={{ backgroundColor: '#1f2937', border: '1px solid #374151' }}
                    labelStyle={{ color: '#e5e7eb' }}
                  />
                  <Legend />
                  <Line
                    type="monotone"
                    dataKey="price"
                    stroke="#00ffaa"
                    strokeWidth={2}
                    dot={false}
                    activeDot={{ r: 6 }}
                    dot={<CustomizedDot />}
                  />
                </LineChart>
              </ResponsiveContainer>
            </div>
            
            <div className="flex justify-between mt-4 text-xs text-gray-400">
              <div className="flex items-center">
                <div className="h-3 w-3 rounded-full bg-green-400 mr-1"></div>
                <span>Buy Signal</span>
              </div>
              <div className="flex items-center">
                <div className="h-3 w-3 rounded-full bg-red-400 mr-1"></div>
                <span>Sell Signal</span>
              </div>
              <div>
                <span>Algorithm: ML-GPT4 Momentum v2.1</span>
              </div>
            </div>
          </div>
          
          <div className="bg-gray-800 rounded-xl p-6 border border-gray-700">
            <div className="flex items-center justify-between mb-6">
              <div>
                <h2 className="text-xl font-bold mb-1">AI Trading Status</h2>
                <p className="text-gray-400 text-sm">
                  Quantum Deep Reinforcement AI with revolutionary forecasting technology
                </p>
              </div>
              <div className={`px-3 py-1 rounded-full ${botEnabled ? 'bg-green-900 text-green-300' : 'bg-gray-700 text-gray-400'}`}>
                {botEnabled ? 'ACTIVE' : 'INACTIVE'}
              </div>
            </div>
            
            {showTokenError ? (
              <div className="bg-red-900/30 border border-red-700 p-4 rounded-lg mb-4">
                <div className="flex items-start">
                  <AlertTriangle className="text-red-400 mr-2 flex-shrink-0" size={20} />
                  <div>
                    <h3 className="font-bold text-red-400">Insufficient Token Allocation</h3>
                    <p className="text-sm mt-1">
                      To use BelievAI Trading Bot, you need to hold at least 1% of the total BelievAI token supply.
                      This high threshold ensures optimal bot performance and prevents market saturation.
                    </p>
                    <button className="mt-3 px-4 py-2 bg-red-700 hover:bg-red-600 rounded-lg text-sm font-medium">
                      Buy BelievAI Tokens
                    </button>
                  </div>
                </div>
              </div>
            ) : null}
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
              <div className="bg-gray-900 p-4 rounded-lg">
                <p className="text-gray-400 text-sm mb-1">Bot Intelligence Level</p>
                <div className="h-2 bg-gray-700 rounded-full mb-1">
                  <div className="h-2 bg-gradient-to-r from-blue-500 to-green-500 rounded-full" style={{ width: '85%' }}></div>
                </div>
                <div className="flex justify-between text-xs text-gray-500">
                  <span>Basic</span>
                  <span>Advanced</span>
                  <span>Neural</span>
                  <span>Quantum</span>
                </div>
              </div>
              
              <div className="bg-gray-900 p-4 rounded-lg">
                <p className="text-gray-400 text-sm mb-1">Network Resources</p>
                <div className="h-2 bg-gray-700 rounded-full mb-1">
                  <div className="h-2 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full" style={{ width: '70%' }}></div>
                </div>
                <div className="flex justify-between text-xs text-gray-500">
                  <span>70% Allocated</span>
                  <span>43 nodes</span>
                </div>
              </div>
            </div>
            
            <button
              onClick={startBot}
              disabled={!walletConnected}
              className={`w-full py-3 rounded-lg font-bold text-lg flex items-center justify-center ${
                !walletConnected
                  ? 'bg-gray-700 text-gray-500 cursor-not-allowed'
                  : 'bg-gradient-to-r from-green-500 to-blue-500 hover:opacity-90 transition-opacity'
              }`}
            >
              {!walletConnected ? (
                <>
                  <Lock size={18} className="mr-2" />
                  Connect Wallet to Start Bot
                </>
              ) : (
                <>
                  <Zap size={18} className="mr-2" />
                  Launch AI Trading Bot
                </>
              )}
            </button>
          </div>
        </div>
      </main>
      
      {/* Footer */}
      <footer className="bg-black p-4 border-t border-gray-800 text-center text-sm text-gray-500">
        <div className="mb-2">
          {!provider && (
            <a 
              href="https://phantom.app/download" 
              target="_blank" 
              rel="noopener noreferrer"
              className="inline-flex items-center text-purple-400 hover:text-purple-300"
            >
              Install Phantom Wallet <ExternalLink size={12} className="ml-1" />
            </a>
          )}
        </div>
        <p>
          BelievAI Trading Bot v2.5 | Copyright © 2025 | Warning: Past performance does not guarantee future results
        </p>
      </footer>
      
      {/* Script for Solana Web3 */}
      <script dangerouslySetInnerHTML={{
        __html: `
          // Dynamically load Solana Web3 library
          if (!window.solanaWeb3) {
            const script = document.createElement('script');
            script.src = 'https://unpkg.com/@solana/web3.js@latest/lib/index.iife.js';
            script.async = true;
            document.body.appendChild(script);
          }
        `
      }} />
    </div>
  );
}