import { PaypercutCheckout } from '@paypercut/checkout-js';

// Initialize the checkout
const checkout = PaypercutCheckout({
  id: '01KB23M9EC960C50G3AH14FTTT',              // Your checkout session ID from step 1
  containerId: '#checkout'       // CSS selector or HTMLElement
});

// Listen for payment events
checkout.on('success', () => {
  console.log('Payment successful!');
});

checkout.on('error', () => {
  console.error('Payment failed');
});

// Optional: Listen for when iframe finishes loading (useful for modal implementations)
checkout.on('loaded', () => {
  console.log('Checkout loaded and ready');
});

// Render the checkout
checkout.render();

const checkout = PaypercutCheckout({
  id: '01KB23M9EC960C50G3AH14FTTT',
  containerId: '#checkout-container'
});

const checkout = PaypercutCheckout({
  id: '01KB23M9EC960C50G3AH14FTTT',
  containerId: '#checkout-container',
  locale: 'en',                              // 'auto' | 'en' | 'en-GB' | 'bg' | 'bg-BG'
  lang: 'en',                              // 'auto' | 'en' | 'en-GB' | 'bg' | 'bg-BG'
  ui_mode: 'embedded',                       // 'hosted' | 'embedded'
  wallet_options: ['apple_pay', 'google_pay'], // Can be empty array [] or contain one/both options
  form_only: false,                          // Set true to hide Pay Now button (use external button),
  validate_form: true,            // Set true to require form validation before wallet payment
  appearance: {
    preset: 'modal',              // 'modal' | 'inline' — 'modal' shows TotalCard + header, 'inline' hides them
  },
});

const checkout = PaypercutCheckout({
  id: '01KB23M9EC960C50G3AH14FTTT',
  containerId: '#checkout-container',
  wallet_options: []  // No Apple Pay or Google Pay buttons
});

const checkout = PaypercutCheckout({
  id: '01KB23M9EC960C50G3AH14FTTT',
  containerId: '#checkout-container',
  wallet_options: ['apple_pay']  // Only Apple Pay, no Google Pay
});

const checkout = PaypercutCheckout({
  id: '01KB23M9EC960C50G3AH14FTTT',
  containerId: '#checkout-container',
  form_only: true  // No Pay Now button inside checkout
});

// Use your own button to trigger payment
document.getElementById('my-pay-button').addEventListener('click', () => {
  checkout.submit();
});

checkout.render();

checkout.destroy();

const unsubscribe = checkout.on('success', () => {
  console.log('Payment successful!');
});

// Later, to unsubscribe
unsubscribe();

checkout.once('loaded', () => {
  console.log('Checkout loaded - this will only fire once');
});

const handler = () => console.log('Payment successful!');
checkout.on('success', handler);
checkout.off('success', handler);

if (checkout.isMounted()) {
  console.log('Checkout is visible');
}

checkout.completeFormValidation('google_pay');

checkout.failFormValidation('apple_pay', [
  { code: 'invalid_email', message: 'Please enter a valid email address' },
  { code: 'missing_address', message: 'Shipping address is required' }
]);

import { PaypercutCheckout, SdkEvent } from '@paypercut/checkout-js';

const checkout = PaypercutCheckout({
  id: '01KB23M9EC960C50G3AH14FTTT',
  containerId: '#checkout',
  wallet_options: ['apple_pay', 'google_pay']
});

// Handle form validation for wallet payments
checkout.on(SdkEvent.FormValidation, ({ wallet, checkoutId }) => {
  // Validate your own form fields
  const email = document.getElementById('email').value;
  const isEmailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

  if (isEmailValid) {
    // Form is valid - allow wallet to proceed
    checkout.completeFormValidation(wallet);
  } else {
    // Form has errors - block wallet and show your errors
    document.getElementById('email-error').textContent = 'Please enter a valid email';
    checkout.failFormValidation(wallet, [
      { code: 'invalid_email', message: 'Please enter a valid email' }
    ]);
  }
});

checkout.render();

checkout.on('form_validation', ({ wallet }) => {
  // No validation needed - always allow wallet to proceed
  checkout.completeFormValidation(wallet);
});

import { PaypercutCheckout } from '@paypercut/checkout-js';

const checkout = PaypercutCheckout({
  id: '01KB23M9EC960C50G3AH14FTTT',
  containerId: '#checkout',
  locale: 'auto',
  ui_mode: 'embedded',
  wallet_options: ['apple_pay', 'google_pay'],
  form_only: false
});

