interface CheckoutConfig {
  // === Credentials (required) ===
  storeId: string;              // Your Commerce Engine Store ID
  apiKey: string;               // Your Commerce Engine API Key
  environment?: "production" | "staging";  // Default: "production"

  // === Development ===
  url?: string;                 // Direct checkout URL (for local dev)
                                // Overrides environment-based URL

  // === Theme ===
  theme?: "light" | "dark" | "system";  // Per-session override. Default: "system"
                                // Primary config via Checkout Studio (Config API)

  // === Appearance ===
  appearance?: {
    zIndex?: number;            // Overlay z-index. Default: 99999
  };

  // === Authentication ===
  authMode?: "managed" | "provided";  // Default: "managed"
  accessToken?: string;         // Initial access token (if user logged in)
  refreshToken?: string;        // Initial refresh token

  // === Quick Buy (add item on init) ===
  quickBuy?: {
    productId: string;          // Product ID (required)
    variantId: string | null;   // Variant ID (required, null for non-variant)
    quantity?: number;          // Default: 1
  };
  sessionMode?: "continue-existing" | "force-new";  // Default: "continue-existing"
  autoDetectQuickBuy?: boolean; // Auto-detect from parent URL. Default: false

  // Drawer direction, features, and login methods are configured via
  // Checkout Studio (Config API) and are not SDK options.

  // === Callbacks ===
  onReady?: () => void;
  onOpen?: () => void;
  onClose?: () => void;
  onComplete?: (order: OrderData) => void;
  onCartUpdate?: (cart: CartData) => void;
  onTokensUpdated?: (data: AuthTokensUpdatedData) => void;
  onLogin?: (data: AuthLoginData) => void;
  onLogout?: (data: AuthLogoutData) => void;
  onSessionError?: () => void;
  onError?: (error: ErrorData) => void;
}

const checkout = await Commercengine.init({
  storeId: "store_xxx",
  apiKey: "ak_xxx",
  environment: "production",
  theme: "dark",
  appearance: {
    zIndex: 100000,
  },
  accessToken: userSession?.accessToken,
  refreshToken: userSession?.refreshToken,
  onReady: () => {
    console.log("Checkout loaded");
  },
  onComplete: (order) => {
    window.location.href = `/thank-you?order=${order.orderNumber}`;
  },
  onCartUpdate: (cart) => {
    updateCartBadge(cart.count);
  },
  onTokensUpdated: ({ accessToken, refreshToken }) => {
    // Tokens changed - sync to your auth system (fires on every token change)
    saveUserSession(accessToken, refreshToken);
  },
  onLogin: ({ user, loginMethod }) => {
    // User logged in via checkout - update UI
    console.log("User logged in via", loginMethod, ":", user?.email || user?.phone);
  },
  onLogout: () => {
    // User logged out - update UI for anonymous state
  },
  onSessionError: () => {
    // Session corrupted - SDK cleared all tokens, user needs to re-authenticate
    clearUserSession();
  },
});

checkout.openCart();

checkout.openCheckout();

checkout.close();

// When user logs in on your site
checkout.updateTokens(session.accessToken, session.refreshToken);

// When user logs out
checkout.updateTokens("", "");

// Add a product (non-variant)
checkout.addToCart("prod_123", null, 1);

// Add a product variant
checkout.addToCart("prod_123", "var_456", 2);

// Quantity defaults to 1
checkout.addToCart("prod_123", "var_456");

const cart = checkout.getCart();
console.log(cart.count, cart.total, cart.currency);

const checkout = await Commercengine.init({ ... });
const tokens = checkout.getTokens();
// tokens.accessToken, tokens.refreshToken

checkout.destroy();

interface OrderData {
  id: string;           // Order ID
  orderNumber: string;  // Human-readable order number
}

interface CartData {
  count: number;        // Number of items
  total: number;        // Subtotal amount
  currency: string;     // Currency code (e.g., "USD", "INR")
}

interface AuthTokensUpdatedData {
  accessToken: string;
  refreshToken?: string;
}

