Error handling

import { BaseSdkException } from '@pxpio/web-components-sdk';

// Typical shape (do not copy this class into your app)
// ErrorCode: string            // Format: SDK####
// details?: any                // Optional additional error details
// message: string              // Inherited from Error
// name: string                 // Exception class name

import { PxpCheckout, BaseSdkException } from '@pxpio/web-components-sdk';

try {
  const pxpSdk = PxpCheckout.initialize({
    environment: 'test',
    session: sessionData,
    ownerId: 'MERCHANT-1',
    ownerType: 'MerchantGroup', // initialize always sets this value and mutates the config object
    transactionData: { /* ... */ }
  });
  
  const cardNumber = pxpSdk.create('card-number');
  cardNumber.mount('card-number-container');
  
} catch (error) {
  if (error instanceof BaseSdkException) {
    console.error('SDK error code:', error.ErrorCode);
    console.error('Error message:', error.message);
    
    // Handle specific error codes
    switch (error.ErrorCode) {
      case 'SDK0100':
        showError('SDK configuration is missing. Please contact support.');
        break;
      case 'SDK0201':
        showError('Container element not found. Please check your HTML.');
        break;
      case 'SDK0500':
        showError('Network error. Please check your connection and try again.');
        break;
      default:
        showError(`An error occurred: ${error.message}`);
    }
  } else {
    console.error('Unexpected error:', error);
  }
}

// Retry card submit on network errors. Configure onSubmitError when creating card-submit.
let networkRetryCount = 0;
const maxNetworkRetries = 3;

const cardSubmit = pxpSdk.create('card-submit', {
  cardNumberComponent: cardNumber,
  cardExpiryDateComponent: cardExpiry,
  cardCvcComponent: cardCvc,

  onSubmitError: (error) => {
    if (!(error instanceof BaseSdkException)) {
      console.error('Unexpected error:', error);
      return;
    }

    if (error.ErrorCode === 'SDK0500' && networkRetryCount < maxNetworkRetries) {
      networkRetryCount++;
      const delay = Math.min(1000 * Math.pow(2, networkRetryCount), 5000);
      setTimeout(() => cardSubmit.submitAsync(), delay);
      return;
    }

    if (error.ErrorCode === 'SDK0500') {
      showError('Connection error. Please check your internet connection and try again.');
      showRetryButton();
      trackError('network_error', { errorCode: error.ErrorCode });
    }
  }
});

pxpSdk.create('google-pay-button', {
  onError: (error) => {
    if (error instanceof BaseSdkException && error.ErrorCode === 'SDK0500') {
      showError('Connection error. Please check your internet connection and try again.');
    }
  }
});

function diagnoseSession() {
  console.group('🔍 Session Diagnostics');
  
  const session = pxpSdk.getConfig().session;
  
  console.log('Session ID:', session.sessionId ? 'Present' : 'Missing');
  console.log('HMAC Key:', session.hmacKey ? 'Present' : 'Missing');
  console.log('Encryption Key:', session.encryptionKey ? 'Present' : 'Missing');
  
  console.groupEnd();
}

// Store expiry from your backend when creating the session
let sessionExpiresAt = null;

const checkoutMounts = [
  { type: 'card-number', containerId: 'card-number-container', config: cardNumberConfig },
  { type: 'card-expiry-date', containerId: 'card-expiry-container', config: cardExpiryConfig },
  { type: 'card-cvc', containerId: 'card-cvc-container', config: cardCvcConfig },
  { type: 'card-submit', containerId: 'card-submit-container', config: cardSubmitConfig }
];

async function createCheckoutSession() {
  const response = await fetch('/api/sessions', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' }
  }).then(r => r.json());

  sessionExpiresAt = response.expiresAt; // field from your session API
  return response.session; // { sessionId, hmacKey, encryptionKey, allowedFundingTypes }
}

function remountAllComponents(sdk) {
  checkoutMounts.forEach(({ type, containerId, config }) => {
    const component = sdk.create(type, config);
    component.mount(containerId);
    mountedComponents.set(`${type}-${containerId}`, component);
  });
}

async function refreshSessionAndRemount() {
  const newSession = await createCheckoutSession();
  const currentConfig = pxpSdk.getConfig();

  unmountAllComponents(); // same map pattern as Duplicate components

  pxpSdk = PxpCheckout.initialize({
    ...currentConfig,
    session: newSession
  });

  remountAllComponents(pxpSdk);
}

