'use client';

import { useState, useEffect } from 'react';
import { Bug, X, Settings, Shield, Activity } from 'lucide-react';
import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
import { getGlobalApiLogger } from '@/lib/infrastructure/ApiRequestLogger';

interface DebugModeToggleProps {
  /**
   * Whether to show the toggle (auto-detected from environment)
   */
  show?: boolean;
}

/**
 * Debug Mode Toggle Component
 * Provides a floating interface to control debug features and view real-time metrics
 */
export function DebugModeToggle({ show }: DebugModeToggleProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [debugEnabled, setDebugEnabled] = useState(false);
  const [metrics, setMetrics] = useState({
    errors: 0,
    apiRequests: 0,
    apiFailures: 0,
  });

  const isDev = process.env.NODE_ENV === 'development';
  const shouldShow = show ?? isDev;

  useEffect(() => {
    if (!shouldShow) return;

    // Load debug state from localStorage
    const saved = localStorage.getItem('gridpilot_debug_enabled');
    if (saved === 'true') {
      setDebugEnabled(true);
      initializeDebugFeatures();
    }

    // Update metrics every 2 seconds
    const interval = setInterval(updateMetrics, 2000);
    return () => clearInterval(interval);
  }, [shouldShow]);

  useEffect(() => {
    // Save debug state
    if (shouldShow) {
      localStorage.setItem('gridpilot_debug_enabled', debugEnabled.toString());
    }
  }, [debugEnabled, shouldShow]);

  const updateMetrics = () => {
    if (!debugEnabled) return;

    const globalHandler = getGlobalErrorHandler();
    const apiLogger = getGlobalApiLogger();

    const errorStats = globalHandler.getStats();
    const apiStats = apiLogger.getStats();

    setMetrics({
      errors: errorStats.total,
      apiRequests: apiStats.total,
      apiFailures: apiStats.failed,
    });
  };

  const initializeDebugFeatures = () => {
    const globalHandler = getGlobalErrorHandler();
    const apiLogger = getGlobalApiLogger();

    // Initialize global error handler
    globalHandler.initialize();

    // Override fetch with logging
    if (!(window as any).__GRIDPILOT_FETCH_LOGGED__) {
      const loggedFetch = apiLogger.createLoggedFetch();
      window.fetch = loggedFetch as any;
      (window as any).__GRIDPILOT_FETCH_LOGGED__ = true;
    }

    // Expose to window for easy access
    (window as any).__GRIDPILOT_GLOBAL_HANDLER__ = globalHandler;
    (window as any).__GRIDPILOT_API_LOGGER__ = apiLogger;

    console.log('%c[DEBUG MODE] Enabled', 'color: #00ff88; font-weight: bold; font-size: 14px;');
    console.log('Available globals:', {
      __GRIDPILOT_GLOBAL_HANDLER__: globalHandler,
      __GRIDPILOT_API_LOGGER__: apiLogger,
      __GRIDPILOT_REACT_ERRORS__: (window as any).__GRIDPILOT_REACT_ERRORS__ || [],
    });
  };

  const toggleDebug = () => {
    const newEnabled = !debugEnabled;
    setDebugEnabled(newEnabled);

    if (newEnabled) {
      initializeDebugFeatures();
    } else {
      // Disable debug features
      const globalHandler = getGlobalErrorHandler();
      globalHandler.destroy();

      console.log('%c[DEBUG MODE] Disabled', 'color: #ff4444; font-weight: bold; font-size: 14px;');
    }
  };

  const triggerTestError = () => {
    if (!debugEnabled) return;

    // Trigger a test API error
    const testError = new Error('This is a test error for debugging');
    (testError as any).type = 'TEST_ERROR';
    
    const globalHandler = getGlobalErrorHandler();
    globalHandler.report(testError, { test: true, timestamp: Date.now() });

    console.log('%c[TEST] Error triggered', 'color: #ffaa00; font-weight: bold;', testError);
  };

  const triggerTestApiCall = async () => {
    if (!debugEnabled) return;

    try {
      // This will fail and be logged
      await fetch('https://httpstat.us/500');
    } catch (error) {
      // Already logged by interceptor
      console.log('%c[TEST] API call completed', 'color: #00aaff; font-weight: bold;');
    }
  };

  const clearAllLogs = () => {
    const globalHandler = getGlobalErrorHandler();
    const apiLogger = getGlobalApiLogger();

    globalHandler.clearHistory();
    apiLogger.clearHistory();

    setMetrics({ errors: 0, apiRequests: 0, apiFailures: 0 });

    console.log('%c[DEBUG] All logs cleared', 'color: #00ff88; font-weight: bold;');
  };

  const copyDebugInfo = async () => {
    const globalHandler = getGlobalErrorHandler();
    const apiLogger = getGlobalApiLogger();

    const debugInfo = {
      timestamp: new Date().toISOString(),
      environment: {
        mode: process.env.NODE_ENV,
        version: process.env.NEXT_PUBLIC_APP_VERSION,
      },
      browser: {
        userAgent: navigator.userAgent,
        language: navigator.language,
        platform: navigator.platform,
      },
      errors: globalHandler.getStats(),
      api: apiLogger.getStats(),
      reactErrors: (window as any).__GRIDPILOT_REACT_ERRORS__ || [],
    };

    try {
      await navigator.clipboard.writeText(JSON.stringify(debugInfo, null, 2));
      console.log('%c[DEBUG] Debug info copied to clipboard', 'color: #00ff88; font-weight: bold;');
    } catch (err) {
      console.error('Failed to copy:', err);
    }
  };

  if (!shouldShow) {
    return null;
  }

  return (
    <div className="fixed bottom-4 left-4 z-50">
      {/* Main Toggle Button */}
      {!isOpen && (
        <button
          onClick={() => setIsOpen(true)}
          className={`p-3 rounded-full shadow-lg transition-all ${
            debugEnabled 
              ? 'bg-green-600 hover:bg-green-700 text-white' 
              : 'bg-iron-gray hover:bg-charcoal-outline text-gray-300'
          }`}
          title={debugEnabled ? 'Debug Mode Active' : 'Enable Debug Mode'}
        >
          <Bug className="w-5 h-5" />
        </button>
      )}

      {/* Debug Panel */}
      {isOpen && (
        <div className="w-80 bg-deep-graphite border border-charcoal-outline rounded-xl shadow-2xl overflow-hidden">
          {/* Header */}
          <div className="flex items-center justify-between px-3 py-2 bg-iron-gray/50 border-b border-charcoal-outline">
            <div className="flex items-center gap-2">
              <Bug className="w-4 h-4 text-green-400" />
              <span className="text-sm font-semibold text-white">Debug Control</span>
            </div>
            <button
              onClick={() => setIsOpen(false)}
              className="p-1 hover:bg-charcoal-outline rounded"
            >
              <X className="w-4 h-4 text-gray-400" />
            </button>
          </div>

          {/* Content */}
          <div className="p-3 space-y-3">
            {/* Debug Toggle */}
            <div className="flex items-center justify-between bg-iron-gray/30 p-2 rounded border border-charcoal-outline">
              <div className="flex items-center gap-2">
                <Shield className={`w-4 h-4 ${debugEnabled ? 'text-green-400' : 'text-gray-500'}`} />
                <span className="text-sm font-medium">Debug Mode</span>
              </div>
              <button
                onClick={toggleDebug}
                className={`px-3 py-1 rounded text-xs font-bold transition-colors ${
                  debugEnabled 
                    ? 'bg-green-600 text-white hover:bg-green-700' 
                    : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                }`}
              >
                {debugEnabled ? 'ON' : 'OFF'}
              </button>
            </div>

            {/* Metrics */}
            {debugEnabled && (
              <div className="grid grid-cols-3 gap-2">
                <div className="bg-iron-gray border border-charcoal-outline rounded p-2 text-center">
                  <div className="text-[10px] text-gray-500">Errors</div>
                  <div className="text-lg font-bold text-red-400">{metrics.errors}</div>
                </div>
                <div className="bg-iron-gray border border-charcoal-outline rounded p-2 text-center">
                  <div className="text-[10px] text-gray-500">API</div>
                  <div className="text-lg font-bold text-blue-400">{metrics.apiRequests}</div>
                </div>
                <div className="bg-iron-gray border border-charcoal-outline rounded p-2 text-center">
                  <div className="text-[10px] text-gray-500">Failures</div>
                  <div className="text-lg font-bold text-yellow-400">{metrics.apiFailures}</div>
                </div>
              </div>
            )}

            {/* Actions */}
            {debugEnabled && (
              <div className="space-y-2">
                <div className="text-xs font-semibold text-gray-400">Test Actions</div>
                <div className="grid grid-cols-2 gap-2">
                  <button
                    onClick={triggerTestError}
                    className="px-2 py-1.5 bg-red-600 hover:bg-red-700 text-white rounded text-xs font-medium"
                  >
                    Test Error
                  </button>
                  <button
                    onClick={triggerTestApiCall}
                    className="px-2 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded text-xs font-medium"
                  >
                    Test API
                  </button>
                </div>

                <div className="text-xs font-semibold text-gray-400 mt-2">Utilities</div>
                <div className="grid grid-cols-2 gap-2">
                  <button
                    onClick={copyDebugInfo}
                    className="px-2 py-1.5 bg-iron-gray hover:bg-charcoal-outline text-gray-300 rounded text-xs font-medium border border-charcoal-outline"
                  >
                    Copy Info
                  </button>
                  <button
                    onClick={clearAllLogs}
                    className="px-2 py-1.5 bg-iron-gray hover:bg-charcoal-outline text-gray-300 rounded text-xs font-medium border border-charcoal-outline"
                  >
                    Clear Logs
                  </button>
                </div>
              </div>
            )}

            {/* Quick Links */}
            {debugEnabled && (
              <div className="space-y-1">
                <div className="text-xs font-semibold text-gray-400">Quick Access</div>
                <div className="text-[10px] text-gray-500 font-mono space-y-0.5">
                  <div>• window.__GRIDPILOT_GLOBAL_HANDLER__</div>
                  <div>• window.__GRIDPILOT_API_LOGGER__</div>
                  <div>• window.__GRIDPILOT_REACT_ERRORS__</div>
                </div>
              </div>
            )}

            {/* Status */}
            <div className="text-[10px] text-gray-500 text-center pt-2 border-t border-charcoal-outline">
              {debugEnabled ? 'Debug features active' : 'Debug mode disabled'}
              {isDev && ' • Development Environment'}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/**
 * Hook for programmatic debug control
 */
export function useDebugMode() {
  const [debugEnabled, setDebugEnabled] = useState(false);

  useEffect(() => {
    const saved = localStorage.getItem('gridpilot_debug_enabled');
    setDebugEnabled(saved === 'true');
  }, []);

  const enable = () => {
    setDebugEnabled(true);
    localStorage.setItem('gridpilot_debug_enabled', 'true');
    
    // Initialize debug features
    const globalHandler = getGlobalErrorHandler();
    globalHandler.initialize();

    const apiLogger = getGlobalApiLogger();
    if (!(window as any).__GRIDPILOT_FETCH_LOGGED__) {
      const loggedFetch = apiLogger.createLoggedFetch();
      window.fetch = loggedFetch as any;
      (window as any).__GRIDPILOT_FETCH_LOGGED__ = true;
    }

    (window as any).__GRIDPILOT_GLOBAL_HANDLER__ = globalHandler;
    (window as any).__GRIDPILOT_API_LOGGER__ = apiLogger;
  };

  const disable = () => {
    setDebugEnabled(false);
    localStorage.setItem('gridpilot_debug_enabled', 'false');
    
    const globalHandler = getGlobalErrorHandler();
    globalHandler.destroy();
  };

  const toggle = () => {
    if (debugEnabled) {
      disable();
    } else {
      enable();
    }
  };

  return {
    enabled: debugEnabled,
    enable,
    disable,
    toggle,
  };
}