/**
 * DevLoopPanel - Control panel for closed-loop development
 * 
 * Features:
 * - Start/stop development cycles
 * - Real-time phase monitoring
 * - Iteration history view
 * - Test result visualization
 */

import { useState, useEffect, useCallback } from 'react';
import {
  PlayCircle,
  StopCircle,
  RefreshCw,
  CheckCircle,
  XCircle,
  AlertCircle,
  Clock,
  ListChecks,
  Zap,
  ChevronDown,
  ChevronRight,
} from 'lucide-react';
import useWebSocket from 'react-use-websocket';

interface LoopState {
  phase: string;
  iteration: number;
  current_task: string | null;
  last_update: string;
}

interface CycleResult {
  objective: string;
  status: string;
  iterations: number;
  duration_seconds: number;
}

interface TestResult {
  scenario_id: string;
  scenario_name: string;
  passed: boolean;
  duration_ms: number;
  error?: string;
}

const PHASE_COLORS: Record<string, string> = {
  idle: 'bg-gray-500',
  planning: 'bg-blue-500',
  implementing: 'bg-purple-500',
  testing: 'bg-yellow-500',
  analyzing: 'bg-orange-500',
  fixing: 'bg-red-500',
  verifying: 'bg-green-500',
};

const PHASE_ICONS: Record<string, React.ReactNode> = {
  idle: <Clock className="w-4 h-4" />,
  planning: <ListChecks className="w-4 h-4" />,
  implementing: <Zap className="w-4 h-4" />,
  testing: <RefreshCw className="w-4 h-4 animate-spin" />,
  analyzing: <AlertCircle className="w-4 h-4" />,
  fixing: <Zap className="w-4 h-4" />,
  verifying: <CheckCircle className="w-4 h-4" />,
};