function monitorSessionExpiry(pxpSdkInstance, expiresAt) {
  if (!expiresAt) {
    console.warn('No session expiry time available from backend');
    return;
  }

  const expiresAtDate = new Date(expiresAt);
  const refreshTime = Math.max(expiresAtDate - Date.now() - (5 * 60 * 1000), 0);

  setTimeout(async () => {
    try {
      await refreshSessionAndRemount();
      monitorSessionExpiry(pxpSdk, sessionExpiresAt);
    } catch (error) {
      console.error('Failed to refresh session:', error);
      showError('Your session has expired. Please refresh the page.');
    }
  }, refreshTime);
}

const cardSubmit = pxpSdk.create('card-submit', {
  onSubmitError: async (error) => {
    if (!(error instanceof BaseSdkException)) {
      console.error('Unexpected error:', error);
      return;
    }

    if (error.message.toLowerCase().includes('session')) {
      try {
        await refreshSessionAndRemount();
        showMessage('Session refreshed. Please try your payment again.');
      } catch (refreshError) {
        showError('Session expired. Please refresh the page.');
        setTimeout(() => window.location.reload(), 3000);
      }
    }
  }
});

// Pass the session object from your backend to the SDK without modification
async function initializeCheckout() {
  const { session } = await fetch('/api/sessions', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ amount, currency })
  }).then(r => r.json());

  return PxpCheckout.initialize({
    environment: 'test',
    ownerId: 'MERCHANT-1',
    ownerType: 'MerchantGroup',
    session,
    transactionData: { /* ... */ }
  });
}

function validateSdkConfig(config) {
  const errors = [];

  if (!config?.environment) {
    errors.push('Environment is required');
  } else if (!['test', 'live'].includes(config.environment)) {
    errors.push('Environment must be "test" or "live"');
  }

  if (!config?.session) {
    errors.push('Session is required');
  } else {
    if (!config.session.sessionId?.trim()) {
      errors.push('Session ID is required');
    }
    if (!config.session.hmacKey?.trim()) {
      errors.push('Session HMAC key is required');
    }
    if (!config.session.encryptionKey?.trim()) {
      errors.push('Session encryption key is required for card secured fields');
    }
  }

  if (!config?.transactionData) {
    errors.push('transactionData is required');
  } else if (!config.transactionData.intent?.card) {
    errors.push('transactionData.intent.card is required for card components');
  }

  if (!config?.ownerId?.trim()) {
    errors.push('ownerId is required');
  }

  return { valid: errors.length === 0, errors };
}

function initializePaymentSDK(config) {
  const validation = validateSdkConfig(config);

  if (!validation.valid) {
    console.error('SDK configuration invalid:', validation.errors);
    showError('Payment system configuration error. Please contact support.');
    logConfigurationError(validation.errors);
    return null;
  }

  try {
    const pxpSdk = PxpCheckout.initialize(config);
    console.log('SDK initialized successfully');
    return pxpSdk;
  } catch (error) {
    console.error('SDK initialisation failed:', error);

    if (error instanceof BaseSdkException && error.ErrorCode?.startsWith('SDK01')) {
      showError('Payment system setup error. Please refresh the page.');
    } else if (error instanceof Error) {
      showError(error.message);
    }

    return null;
  }
}

// Progressive payment method availability
class PaymentMethodManager {
  constructor() {
    this.availableMethods = new Set();
    this.failedMethods = new Set();
  }
  
  async checkAvailability() {
    console.log('Checking payment method availability...');
    
    // Check card
    if (this.isCardAvailable()) {
      this.availableMethods.add('card');
      this.showPaymentMethod('card');
    } else {
      this.failedMethods.add('card');
      this.hidePaymentMethod('card');
    }
    
    // Check Google Pay
    try {
      await this.checkGooglePay();
      this.availableMethods.add('google-pay');
      this.showPaymentMethod('google-pay');
    } catch (error) {
      console.warn('Google Pay not available:', error);
      this.failedMethods.add('google-pay');
      this.hidePaymentMethod('google-pay');
    }
    
    // Check Apple Pay
    try {
      await this.checkApplePay();
      this.availableMethods.add('apple-pay');
      this.showPaymentMethod('apple-pay');
    } catch (error) {
      console.warn('Apple Pay not available:', error);
      this.failedMethods.add('apple-pay');
      this.hidePaymentMethod('apple-pay');
    }
    
    // Check PayPal
    if (this.isPayPalAvailable()) {
      this.availableMethods.add('paypal');
      this.showPaymentMethod('paypal');
    } else {
      this.failedMethods.add('paypal');
      this.hidePaymentMethod('paypal');
    }
    
    console.log('Available payment methods:', Array.from(this.availableMethods));
    
    if (this.availableMethods.size === 0) {
      this.showFallbackMessage();
    }
  }
  
  isCardAvailable() {
    const session = pxpSdk.getConfig().session;
    return !!session?.allowedFundingTypes?.cards;
  }
  
