import React, { useState, useEffect, useCallback } from 'react';
import {
  CheckCircleIcon,
  XCircleIcon,
  AlertTriangleIcon,
  Loader2Icon,
  ActivityIcon,
  ClockIcon,
  GlobeIcon,
  RefreshCwIcon,
  TestTubeIcon,
  SettingsIcon as WrenchIcon
} from '../../icons';
import { useSiteStore } from '../../store/siteStore';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { API_BASE_URL, fetchAPI } from '../../services/api';

// Types for WordPress integration debugging
interface IntegrationHealth {
  api_status: 'healthy' | 'error';
  api_message: string;
  last_api_check: string;
  plugin_active: boolean;
  plugin_version: string;
  debug_mode: boolean;
  sync_healthy: boolean;
  pending_syncs: number;
  last_sync: string | null;
}

interface SyncEvent {
  type: 'sync' | 'error' | 'webhook' | 'debug';
  action: string;
  description: string;
  timestamp: string;
  details?: any;
}

interface DataValidation {
  field_name: string;
  igny8_value: string;
  wp_value: string;
  matches: boolean;
  error?: string;
}

export default function WordPressIntegrationDebug() {
  // State
  const [debugEnabled, setDebugEnabled] = useState(false);
  const [loading, setLoading] = useState(false);
  const [initializing, setInitializing] = useState(true);
  const [pollingInterval, setPollingInterval] = useState<any>(null);
  const [integrationHealth, setIntegrationHealth] = useState<IntegrationHealth | null>(null);
  const [syncEvents, setSyncEvents] = useState<SyncEvent[]>([]);
  const [dataValidation, setDataValidation] = useState<DataValidation[]>([]);
  const [integrationId, setIntegrationId] = useState<number | null>(null);

  // Get active site from store
  const { activeSite } = useSiteStore();
  const toast = useToast();

  // Check if integration exists for the active site
  useEffect(() => {
    const checkIntegration = async () => {
      if (!activeSite) {
        setInitializing(false);
        return;
      }

      try {
        setInitializing(true);
        const data = await fetchAPI(`/v1/integration/integrations/?site_id=${activeSite.id}`);
        const integrations = data.results || [];
        
        if (integrations.length > 0) {
          const wpIntegration = integrations.find((i: any) => i.platform === 'wordpress');
          if (wpIntegration) {
            setIntegrationId(wpIntegration.id);
            setDebugEnabled(wpIntegration.credentials_json?.debug_enabled || false);
          }
        }
      } catch (error) {
        console.error('[WP-DEBUG] Failed to check integration:', error);
      } finally {
        setInitializing(false);
      }
    };

    checkIntegration();
  }, [activeSite]);

  // Helper to make authenticated API calls with debug awareness
  const apiCall = async (path: string, method: string = 'GET', body?: any) => {
    // Always allow debug-status calls to check if integration exists
    if (!integrationId && !path.includes('/integrations/?')) {
      console.log('[WP-DEBUG] Skipping API call - no integration configured:', path);
      return { response: { ok: false, status: 0 } as Response, data: null };
    }

    const options: RequestInit = {
      method,
    };

    if (body && method !== 'GET') {
      options.body = JSON.stringify(body);
    }

    try {
      if (debugEnabled) {
        console.log('[WP-DEBUG] API Call:', method, path, body ? { body } : {});
      }
      
      const data = await fetchAPI(path, options);
      
      if (debugEnabled) {
        console.log('[WP-DEBUG] API Response:', data);
      }
      
      return { response: { ok: true, status: 200 } as Response, data };
    } catch (error: any) {
      if (debugEnabled) {
        console.error('[WP-DEBUG] API Error:', error);
      }
      const errorData = error.response || { detail: error.message || 'Request failed' };
      return { response: { ok: false, status: error.status || 500 } as Response, data: errorData };
    }
  };

  // Toggle debug mode
  const toggleDebugMode = async (enabled: boolean) => {
    if (!activeSite) {
      toast.error('Please select a site first');
      return;
    }

    if (!integrationId) {
      toast.error('No WordPress integration found for this site');
      return;
    }

    try {
      setLoading(true);
      
      // Set local debug state first for immediate UI response
      setDebugEnabled(enabled);
      
      if (enabled) {
        console.log('[WP-DEBUG] 🎯 WordPress Debug mode ENABLED for site:', activeSite.name);
        toast.success('WordPress debug mode enabled - verbose logging started');
        
        // Start polling for updates
        startPolling();
        
        // Trigger debug mode on WordPress plugin if integrated
        await apiCall(`/v1/integration/integrations/${integrationId}/trigger-debug/`, 'POST', {
          debug_enabled: true
        });
        
        // Load initial debug data
        await loadDebugData();
      } else {
        console.log('[WP-DEBUG] 🔒 WordPress Debug mode DISABLED');
        toast.info('WordPress debug mode disabled - reduced logging');
        
        // Stop polling
        stopPolling();
        
        // Disable debug on WordPress
        await apiCall(`/v1/integration/integrations/${integrationId}/trigger-debug/`, 'POST', {
          debug_enabled: false
        });
      }
    } catch (error) {
      console.error('[WP-DEBUG] Failed to toggle debug mode:', error);
      toast.error('Failed to toggle WordPress debug mode');
      setDebugEnabled(!enabled); // Revert
    } finally {
      setLoading(false);
    }
  };

  // Start polling for debug data
  const startPolling = () => {
    if (pollingInterval) return;
    
    const interval = setInterval(() => {
      if (debugEnabled && activeSite) {
        loadDebugData();
      }
    }, 5000); // Poll every 5 seconds when debug is enabled
    
    setPollingInterval(interval);
    console.log('[WP-DEBUG] ⏰ Started polling for WordPress debug updates');
  };

  // Stop polling
  const stopPolling = () => {
    if (pollingInterval) {
      clearInterval(pollingInterval);
      setPollingInterval(null);
      console.log('[WP-DEBUG] ⏸️ Stopped polling');
    }
  };

  // Load all debug data
  const loadDebugData = useCallback(async () => {
    if (!activeSite || !integrationId) {
      console.log('[WP-DEBUG] Skipping load - no site or integration');
      return;
    }
    
    try {
      setLoading(true);
      console.log('[WP-DEBUG] 📊 Loading WordPress debug data for site:', activeSite.name);
      
      // Load integration health
      await loadIntegrationHealth();
      
      // Load sync events if debug is enabled
      if (debugEnabled) {
        await loadSyncEvents();
        await loadDataValidation();
      }
      
      console.log('[WP-DEBUG] ✅ WordPress debug data loaded successfully');
    } catch (error) {
      console.error('[WP-DEBUG] ❌ Failed to load WordPress debug data:', error);
      // Don't show toast error on initial load
    } finally {
      setLoading(false);
    }
  }, [activeSite, integrationId, debugEnabled]);

  // Load integration health
  const loadIntegrationHealth = async () => {
    if (!integrationId) return;
    
    try {
      const { data } = await apiCall(`/v1/integration/integrations/${integrationId}/debug-status/`);
      
      if (data?.health) {
        setIntegrationHealth(data.health);
        console.log('[WP-DEBUG] 💚 Integration health loaded');
      }
    } catch (error) {
      console.error('[WP-DEBUG] Failed to load integration health:', error);
    }
  };

  // Load sync events
  const loadSyncEvents = async () => {
    if (!integrationId) return;
    
    try {
      const { data } = await apiCall(`/v1/integration/integrations/${integrationId}/debug-status/?include_events=true`);
      
      if (data?.events) {
        setSyncEvents(data.events);
        console.log('[WP-DEBUG] 📜 Loaded', data.events.length, 'WordPress sync events');
      }
    } catch (error) {
      console.error('[WP-DEBUG] Failed to load sync events:', error);
    }
  };

  // Load data validation matrix
  const loadDataValidation = async () => {
    if (!integrationId) return;
    
    try {
      const { data } = await apiCall(`/v1/integration/integrations/${integrationId}/debug-status/?include_validation=true`);
      
      if (data?.validation) {
        setDataValidation(data.validation);
        console.log('[WP-DEBUG] 🧩 Loaded WordPress data validation matrix');
      }
    } catch (error) {
      console.error('[WP-DEBUG] Failed to load data validation:', error);
    }
  };

  // Interactive tools
  const testConnection = async () => {
    if (!integrationId) {
      toast.error('No WordPress integration found');
      return;
    }
    
    try {
      setLoading(true);
      console.log('[WP-DEBUG] 🔧 Testing connection to WordPress...');
      
      const { data } = await apiCall(`/v1/integration/integrations/${integrationId}/test-connection/`, 'POST');
      
      if (data?.success) {
        toast.success('WordPress connection test successful');
        await loadIntegrationHealth(); // Refresh health data
      } else {
        toast.error('WordPress connection test failed: ' + (data?.message || 'Unknown error'));
      }
    } catch (error) {
      console.error('[WP-DEBUG] Connection test error:', error);
      toast.error('WordPress connection test failed');
    } finally {
      setLoading(false);
    }
  };

  // Load initial data when component mounts or integration changes
  useEffect(() => {
    if (!initializing && integrationId) {
      loadDebugData();
    }
  }, [integrationId, initializing]);

  // Start/stop polling based on debug state
  useEffect(() => {
    if (debugEnabled && integrationId) {
      startPolling();
    } else {
      stopPolling();
    }
    
    return () => stopPolling();
  }, [debugEnabled, integrationId]);

  // Effects - Load initial data when site changes or integration found
  useEffect(() => {
    if (activeSite && integrationId && !initializing) {
      loadDebugData();
      // Auto-start polling for real-time updates if debug enabled
      if (debugEnabled) {
        startPolling();
      }
    }
    
    return () => {
      stopPolling();
    };
  }, [activeSite, integrationId, initializing]);

  // Show loading state while initializing
  if (initializing) {
    return (
      <div className="p-8 text-center">
        <Loader2Icon className="h-8 w-8 animate-spin mx-auto text-brand-600 dark:text-brand-400" />
        <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Loading WordPress integration...</p>
      </div>
    );
  }

  // Show message if no integration is configured
  if (!integrationId) {
    return (
      <div className="p-8">
        <div className="bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-900/50 rounded-lg p-6 text-center">
          <AlertTriangleIcon className="h-12 w-12 text-warning-600 dark:text-warning-400 mx-auto mb-4" />
          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
            No WordPress Integration Found
          </h3>
          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
            This site doesn't have a WordPress integration configured yet.
          </p>
          <p className="text-sm text-gray-600 dark:text-gray-400">
            Please configure a WordPress integration in the <strong>Settings → Integration</strong> page first.
          </p>
        </div>
      </div>
    );
  }

  const resyncSiteMetadata = async () => {
    if (!activeSite) return;
    
    try {
      setLoading(true);
      console.log('[WP-DEBUG] 🔄 Re-syncing WordPress site metadata...');
      
      const { data } = await apiCall(`/integration/integrations/${activeSite.id}/resync-metadata/`, 'POST');
      
      if (data?.success) {
        toast.success('WordPress site metadata re-synced successfully');
        await loadDebugData(); // Refresh all data
      } else {
        toast.error('WordPress re-sync failed: ' + data?.message);
      }
    } catch (error) {
      console.error('[WP-DEBUG] Metadata resync error:', error);
      toast.error('WordPress metadata re-sync failed');
    } finally {
      setLoading(false);
    }
  };

  const validatePostSync = async (taskId?: number) => {
    if (!activeSite) return;
    
    const id = taskId || prompt('Enter Task ID to validate WordPress sync:');
    if (!id) return;
    
    try {
      setLoading(true);
      console.log('[WP-DEBUG] 🔍 Validating WordPress post sync for task:', id);
      
      const { data } = await apiCall(`/integration/integrations/${activeSite.id}/validate-content/${id}/`);
      
      if (data) {
        toast.success('WordPress post validation completed');
        setDataValidation(data.validation || []);
      } else {
        toast.error('WordPress validation failed: ' + data?.message);
      }
    } catch (error) {
      console.error('[WP-DEBUG] Post validation error:', error);
      toast.error('WordPress post validation failed');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="space-y-6">
      {/* No WordPress Integration Found */}
      {initializing ? (
        <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6 text-center">
          <Loader2Icon className="h-8 w-8 animate-spin mx-auto text-gray-400 mb-2" />
          <p className="text-gray-600 dark:text-gray-400">Checking for WordPress integration...</p>
        </div>
      ) : !integrationId && activeSite ? (
        <div className="bg-warning-50 dark:bg-warning-900/20 border border-warning-200 dark:border-warning-900/50 rounded-lg p-6">
          <div className="flex items-start space-x-3">
            <AlertTriangleIcon className="h-8 w-8 text-warning-500 mt-0.5" />
            <div>
              <p className="text-lg font-semibold text-warning-800 dark:text-warning-200">No WordPress Integration Found</p>
              <p className="text-sm text-warning-600 dark:text-warning-300 mt-2">
                This site doesn't have a WordPress integration configured yet.
              </p>
              <p className="text-xs text-warning-600 dark:text-warning-400 mt-2">
                Please configure a WordPress integration in <span className="font-medium">Settings → Integration</span> page first.
              </p>
            </div>
          </div>
        </div>
      ) : !activeSite ? (
        <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
          <div className="text-center py-12">
            <GlobeIcon className="h-12 w-12 mx-auto text-gray-400 mb-4" />
            <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">No Site Selected</h3>
            <p className="text-gray-500 dark:text-gray-400">
              Please select a site to view WordPress integration debug data.
            </p>
          </div>
        </div>
      ) : (
        <>
          {/* Integration Health Summary */}
          <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-medium text-gray-900 dark:text-white">WordPress Bridge Health</h3>
              <div className="flex space-x-2">
                <button
                  onClick={testConnection}
                  disabled={loading}
                  className="inline-flex items-center px-3 py-1 text-xs bg-brand-100 hover:bg-brand-200 text-brand-700 rounded-md disabled:opacity-50"
                >
                  <TestTubeIcon className="h-3 w-3 mr-1" />
                  Test Connection
                </button>
                <button
                  onClick={resyncSiteMetadata}
                  disabled={loading}
                  className="inline-flex items-center px-3 py-1 text-xs bg-warning-100 hover:bg-warning-200 text-warning-700 rounded-md disabled:opacity-50"
                >
                  <RefreshCwIcon className="h-3 w-3 mr-1" />
                  Re-sync Metadata
                </button>
                <button
                  onClick={() => validatePostSync()}
                  disabled={loading}
                  className="inline-flex items-center px-3 py-1 text-xs bg-purple-100 hover:bg-purple-200 text-purple-700 rounded-md disabled:opacity-50"
                >
                  <SettingsIcon className="h-3 w-3 mr-1" />
                  Validate Content
                </button>
              </div>
            </div>

            {integrationHealth ? (
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-sm font-medium">API Connection</span>
                    {integrationHealth.api_status === 'healthy' ? (
                      <CheckCircleIcon className="h-4 w-4 text-success-500" />
                    ) : (
                      <XCircleIcon className="h-4 w-4 text-error-500" />
                    )}
                  </div>
                  <p className="text-xs text-gray-600 dark:text-gray-400">{integrationHealth.api_message}</p>
                  <div className="text-xs text-gray-500 mt-1">
                    Last: {new Date(integrationHealth.last_api_check).toLocaleTimeString()}
                  </div>
                </div>

                <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-sm font-medium">Plugin Status</span>
                    {integrationHealth.plugin_active ? (
                      <CheckCircleIcon className="h-4 w-4 text-success-500" />
                    ) : (
                      <XCircleIcon className="h-4 w-4 text-error-500" />
                    )}
                  </div>
                  <p className="text-xs text-gray-600 dark:text-gray-400">
                    Version: {integrationHealth.plugin_version || 'Unknown'}
                  </p>
                  <div className="text-xs text-gray-500 mt-1">
                    Debug: {integrationHealth.debug_mode ? 'Enabled' : 'Disabled'}
                  </div>
                </div>

                <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-sm font-medium">Sync Status</span>
                    {integrationHealth.sync_healthy ? (
                      <CheckCircleIcon className="h-4 w-4 text-success-500" />
                    ) : (
                      <AlertTriangleIcon className="h-4 w-4 text-warning-500" />
                    )}
                  </div>
                  <p className="text-xs text-gray-600 dark:text-gray-400">
                    {integrationHealth.pending_syncs || 0} pending
                  </p>
                  <div className="text-xs text-gray-500 mt-1">
                    Last: {integrationHealth.last_sync ? 
                      new Date(integrationHealth.last_sync).toLocaleTimeString() : 'Never'}
                  </div>
                </div>
              </div>
            ) : (
              <div className="text-center py-4 text-gray-500">
                <Loader2Icon className="h-5 w-5 animate-spin mx-auto mb-2" />
                Loading WordPress integration health...
              </div>
            )}
          </div>

          {/* Live Action Logs */}
          <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
            <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Live WordPress Sync Events</h3>
            
            {syncEvents.length > 0 ? (
              <div className="space-y-3 max-h-96 overflow-y-auto">
                {syncEvents.slice().reverse().map((event, idx) => (
                  <div key={idx} className="border-l-4 border-gray-200 dark:border-gray-600 pl-4 py-2">
                    <div className="flex items-start justify-between">
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center space-x-2 text-sm">
                          <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                            event.type === 'sync' ? 'bg-brand-100 text-brand-700' :
                            event.type === 'error' ? 'bg-error-100 text-error-700' :
                            event.type === 'webhook' ? 'bg-success-100 text-success-700' :
                            'bg-gray-100 text-gray-700'
                          }`}>
                            {event.type}
                          </span>
                          <span className="font-medium truncate">{event.action}</span>
                        </div>
                        <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">{event.description}</p>
                        {event.details && (
                          <details className="mt-2">
                            <summary className="text-xs text-brand-600 cursor-pointer hover:underline">
                              View Details
                            </summary>
                            <pre className="mt-2 text-xs bg-gray-50 dark:bg-gray-700 p-2 rounded border overflow-x-auto">
                              {typeof event.details === 'string' ? event.details : JSON.stringify(event.details, null, 2)}
                            </pre>
                          </details>
                        )}
                      </div>
                      <div className="text-xs text-gray-500 whitespace-nowrap ml-4">
                        {new Date(event.timestamp).toLocaleTimeString()}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-center py-8 text-gray-500">
                <ClockIcon className="h-8 w-8 mx-auto mb-2 opacity-50" />
                <p>No WordPress sync events yet. Actions will appear here in real-time.</p>
                <p className="text-xs mt-2">Content publishing, metadata sync, and webhook calls will be logged here.</p>
              </div>
            )}
          </div>

          {/* Data Validation Matrix */}
          {dataValidation.length > 0 && (
            <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
              <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Data Sync Validation</h3>
              
              <div className="overflow-x-auto">
                <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                  <thead className="bg-gray-50 dark:bg-gray-700">
                    <tr>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                        Field
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                        IGNY8 Value
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                        WordPress Value  
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                        Status
                      </th>
                    </tr>
                  </thead>
                  <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    {dataValidation.map((validation, idx) => (
                      <tr key={idx} className="hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                          {validation.field_name}
                        </td>
                        <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 max-w-xs truncate">
                          {validation.igny8_value || <span className="text-gray-400 italic">empty</span>}
                        </td>
                        <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 max-w-xs truncate">
                          {validation.wp_value || <span className="text-gray-400 italic">empty</span>}
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          {validation.matches ? (
                            <CheckCircleIcon className="h-4 w-4 text-success-500" />
                          ) : (
                            <div className="flex items-center space-x-1">
                              <XCircleIcon className="h-4 w-4 text-error-500" />
                              {validation.error && (
                                <span className="text-xs text-error-600">{validation.error}</span>
                              )}
                            </div>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
}