checkout.on('success', (payload) => {
  // payload.payment_method: { brand, last4, exp_month, exp_year }
  console.log('Payment successful');
  console.log(`Paid with ${payload.payment_method.brand} **** ${payload.payment_method.last4}`);
  // Redirect to success page
  window.location.href = '/success';
});

checkout.on('error', (error) => {
  console.error('Payment error:', error);
  // Show error message to user
  alert(`Payment failed: ${error.message}`);
});

checkout.render();

async function loadCheckout() {
  const { PaypercutCheckout } = await import('@paypercut/checkout-js');
  return PaypercutCheckout;
}

// Load when user clicks pay button
payButton.addEventListener('click', async () => {
  const PaypercutCheckout = await loadCheckout();
  const checkout = PaypercutCheckout({ id: '01KB23M9EC960C50G3AH14FTTT' });
  checkout.render();
});

// ✅ Good: Use frontend events for UI updates only
checkout.on('success', () => {
  // Show success message
  showSuccessMessage();
  // Redirect to order confirmation page
  window.location.href = '/orders/confirmation';
});

// ❌ Bad: Don't grant access based on frontend events alone
checkout.on('success', () => {
  // This can be manipulated by users!
  grantPremiumAccess(userId); // Don't do this!
});

checkout.on('success', () => {
  // Handle success
  showSuccessMessage();
});

checkout.on('error', () => {
  // Show user-friendly error message
  alert('Payment failed. Please try again.');
});

// React example
useEffect(() => {
  const checkout = PaypercutCheckout({ id: checkoutId });
  checkout.render();

  return () => {
    checkout.destroy(); // Clean up!
  };
}, []);

// ─── Step 1: Initialize ───────────────────────────────────────────────────────
// You call PaypercutExpressCheckout() with your config.
// Nothing is shown yet — buttons render after mount().

const express = PaypercutExpressCheckout({
  publishableKey: 'pk_test_...',
  amount: 2500,        // €25.00 — the initial total (before shipping is chosen)
  currency: 'EUR',
  countryCode: 'DE',
  shippingOptions: [
    { id: 'standard', label: 'Standard Shipping', detail: '3–5 days', amount: 499 },
    { id: 'express',  label: 'Express Shipping',  detail: '1–2 days', amount: 999 },
  ],
});


// ─── Step 2: Subscribe to events (before mount) ───────────────────────────────
// Always subscribe before calling mount().

// You RECEIVE: 'ready' — buttons are rendered and visible
express.on('ready', () => {
  console.log('Wallet buttons ready');
});

// You RECEIVE: 'click' — user tapped Apple Pay or Google Pay button
express.on('click', () => {
  console.log('Wallet sheet opening...');
});


// ─── Step 3: Wallet sheet opens — provide initial shipping options ─────────────
// You RECEIVE: 'session_start' when the wallet sheet opens, BEFORE any address
// or option is shown. The wallet sheet is PAUSED — you must call updateWith()
// to provide the initial shipping options and unblock the sheet.
//
// This is your chance to dynamically load options from your backend.
// event.wallet tells you which wallet opened: 'apple_pay' | 'google_pay'

express.on('session_start', async ({ wallet, updateWith }) => {
  console.log('Wallet sheet opened:', wallet);

  // Optionally fetch shipping options from your backend
  // const options = await fetch('/api/shipping-options').then(r => r.json());

  // You CALL: updateWith() — this unblocks the wallet sheet with initial options
  updateWith({
    amount: 2500 + 499,    // subtotal + default shipping cost
    shippingOptions: [
      { id: 'standard', label: 'Standard Shipping', detail: '3–5 days', amount: 499 },
      { id: 'express',  label: 'Express Shipping',  detail: '1–2 days', amount: 999 },
    ],
    lineItems: [   // Apple Pay only — line item breakdown
      { label: 'Subtotal',          amount: 2500 },
      { label: 'Standard Shipping', amount: 499 },
    ],
  });
  // → Wallet sheet now renders with these options
});


// ─── Step 4: User changes shipping address ────────────────────────────────────
// You RECEIVE: 'shipping_address_change' with a partial address
// (country, state, city, postalCode — no street at this stage)
// The wallet sheet is PAUSED — you must call updateWith() to unblock it.