  async checkGooglePay() {
    if (!window.google?.payments?.api) {
      throw new Error('Google Pay API not loaded');
    }
    
    const session = pxpSdk.getConfig().session;
    if (!session?.allowedFundingTypes?.wallets?.googlePay?.merchantId) {
      throw new Error('Google Pay not configured');
    }
    
    const paymentsClient = new google.payments.api.PaymentsClient({
      environment: pxpSdk.getConfig().environment === 'live' ? 'PRODUCTION' : 'TEST'
    });
    
    const response = await paymentsClient.isReadyToPay({
      apiVersion: 2,
      apiVersionMinor: 0,
      allowedPaymentMethods: [{
        type: 'CARD',
        parameters: {
          allowedCardNetworks: ['VISA', 'MASTERCARD'],
          allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS']
        }
      }]
    });
    
    if (!response.result) {
      throw new Error('Google Pay not ready');
    }
  }
  
  async checkApplePay() {
    if (!window.ApplePaySession) {
      throw new Error('Apple Pay not supported');
    }
    
    const session = pxpSdk.getConfig().session;
    if (!session?.allowedFundingTypes?.wallets?.applePay?.merchantId) {
      throw new Error('Apple Pay not configured');
    }
    
    if (!ApplePaySession.canMakePayments()) {
      throw new Error('Apple Pay not available on device');
    }
  }
  
  isPayPalAvailable() {
    const session = pxpSdk.getConfig().session;
    return !!session?.allowedFundingTypes?.wallets?.paypal?.allowedFundingOptions;
  }
  
  showPaymentMethod(method) {
    const element = document.getElementById(`${method}-container`);
    if (element) element.style.display = 'block';
  }
  
  hidePaymentMethod(method) {
    const element = document.getElementById(`${method}-container`);
    if (element) element.style.display = 'none';
  }
  
  showFallbackMessage() {
    const message = document.createElement('div');
    message.className = 'payment-unavailable-message';
    message.innerHTML = `
      <p>Payment services are currently unavailable.</p>
      <p>Please try again later or contact support.</p>
    `;
    document.getElementById('payment-container').appendChild(message);
  }
}

const paymentManager = new PaymentMethodManager();
paymentManager.checkAvailability();

try {
  const googlePay = pxpSdk.create('google-pay-button', config);
  googlePay.mount('google-pay-container');
} catch (error) {
  if (error instanceof BaseSdkException) {
    if (error.ErrorCode === 'SDK0110') {
      console.warn('Google Pay not in allowed funding types');
      hidePaymentMethod('google-pay');
      showMessage('Google Pay is not available. Please use an alternative payment method.');
      return;
    }
    if (error.ErrorCode === 'SDK0201') {
      showError('Payment form configuration error. Please refresh the page.');
      return;
    }
  }
  console.error('Unexpected error:', error);
}

function diagnoseComponentRendering(componentType, containerId) {
  console.group(`🔍 ${componentType} Component Diagnostics`);
  
  // Check 1: Verify DOM is ready
  if (document.readyState !== 'complete' && document.readyState !== 'interactive') {
    console.warn('⚠️ DOM not ready');
  } else {
    console.log('✅ DOM ready');
  }
  
  // Check 2: Verify container exists
  const container = document.getElementById(containerId);
  if (!container) {
    console.error('❌ Container not found:', containerId);
  } else {
    console.log('✅ Container exists');
    
    // Check container visibility
    const styles = window.getComputedStyle(container);
    console.log('Container styles:', {
      display: styles.display,
      visibility: styles.visibility,
      width: styles.width,
      height: styles.height
    });
    
    if (styles.display === 'none') {
      console.warn('⚠️ Container has display:none');
    }
    if (parseInt(styles.width) === 0) {
      console.warn('⚠️ Container has zero width');
    }
  }
  
  // Check 3: Verify SDK is initialized
  if (typeof pxpSdk === 'undefined') {
    console.error('❌ SDK not initialized');
  } else {
    console.log('✅ SDK initialized');
  }
  
  console.groupEnd();
}

// Use before component creation
diagnoseComponentRendering('card-number', 'card-number-container');

// Solution 1: Ensure proper timing
function createComponentSafely(componentType, containerId, config) {
  // Wait for DOM to be ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      createComponentSafely(componentType, containerId, config);
    });
    return;
  }
  
  // Verify container exists
  const container = document.getElementById(containerId);
  if (!container) {
    console.error(`Container ${containerId} not found`);
    return;
  }
  
  // Verify SDK is initialized
  if (!pxpSdk) {
    console.error('SDK not initialized');
    return;
  }
  
  // Create and mount component
  try {
    const component = pxpSdk.create(componentType, config);
    component.mount(containerId);
    console.log(`${componentType} component mounted successfully`);
    return component;
  } catch (error) {
    console.error(`Failed to create ${componentType}:`, error);

    if (error instanceof BaseSdkException && error.ErrorCode === 'SDK0201') {
      showError('Payment form configuration error. Please refresh the page.');
      return;
    }
    console.error('Unexpected error:', error);
  }
}

