Events

const cardSubmit = sdk.create('card-submit', {
  onPostAuthorisation: (submitResult) => {
    if (submitResult.state === 'Authorised') {
      // Payment successful
      console.log('Payment authorised successfully');
      console.log('Transaction ID:', submitResult.transactionId);
      
      // Update inventory
      updateInventory(submitResult.transactionId);
      
      // Send confirmation email
      sendConfirmationEmail(customerEmail, submitResult.transactionId);
      
      // Track analytics
      trackPurchase(submitResult.transactionId, submitResult.correlationId);
      
      // Redirect to success page
      window.location.href = `/payment-success?txn=${submitResult.transactionId}`;
    } else if (submitResult.state === 'Declined') {
      console.error('Payment declined:', submitResult);
      handleDeclinedPayment(submitResult);
    } else if (submitResult.state === 'Failed') {
      console.error('Payment failed:', submitResult);
      showErrorMessage('Payment failed. Please try again or use a different payment method.');
    } else if (submitResult.state === 'Pending') {
      console.log('Payment pending further processing');
      showMessage('Payment is being processed. You will receive confirmation shortly.', 'info');
    }
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPreAuthorisation: async (data, threeDSAuthenticationData) => {
    console.log('Pre-authorisation data:', data);
    
    // Perform pre-payment validation
    const deviceSessionId = await getKountSessionId();
    const isHighRisk = await checkCustomerRiskProfile();
    const customerTier = await getCustomerTier();
    
    // Get billing address if AVS is enabled
    const billingAddress = await getBillingAddress();
    
    return {
      addressVerification: billingAddress ? {
        countryCode: billingAddress.countryCode,
        houseNumberOrName: billingAddress.address,
        postalCode: billingAddress.postalCode,
        city: billingAddress.city,
        state: billingAddress.state
      } : undefined,
      riskScreeningData: {
        deviceSessionId: deviceSessionId,
        performRiskScreening: true,
        customData: {
          customerTier: customerTier,
          orderType: 'ecommerce',
          previousTransactionCount: await getPreviousTransactionCount(),
          riskScore: isHighRisk ? 'high' : 'low'
        }
      },
      threeDSecureData: threeDSAuthenticationData ? {
        authenticationId: threeDSAuthenticationData.authenticationId,
        cavv: threeDSAuthenticationData.cavv,
        eci: threeDSAuthenticationData.eci,
        xid: threeDSAuthenticationData.xid,
        version: threeDSAuthenticationData.version
      } : undefined
    };
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPreTokenisation: () => {
    // Check if customer consented to save card
    const saveCardConsent = document.getElementById('save-card-checkbox')?.checked;
    
    if (!saveCardConsent) {
      console.log('Customer declined to save card - skipping tokenisation');
      return false;
    }
    
    // Additional validation
    const isValidForStorage = validateCardForStorage();
    if (!isValidForStorage) {
      console.log('Card not suitable for storage - skipping tokenisation');
      return false;
    }
    
    console.log('Proceeding with card tokenisation');
    return true;
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPostTokenisation: (tokenData) => {
    console.log('Card tokenised successfully:', tokenData);
    
    // Store token for future use
    saveTokenToCustomerAccount({
      tokenId: tokenData.gatewayTokenId,
      maskedNumber: tokenData.maskedPrimaryAccountNumber,
      scheme: tokenData.scheme,
      expiryDate: tokenData.expiryDate,
      customerId: getCurrentCustomerId()
    });
    
    // Update UI to show saved card
    updateSavedPaymentMethodsUI(tokenData);
    
    // Track tokenisation event
    trackEvent('card-tokenized', {
      scheme: tokenData.scheme,
      timestamp: new Date().toISOString()
    });
    
    // Show success message
    showMessage('Payment method saved successfully', 'success');
  }
});

const cardNumberComponent = sdk.create('card-number', {
  onBlur: (event) => {
    console.log('Card number field blurred:', event.target.value);
    
    // Validate card number on blur
    if (event.target.value) {
      const isValid = validateCardNumber(event.target.value);
      if (!isValid) {
        showFieldError('card-number', 'Please enter a valid card number');
      } else {
        clearFieldError('card-number');
      }
    }
    
    // Track field interaction
    trackFieldInteraction('card-number', 'blur', {
      hasValue: !!event.target.value,
      timestamp: new Date().toISOString()
    });
  }
});

const cardNumberComponent = sdk.create('card-number', {
  onCardBrandCannotRecognised: (event) => {
    console.log('Card brand could not be recognised for:', event.target.value);
    
    // Show error message for unsupported card
    showFieldError('card-number', 'This card type is not supported. Please use Visa, MasterCard, or American Express.');
    
    // Log unsupported card attempt
    trackEvent('unsupported-card-attempted', {
      cardNumberPrefix: event.target.value.substring(0, 6),
      timestamp: new Date().toISOString()
    });
    
    // Show alternative payment methods
    showAlternativePaymentMethods();
    
    // Disable submit button until valid card is entered
    disableSubmitButton();
  }
});

const cardNumberComponent = sdk.create('card-number', {
  onCardBrandDetected: (event) => {
    const cardBrand = event.detail.cardBrand;
    const isAccepted = event.detail.isCardBrandAccept;
    
    console.log(`Card brand detected: ${cardBrand.brand}`, isAccepted);
    
    // Update card brand logo
    updateCardBrandLogo(cardBrand.brand);
    
    // Check if card brand is accepted
    if (!isAccepted) {
      showFieldError('card-number', `${cardBrand.displayName} cards are not accepted. Please use a different card.`);
      disableSubmitButton();
    } else {
      clearFieldError('card-number');
      enableSubmitButton();
      
      // Show brand-specific benefits
      showCardBrandBenefits(cardBrand.brand);
    }
    
    // Apply brand-specific validation
    applyBrandSpecificValidation(cardBrand.brand);
    
    // Track card brand usage
    trackEvent('card-brand-detected', {
      brand: cardBrand.brand,
      accepted: isAccepted,
      timestamp: new Date().toISOString()
    });
  }
});

const cardNumberComponent = sdk.create('card-number', {
  onChange: (event) => {
    console.log('Card number changed:', event.target.value);
    
    // Update card brand display
    if (event.detail.cardBrand) {
      updateCardBrandDisplay(event.detail.cardBrand);
    }
    
    // Progressive validation
    if (event.target.value.length >= 4) {
      const isValid = event.detail.isValid;
      if (isValid) {
        clearFieldError('card-number');
        showFieldSuccess('card-number');
      } else {
        showFieldError('card-number', 'Please enter a valid card number');
      }
    }
    
    // Enable submit button when all fields are filled
    checkFormCompletion();
    
    // Track input progress
    trackFieldProgress('card-number', {
      length: event.target.value.length,
      isValid: event.detail.isValid,
      timestamp: new Date().toISOString()
    });
  }
});

const cardExpiryComponent = sdk.create('card-expiry-date', {
  onChange: (event) => {
    console.log('Expiry date changed:', event.target.value);
    
    // Check for near-expiry warnings
    if (event.detail.isValid) {
      const expiryDate = new Date(event.target.value);
      const now = new Date();
      const monthsUntilExpiry = (expiryDate.getFullYear() - now.getFullYear()) * 12 + 
                                (expiryDate.getMonth() - now.getMonth());
      
      if (monthsUntilExpiry <= 1) {
        showWarning('Your card expires soon. Please ensure it will be valid when your payment is processed.');
      }
    }
  }
});

const cardSubmit = sdk.create('card-submit', {
    onClick: (event) => {
        console.log('Submit button clicked');
    
    // Track the payment attempt
    trackEvent('payment-attempt-started', {
      paymentMethod: 'card',
      timestamp: new Date().toISOString(),
      amount: getCurrentAmount(),
      currency: getCurrentCurrency()
    });
    
    // Perform final validation
    const validationErrors = performFinalValidation();
    if (validationErrors.length > 0) {
      event.preventDefault();
      showValidationErrors(validationErrors);
      return;
    }
    
    // Check inventory one final time
    const inventoryCheck = checkInventoryAvailability();
    if (!inventoryCheck.available) {
      event.preventDefault();
      showError('Some items in your cart are no longer available. Please review your order.');
      return;
    }
    
    // Show loading state
    showSubmitLoading(true);
    event.target.disabled = true;
    
    // Optional: Show confirmation dialog for high-value transactions
    const amount = getCurrentAmount();
    if (amount > 1000) {
      const confirmed = confirm(`Please confirm your payment of ${formatCurrency(amount)}`);
      if (!confirmed) {
        event.preventDefault();
        showSubmitLoading(false);
        event.target.disabled = false;
        return;
      }
    }
    
    // Log that payment is proceeding
    console.log('Payment processing initiated');
    }
});

const cardSubmit = sdk.create('card-submit', {
  onCollectEnd: (data) => {
    console.log('Data collection completed:', data);
    
    // Hide loading indicator
    hideMessage();
    hideDataCollectionSpinner();
    
    // Track collection metrics
    trackEvent('device-data-collection-completed', {
      success: data.success,
      duration: data.duration,
      timestamp: new Date().toISOString()
    });
    
    if (data.success) {
      console.log('Device fingerprinting successful');
      
      // Store fingerprint data for fraud detection
      storeFingerprintData(data.fingerprintData);
      
      // Enable submit button now that data collection is complete
      enableSubmitButton();
      
      // Show completion indicator
      showSuccessMessage('Security check completed', 2000);
    } else {
      console.warn('Data collection failed:', data.error);
      
      // Handle collection failure - continue without fingerprinting
      logError('fingerprint-collection-failed', {
        error: data.error?.message,
        duration: data.duration
      });
      
      // Still allow payment to proceed (fingerprinting is optional)
      enableSubmitButton();
      showWarningMessage('Security check unavailable - payment will proceed normally');
    }
  }
});

const cardSubmit = sdk.create('card-submit', {
  onCollectStart: (data) => {
    console.log('Data collection started:', data);
    
    // Show informative loading message
    showMessage('Performing security check...', 'info');
    showDataCollectionSpinner();
    
    // Track collection start
    trackEvent('device-data-collection-started', {
      provider: data.provider,
      sessionId: data.sessionId,
      timeout: data.timeout,
      timestamp: new Date().toISOString()
    });
    
    // Disable submit button during collection
    disableSubmitButton();
    
    // Show educational tooltip about fraud prevention
    showTooltip('security-info', 
      'We\'re performing a quick security check to protect against fraud. This helps keep your payment safe.');
    
    // Set up timeout warning
    const warningTime = data.timeout * 0.8; // Warn at 80% of timeout
    setTimeout(() => {
      if (!isDataCollectionComplete()) {
        showWarningMessage('Security check taking longer than expected...');
      }
    }, warningTime);
    
    // Log provider-specific information
    if (data.provider === 'kount') {
      console.log('Kount fraud detection initiated with session:', data.sessionId);
    } else if (data.provider === 'threatmetrix') {
      console.log('ThreatMetrix profiling started with session:', data.sessionId);
    }
  }
});

const clickOnceComponent = sdk.create('click-once', {
  onCvcEntered: (data) => {
    console.log('CVC has been entered for card:', data.maskedCardNumber);
    
    // Validate CVC format
    if (data.isValid) {
      console.log('Valid CVC entered');
      
      // Clear any previous errors
      clearFieldError('cvc');
      
      // Show success indicator
      showFieldSuccess('cvc');
      
      // Enable submit button
      enableSubmitButton();
      
      // Track successful CVC entry
      trackEvent('cvc-entered-valid', {
        cardType: data.cardType,
        maskedCardNumber: data.maskedCardNumber,
        timestamp: new Date().toISOString()
      });
      
      // Show payment ready indicator
      showPaymentReadyMessage();
      
    } else {
      console.log('Invalid CVC entered');
      
      // Show validation error
      showFieldError('cvc', 'Please enter a valid security code');
      
      // Keep submit button disabled
      disableSubmitButton();
      
      // Track invalid CVC attempts
      trackEvent('cvc-entered-invalid', {
        cardType: data.cardType,
        timestamp: new Date().toISOString()
      });
    }
    
    // Update UI to reflect CVC completion
    updateFormCompletionStatus();
  }
});

const cardOnFileComponent = sdk.create('card-on-file', {
  onDeleteTokenFailed: (data) => {
    console.log('Token deletion failed:', data.error);
    
    // Log the error for debugging
    logError('token-deletion-failed', {
      tokenId: data.tokenId,
      errorCode: data.error.code,
      errorMessage: data.error.message,
      correlationId: data.correlationId,
      timestamp: new Date().toISOString()
    });
    
    // Handle different error types
    let userMessage = 'Failed to delete payment method. Please try again.';
    
    if (data.error.code === 'UNAUTHORIZED') {
      userMessage = 'You are not authorised to delete this payment method.';
    } else if (data.error.code === 'TOKEN_NOT_FOUND') {
      userMessage = 'This payment method no longer exists.';
      // Remove from UI since it doesn't exist
      removeTokenFromUI(data.tokenId);
    } else if (data.error.code === 'NETWORK_ERROR') {
      userMessage = 'Network error. Please check your connection and try again.';
      // Offer retry option
      showRetryButton(() => retryDeleteToken(data.tokenId));
    } else if (data.error.code === 'TOKEN_IN_USE') {
      userMessage = 'This payment method cannot be deleted as it is currently being used.';
    }
    
    // Show error message to user
    showErrorMessage(userMessage);
    
    // Track deletion failure analytics
    trackEvent('token-deletion-failed', {
      tokenId: data.tokenId,
      errorCode: data.error.code,
      errorType: data.error.message,
      timestamp: new Date().toISOString()
    });
    
    // Re-enable delete button if it was disabled
    enableDeleteButton(data.tokenId);
  }
});

const cardOnFileComponent = sdk.create('card-on-file', {
  onDeleteTokenSuccess: (data) => {
    console.log('Token deleted successfully:', data.tokenId);
    
    // Remove the token from the UI
    removeTokenFromUI(data.tokenId);
    
    // Show success message
    showSuccessMessage(`${data.cardScheme} ending in ${data.maskedCardNumber.slice(-4)} has been removed successfully.`);
    
    // Update local data
    removeTokenFromLocalStorage(data.tokenId);
    
    // Track successful deletion
    trackEvent('token-deletion-success', {
      tokenId: data.tokenId,
      cardScheme: data.cardScheme,
      maskedCardNumber: data.maskedCardNumber,
      correlationId: data.correlationId,
      timestamp: new Date().toISOString()
    });
    
    // Check if this was the last saved card
    const remainingTokens = getRemainingTokenCount();
    if (remainingTokens === 0) {
      showEmptyStateMessage('No saved payment methods. Add a new card to save time on future purchases.');
      hideCardOnFileSection();
    }
    
    // If this was the default card, update default selection
    if (isDefaultCard(data.tokenId)) {
      updateDefaultCard();
    }
    
    // Log successful deletion
    console.log(`Payment method deleted: ${data.cardScheme} ${data.maskedCardNumber} at ${data.timestamp}`);
    
    // Optional: Trigger email notification about deleted payment method
    if (shouldNotifyOfDeletion()) {
      sendPaymentMethodDeletedNotification(data);
    }
  }
});

const cardNumberComponent = sdk.create('card-number', {
  onFocus: (event) => {
    console.log('Card number field focused');
    
    // Clear any previous errors
    clearFieldError('card-number');
    
    // Show helpful formatting tooltip
    showTooltip('card-number-help', 'Enter your 16-digit card number without spaces or dashes');
    
    // Highlight the field container
    highlightField('card-number');
    
    // Track field interaction
    trackEvent('field-focused', {
      fieldName: 'card-number',
      hasExistingValue: !!event.target.value,
      timestamp: new Date().toISOString()
    });
    
    // Show accepted card brands
    showAcceptedCardBrands();
  }
});

const cardExpiryComponent = sdk.create('card-expiry-date', {
  onFocus: (event) => {
    console.log('Expiry date field focused');
    
    // Show format example
    showTooltip('expiry-help', 'MM/YY format (e.g., 12/25)');
    
    // Clear errors
    clearFieldError('card-expiry-date');
    
    // Highlight field
    highlightField('card-expiry-date');
    
    // Track focus
    trackEvent('field-focused', {
      fieldName: 'card-expiry-date',
      timestamp: new Date().toISOString()
    });
  }
});

const cardCvcComponent = sdk.create('card-cvc', {
  onFocus: (event) => {
    console.log('CVC field focused');
    
    // Show security code help
    showTooltip('cvc-help', 'Enter the 3-digit security code from the back of your card (4 digits for Amex)');
    
    // Show CVC location diagram
    showCvcLocationDiagram();
    
    // Clear errors
    clearFieldError('card-cvc');
    
    // Track focus
    trackEvent('field-focused', {
      fieldName: 'card-cvc',
      timestamp: new Date().toISOString()
    });
  }
});

const cardSubmit = sdk.create('card-submit', {
  onGetFingerprintResult: async () => {
    console.log('Fingerprint data requested');
    
    try {
      // Check if we have cached fingerprint data
      let fingerprintData = getCachedFingerprintData();
      
      if (!fingerprintData) {
        console.log('Generating new fingerprint data');
        
        // Generate new fingerprint using Kount
        if (window.ka && window.ka.collect) {
          fingerprintData = await new Promise((resolve, reject) => {
            window.ka.collect({
              sessionId: getKountSessionId(),
              onSuccess: (sessionId) => resolve(sessionId),
              onFailure: (error) => reject(error)
            });
          });
        } 
        // Generate fingerprint using ThreatMetrix
        else if (window.tmx && window.tmx.profiling) {
          fingerprintData = await window.tmx.profiling.generateSessionId();
        }
        // Fallback: Generate basic browser fingerprint
        else {
          fingerprintData = generateBasicFingerprint();
        }
        
        // Cache the fingerprint data for future use
        cacheFingerprintData(fingerprintData);
      }
      
      // Track successful fingerprint generation
      trackEvent('fingerprint-generated', {
        method: getFingerprintMethod(),
        sessionId: fingerprintData,
        cached: !!getCachedFingerprintData(),
        timestamp: new Date().toISOString()
      });
      
      console.log('Returning fingerprint data:', fingerprintData);
      return fingerprintData;
      
    } catch (error) {
      console.error('Fingerprint generation failed:', error);
      
      // Log the error
      logError('fingerprint-generation-failed', {
        error: error.message,
        stack: error.stack,
        timestamp: new Date().toISOString()
      });
      
      // Return a fallback fingerprint or empty string
      const fallbackFingerprint = generateFallbackFingerprint();
      
      trackEvent('fingerprint-fallback-used', {
        error: error.message,
        fallbackData: fallbackFingerprint,
        timestamp: new Date().toISOString()
      });
      
      return fallbackFingerprint;
    }
  }
});

// Helper functions for fingerprint generation
function generateBasicFingerprint() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.textBaseline = 'top';
  ctx.font = '14px Arial';
  ctx.fillText('Basic fingerprint', 2, 2);
  
  const fingerprint = btoa(JSON.stringify({
    userAgent: navigator.userAgent,
    language: navigator.language,
    platform: navigator.platform,
    screenResolution: `${screen.width}x${screen.height}`,
    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
    canvas: canvas.toDataURL(),
    timestamp: Date.now()
  }));
  
  return fingerprint.substring(0, 32); // Truncate for consistency
}

function generateFallbackFingerprint() {
  return btoa(`fallback_${Date.now()}_${Math.random()}`).substring(0, 32);
}

const clickOnceComponent = sdk.create('click-once', {
  onOnceCardClick: (data) => {
    console.log('User clicked on saved card:', data.maskedCardNumber);
    
    // Update UI to show selected card
    updateSelectedCardDisplay(data);
    
    // Track card selection
    trackEvent('saved-card-selected', {
      tokenId: data.tokenId,
      cardScheme: data.cardScheme,
      maskedCardNumber: data.maskedCardNumber,
      timestamp: new Date().toISOString()
    });
    
    // Show/hide CVC field based on requirements
    if (data.isCvcRequired) {
      showCvcField();
      showMessage('Please enter your security code to continue');
      disableSubmitButton(); // Keep disabled until CVC is entered
    } else {
      hideCvcField();
      enableSubmitButton();
    }
    
    // Check if card is expired
    const now = new Date();
    const [month, year] = data.expiryDate.split('/');
    const expiryDate = new Date(2000 + parseInt(year), parseInt(month) - 1);
    
    if (expiryDate < now) {
      showWarning('This card has expired. Please update your payment method or select a different card.');
      disableSubmitButton();
      showUpdateCardOption(data.tokenId);
    }
    
    // Show card-specific benefits
    showCardBenefits(data.cardScheme);
    
    // Update payment summary
    updatePaymentSummary({
      paymentMethod: `${data.cardScheme} ending in ${data.maskedCardNumber.slice(-4)}`,
      requiresCvc: data.isCvcRequired
    });
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPostAuthentication: (authResult, threeDSAuthenticationData) => {
    console.log('3DS authentication completed:', authResult);
    
    // Track authentication completion
    trackEvent('3ds-authentication-completed', {
      status: authResult.status,
      authenticationId: authResult.authenticationId,
      transactionId: authResult.transactionId,
      threeDSVersion: threeDSAuthenticationData?.version,
      timestamp: new Date().toISOString()
    });
    
    // Handle different authentication outcomes
    switch (authResult.status) {
      case 'AUTHENTICATED':
        console.log('3DS authentication successful');
        
        // Show success message
        showMessage('Authentication successful. Processing payment...', 'success');
        
        // Store authentication data for transaction
        storeAuthenticationData({
          authenticationId: authResult.authenticationId,
          cavv: threeDSAuthenticationData?.cavv,
          eci: threeDSAuthenticationData?.eci,
          version: threeDSAuthenticationData?.version
        });
        
        // Continue with payment processing
        enablePaymentProcessing();
        
        // Log successful authentication
        console.log(`3DS ${threeDSAuthenticationData?.version} authentication successful`);
        break;
        
      case 'FAILED':
        console.error('3DS authentication failed');
        
        // Show failure message
        showErrorMessage('Authentication failed. Please try again or use a different payment method.');
        
        // Offer alternative payment methods
        showAlternativePaymentMethods();
        
        // Track authentication failure
        trackEvent('3ds-authentication-failed', {
          authenticationId: authResult.authenticationId,
          reason: 'authentication_failed',
          timestamp: new Date().toISOString()
        });
        
        // Reset payment form
        resetPaymentForm();
        break;
        
      case 'CANCELLED':
        console.log('3DS authentication cancelled by user');
        
        // Show cancellation message
        showMessage('Authentication was cancelled. You can try again or use a different payment method.', 'info');
        
        // Track cancellation
        trackEvent('3ds-authentication-cancelled', {
          authenticationId: authResult.authenticationId,
          timestamp: new Date().toISOString()
        });
        
        // Re-enable payment form
        enablePaymentForm();
        break;
        
      case 'ERROR':
        console.error('3DS authentication error');
        
        // Show error message
        showErrorMessage('Authentication error occurred. Please try again.');
        
        // Log the error
        logError('3ds-authentication-error', {
          authenticationId: authResult.authenticationId,
          transactionId: authResult.transactionId,
          timestamp: new Date().toISOString()
        });
        
        // Fallback to non-3DS payment if allowed
        if (isNon3DSFallbackAllowed()) {
          showMessage('Continuing without additional authentication...', 'info');
          enablePaymentProcessing();
        } else {
          showAlternativePaymentMethods();
        }
        break;
        
      default:
        console.warn('Unknown authentication status:', authResult.status);
        showErrorMessage('Authentication status unknown. Please try again.');
    }
    
    // Hide authentication loading indicators
    hideAuthenticationLoader();
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPostInitiateAuthentication: (authResult) => {
    console.log('3DS authentication initiated:', authResult);
    
    // Track initiation result
    trackEvent('3ds-authentication-initiated', {
      status: authResult.status,
      authenticationId: authResult.authenticationId,
      challengeRequired: authResult.status === 'CHALLENGE_REQUIRED',
      timestamp: new Date().toISOString()
    });
    
    // Handle different initiation outcomes
    switch (authResult.status) {
      case 'CHALLENGE_REQUIRED':
        console.log('3DS challenge required');
        
        // Show challenge preparation message
        showMessage('Additional authentication required. Please complete the verification process.', 'info');
        
        // Prepare challenge UI
        prepareChallengeUI();
        
        // Track challenge initiation
        trackEvent('3ds-challenge-required', {
          authenticationId: authResult.authenticationId,
          challengeUrl: authResult.challengeUrl,
          timestamp: new Date().toISOString()
        });
        break;
        
      case 'FRICTIONLESS':
        console.log('3DS frictionless authentication');
        
        // Show frictionless message
        showMessage('Authentication in progress...', 'info');
        
        // Track frictionless flow
        trackEvent('3ds-frictionless-flow', {
          authenticationId: authResult.authenticationId,
          timestamp: new Date().toISOString()
        });
        break;
        
      case 'FAILED':
        console.error('3DS initiation failed');
        
        // Show failure message
        showErrorMessage('Authentication setup failed. Proceeding without additional verification.');
        
        // Track initiation failure
        trackEvent('3ds-initiation-failed', {
          authenticationId: authResult.authenticationId,
          timestamp: new Date().toISOString()
        });
        
        // Continue with non-3DS flow
        continueWithoutAuthentication();
        break;
        
      case 'ERROR':
        console.error('3DS initiation error');
        
        // Show error message
        showErrorMessage('Authentication error. Please try again.');
        
        // Log the error
        logError('3ds-initiation-error', {
          authenticationId: authResult.authenticationId,
          timestamp: new Date().toISOString()
        });
        break;
    }
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPreAuthentication: async (preInitData) => {
    console.log('Starting 3DS authentication setup:', preInitData);
    
    // Track authentication start
    trackEvent('3ds-authentication-starting', {
      authenticationId: preInitData.authenticationId,
      transactionId: preInitData.transactionId,
      timestamp: new Date().toISOString()
    });
    
    try {
      // Get merchant configuration
      const merchantConfig = await getMerchantAuthenticationConfig();
      
      // Get customer information for authentication
      const customerInfo = await getCustomerAuthenticationInfo();
      
      // Determine authentication settings based on transaction risk
      const riskLevel = await assessTransactionRisk(preInitData.transactionId);
      const authenticationData = {
        acquirerProfileId: merchantConfig.acquirerProfileId,
        providerId: merchantConfig.providerId,
        timeout: riskLevel === 'high' ? 600 : 300, // Longer timeout for high-risk
        merchantName: merchantConfig.merchantName,
        merchantCategoryCode: merchantConfig.mcc,
        
        // Customer information
        threeDSRequestorAuthenticationInfo: {
          threeDSReqAuthMethod: customerInfo.authMethod,
          threeDSReqAuthTimestamp: customerInfo.lastAuthTime
        },
        
        // Purchase information
        purchaseAmount: getCurrentTransactionAmount(),
        purchaseCurrency: getCurrentTransactionCurrency(),
        purchaseExponent: 2,
        
        // Browser information (auto-collected by SDK)
        browserInfo: {
          acceptHeaders: navigator.userAgent,
          userAgent: navigator.userAgent,
          javaEnabled: navigator.javaEnabled(),
          language: navigator.language,
          colorDepth: screen.colorDepth,
          screenHeight: screen.height,
          screenWidth: screen.width,
          timeZoneOffset: new Date().getTimezoneOffset()
        }
      };
      
      console.log('Authentication configuration prepared');
      return authenticationData;
      
    } catch (error) {
      console.error('Failed to prepare authentication:', error);
      
      // Log configuration error
      logError('3ds-config-failed', {
        authenticationId: preInitData.authenticationId,
        error: error.message,
        timestamp: new Date().toISOString()
      });
      
      // Return null to skip authentication
      return null;
    }
  }
});

const cardOnFileComponent = sdk.create('card-on-file', {
  onPreDeleteToken: async (token) => {
    console.log('Token deletion requested:', token.maskedPrimaryAccountNumber);
    
    // Track deletion attempt
    trackEvent('token-deletion-requested', {
      tokenId: token.gatewayTokenId,
      cardScheme: token.scheme,
      maskedCardNumber: token.maskedPrimaryAccountNumber,
      timestamp: new Date().toISOString()
    });
    
    try {
      // Check if token is used in active subscriptions
      const activeSubscriptions = await checkActiveSubscriptions(token.gatewayTokenId);
      
      if (activeSubscriptions.length > 0) {
        const subscriptionList = activeSubscriptions.map(sub => sub.name).join(', ');
        const confirmed = confirm(
          `This payment method is used for active subscriptions: ${subscriptionList}. ` +
          `Deleting it may affect these subscriptions. Are you sure you want to continue?`
        );
        
        if (!confirmed) {
          trackEvent('token-deletion-cancelled-subscriptions', {
            tokenId: token.gatewayTokenId,
            subscriptionCount: activeSubscriptions.length,
            timestamp: new Date().toISOString()
          });
          return false;
        }
      }
      
      // Show confirmation dialog
      const cardDescription = `${token.scheme} ending in ${token.maskedPrimaryAccountNumber.slice(-4)}`;
      const confirmed = confirm(`Are you sure you want to delete ${cardDescription}?`);
      
      if (confirmed) {
        // Log confirmation
        trackEvent('token-deletion-confirmed', {
          tokenId: token.gatewayTokenId,
          cardScheme: token.scheme,
          timestamp: new Date().toISOString()
        });
        
        // Show deletion in progress
        showMessage('Deleting payment method...', 'info');
        
        return true;
    } else {
        // Log cancellation
        trackEvent('token-deletion-cancelled', {
          tokenId: token.gatewayTokenId,
          timestamp: new Date().toISOString()
        });
        
        return false;
      }
      
    } catch (error) {
      console.error('Error during token deletion validation:', error);
      
      // Log validation error
      logError('token-deletion-validation-failed', {
        tokenId: token.gatewayTokenId,
        error: error.message,
        timestamp: new Date().toISOString()
      });
      
      // Show error and allow user to decide
      const confirmed = confirm(
        'Unable to check payment method usage. Do you still want to delete it?'
      );
      
      return confirmed;
    }
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPostInitiateAuthentication: (authResult) => {
    console.log('3DS authentication initiated:', authResult);
    if (authResult.status === 'CHALLENGE_REQUIRED') {
      showMessage('Please complete 3DS verification', 'info');
    }
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPostTokenisation: (tokenData) => {
    console.log('Card tokenised:', tokenData);
    
    // Store token information for future use
    const savedCard = {
      tokenId: tokenData.gatewayTokenId,
      maskedNumber: tokenData.maskedPrimaryAccountNumber,
      scheme: tokenData.scheme,
      expiryDate: tokenData.expiryDate,
      issuer: tokenData.issuerName,
      savedAt: new Date().toISOString()
    };
    
    // Save to local storage or send to your backend
    localStorage.setItem(`card_token_${tokenData.gatewayTokenId}`, JSON.stringify(savedCard));
    
    // Track tokenisation success for analytics
    trackEvent('card-tokenisation-success', {
      tokenId: tokenData.gatewayTokenId,
      scheme: tokenData.scheme,
      issuer: tokenData.issuerName,
      correlationId: tokenData.correlationId
    });
    
    // Update UI to show the card was saved
    showSuccessMessage('Your payment method has been saved securely!');
    
    // Add to saved cards list in UI
    addToSavedCardsList(savedCard);
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPreAuthentication: async (preInitData) => {
    console.log('Starting 3DS authentication:', preInitData);
    
    // Analyze pre-initiation data to determine strategy
    const authConfig = {
      challengeWindowSize: '02', // 390x400px window
      timeout: 30, // 30 seconds timeout
    };
    
    // Check if SCA is mandated
    if (preInitData.scaMandated) {
      console.log('SCA is mandated for this transaction');
      authConfig.timeout = 60; // Give more time for mandated SCA
    }
    
    // Check for applicable exemptions
    if (preInitData.applicableExemptions?.includes('LowValue')) {
      console.log('Low value exemption available');
      // You might choose to apply exemption here
    }
    
    // Track authentication initiation
    trackEvent('3ds-authentication-starting', {
      authenticationId: preInitData.authenticationId,
      scaMandated: preInitData.scaMandated,
      exemptions: preInitData.applicableExemptions
    });
    
    return authConfig;
  }
});

const cardSubmit = sdk.create('card-submit', {
  onPreAuthorisation: async (data, threeDSAuthenticationData) => {
    console.log('Pre-authorisation data:', data);
    console.log('3DS authentication data:', threeDSAuthenticationData);
    
    // Example: Integrate with fraud detection service
    const fraudScore = await checkFraudScore({
      tokenId: data.cardTokenData?.gatewayTokenId,
      authenticationId: data.initiateIntegratedSuccessAuthenticationResult?.authenticationId
    });
    
    // Configure transaction based on business rules
    const transactionConfig = {
      addressVerification: {
        countryCode: "US",
        houseNumberOrName: "123 Main St",
        postalCode: "12345"
      },
      identityVerification: {
        nameVerification: true
      },
      psd2Data: {
        scaExemption: fraudScore < 0.3 ? 'LowRisk' : null
      }
    };
    
    // Add 3DS data if authentication was performed
    if (threeDSAuthenticationData) {
      transactionConfig.threeDSecureData = {
        authenticationId: threeDSAuthenticationData.authenticationId
      };
    }
    
    return transactionConfig;
});

const cardOnFileComponent = sdk.create('card-on-file', {
  onPreDeleteToken: async (token) => {
    // Check if token is used in active subscriptions
    const hasActiveSubscriptions = await checkActiveSubscriptions(token.gatewayTokenId);
    
    if (hasActiveSubscriptions) {
      const confirmed = confirm(
        `This card is used for active subscriptions. Deleting it will cancel those subscriptions. Continue?`
      );
      if (!confirmed) return false;
    }
    
    // Show custom confirmation dialog
    const confirmed = confirm(
      `Delete ${token.scheme} card ending in ${token.maskedPrimaryAccountNumber.slice(-4)}?`
    );
    
    // Log deletion attempt for security auditing
    if (confirmed) {
      trackEvent('token-deletion-confirmed', {
        tokenId: token.gatewayTokenId,
        scheme: token.scheme,
        lastFour: token.maskedPrimaryAccountNumber.slice(-4)
      });
    }
    
    return confirmed;
  }
});