export function DevLoopPanel() {
  const [state, setState] = useState<LoopState>({
    phase: 'idle',
    iteration: 0,
    current_task: null,
    last_update: new Date().toISOString(),
  });
  const [objective, setObjective] = useState('');
  const [history, setHistory] = useState<CycleResult[]>([]);
  const [testResults, setTestResults] = useState<TestResult[]>([]);
  const [expanded, setExpanded] = useState(true);
  const [isStarting, setIsStarting] = useState(false);

  // WebSocket connection for real-time updates
  const { lastJsonMessage, readyState } = useWebSocket(
    'ws://localhost:8000/api/devloop/ws',
    {
      shouldReconnect: () => true,
      reconnectInterval: 3000,
    }
  );

  // Handle WebSocket messages
  useEffect(() => {
    if (!lastJsonMessage) return;

    const msg = lastJsonMessage as any;

    switch (msg.type) {
      case 'connection_ack':
      case 'state_update':
      case 'state':
        if (msg.state) {
          setState(msg.state);
        }
        break;
      case 'cycle_complete':
        setHistory(prev => [msg.result, ...prev].slice(0, 10));
        setIsStarting(false);
        break;
      case 'cycle_error':
        console.error('DevLoop error:', msg.error);
        setIsStarting(false);
        break;
      case 'test_progress':
        if (msg.result) {
          setTestResults(prev => [...prev, msg.result]);
        }
        break;
    }
  }, [lastJsonMessage]);

  // Start a development cycle
  const startCycle = useCallback(async () => {
    if (!objective.trim()) return;

    setIsStarting(true);
    setTestResults([]);

    try {
      const response = await fetch('http://localhost:8000/api/devloop/start', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          objective: objective.trim(),
          max_iterations: 10,
        }),
      });

      if (!response.ok) {
        const error = await response.json();
        console.error('Failed to start cycle:', error);
        setIsStarting(false);
      }
    } catch (error) {
      console.error('Failed to start cycle:', error);
      setIsStarting(false);
    }
  }, [objective]);

  // Stop the current cycle
  const stopCycle = useCallback(async () => {
    try {
      await fetch('http://localhost:8000/api/devloop/stop', {
        method: 'POST',
      });
    } catch (error) {
      console.error('Failed to stop cycle:', error);
    }
  }, []);

  // Quick start: Create support_arm study
  const quickStartSupportArm = useCallback(() => {
    setObjective('Create support_arm optimization study with 5 design variables (center_space, arm_thk, arm_angle, end_thk, base_thk), objectives (minimize displacement, minimize mass), and stress constraint (< 30% yield)');
    // Auto-start after a brief delay
    setTimeout(() => {
      startCycle();
    }, 500);
  }, [startCycle]);

  const isActive = state.phase !== 'idle';
  const wsConnected = readyState === WebSocket.OPEN;

  return (
    <div className="bg-gray-900 rounded-lg border border-gray-700 overflow-hidden">
      {/* Header */}
      <div
        className="flex items-center justify-between px-4 py-3 bg-gray-800 cursor-pointer"
        onClick={() => setExpanded(!expanded)}
      >
        <div className="flex items-center gap-2">
          {expanded ? (
            <ChevronDown className="w-4 h-4 text-gray-400" />
          ) : (
            <ChevronRight className="w-4 h-4 text-gray-400" />
          )}
          <RefreshCw className="w-5 h-5 text-blue-400" />
          <h3 className="font-semibold text-white">DevLoop Control</h3>
        </div>
        
        {/* Status indicator */}
        <div className="flex items-center gap-2">
          <div
            className={`w-2 h-2 rounded-full ${
              wsConnected ? 'bg-green-500' : 'bg-red-500'
            }`}
          />
          <span className={`px-2 py-1 text-xs rounded ${PHASE_COLORS[state.phase]} text-white`}>
            {state.phase.toUpperCase()}
          </span>
        </div>
      </div>

      {expanded && (
        <div className="p-4 space-y-4">
          {/* Objective Input */}
          <div>
            <label className="block text-sm text-gray-400 mb-1">
              Development Objective
            </label>
            <textarea
              value={objective}
              onChange={(e) => setObjective(e.target.value)}
              placeholder="e.g., Create support_arm optimization study..."
              className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white text-sm resize-none h-20"
              disabled={isActive}
            />
          </div>

          {/* Quick Actions */}
          <div className="flex gap-2">
            <button
              onClick={quickStartSupportArm}
              disabled={isActive}
              className="px-3 py-1.5 bg-purple-600 hover:bg-purple-700 disabled:bg-gray-600 text-white text-sm rounded flex items-center gap-1"
            >
              <Zap className="w-4 h-4" />
              Quick: support_arm
            </button>
          </div>

          {/* Control Buttons */}
          <div className="flex gap-2">
            {!isActive ? (
              <button
                onClick={startCycle}
                disabled={!objective.trim() || isStarting}
                className="flex-1 px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 text-white rounded flex items-center justify-center gap-2"
              >
                <PlayCircle className="w-5 h-5" />
                {isStarting ? 'Starting...' : 'Start Cycle'}
              </button>
            ) : (
              <button
                onClick={stopCycle}
                className="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded flex items-center justify-center gap-2"
              >
                <StopCircle className="w-5 h-5" />
                Stop Cycle
              </button>
            )}
          </div>

          {/* Current Phase Progress */}
          {isActive && (
            <div className="bg-gray-800 rounded p-3 space-y-2">
              <div className="flex items-center gap-2">
                {PHASE_ICONS[state.phase]}
                <span className="text-sm text-white font-medium">
                  {state.phase.charAt(0).toUpperCase() + state.phase.slice(1)}
                </span>
                <span className="text-xs text-gray-400">
                  Iteration {state.iteration + 1}
                </span>
              </div>
              {state.current_task && (
                <p className="text-xs text-gray-400 truncate">
                  {state.current_task}
                </p>
              )}
            </div>
          )}

          {/* Test Results */}
          {testResults.length > 0 && (
            <div className="bg-gray-800 rounded p-3">
              <h4 className="text-sm font-medium text-white mb-2">Test Results</h4>
              <div className="space-y-1 max-h-32 overflow-y-auto">
                {testResults.map((test, i) => (
                  <div
                    key={`${test.scenario_id}-${i}`}
                    className="flex items-center gap-2 text-xs"
                  >
                    {test.passed ? (
                      <CheckCircle className="w-3 h-3 text-green-500" />
                    ) : (
                      <XCircle className="w-3 h-3 text-red-500" />
                    )}
                    <span className="text-gray-300 truncate flex-1">
                      {test.scenario_name}
                    </span>
                    <span className="text-gray-500">
                      {test.duration_ms.toFixed(0)}ms
                    </span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* History */}
          {history.length > 0 && (
            <div className="bg-gray-800 rounded p-3">
              <h4 className="text-sm font-medium text-white mb-2">Recent Cycles</h4>
              <div className="space-y-2">
                {history.slice(0, 3).map((cycle, i) => (
                  <div
                    key={i}
                    className="flex items-center justify-between text-xs"
                  >
                    <span className="text-gray-300 truncate flex-1">
                      {cycle.objective.substring(0, 40)}...
                    </span>
                    <span
                      className={`px-1.5 py-0.5 rounded ${
                        cycle.status === 'completed'
                          ? 'bg-green-900 text-green-300'
                          : 'bg-yellow-900 text-yellow-300'
                      }`}
                    >
                      {cycle.status}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Phase Legend */}
          <div className="grid grid-cols-4 gap-2 text-xs">
            {Object.entries(PHASE_COLORS).map(([phase, color]) => (
              <div key={phase} className="flex items-center gap-1">
                <div className={`w-2 h-2 rounded ${color}`} />
                <span className="text-gray-400 capitalize">{phase}</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

export default DevLoopPanel;