// Solution 2: Framework-specific implementations

// React
function PaymentComponent() {
  const containerRef = useRef(null);
  const componentRef = useRef(null);
  
  useEffect(() => {
    if (!pxpSdk || !containerRef.current) return;
    
    try {
      const component = pxpSdk.create('card-number', config);
      component.mount('card-number-container');
      componentRef.current = component;
      
      console.log('Component mounted');
    } catch (error) {
      console.error('Component mount failed:', error);
    }
    
    // Cleanup
    return () => {
      if (componentRef.current) {
        componentRef.current.unmount();
        console.log('Component unmounted');
      }
    };
  }, [pxpSdk]);
  
  return <div ref={containerRef} id="card-number-container" />;
}

// Vue
export default {
  mounted() {
    if (!this.pxpSdk) {
      console.error('SDK not available');
      return;
    }
    
    try {
      this.component = this.pxpSdk.create('card-number', this.config);
      this.component.mount('card-number-container');
      console.log('Component mounted');
    } catch (error) {
      console.error('Component mount failed:', error);
    }
  },
  beforeUnmount() {
    if (this.component) {
      this.component.unmount();
      console.log('Component unmounted');
    }
  }
};

// Track mounted components
const mountedComponents = new Map();

function mountComponentOnce(componentType, containerId, config) {
  const key = `${componentType}-${containerId}`;
  
  // Check if already mounted
  if (mountedComponents.has(key)) {
    console.warn(`Component ${componentType} already mounted in ${containerId}`);
    return mountedComponents.get(key);
  }
  
  // Create and mount
  try {
    const component = pxpSdk.create(componentType, config);
    component.mount(containerId);
    
    // Track mounted component
    mountedComponents.set(key, component);
    
    console.log(`${componentType} mounted in ${containerId}`);
    return component;
  } catch (error) {
    console.error(`Failed to mount ${componentType}:`, error);
    return null;
  }
}

function unmountComponent(componentType, containerId) {
  const key = `${componentType}-${containerId}`;
  const component = mountedComponents.get(key);
  
  if (component) {
    component.unmount();
    mountedComponents.delete(key);
    console.log(`${componentType} unmounted from ${containerId}`);
  }
}

// Clean up all components
function unmountAllComponents() {
  mountedComponents.forEach((component, key) => {
    component.unmount();
    console.log(`Unmounted ${key}`);
  });
  mountedComponents.clear();
}

const cardSubmit = pxpSdk.create('card-submit', {
  cardNumberComponent: cardNumber,
  cardExpiryDateComponent: cardExpiry,
  cardCvcComponent: cardCvc,
  
  onSubmitError: (error: BaseSdkException) => {
    if (!(error instanceof BaseSdkException)) {
      console.error('Unexpected error:', error);
      return;
    }

    if (error.ErrorCode === 'SDK0304') {
      console.error('Token vault error:', error.message);
      showError('Unable to process payment at this time. Please try again.');
      logError(error, 'token_vault_failure');
      enableRetryButton();
      
      trackError('token_vault_error', {
        errorCode: error.ErrorCode,
        timestamp: Date.now()
      });
    } else if (error.ErrorCode === 'SDK0305') {
      console.error('BIN range lookup failed:', error.message);
      showError('Unable to process payment at this time. Please try again.');
      logError(error, 'bin_range_lookup_failure');
      enableRetryButton();
    }
  }
});

function diagnose3DSSetup() {
  console.group('🔒 3DS Diagnostics');
  
  // Check CSP settings
  const cspMeta = document.querySelector('meta[http-equiv="Content-Security-Policy"]');
  if (cspMeta) {
    console.log('CSP found:', cspMeta.content);
    
    // Check if frame-src allows 3DS servers
    if (!cspMeta.content.includes('frame-src')) {
      console.warn('⚠️ No frame-src directive in CSP');
    }
  } else {
    console.log('No CSP meta tag found');
  }
  
  // Check if iframes are blocked
  try {
    const testIframe = document.createElement('iframe');
    testIframe.src = 'about:blank';
    document.body.appendChild(testIframe);
    console.log('✅ Iframes allowed');
    document.body.removeChild(testIframe);
  } catch (error) {
    console.error('❌ Iframes blocked:', error);
  }
  
  // Check HTTPS
  if (location.protocol !== 'https:') {
    console.warn('⚠️ 3DS requires HTTPS');
  }
  
  console.groupEnd();
}