interface AuthLoginData {
  user?: UserInfo;
  loginMethod?: LoginMethod;
}

interface AuthLogoutData {
  user?: UserInfo;        // Anonymous user info
}

interface ErrorData {
  message: string;
}

type LoginMethod = "whatsapp" | "phone" | "email";

interface Channel {
  id: string;
  name: string;
  type: string;
}

interface UserInfo {
  id: string;
  email: string | null;
  phone: string | null;
  username: string;
  firstName: string | null;
  lastName: string | null;
  storeId: string;
  isLoggedIn: boolean;
  isAnonymous: boolean;
  customerId: string | null;
  customerGroupId: string | null;
  anonymousId: string;
  channel: Channel;
  tokenExpiry: Date;
  tokenIssuedAt: Date;
}

// Subscribe
checkout.on("cart:updated", (cart) => {
  console.log("Cart:", cart.count, cart.total);
});

// Subscribe once
checkout.once("complete", (order) => {
  console.log("Order:", order.orderNumber);
});

// Unsubscribe
const handler = (cart) => console.log(cart);
checkout.on("cart:updated", handler);
checkout.off("cart:updated", handler);

const checkout = await Commercengine.init({
  storeId: "store_xxx",
  apiKey: "ak_xxx",
  onTokensUpdated: ({ accessToken, refreshToken }) => {
    // Sync tokens to your auth system (fires on login, logout, refresh)
    saveSession({ accessToken, refreshToken });
  },
  onLogin: ({ user, loginMethod }) => {
    // Update UI with user info
    console.log("Logged in via", loginMethod, ":", user?.email);
  },
});

const checkout = await Commercengine.init({
  storeId: "store_xxx",
  apiKey: "ak_xxx",
  accessToken: currentSession.accessToken,
  refreshToken: currentSession.refreshToken,
});

// User logs in on your site
myAuth.onLogin((session) => {
  checkout.updateTokens(session.accessToken, session.refreshToken);
});

// User logs out on your site
myAuth.onLogout(() => {
  checkout.updateTokens("", "");
});

import {
  Commercengine,
  Checkout,
  type CheckoutConfig,
  type CheckoutEventType,
  type CheckoutFeatures,
  type DrawerDirection,
  type DrawerDirectionConfig,
  type Environment,
  type CartData,
  type OrderData,
  type AuthTokensUpdatedData,
  type AuthLoginData,
  type AuthLogoutData,
  type ErrorData,
  type UserInfo,
  type Channel,
  type LoginMethod,
} from "@commercengine/js";

// Ad link: https://brand.com?product_id=prod_123&variant_id=var_456&qty=2

const checkout = await Commercengine.init({
  storeId: "store_xxx",
  apiKey: "ak_xxx",
  autoDetectQuickBuy: true,  // Reads product_id, variant_id, qty from parent URL
});

import { getCheckoutOrigin, getCheckoutIframeUrl } from "@commercengine/js";

const origin = getCheckoutOrigin({
  storeId: "store_xxx",
  environment: "production", // or "staging"
});
// → "https://store_xxx.checkout.commercengine.com"

const iframeUrl = getCheckoutIframeUrl({
  storeId: "store_xxx",
  apiKey: "ak_xxx",
  environment: "production",
});
// → "https://store_xxx.checkout.commercengine.com?api_key=ak_xxx&mode=iframe"

// Serial: anonymous-token fetch blocks iframe creation
const { accessToken, refreshToken } = await fetchAnonymousToken();
const checkout = await Commercengine.init({
  storeId, apiKey, authMode: "provided", accessToken, refreshToken,
});

// Parallel: init starts loading the iframe immediately;
// updateTokens flushes once the iframe is ready to receive.
const checkout = await Commercengine.init({
  storeId, apiKey, authMode: "provided",
  // No accessToken — iframe will wait for tokens via postMessage
});

const { accessToken, refreshToken } = await fetchAnonymousToken();
checkout.updateTokens(accessToken, refreshToken);