express.on('shipping_address_change', ({ address, updateWith }) => {
  console.log('User shipping to:', address.country, address.postalCode);
  // address = { country: 'DE', state: 'BY', city: 'Munich', postalCode: '80331' }

  // Calculate shipping cost for this address on your end
  const shippingCost = address.country === 'DE' ? 499 : 999;
  const newTotal = 2500 + shippingCost;

  // You CALL: updateWith() — this unblocks the wallet sheet and updates the displayed total
  updateWith({
    amount: newTotal,                         // new total including shipping
    shippingOptions: [                        // updated options for this region
      { id: 'standard', label: 'Standard Shipping', amount: shippingCost },
      { id: 'express',  label: 'Express Shipping',  amount: shippingCost + 500 },
    ],
    lineItems: [                      // Apple Pay only — line item breakdown
      { label: 'Subtotal',          amount: 2500 },
      { label: 'Standard Shipping', amount: shippingCost },
    ],
    // To reject an unsupported address instead:
    // status: 'invalid_shipping_address',
  });
  // → Wallet sheet now shows the updated total and shipping options
});


// ─── Step 5: User selects a shipping option ───────────────────────────────────
// You RECEIVE: 'shipping_option_change' when the user switches e.g. Standard → Express
// The wallet sheet is PAUSED again — you must call updateWith() again.

express.on('shipping_option_change', ({ shippingOption, updateWith }) => {
  console.log('User picked:', shippingOption.label, shippingOption.amount);
  // shippingOption = { id: 'express', label: 'Express Shipping', amount: 999 }

  const newTotal = 2500 + shippingOption.amount;

  // You CALL: updateWith() — unblocks the sheet with the new total
  updateWith({
    amount: newTotal,
    lineItems: [                      // Apple Pay only
      { label: 'Subtotal',            amount: 2500 },
      { label: shippingOption.label,  amount: shippingOption.amount },
    ],
  });
  // → Wallet sheet updates to show the new total
});


// ─── Step 6: User confirms payment ───────────────────────────────────────────
// User taps "Pay" in the wallet sheet.
// SDK tokenizes the card via Basis Theory, creates a Paypercut payment method,
// and auto-closes the wallet sheet. No action needed from you to close the sheet.

// You RECEIVE: 'payment_method_created' with the payment method ID
express.on('payment_method_created', async ({ paymentMethodId, idempotencyKey, billingDetails, shippingDetails, selectedShippingOption }) => {
  console.log('Payment method created:', paymentMethodId);
  // paymentMethodId = 'pm_01J...'
  // billingDetails  = { name: 'John Doe', address: { line1: '...', country: 'DE', ... } }
  // shippingDetails = { name: 'John Doe', address: { line1: '48 Example St', ... } }
  // selectedShippingOption = { id: 'express', label: 'Express Shipping', amount: 999 }

  // You CALL: your backend to create and confirm the payment intent
  const res = await fetch('/api/confirm-payment', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ paymentMethodId, idempotencyKey }),
  });

  if (res.ok) {
    window.location.href = '/success';
  }
});


// ─── Step 7: Handle failure or cancellation ───────────────────────────────────
// You RECEIVE: 'payment_method_failed' if tokenization or PM creation fails
express.on('payment_method_failed', ({ error }) => {
  console.error('Payment failed:', error);
  showErrorMessage('Payment could not be processed. Please try again.');
});

// You RECEIVE: 'cancel' if the user dismisses the wallet sheet
express.on('cancel', () => {
  console.log('User closed the wallet sheet');
});


// ─── Step 8: Mount ────────────────────────────────────────────────────────────
// You CALL: mount() — renders the wallet buttons into the container
express.mount('#express-checkout');
// → 'ready' fires once buttons are visible


// ─── Step 9: Cleanup ─────────────────────────────────────────────────────────
// You CALL: destroy() when the component unmounts to prevent memory leaks
// express.destroy();

import { PaypercutExpressCheckout, ExpressSdkEvent } from '@paypercut/checkout-js';

const express = PaypercutExpressCheckout({
  publishableKey: 'pk_test_...',
  amount: 2999,               // in minor units (€29.99)
  currency: 'EUR',
  countryCode: 'DE',
  shippingOptions: [
    { id: 'standard', label: 'Standard Shipping', detail: '3–5 business days', amount: 499 },
    { id: 'express',  label: 'Express Shipping',  detail: '1–2 business days', amount: 999 },
  ],
});