// Solution 1: Configure CSP for 3DS
// Add to HTML <head> or via HTTP header
const cspContent = `
  default-src 'self';
  frame-src 'self' https://*.3dsecure.io https://centinelapi.cardinalcommerce.com;
  script-src 'self' 'unsafe-inline' https://pay.google.com;
  style-src 'self' 'unsafe-inline';
`.trim().replace(/\s+/g, ' ');

// Solution 2: Handle 3DS authentication callbacks
function isFailedAuthentication(result) {
  return result && 'errorReason' in result;
}

const cardSubmitConfig = {
  onPostInitiateAuthentication: (result) => {
    if (isFailedAuthentication(result)) {
      console.error('3DS pre-initiate failed:', result.errorReason);
      showError('Card authentication setup failed. Please try again.');
      return;
    }
    showLoadingIndicator('Verifying your card...');
  },

  onPostAuthentication: (result) => {
    if (isFailedAuthentication(result)) {
      hideLoadingIndicator();
      showError('Authentication failed. Please try again or use a different card.');
      return;
    }
    showLoadingIndicator('Completing payment...');
  },

  onSubmitError: (error) => {
    // SDK04XX = invalid 3DS configuration on the auth/submit request (not iframe/CSP load failures)
    if (error instanceof BaseSdkException && error.ErrorCode?.startsWith('SDK04')) {
      console.error('3DS configuration error:', error);
      showError('Card authentication setup failed. Please try again or contact support.');
    }
  }
};

function isFailedAuthentication(result) {
  return result && 'errorReason' in result;
}

const cardSubmitConfig = {
  onPostAuthentication: (result) => {
    if (isFailedAuthentication(result)) {
      showError('Your bank declined authentication. Please try a different card or contact your bank.');
      enableAlternativePaymentMethods();
      return;
    }
    showLoadingIndicator('Completing payment...');
  },

  onSubmitError: (error) => {
    if (!(error instanceof BaseSdkException)) {
      console.error('Unexpected error:', error);
      return;
    }

    if (error.ErrorCode === 'SDK0503') {
      showError('Authentication rejected by your bank. Please use a different card.');
    } else if (error.ErrorCode === 'SDK0505') {
      showError('Card authentication could not be started. Please try again or use a different card.');
    } else if (error.ErrorCode === 'SDK0504') {
      showError('Additional authentication required. Please contact support.');
      logError(error, 'sca_exemption_required');
    }
  }
};

function isFailedAuthentication(result) {
  return result && 'errorReason' in result;
}

let authChallengeTimeout;

const submitConfig = {
  onPreAuthentication: async () => {
    showMessage('Please complete authentication when prompted');

    authChallengeTimeout = setTimeout(() => {
      console.warn('3DS challenge timeout');
      showError('Authentication timed out. Please try again.');
      enableRetryButton();
    }, 5 * 60 * 1000);

    return null; // or return your InitiateIntegratedAuthenticationData
  },

  onPostAuthentication: (result) => {
    if (authChallengeTimeout) {
      clearTimeout(authChallengeTimeout);
      authChallengeTimeout = null;
    }

    if (isFailedAuthentication(result)) {
      showError('Authentication was not completed. Please try again.');
    }
  },

  onSubmitError: (error) => {
    if (error instanceof BaseSdkException && error.ErrorCode === 'SDK0503') {
      showError('Authentication timed out or was cancelled. Please try again.');
      enableRetryButton();
    }
  }
};

async function diagnoseCorsAndNetwork(backendUrl = '/api/sessions') {
  console.group('🌐 CORS and network diagnostics');

  console.log('Browser online:', navigator.onLine ? '✅' : '❌');

  try {
    const response = await fetch(backendUrl, { method: 'HEAD' });
    const reachable = response.ok || response.status === 405;
    console.log('Backend reachable:', reachable ? '✅' : `❌ Status ${response.status}`);
  } catch (error) {
    console.error('❌ Backend request blocked:', error.message);
    if (error.message.includes('CORS') || error.message.includes('Failed to fetch')) {
      console.error('CORS or network error — allow this page origin on your backend');
    }
  }

  console.log('For SDK0500 on card fields or payments, check Network for blocked requests to PXP API hosts (e.g. api-services.pxp.io).');

  if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
    console.warn('⚠️ Page served over HTTP — API calls may be blocked');
  }

  console.groupEnd();
}

function checkBrowserCompatibility() {
  const issues = [];

  if (location.protocol !== 'https:' && location.hostname !== 'localhost') {
    issues.push({
      severity: 'critical',
      message: 'HTTPS required for payment processing',
      fix: 'Serve your site over HTTPS'
    });
  }

  if (typeof Promise === 'undefined') {
    issues.push({ severity: 'critical', message: 'Browser does not support Promises', fix: 'Use a modern browser' });
  }

  if (typeof fetch === 'undefined') {
    issues.push({ severity: 'critical', message: 'Browser does not support Fetch API', fix: 'Use a modern browser or add a polyfill' });
  }

  return {
    supported: issues.filter(i => i.severity === 'critical').length === 0,
    issues: issues
  };
}

