import type { ApiRequestLogger } from '@/lib/infrastructure/ApiRequestLogger';
import { getGlobalApiLogger } from '@/lib/infrastructure/ApiRequestLogger';
import type { GlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Grid } from '@/ui/primitives/Grid';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { Bug, Shield, X } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';

// Extend Window interface for debug globals
declare global {
  interface Window {
    __GRIDPILOT_FETCH_LOGGED__?: boolean;
    __GRIDPILOT_GLOBAL_HANDLER__?: GlobalErrorHandler;
    __GRIDPILOT_API_LOGGER__?: ApiRequestLogger;
    __GRIDPILOT_REACT_ERRORS__?: Array<{ error: unknown; componentStack?: string }>;
  }
}

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;

  const updateMetrics = useCallback(() => {
    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,
    });
  }, [debugEnabled]);

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

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

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

    // Expose to window for easy access
    window.__GRIDPILOT_GLOBAL_HANDLER__ = globalHandler;
    window.__GRIDPILOT_API_LOGGER__ = apiLogger;

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

  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, initializeDebugFeatures, updateMetrics]);

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

  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 Error & { type?: string }).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.__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 (
    <Stack position="fixed" bottom="4" left="4" zIndex={50}>
      {/* Main Toggle Button */}
      {!isOpen && (
        <Button
          onClick={() => setIsOpen(true)}
          p={3}
          rounded="full"
          variant={debugEnabled ? 'primary' : 'secondary'}
          className={`transition-all hover:scale-110 ${debugEnabled ? 'bg-green-600' : 'bg-iron-gray'}`}
          title={debugEnabled ? 'Debug Mode Active' : 'Enable Debug Mode'}
        >
          <Icon icon={Bug} size={5} />
        </Button>
      )}

      {/* Debug Panel */}
      {isOpen && (
        <Stack w="80" bg="bg-deep-graphite" border={true} borderColor="border-charcoal-outline" rounded="xl" shadow="2xl" overflow="hidden">
          {/* Header */}
          <Stack direction="row" align="center" justify="between" px={3} py={2} bg="bg-iron-gray/50" borderBottom={true} borderColor="border-charcoal-outline">
            <Stack direction="row" align="center" gap={2}>
              <Icon icon={Bug} size={4} color="text-green-400" />
              <Text size="sm" weight="semibold" color="text-white">Debug Control</Text>
            </Stack>
            <Button
              onClick={() => setIsOpen(false)}
              p={1}
              variant="ghost"
              className="hover:bg-charcoal-outline rounded"
            >
              <Icon icon={X} size={4} color="text-gray-400" />
            </Button>
          </Stack>

          {/* Content */}
          <Stack p={3}>
            <Stack gap={3}>
              {/* Debug Toggle */}
              <Stack direction="row" align="center" justify="between" bg="bg-iron-gray/30" p={2} rounded="md" border={true} borderColor="border-charcoal-outline">
                <Stack direction="row" align="center" gap={2}>
                  <Icon icon={Shield} size={4} color={debugEnabled ? 'text-green-400' : 'text-gray-500'} />
                  <Text size="sm" weight="medium">Debug Mode</Text>
                </Stack>
                <Button
                  onClick={toggleDebug}
                  size="sm"
                  variant={debugEnabled ? 'primary' : 'secondary'}
                  className={debugEnabled ? 'bg-green-600 hover:bg-green-700' : ''}
                >
                  {debugEnabled ? 'ON' : 'OFF'}
                </Button>
              </Stack>

              {/* Metrics */}
              {debugEnabled && (
                <Grid cols={3} gap={2}>
                  <Stack bg="bg-iron-gray" border={true} borderColor="border-charcoal-outline" rounded="md" p={2} align="center">
                    <Text size="xs" color="text-gray-500" block style={{ fontSize: '10px' }}>Errors</Text>
                    <Text size="lg" weight="bold" color="text-red-400" block>{metrics.errors}</Text>
                  </Stack>
                  <Stack bg="bg-iron-gray" border={true} borderColor="border-charcoal-outline" rounded="md" p={2} align="center">
                    <Text size="xs" color="text-gray-500" block style={{ fontSize: '10px' }}>API</Text>
                    <Text size="lg" weight="bold" color="text-blue-400" block>{metrics.apiRequests}</Text>
                  </Stack>
                  <Stack bg="bg-iron-gray" border={true} borderColor="border-charcoal-outline" rounded="md" p={2} align="center">
                    <Text size="xs" color="text-gray-500" block style={{ fontSize: '10px' }}>Failures</Text>
                    <Text size="lg" weight="bold" color="text-yellow-400" block>{metrics.apiFailures}</Text>
                  </Stack>
                </Grid>
              )}

              {/* Actions */}
              {debugEnabled && (
                <Stack gap={2}>
                  <Text size="xs" weight="semibold" color="text-gray-400">Test Actions</Text>
                  <Grid cols={2} gap={2}>
                    <Button
                      onClick={triggerTestError}
                      variant="danger"
                      size="sm"
                    >
                      Test Error
                    </Button>
                    <Button
                      onClick={triggerTestApiCall}
                      size="sm"
                    >
                      Test API
                    </Button>
                  </Grid>

                  <Text size="xs" weight="semibold" color="text-gray-400" mt={2}>Utilities</Text>
                  <Grid cols={2} gap={2}>
                    <Button
                      onClick={copyDebugInfo}
                      variant="secondary"
                      size="sm"
                    >
                      Copy Info
                    </Button>
                    <Button
                      onClick={clearAllLogs}
                      variant="secondary"
                      size="sm"
                    >
                      Clear Logs
                    </Button>
                  </Grid>
                </Stack>
              )}

              {/* Quick Links */}
              {debugEnabled && (
                <Stack gap={1}>
                  <Text size="xs" weight="semibold" color="text-gray-400">Quick Access</Text>
                  <Stack color="text-gray-500" className="font-mono" style={{ fontSize: '10px' }}>
                    <Text block>• window.__GRIDPILOT_GLOBAL_HANDLER__</Text>
                    <Text block>• window.__GRIDPILOT_API_LOGGER__</Text>
                    <Text block>• window.__GRIDPILOT_REACT_ERRORS__</Text>
                  </Stack>
                </Stack>
              )}

              {/* Status */}
              <Stack pt={2} borderTop={true} borderColor="border-charcoal-outline" align="center">
                <Text size="xs" color="text-gray-500" style={{ fontSize: '10px' }} textAlign="center">
                  {debugEnabled ? 'Debug features active' : 'Debug mode disabled'}
                  {isDev && ' • Development Environment'}
                </Text>
              </Stack>
            </Stack>
          </Stack>
        </Stack>
      )}
    </Stack>
  );
}

/**
 * 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 = useCallback(() => {
    setDebugEnabled(true);
    localStorage.setItem('gridpilot_debug_enabled', 'true');
    
    // Initialize debug features
    const globalHandler = getGlobalErrorHandler();
    globalHandler.initialize();

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

    window.__GRIDPILOT_GLOBAL_HANDLER__ = globalHandler;
    window.__GRIDPILOT_API_LOGGER__ = apiLogger;
  }, []);

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

  const toggle = useCallback(() => {
    if (debugEnabled) {
      disable();
    } else {
      enable();
    }
  }, [debugEnabled, enable, disable]);

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