import { VersionManager } from './version-manager';

export interface PolyfillConfig {
  feature: string;
  url: string;
  condition: () => boolean;
  priority: number;
  size: number; // KB
}

export class PolyfillManager {
  private versionManager = VersionManager.getInstance();
  private loadedPolyfills = new Set<string>();
  
  private polyfills: PolyfillConfig[] = [
    {
      feature: 'custom-elements',
      url: 'https://unpkg.com/@webcomponents/custom-elements@1.6.0/custom-elements.min.js',
      condition: () => !this.versionManager.isFeatureSupported('customElements'),
      priority: 1,
      size: 7
    },
    {
      feature: 'shadow-dom',
      url: 'https://unpkg.com/@webcomponents/shadydom@1.11.0/shadydom.min.js',
      condition: () => !this.versionManager.isFeatureSupported('shadowDOM'),
      priority: 1,
      size: 15
    },
    {
      feature: 'container-queries',
      url: 'https://unpkg.com/container-query-polyfill@1.0.2/dist/container-query-polyfill.modern.js',
      condition: () => !this.versionManager.isFeatureSupported('containerQueries'),
      priority: 2,
      size: 25
    },
    {
      feature: 'focus-visible',
      url: 'https://unpkg.com/focus-visible@5.2.0/dist/focus-visible.min.js',
      condition: () => typeof window !== 'undefined' && typeof CSS !== 'undefined' && !CSS.supports('selector(:focus-visible)'),
      priority: 3,
      size: 2
    },
    {
      feature: 'smoothscroll',
      url: 'https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js',
      condition: () => typeof window !== 'undefined' && typeof document !== 'undefined' && !('scrollBehavior' in document.documentElement.style),
      priority: 3,
      size: 8
    },
    {
      feature: 'resize-observer',
      url: 'https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.global.js',
      condition: () => typeof window !== 'undefined' && typeof (window as unknown as { ResizeObserver?: unknown }).ResizeObserver === 'undefined',
      priority: 3,
      size: 8
    },
    {
      feature: 'intersection-observer',
      url: 'https://unpkg.com/intersection-observer@0.12.2/intersection-observer.js',
      condition: () => typeof window !== 'undefined' && !('IntersectionObserver' in window),
      priority: 3,
      size: 9
    },
    {
      feature: 'anchor-positioning',
      url: 'https://unpkg.com/@oddbird/css-anchor-positioning@0.1.0/dist/css-anchor-positioning.min.js',
      condition: () => !this.versionManager.isFeatureSupported('anchorPositioning'),
      priority: 4,
      size: 45
    },
    {
      feature: 'view-transitions',
      // Inline-safe shim applied without injecting a <script> to respect CSP.
      url: '',
      condition: () => typeof document !== 'undefined' && !('startViewTransition' in document),
      priority: 4,
      size: 1
    },
    {
      feature: 'houdini-paint',
      url: 'https://unpkg.com/css-paint-polyfill@2.0.0/dist/css-paint-polyfill.min.js',
      condition: () => !this.versionManager.isFeatureSupported('houdiniPaint'),
      priority: 5,
      size: 65
    },
    {
      feature: 'es6-promise',
      url: 'https://unpkg.com/es6-promise@4.2.8/dist/es6-promise.auto.min.js',
      condition: () => typeof Promise === 'undefined',
      priority: 0,
      size: 7
    },
    {
      feature: 'fetch',
      url: 'https://unpkg.com/whatwg-fetch@3.6.2/dist/fetch.umd.js',
      condition: () => typeof fetch === 'undefined',
      priority: 0,
      size: 12
    }
  ];

  async loadRequiredPolyfills(): Promise<void> {
    // Skip polyfill loading in Node.js environment (tests)
    if (typeof window === 'undefined' || typeof document === 'undefined') {
      console.info('[Polyfill] Skipping polyfills - Node.js environment detected');
      return;
    }

    const requiredPolyfills = this.polyfills
      .filter(p => p.condition())
      .sort((a, b) => a.priority - b.priority);

    if (requiredPolyfills.length === 0) {
      console.info('[Polyfill] No polyfills required - modern browser detected');
      return;
    }

    const totalSize = requiredPolyfills.reduce((sum, p) => sum + p.size, 0);
    console.info(`[Polyfill] Loading ${requiredPolyfills.length} polyfills (${totalSize}KB)`);

    for (const polyfill of requiredPolyfills) {
      await this.loadPolyfill(polyfill);
    }
  }