const compatibility = checkBrowserCompatibility();
if (!compatibility.supported) {
  console.error('Browser compatibility issues:', compatibility.issues);
  const criticalIssues = compatibility.issues.filter(i => i.severity === 'critical');
  if (criticalIssues.length > 0) {
    showError(`Your browser is not supported. ${criticalIssues[0].fix}`);
  }
}

// Centralised error monitoring
class PaymentErrorMonitor {
  constructor() {
    this.errors = [];
  }
  
  captureError(error, context) {
    if (!(error instanceof BaseSdkException)) {
      console.error('Unexpected error:', error);
      return;
    }

    const errorData = {
      timestamp: new Date().toISOString(),
      errorCode: error.ErrorCode,
      errorName: error.name,
      message: error.message,
      stack: error.stack,
      context: context,
      userAgent: navigator.userAgent,
      url: location.href,
      sessionId: this.getSessionId()
    };
    
    this.errors.push(errorData);
    
    // Send to monitoring service
    this.sendToMonitoring(errorData);
    
    // Track in analytics
    this.trackInAnalytics(errorData);
    
    // Alert on critical errors
    if (this.isCritical(error)) {
      this.alertOpsTeam(errorData);
    }
  }
  
  isCritical(error) {
    if (!(error instanceof BaseSdkException)) return false;

    // Network errors
    if (error.ErrorCode === 'SDK0500') return true;
    
    // Configuration errors
    if (error.ErrorCode?.startsWith('SDK01')) return true;
    
    // Payment method load failures
    const loadFailures = ['SDK0600', 'SDK0704', 'SDK1200'];
    if (loadFailures.includes(error.ErrorCode)) return true;
    
    return false;
  }
  
  sendToMonitoring(data) {
    // Example: Sentry
    if (window.Sentry) {
      Sentry.captureException(new Error(data.message), {
        extra: data,
        tags: {
          errorCode: data.errorCode,
          component: data.context.component
        }
      });
    }
    
    // Example: Custom logging endpoint
    fetch('/api/errors', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    }).catch(err => console.error('Failed to log error:', err));
  }
  
  trackInAnalytics(data) {
    // Example: Google Analytics
    if (window.gtag) {
      gtag('event', 'payment_error', {
        error_code: data.errorCode,
        error_name: data.errorName,
        component: data.context.component
      });
    }
    
    // Example: Mixpanel
    if (window.mixpanel) {
      mixpanel.track('Payment Error', {
        'Error Code': data.errorCode,
        'Error Name': data.errorName,
        'Component': data.context.component
      });
    }
  }
  
  alertOpsTeam(data) {
    // Send critical errors to operations team
    fetch('/api/alerts/critical', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        type: 'payment_error',
        severity: 'critical',
        data: data
      })
    });
  }
  
  getSessionId() {
    return pxpSdk?.getConfig()?.session?.sessionId || 'unknown';
  }
  
  getErrorReport() {
    return {
      totalErrors: this.errors.length,
      errorsByCode: this.groupBy(this.errors, 'errorCode'),
      errorsByComponent: this.groupBy(this.errors, 'context.component'),
      recentErrors: this.errors.slice(-10)
    };
  }
  
  groupBy(array, key) {
    return array.reduce((acc, item) => {
      const value = key.split('.').reduce((obj, k) => obj?.[k], item);
      acc[value] = (acc[value] || 0) + 1;
      return acc;
    }, {});
  }
}

// Initialize global error monitor
const errorMonitor = new PaymentErrorMonitor();

// Use in component configurations
const cardSubmitConfig = {
  onSubmitError: (error) => {
    errorMonitor.captureError(error, { component: 'card-submit' });
    handleCardError(error);
  }
};

const googlePayConfig = {
  onError: (error) => {
    errorMonitor.captureError(error, { component: 'google-pay' });
    handleGooglePayError(error);
  }
};