express.mount('#express-checkout');

PaypercutExpressCheckout({
  // ...
  buttonOptions: {
    type: 'pay',               // label shown on both buttons — defaults to 'buy'
    applePayStyle: 'black',    // Apple Pay button color — defaults to 'black'
    googlePayColor: 'default', // Google Pay button color — defaults to 'default'
    borderRadius: '0.5rem',    // border radius for both buttons — defaults to '0.5rem'
  },
});

interface ExpressCheckoutShippingOption {
  id: string;       // unique identifier, e.g. 'standard'
  label: string;    // display label, e.g. 'Standard Shipping'
  detail?: string;  // subtitle, e.g. '3–5 business days'
  amount: number;   // cost in minor units
}

interface LineItem {
  label: string;
  amount: number;             // minor units
  type?: 'final' | 'pending';
}

express.mount('#express-checkout');
// or pass an HTMLElement
express.mount(document.getElementById('express-checkout')!);

const unsub = express.on('payment_method_created', (e) => { ... });
unsub(); // unsubscribe

express.update({
  amount: 3998,
  shippingOptions: [
    { id: 'standard', label: 'Standard Shipping', amount: 499 },
    { id: 'express',  label: 'Express Shipping',  amount: 999 },
  ],
});

express.destroy();

express.on('shipping_address_change', ({ address, updateWith }) => {
  // address: { country, state?, city?, postalCode? }
  console.log('Shipping to:', address.country, address.postalCode);

  // Calculate shipping cost for this address
  const shippingCost = address.country === 'DE' ? 299 : 599;
  const newTotal = 2500 + shippingCost;

  // REQUIRED: call updateWith() to unblock the wallet sheet
  updateWith({
    amount: newTotal,
    shippingOptions: [
      { id: 'standard', label: 'Standard Shipping', amount: shippingCost },
      { id: 'express',  label: 'Express Shipping',  amount: shippingCost + 500 },
    ],
    // Use 'invalid_shipping_address' if you don't ship to this address:
    // status: 'invalid_shipping_address',
  });
});

express.on('shipping_option_change', ({ shippingOption, updateWith }) => {
  // shippingOption: { id, label, detail?, amount }
  console.log('Shipping option changed to:', shippingOption.label, shippingOption.amount);

  const newTotal = 2500 + shippingOption.amount;

  // REQUIRED: call updateWith() to unblock the wallet sheet
  updateWith({
    amount: newTotal,
    // Optionally update Apple Pay line items to reflect the new shipping row:
    lineItems: [
      { label: 'Subtotal', amount: 2500 },
      { label: shippingOption.label, amount: shippingOption.amount },
    ],
  });
});

express.on('payment_method_created', (event) => {
  // event.paymentMethodId  — Paypercut PM ID (pm_xxx), use this to confirm payment on your backend
  // event.token            — { id: string, type: 'apple_pay' | 'google_pay' }
  // event.idempotencyKey   — unique key for this payment attempt (pass to your backend)
  // event.billingDetails   — { name?, email?, address? }
  // event.shippingDetails  — { name?, address? }
  // event.selectedShippingOption — { id, label, amount }

  console.log('Payment method created:', event.paymentMethodId);
  console.log('Shipping to:', event.shippingDetails?.address);
  console.log('Selected option:', event.selectedShippingOption?.label);

  // Call your backend to create + confirm the payment intent
  await fetch('/api/confirm-payment', {
    method: 'POST',
    body: JSON.stringify({
      paymentMethodId: event.paymentMethodId,
      idempotencyKey: event.idempotencyKey,
    }),
  });
});

interface ExpressPaymentMethodCreatedEvent {
  paymentMethodId: string;                      // Paypercut PM ID (pm_xxx)
  token: { id: string; type: 'apple_pay' | 'google_pay' };
  idempotencyKey: string;
  billingDetails?: {
    name?: string;
    email?: string;
    phone?: string;
    address?: { line1?: string; line2?: string; city?: string; state?: string; postalCode?: string; country?: string };
  };
  shippingDetails?: {
    name?: string;
    address?: { line1?: string; line2?: string; city?: string; state?: string; postalCode?: string; country?: string };
  };
  selectedShippingOption?: { id: string; label: string; detail?: string; amount: number };
}