'use client';

import { useState, useEffect } from 'react';

interface Position {
  symbol: string;
  side: string;
  size: number;
  entryPrice: number;
  currentPrice: number;
  unrealizedPnl: number;
  notionalValue: number;
}

interface StopLossProximity {
  stopLossPrice: number;
  currentPrice: number;
  distancePercent: string;
  isNear: boolean;
}

interface MonitorData {
  hasPosition: boolean;
  position?: Position;
  stopLossProximity?: StopLossProximity;
  riskLevel: string;
  nextAction: string;
  recommendation: string;
}

interface AutomationStatus {
  isActive: boolean;
  mode: string;
  symbol: string;
  timeframes: string[];
  totalCycles: number;
  totalTrades: number;
  lastActivity: string;
  consecutiveErrors: number;
  detailedStatus: string;
}

export default function PositionMonitor() {
  const [monitorData, setMonitorData] = useState<MonitorData | null>(null);
  const [automationStatus, setAutomationStatus] = useState<AutomationStatus | null>(null);
  const [lastUpdate, setLastUpdate] = useState<Date>(new Date());
  const [error, setError] = useState<string>('');

  const fetchData = async () => {
    try {
      // Fetch position data
      const positionResponse = await fetch('/api/automation/position-monitor');
      const positionResult = await positionResponse.json();
      
      // Fetch automation status
      const statusResponse = await fetch('/api/automation/status');
      const statusResult = await statusResponse.json();
      
      if (positionResult.success) {
        setMonitorData(positionResult.monitor);
      }
      
      setAutomationStatus(statusResult);
      setLastUpdate(new Date());
      setError('');
    } catch (err) {
      setError('Failed to fetch monitoring data');
      console.error('Monitor error:', err);
    }
  };

  useEffect(() => {
    fetchData();
    const interval = setInterval(fetchData, 10000); // Update every 10 seconds
    return () => clearInterval(interval);
  }, []);

  const getRiskColor = (risk: string) => {
    switch (risk) {
      case 'HIGH': return 'text-red-500';
      case 'MEDIUM': return 'text-yellow-500';
      case 'LOW': return 'text-green-500';
      default: return 'text-gray-500';
    }
  };

  const getStopLossStatus = (distancePercent: string) => {
    const distance = parseFloat(distancePercent);
    if (distance <= 2) return { icon: '🚨', text: 'DANGER', color: 'text-red-600' };
    if (distance <= 5) return { icon: '⚠️', text: 'WARNING', color: 'text-yellow-600' };
    if (distance <= 10) return { icon: '🟡', text: 'CAUTION', color: 'text-yellow-500' };
    return { icon: '✅', text: 'SAFE', color: 'text-green-500' };
  };

  if (error) {
    return (
      <div className="bg-red-50 border border-red-200 rounded-lg p-4">
        <div className="flex items-center">
          <span className="text-red-500 mr-2">❌</span>
          <span className="text-red-700">{error}</span>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="bg-gray-800 rounded-lg p-4 border border-gray-700">
        <div className="flex justify-between items-center">
          <h2 className="text-lg font-semibold text-white flex items-center">
            <span className="mr-2">🔍</span>
            Position Monitor
          </h2>
          <span className="text-sm text-gray-400">
            Last update: {lastUpdate.toLocaleTimeString()}
          </span>
        </div>
      </div>

      {/* Position Status */}
      {monitorData?.hasPosition && monitorData.position ? (
        <div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
          <h3 className="text-lg font-medium text-white mb-4 flex items-center">
            <span className="mr-2">📊</span>
            Active Position
          </h3>
          
          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
            <div className="bg-gray-900/50 p-3 rounded-lg">
              <p className="text-sm text-gray-400">Symbol & Side</p>
              <p className="font-medium text-white">{monitorData.position.symbol}</p>
              <p className={`text-sm font-semibold ${monitorData.position.side === 'short' ? 'text-red-400' : 'text-green-400'}`}>
                {monitorData.position.side.toUpperCase()}
              </p>
            </div>
            <div className="bg-gray-900/50 p-3 rounded-lg">
              <p className="text-sm text-gray-400">Size</p>
              <p className="font-medium text-white">{monitorData.position.size} SOL</p>
            </div>
            <div className="bg-gray-900/50 p-3 rounded-lg">
              <p className="text-sm text-gray-400">Entry Price</p>
              <p className="font-medium text-white">${monitorData.position.entryPrice.toFixed(4)}</p>
            </div>
            <div className="bg-gray-900/50 p-3 rounded-lg">
              <p className="text-sm text-gray-400">Current Price</p>
              <p className="font-medium text-white">${monitorData.position.currentPrice.toFixed(4)}</p>
            </div>
            <div className="bg-gray-900/50 p-3 rounded-lg">
              <p className="text-sm text-gray-400">P&L</p>
              <p className={`font-medium ${monitorData.position.unrealizedPnl >= 0 ? 'text-green-400' : 'text-red-400'}`}>
                {monitorData.position.unrealizedPnl >= 0 ? '+' : ''}${monitorData.position.unrealizedPnl.toFixed(2)}
              </p>
            </div>
            <div className="bg-gray-900/50 p-3 rounded-lg">
              <p className="text-sm text-gray-400">Notional Value</p>
              <p className="font-medium text-white">${monitorData.position.notionalValue.toFixed(2)}</p>
            </div>
          </div>

          {/* Stop Loss Section */}
          {monitorData.stopLossProximity && (
            <div className="mt-6 p-4 bg-gray-900/30 rounded-lg border border-gray-600">
              <h4 className="font-medium text-white mb-3 flex items-center">
                <span className="mr-2">🤖</span>
                AI Autonomous Risk Management
              </h4>
              
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="bg-gray-800/50 p-3 rounded-lg">
                  <p className="text-sm text-gray-400">Stop Loss Price</p>
                  <p className="font-medium text-white">${monitorData.stopLossProximity.stopLossPrice.toFixed(4)}</p>
                </div>
                <div className="bg-gray-800/50 p-3 rounded-lg">
                  <p className="text-sm text-gray-400">Distance</p>
                  <p className="font-medium text-white">{monitorData.stopLossProximity.distancePercent}% away</p>
                </div>
                <div className="bg-gray-800/50 p-3 rounded-lg">
                  <p className="text-sm text-gray-400">AI Status</p>
                  {(() => {
                    const status = getStopLossStatus(monitorData.stopLossProximity.distancePercent);
                    const aiActions: Record<string, { text: string; color: string }> = {
                      'DANGER': { text: '🚨 Emergency Analysis', color: 'text-red-400' },
                      'WARNING': { text: '⚠️ Position Review', color: 'text-yellow-400' },
                      'CAUTION': { text: '🟡 Enhanced Watch', color: 'text-yellow-400' },
                      'SAFE': { text: '✅ Opportunity Scan', color: 'text-green-400' }
                    };
                    const aiAction = aiActions[status.text] || aiActions['SAFE'];
                    return (
                      <p className={`font-medium ${aiAction.color}`}>
                        {aiAction.text}
                      </p>
                    );
                  })()}
                </div>
              </div>
              
              <div className="mt-3 bg-gray-800/30 p-3 rounded-lg">
                <p className="text-sm text-gray-400">AI Action Plan</p>
                <p className="font-medium text-blue-400">
                  {monitorData.nextAction || 'AI monitoring position autonomously'}
                </p>
              </div>

              {monitorData.stopLossProximity.isNear && (
                <div className="mt-4 p-3 bg-blue-900/30 border border-blue-500/30 rounded-lg">
                  <p className="text-blue-300 font-medium">🤖 AI TAKING ACTION: Autonomous risk management activated!</p>
                  <p className="text-blue-400 text-sm mt-1">No manual intervention required - enjoy your beach time! 🏖️</p>
                </div>
              )}
            </div>
          )}
        </div>
      ) : (
        <div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
          <div className="text-center py-8">
            <p className="text-gray-400 text-lg flex items-center justify-center">
              <span className="mr-2">📊</span>
              No Open Positions
            </p>
            <p className="text-gray-500 mt-2">Scanning for opportunities...</p>
          </div>
        </div>
      )}

      {/* Automation Status */}
      <div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
        <h3 className="text-lg font-medium text-white mb-4 flex items-center">
          <span className="mr-2">🤖</span>
          Automation Status
        </h3>
        
        {automationStatus?.isActive ? (
          <div className="space-y-4">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="bg-gray-900/50 p-3 rounded-lg">
                <p className="text-sm text-gray-400">Status</p>
                <p className="font-medium text-green-400 flex items-center">
                  <span className="w-2 h-2 bg-green-400 rounded-full mr-2"></span>
                  ACTIVE
                </p>
              </div>
              <div className="bg-gray-900/50 p-3 rounded-lg">
                <p className="text-sm text-gray-400">Mode</p>
                <p className={`font-medium ${automationStatus.mode === 'LIVE' ? 'text-red-400' : 'text-blue-400'}`}>
                  {automationStatus.mode}
                </p>
              </div>
              <div className="bg-gray-900/50 p-3 rounded-lg">
                <p className="text-sm text-gray-400">Strategy</p>
                <p className="font-medium text-white">Scalping</p>
              </div>
              <div className="bg-gray-900/50 p-3 rounded-lg">
                <p className="text-sm text-gray-400">Symbol</p>
                <p className="font-medium text-white">{automationStatus.symbol}</p>
              </div>
            </div>
            
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="bg-gray-900/50 p-3 rounded-lg">
                <p className="text-sm text-gray-400">Timeframes</p>
                <p className="font-medium text-cyan-400">{automationStatus.timeframes?.join(', ') || 'N/A'}</p>
              </div>
              <div className="bg-gray-900/50 p-3 rounded-lg">
                <p className="text-sm text-gray-400">Cycles</p>
                <p className="font-medium text-white">{automationStatus.totalCycles}</p>
              </div>
              <div className="bg-gray-900/50 p-3 rounded-lg">
                <p className="text-sm text-gray-400">Trades</p>
                <p className="font-medium text-white">{automationStatus.totalTrades}</p>
              </div>
              <div className="bg-gray-900/50 p-3 rounded-lg">
                <p className="text-sm text-gray-400">Errors</p>
                <p className={`font-medium ${automationStatus.consecutiveErrors > 0 ? 'text-yellow-400' : 'text-green-400'}`}>
                  {automationStatus.consecutiveErrors}/3
                </p>
              </div>
            </div>

            {automationStatus.lastActivity && (
              <div className="bg-gray-900/30 p-3 rounded-lg">
                <p className="text-sm text-gray-400">Last Activity</p>
                <p className="font-medium text-white">
                  {new Date(automationStatus.lastActivity).toLocaleString()}
                </p>
              </div>
            )}
          </div>
        ) : (
          <div className="text-center py-4">
            <p className="text-red-400 font-medium flex items-center justify-center">
              <span className="w-2 h-2 bg-red-400 rounded-full mr-2"></span>
              STOPPED
            </p>
            <p className="text-gray-500 mt-2">{automationStatus?.detailedStatus}</p>
          </div>
        )}
      </div>
    </div>
  );
}