// Error message mapping
const errorMessages = {
  // Network errors
  'SDK0500': 'Connection error. Please check your internet connection and try again.',
  
  // Configuration errors
  'SDK0100': 'Payment system setup error. Please refresh the page.',
  'SDK0107': 'Card payments are not available. Please use an alternative payment method.',
  'SDK0108': 'PayPal is not available. Please use an alternative payment method.',
  'SDK0109': 'Apple Pay is not available. Please use an alternative payment method.',
  'SDK0110': 'Google Pay is not available. Please use an alternative payment method.',
  
  // Component errors
  'SDK0200': 'Invalid component configuration. Please refresh the page.',
  'SDK0201': 'Payment form not initialized. Please refresh the page.',
  'SDK0202': 'No payment methods available. Please use an alternative payment method.',

  // Transaction / 3DS authentication errors
  'SDK0503': 'Authentication was rejected, failed, or cancelled. Please try again or use a different card.',
  'SDK0504': 'Additional authentication required. Please contact support.',
  'SDK0505': 'Card authentication could not be started. Please try again or use a different card.',

  // Payment method specific
  'SDK0600': 'Unable to load Apple Pay. Please use an alternative payment method.',
  'SDK0704': 'Unable to load Google Pay. Please use an alternative payment method.',
  'SDK0801': 'Unable to load PayPal. Please use an alternative payment method.',
  
  // Generic fallback
  'default': 'An error occurred. Please try again or contact support.'
};

function getUserFriendlyMessage(error) {
  if (error instanceof BaseSdkException && error.ErrorCode && errorMessages[error.ErrorCode]) {
    return errorMessages[error.ErrorCode];
  }
  
  // Check for specific keywords in error message
  const message = (error?.message || '').toLowerCase();
  
  if (message.includes('session') && message.includes('expired')) {
    return 'Your session has expired. Please refresh the page.';
  }
  
  if (message.includes('network') || message.includes('connection')) {
    return 'Connection error. Please check your internet and try again.';
  }
  
  if (message.includes('declined')) {
    return 'Payment declined. Please try a different payment method.';
  }
  
  return errorMessages.default;
}

// Display error to user
function showError(error) {
  const message = typeof error === 'string' ? error : getUserFriendlyMessage(error);
  
  // Create error element
  const errorDiv = document.createElement('div');
  errorDiv.className = 'payment-error-message';
  errorDiv.innerHTML = `
    <div class="error-icon">⚠️</div>
    <div class="error-text">${message}</div>
    <button class="error-close" onclick="this.parentElement.remove()">×</button>
  `;
  
  // Add to page
  const container = document.getElementById('error-container') || document.body;
  container.appendChild(errorDiv);
  
  // Auto-dismiss after 10 seconds
  setTimeout(() => {
    errorDiv.remove();
  }, 10000);
}

// ❌ Bad - unhandled error
const cardNumber = pxpSdk.create('card-number');
cardNumber.mount('card-number-container'); // May throw

// ✅ Good - error handling
try {
  const cardNumber = pxpSdk.create('card-number');
  cardNumber.mount('card-number-container');
} catch (error) {
  if (error instanceof BaseSdkException) {
    console.error('Component error:', error.ErrorCode, error.message);
    handleComponentError(error);
  } else {
    console.error('Unexpected error:', error);
  }
}

// ✅ Good - programmatic handling with user-friendly messages
if (error instanceof BaseSdkException) {
  // Use error code for logic
  if (error.ErrorCode === 'SDK0500') {
    // Network error - allow retry
    showError('Connection issue. Please check your internet and try again.');
    enableRetryButton();
  } else if (error.ErrorCode === 'SDK0201') {
    // Container not found - critical error
    showError('Payment form error. Please refresh the page.');
    logCriticalError(error);
  } else {
    // Use message for user feedback
    showError(error.message);
  }
}

let networkRetryCount = 0;
const maxRetries = 3;

const cardSubmit = pxpSdk.create('card-submit', {
  cardNumberComponent: cardNumber,
  cardExpiryDateComponent: cardExpiry,
  cardCvcComponent: cardCvc,

  onPostAuthorisation: (result) => {
    networkRetryCount = 0;
    handlePaymentSuccess(result);
  },

  onSubmitError: (error) => {
    if (error instanceof BaseSdkException && error.ErrorCode === 'SDK0500' && networkRetryCount < maxRetries) {
      networkRetryCount++;
      console.log(`Network error. Retrying... (${networkRetryCount}/${maxRetries})`);
      const delay = Math.pow(2, networkRetryCount) * 1000;
      setTimeout(() => cardSubmit.submitAsync(), delay);
      return;
    }
    handleSubmitError(error);
  }
});

function logError(error: BaseSdkException, context: string) {
  // Send to error tracking service (Sentry example)
  if (window.Sentry) {
    Sentry.captureException(error, {
      tags: {
        errorCode: error.ErrorCode,
        context: context
      },
      extra: {
        errorMessage: error.message,
        errorName: error.name
      }
    });
  }
  
  // Log to console in development
  if (process.env.NODE_ENV === 'development') {
    console.error(`[${context}] ${error.ErrorCode}: ${error.message}`);
  }
  
  // Track in analytics
  if (window.gtag) {
    gtag('event', 'sdk_error', {
      error_code: error.ErrorCode,
      error_message: error.message,
      context: context,
      url: window.location.href
    });
  }
}

