/**
 * Examples of hooking fetch() and XMLHttpRequest using the hook utility
 */

import { hookFunction, createDetachableHook } from './hook-utility';

// ============================================
// Example 1: Hook the global fetch function
// ============================================

const originalFetch = window.fetch;

window.fetch = hookFunction(originalFetch, {
  before: (input, init) => {
    console.log('🌐 Fetch Request:', {
      url: typeof input === 'string' ? input : input instanceof URL ? input.href : (input as Request).url,
      method: init?.method || 'GET',
      headers: init?.headers,
      body: init?.body,
    });
    
    // You can modify the request here
    // For example, add authentication headers
    const modifiedInit = {
      ...init,
      headers: {
        ...init?.headers,
        'X-Custom-Header': 'hooked',
      },
    };
    
    return [input, modifiedInit];
  },
  after: async (response, input, init) => {
    const url = typeof input === 'string' ? input : input instanceof URL ? input.href : (input as Request).url;
    
    console.log('✅ Fetch Response:', {
      url,
      status: response.status,
      statusText: response.statusText,
      headers: Object.fromEntries(response.headers.entries()),
    });
    
    // Clone response to read body without consuming it
    const cloned = response.clone();
    try {
      const body = await cloned.text();
      console.log('📦 Response Body:', body.substring(0, 200));
    } catch (e) {
      // Body might not be text
    }
    
    return response;
  },
  onError: (error, input) => {
    const url = typeof input === 'string' ? input : input instanceof URL ? input.href : (input as Request).url;
    console.error('❌ Fetch Error:', url, error);
  },
});

// ============================================
// Example 2: Hook XMLHttpRequest.prototype.open
// ============================================

const xhrProto = XMLHttpRequest.prototype;

XMLHttpRequest.prototype.open = hookFunction(xhrProto.open, {
  before: function(method, url, async = true, user, password) {
    console.log('📡 XHR Open:', { method, url, async });
    
    // Modify URL if needed
    let modifiedUrl = url;
    if (typeof url === 'string' && !url.includes('?')) {
      modifiedUrl = `${url}?hooked=true`;
    }
    
    return [method, modifiedUrl, async, user, password];
  },
  after: function(result, method, url) {
    console.log('✓ XHR Opened successfully');
    return result;
  },
});

// ============================================
// Example 3: Hook XMLHttpRequest.prototype.send
// ============================================

XMLHttpRequest.prototype.send = hookFunction(xhrProto.send, {
  before: function(body) {
    console.log('📤 XHR Send:', {
      body: body ? (typeof body === 'string' ? body.substring(0, 100) : body) : null,
      readyState: this.readyState,
    });
    
    // Modify request body if needed
    if (typeof body === 'string') {
      try {
        const parsed = JSON.parse(body);
        parsed._hooked = true;
        return [JSON.stringify(parsed)];
      } catch (e) {
        // Not JSON, return as is
      }
    }
    
    return [body];
  },
  after: function(result) {
    console.log('✓ XHR Sent');
    return result;
  },
  onError: function(error) {
    console.error('❌ XHR Send Error:', error);
  },
});

// ============================================
// Example 4: Hook XHR response handlers
// ============================================

const originalSetRequestHeader = xhrProto.setRequestHeader;
xhrProto.setRequestHeader = hookFunction(originalSetRequestHeader, {
  before: (header, value) => {
    console.log('📋 XHR Header:', { header, value });
    return [header, value];
  },
});

// ============================================
// Example 5: Detachable hooks for testing
// ============================================

// Hook fetch with ability to unhook later
const detachFetch = createDetachableHook<typeof window.fetch>(
  window,
  'fetch',
  {
    before: (input, init) => {
      console.log('🔗 Detachable Fetch Hook:', input);
      return [input, init];
    },
  }
);

// Later you can remove the hook:
// detachFetch();

// ============================================
// Example 6: Complete XHR lifecycle monitoring
// ============================================

function hookXHRInstance(xhr: XMLHttpRequest) {
  // Hook the load event
  const originalOnLoad = xhr.onload;
  xhr.onload = hookFunction(
    function(this: XMLHttpRequest, ev: ProgressEvent) {
      console.log('📥 XHR Load:', {
        status: this.status,
        statusText: this.statusText,
        response: typeof this.response === 'string' 
          ? this.response.substring(0, 100) 
          : this.response,
      });
      
      if (originalOnLoad) {
        return originalOnLoad.call(this, ev);
      }
    },
    {
      after: (result) => {
        console.log('✓ XHR onload handler completed');
        return result;
      },
    }
  );

  // Hook error event
  const originalOnError = xhr.onerror;
  xhr.onerror = function(this: XMLHttpRequest, ev: ProgressEvent) {
    console.error('❌ XHR Error Event:', {
      status: this.status,
      statusText: this.statusText,
    });
    
    if (originalOnError) {
      return originalOnError.call(this, ev);
    }
  };

  return xhr;
}

// Override XMLHttpRequest constructor to auto-hook new instances
const OriginalXHR = window.XMLHttpRequest;
window.XMLHttpRequest = class HookedXHR extends OriginalXHR {
  constructor() {
    super();
    hookXHRInstance(this);
  }
} as any;

// ============================================
// Example 7: Request/Response logging middleware
// ============================================

interface HttpLog {
  timestamp: number;
  type: 'fetch' | 'xhr';
  method: string;
  url: string;
  status?: number;
  duration?: number;
  error?: string;
}

const httpLogs: HttpLog[] = [];

// Enhanced fetch hook with logging
const enhancedFetch = window.fetch;
window.fetch = hookFunction(enhancedFetch, {
  before: (input, init) => {
    const url = typeof input === 'string' ? input : input instanceof URL ? input.href : (input as Request).url;
    const log: HttpLog = {
      timestamp: Date.now(),
      type: 'fetch',
      method: init?.method || 'GET',
      url,
    };
    
    // Store log with a marker to update later
    (input as any).__logIndex = httpLogs.length;
    httpLogs.push(log);
    
    return [input, init];
  },
  after: (response, input) => {
    const logIndex = (input as any).__logIndex;
    if (logIndex !== undefined && httpLogs[logIndex]) {
      httpLogs[logIndex].status = response.status;
      httpLogs[logIndex].duration = Date.now() - httpLogs[logIndex].timestamp;
    }
    return response;
  },
  onError: (error, input) => {
    const logIndex = (input as any).__logIndex;
    if (logIndex !== undefined && httpLogs[logIndex]) {
      httpLogs[logIndex].error = error.message;
      httpLogs[logIndex].duration = Date.now() - httpLogs[logIndex].timestamp;
    }
  },
});

// Function to view all HTTP logs
export function getHttpLogs(): HttpLog[] {
  return httpLogs;
}

export function clearHttpLogs(): void {
  httpLogs.length = 0;
}

// ============================================
// Usage Examples
// ============================================

// Test fetch hook
async function testFetchHook() {
  try {
    const response = await fetch('https://api.github.com/users/github');
    const data = await response.json();
    console.log('GitHub API Response:', data);
  } catch (error) {
    console.error('Fetch failed:', error);
  }
}

// Test XHR hook
function testXHRHook() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.github.com/users/github');
  xhr.onload = function() {
    console.log('XHR Response:', this.responseText);
  };
  xhr.send();
}

// Uncomment to test:
// testFetchHook();
// testXHRHook();

export { detachFetch };