frontend/components/SimulationEngine.tsx

'use client';

import { useState, useEffect, useRef, useCallback, memo } from 'react';
import { Play, Pause, RotateCcw, Sliders, Zap } from 'lucide-react';

// Use environment variable or relative URL for production
const API_URL = process.env.NEXT_PUBLIC_API_URL || '';

interface Transaction {
  id: number;
  amount: number;
  merchant: string;
  category: string;
  is_fraud: number;
  prediction: string;
  final_score: number;
  classical_score: number;
  quantum_score: number;
  quantum_details: {
    vqc: number;
    qaoa: number;
    qnn: number;
  };
}

interface Metrics {
  total: number;
  flagged: number;
  actual_fraud: number;
  accuracy: number;
  precision: number;
  recall: number;
  f1: number;
  tp: number;
  fp: number;
  tn: number;
  fn: number;
}

interface SimulationEngineProps {
  onTransactionUpdate: (transaction: Transaction, metrics: Metrics) => void;
  onRunningChange: (isRunning: boolean) => void;
  onThresholdChange?: (threshold: number) => void;
}

// Completely isolated simulation engine
const SimulationEngine = memo(function SimulationEngine({ 
  onTransactionUpdate, 
  onRunningChange,
  onThresholdChange
}: SimulationEngineProps) {
  const [isRunning, setIsRunning] = useState(false);
  const [speed, setSpeed] = useState(1000);
  const [threshold, setThreshold] = useState(0.5);
  const [showSettings, setShowSettings] = useState(false);
  
  // All refs to prevent any re-render issues
  const intervalRef = useRef<NodeJS.Timeout | null>(null);
  const isRunningRef = useRef(false);
  const speedRef = useRef(speed);
  const thresholdRef = useRef(threshold);
  const isMountedRef = useRef(true);

  // Stable callback refs
  const onTransactionUpdateRef = useRef(onTransactionUpdate);
  const onRunningChangeRef = useRef(onRunningChange);

  useEffect(() => {
    onTransactionUpdateRef.current = onTransactionUpdate;
    onRunningChangeRef.current = onRunningChange;
  }, [onTransactionUpdate, onRunningChange]);

  useEffect(() => {
    speedRef.current = speed;
  }, [speed]);

  useEffect(() => {
    thresholdRef.current = threshold;
    onThresholdChange?.(threshold);
  }, [threshold, onThresholdChange]);

  useEffect(() => {
    isMountedRef.current = true;
    return () => {
      isMountedRef.current = false;
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
        intervalRef.current = null;
      }
    };
  }, []);

  const processTransaction = useCallback(async () => {
    if (!isMountedRef.current) return;
    
    try {
      const response = await fetch(`${API_URL}/api/process-random?threshold=${thresholdRef.current}`);
      if (response.ok && isMountedRef.current) {
        const data = await response.json();
        onTransactionUpdateRef.current(data.transaction, data.metrics);
      }
    } catch (error) {
      console.error('Failed to process transaction:', error);
    }
  }, []);

  const clearIntervalSafely = useCallback(() => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
  }, []);

  const start = useCallback(() => {
    clearIntervalSafely();
    
    isRunningRef.current = true;
    setIsRunning(true);
    onRunningChangeRef.current(true);
    
    // Process first one immediately
    processTransaction();
    
    // Start interval
    intervalRef.current = setInterval(() => {
      if (isRunningRef.current && isMountedRef.current) {
        processTransaction();
      }
    }, speedRef.current);
  }, [processTransaction, clearIntervalSafely]);

  const stop = useCallback(() => {
    isRunningRef.current = false;
    setIsRunning(false);
    onRunningChangeRef.current(false);
    clearIntervalSafely();
  }, [clearIntervalSafely]);

  const reset = useCallback(async () => {
    stop();
    try {
      await fetch(`${API_URL}/api/reset`, { method: 'POST' });
    } catch (error) {
      console.error('Failed to reset:', error);
    }
  }, [stop]);

  const handleSpeedChange = useCallback((newSpeed: number) => {
    setSpeed(newSpeed);
    speedRef.current = newSpeed;
    
    if (isRunningRef.current) {
      clearIntervalSafely();
      intervalRef.current = setInterval(() => {
        if (isRunningRef.current && isMountedRef.current) {
          processTransaction();
        }
      }, newSpeed);
    }
  }, [processTransaction, clearIntervalSafely]);

  return (
    <div className="bg-white rounded-xl p-3 mb-4 border border-gray-200 shadow-sm">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex items-center gap-2">
          <button
            onClick={isRunning ? stop : start}
            className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium text-sm transition-all ${
              isRunning 
                ? 'bg-red-500 hover:bg-red-600 text-white' 
                : 'bg-green-600 hover:bg-green-700 text-white'
            }`}
          >
            {isRunning ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
            {isRunning ? 'Pause' : 'Start'}
          </button>
          <button
            onClick={reset}
            className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 text-sm transition-all border border-gray-200"
          >
            <RotateCcw className="w-4 h-4" />
            Reset
          </button>
          <button
            onClick={() => setShowSettings(!showSettings)}
            className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-all border ${
              showSettings 
                ? 'bg-indigo-100 text-indigo-700 border-indigo-200' 
                : 'bg-gray-100 hover:bg-gray-200 text-gray-700 border-gray-200'
            }`}
          >
            <Sliders className="w-4 h-4" />
          </button>
        </div>
        <div className="flex items-center gap-3">
          <span className="text-gray-500 text-sm">Speed:</span>
          <select
            value={speed}
            onChange={(e) => handleSpeedChange(Number(e.target.value))}
            className="bg-gray-100 border border-gray-200 rounded-lg px-3 py-1.5 text-gray-700 text-sm focus:ring-1 focus:ring-gray-400 focus:outline-none"
          >
            <option value={2000}>Slow</option>
            <option value={1000}>Normal</option>
            <option value={500}>Fast</option>
            <option value={200}>Very Fast</option>
          </select>
          <div className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm ${
            isRunning ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'
          }`}>
            <div className={`w-2 h-2 rounded-full ${
              isRunning ? 'bg-green-500 animate-pulse' : 'bg-gray-400'
            }`} />
            {isRunning ? 'Running' : 'Stopped'}
          </div>
        </div>
      </div>
      
      {/* Settings Panel */}
      {showSettings && (
        <div className="mt-3 pt-3 border-t border-gray-200">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Threshold Control */}
            <div className="bg-gray-50 rounded-lg p-3">
              <div className="flex items-center justify-between mb-2">
                <label className="text-sm font-medium text-gray-700 flex items-center gap-2">
                  <Zap className="w-4 h-4 text-amber-500" />
                  Fraud Threshold
                </label>
                <span className={`text-sm font-bold ${
                  threshold < 0.4 ? 'text-red-600' : threshold > 0.6 ? 'text-green-600' : 'text-amber-600'
                }`}>
                  {(threshold * 100).toFixed(0)}%
                </span>
              </div>
              <input
                type="range"
                min="0.1"
                max="0.9"
                step="0.05"
                value={threshold}
                onChange={(e) => setThreshold(Number(e.target.value))}
                className="w-full h-2 bg-gradient-to-r from-green-400 via-amber-400 to-red-400 rounded-lg appearance-none cursor-pointer"
              />
              <div className="flex justify-between text-[10px] text-gray-500 mt-1">
                <span>More Sensitive</span>
                <span>Less Sensitive</span>
              </div>
              <p className="text-[10px] text-gray-500 mt-2">
                {threshold < 0.4 
                  ? '⚠️ Low threshold: More fraud flagged, higher false positives' 
                  : threshold > 0.6 
                    ? '✅ High threshold: Fewer flags, may miss some fraud'
                    : '⚖️ Balanced threshold: Good precision/recall trade-off'}
              </p>
            </div>
            
            {/* Model Weights Info */}
            <div className="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-lg p-3 border border-indigo-100">
              <label className="text-sm font-medium text-gray-700 mb-2 block">Hybrid Model Weights</label>
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-xs text-gray-600">Classical (XGBoost)</span>
                  <div className="flex items-center gap-2">
                    <div className="w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
                      <div className="h-full bg-gray-700 rounded-full" style={{ width: '80%' }} />
                    </div>
                    <span className="text-xs font-medium text-gray-700">80%</span>
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-xs text-gray-600">Quantum Ensemble</span>
                  <div className="flex items-center gap-2">
                    <div className="w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
                      <div className="h-full bg-indigo-500 rounded-full" style={{ width: '20%' }} />
                    </div>
                    <span className="text-xs font-medium text-indigo-600">20%</span>
                  </div>
                </div>
              </div>
              <p className="text-[10px] text-indigo-600 mt-2">
                ⚛️ VQC (40%) + QAOA (30%) + QNN (30%)
              </p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
});

export default SimulationEngine;