  private async loadPolyfill(config: PolyfillConfig): Promise<void> {
    if (this.loadedPolyfills.has(config.feature)) {
      return;
    }

    const MAX_RETRIES = 3;
    const TIMEOUT_MS = 10000; // 10 seconds

    for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
      try {
        const startTime = performance.now();
        
        if (config.feature === 'view-transitions') {
          // Apply inline shim (no network, no <script>, CSP-friendly)
          (document as any).startViewTransition = function (callback?: () => unknown) {
            try {
              return Promise.resolve(typeof callback === 'function' ? callback() : undefined);
            } catch {
              return Promise.resolve();
            }
          };
        } else if (!config.url) {
          // Skip if no URL (inline-only polyfill)
          await this.applyInlineFallback(config);
        } else {
          // Load from CDN with timeout
          await this.loadWithTimeout(config, TIMEOUT_MS);
        }

        const loadTime = performance.now() - startTime;
        this.loadedPolyfills.add(config.feature);
        
        console.info(`[Polyfill] Loaded ${config.feature} in ${loadTime.toFixed(2)}ms`);
        return; // Success, exit retry loop
        
      } catch (error) {
        console.warn(`[Polyfill] Attempt ${attempt}/${MAX_RETRIES} failed for ${config.feature}:`, error);
        
        if (attempt === MAX_RETRIES) {
          console.error(`[Polyfill] Failed to load ${config.feature} after ${MAX_RETRIES} attempts`);
          // Try inline fallback as last resort
          await this.applyInlineFallback(config);
        } else {
          // Wait before retry (exponential backoff)
          await new Promise(resolve => setTimeout(resolve, Math.pow(2, attempt) * 100));
        }
      }
    }
  }

  private async loadWithTimeout(config: PolyfillConfig, timeoutMs: number): Promise<void> {
    return Promise.race([
      new Promise<void>((resolve, reject) => {
        const script = document.createElement('script');
        script.src = config.url;
        script.async = true;
        script.onload = () => resolve();
        script.onerror = () => reject(new Error(`Failed to load ${config.feature} from ${config.url}`));
        document.head.appendChild(script);
      }),
      new Promise<void>((_, reject) => 
        setTimeout(() => reject(new Error(`Timeout loading ${config.feature}`)), timeoutMs)
      )
    ]);
  }

  private async applyInlineFallback(config: PolyfillConfig): Promise<void> {
    const fallback = this.inlineFallbacks[config.feature];
    if (fallback) {
      try {
        fallback();
        this.loadedPolyfills.add(config.feature);
        console.warn(`[Polyfill] Applied inline fallback for ${config.feature}`);
      } catch (error) {
        console.error(`[Polyfill] Inline fallback failed for ${config.feature}:`, error);
      }
    } else {
      console.warn(`[Polyfill] No inline fallback available for ${config.feature}`);
    }
  }

  private inlineFallbacks: Record<string, () => void> = {
    'custom-elements': () => {
      if (!window.customElements) {
        (window as any).customElements = {
          define: () => console.warn('[Polyfill] Custom Elements not supported - using minimal shim'),
          get: () => undefined,
          whenDefined: () => Promise.resolve(),
          upgrade: () => {}
        };
      }
    },
    
    'resize-observer': () => {
      if (!(window as any).ResizeObserver) {
        (window as any).ResizeObserver = class {
          observe() {}
          unobserve() {}
          disconnect() {}
        };
      }
    },
    
    'intersection-observer': () => {
      if (!(window as any).IntersectionObserver) {
        (window as any).IntersectionObserver = class {
          constructor(_callback: any) {}
          observe() {}
          unobserve() {}
          disconnect() {}
          takeRecords() { return []; }
        };
      }
    },

    'fetch': () => {
      if (typeof fetch === 'undefined') {
        (window as any).fetch = () => {
          console.error('[Polyfill] Fetch API not available');
          return Promise.reject(new Error('Fetch not supported'));
        };
      }
    },

    'es6-promise': () => {
      if (typeof Promise === 'undefined') {
        console.error('[Polyfill] Promise not available - critical feature missing');
      }
    }
  };


  async loadConditionalPolyfill(feature: string): Promise<boolean> {
    const polyfill = this.polyfills.find(p => p.feature === feature);
    if (!polyfill || !polyfill.condition()) {
      return false;
    }

    await this.loadPolyfill(polyfill);
    return true;
  }

  getLoadedPolyfills(): string[] {
    return Array.from(this.loadedPolyfills);
  }

  getPolyfillStatus(): Record<string, boolean> {
    return this.polyfills.reduce((status, polyfill) => {
      status[polyfill.feature] = this.loadedPolyfills.has(polyfill.feature);
      return status;
    }, {} as Record<string, boolean>);
  }
}