function isSessionError(error: BaseSdkException): boolean {
  return error.message.toLowerCase().includes('session') ||
         error.message.toLowerCase().includes('expired');
}

async function handleSessionError(error: BaseSdkException, currentSdk: PxpCheckout): Promise<PxpCheckout | null> {
  if (isSessionError(error)) {
    showMessage('Your session has expired. Creating new session...');
    
    try {
      // refreshSessionAndRemount is defined in Session expired mid-checkout
      await refreshSessionAndRemount();
      showMessage('Session refreshed. Please try your payment again.');
      return pxpSdk;
      
    } catch (refreshError) {
      console.error('Failed to refresh session:', refreshError);
      showError('Unable to refresh session. Please reload the page.');
      return null;
    }
  }
  return currentSdk;
}

// In development, log all errors including unhandled rejections
if (process.env.NODE_ENV === 'development') {
  window.addEventListener('unhandledrejection', (event) => {
    if (event.reason instanceof BaseSdkException) {
      console.group('🔴 Unhandled SDK Error');
      console.error('Code:', event.reason.ErrorCode);
      console.error('Message:', event.reason.message);
      console.error('Name:', event.reason.name);
      console.error('Stack:', event.reason.stack);
      console.groupEnd();
      
      // Prevent default handling
      event.preventDefault();
    }
  });
  
  // Log all SDK operations
  console.log('🔧 Debug mode enabled for PXP SDK');
}

import { BaseSdkException, SdkErrorCodes } from '@pxpio/web-components-sdk';

// Test error scenarios in development
if (process.env.NODE_ENV === 'development') {
  const urlParams = new URLSearchParams(window.location.search);
  
  // Simulate network error: ?test=network-error
  if (urlParams.get('test') === 'network-error') {
    throw new BaseSdkException(SdkErrorCodes.NETWORK_ERROR);
  }
  
  // Simulate authentication failure: ?test=auth-failed
  if (urlParams.get('test') === 'auth-failed') {
    throw new BaseSdkException(SdkErrorCodes.TRANSACTION_AUTHENTICATION_FAILED);
  }
  
  // Simulate missing session id at initialize(): ?test=missing-session-id
  // This throws SDK0103. For mid-checkout expiry, see Session expired mid-checkout.
  if (urlParams.get('test') === 'missing-session-id') {
    throw new BaseSdkException(SdkErrorCodes.SDK_CONFIG_SESSION_ID_EMPTY);
  }
  
  // Simulate container not found: ?test=no-container
  if (urlParams.get('test') === 'no-container') {
    throw new BaseSdkException(SdkErrorCodes.COMPONENT_CONTAINER_NOT_FOUND, { id: 'card-number-container' });
  }
}

function debugPaymentSDK() {
  console.group('🔍 PXP SDK Debug Info');
  
  // SDK initialisation
  if (typeof pxpSdk === 'undefined') {
    console.error('❌ SDK not initialized');
    console.groupEnd();
    return;
  }
  console.log('✅ SDK initialized');
  
  // Session info
  const config = pxpSdk.getConfig();
  const session = config.session;
  
  console.group('Session');
  console.log('Session ID:', session.sessionId ? '✅ Present' : '❌ Missing');
  console.log('HMAC Key:', session.hmacKey ? '✅ Present' : '❌ Missing');
  console.log('Encryption Key:', session.encryptionKey ? '✅ Present' : '❌ Missing');
  console.log('Environment:', config.environment || 'unknown');
  console.groupEnd();
  
  // Payment methods
  console.group('Payment methods');
  const fundingTypes = session.allowedFundingTypes || {};
  const wallets = fundingTypes.wallets || {};
  console.log('Card:', fundingTypes.cards ? '✅ Enabled' : '❌ Disabled');
  console.log('PayPal:', wallets.paypal?.allowedFundingOptions ? '✅ Enabled' : '❌ Disabled');
  console.log('Apple Pay:', wallets.applePay?.merchantId ? '✅ Enabled' : '❌ Disabled');
  console.log('Google Pay:', wallets.googlePay?.merchantId ? '✅ Enabled' : '❌ Disabled');
  console.groupEnd();
  
  // Browser environment
  console.group('Environment');
  console.log('HTTPS:', location.protocol === 'https:' ? '✅' : '❌');
  console.log('User agent:', navigator.userAgent);
  console.log('Viewport:', `${window.innerWidth}x${window.innerHeight}`);
  console.groupEnd();
  
  console.groupEnd();
}

// Call from browser console: debugPaymentSDK()
window.debugPaymentSDK = debugPaymentSDK;