'use client';

import { useEffect, useState, useRef, useCallback, type CSSProperties } from 'react';
import type { PaymentIntent, PaymentClientSdk } from 'brainerce';
import { formatPrice } from 'brainerce';
import { BrainerceError } from 'brainerce';
import { getClient } from '@/core/lib/brainerce';
import { useTranslations } from '@/core/lib/translations';
import { LoadingSpinner } from '@/ui/shared/loading-spinner';
import { useStoreInfo } from '@/core/providers/store-provider';
import { cn } from '@/core/lib/utils';
import {
  isAllowedPaymentUrl,
  isValidCheckoutId,
  safePaymentRedirect,
} from '@/core/lib/safe-redirect';
import { PREFERRED_RENDER_MODE, resolveRenderType } from '@/core/lib/render-mode';

/**
 * Backward-compat defaults when backend doesn't return clientSdk.
 */
const LEGACY_GROW_SDK: PaymentClientSdk = {
  renderType: 'sdk-widget',
  scriptUrl: 'https://cdn.meshulam.co.il/sdk/gs.min.js',
  globalName: 'growPayment',
  initMethod: 'init',
  renderMethod: 'renderPaymentOptions',
  containerId: 'grow-payment-container',
  initConfig: { version: 1, environment: 'DEV' },
  additionalScripts: [
    { url: 'https://meshulam.co.il/_media/js/apple_pay_sdk/sdk.min.js', optional: true },
  ],
  bodyStyles:
    '[id*="Gr0W8-"],[id*="Gr0W8-"] *,[class*="Gr0W8-"],[class*="Gr0W8-"] *{direction:ltr !important;text-align:left}',
};

interface PaymentStepProps {
  checkoutId: string;
  className?: string;
}

function resolveClientSdk(
  intent: PaymentIntent | null,
  preloadedSdk?: PaymentClientSdk | null
): PaymentClientSdk {
  // Runtime SDK (returned by the payment app in the intent) wins over the
  // preloaded manifest SDK. This lets a provider return a different renderType
  // per-installation (e.g. Cardcom returning 'embedded-fields' when the
  // merchant opts in, while the manifest default stays 'iframe').
  const fullSdk = [intent?.clientSdk, preloadedSdk].find((s) => s?.renderType);
  const runtimeSdk = intent?.clientSdk;
  if (fullSdk) {
    if (!runtimeSdk || runtimeSdk === fullSdk) return fullSdk;
    return {
      ...fullSdk,
      ...(runtimeSdk.renderArg ? { renderArg: runtimeSdk.renderArg } : {}),
      ...(runtimeSdk.initConfig
        ? { initConfig: { ...fullSdk.initConfig, ...runtimeSdk.initConfig } }
        : {}),
    };
  }
  const legacy = intent?.provider === 'grow' ? LEGACY_GROW_SDK : null;
  if (legacy && runtimeSdk) {
    return {
      ...legacy,
      ...(runtimeSdk.renderArg ? { renderArg: runtimeSdk.renderArg } : {}),
      ...(runtimeSdk.initConfig
        ? { initConfig: { ...legacy.initConfig, ...runtimeSdk.initConfig } }
        : {}),
    };
  }
  if (legacy) return legacy;
  return { renderType: 'redirect' };
}

/**
 * Brainerce-hosted embed (Cardcom OpenFields) vs a provider-hosted page.
 * Path-based so it holds across localhost/staging/prod without a domain list.
 */
function isBrainerceEmbedUrl(url: string): boolean {
  try {
    return new URL(url).pathname.includes('/embed/');
  } catch {
    return false;
  }
}

function extractMessage(response: unknown): string {
  if (typeof response === 'string') return response;
  return (response as { message?: string })?.message || '';
}

export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
  const t = useTranslations('checkout');
  const { storeInfo } = useStoreInfo();

  const [paymentIntent, setPaymentIntent] = useState<PaymentIntent | null>(null);

  // The provider's payment URL. `clientSdk.renderArg` is the URL; `clientSecret`
  // is only a fallback for providers that duplicate it there. Reading
  // clientSecret alone breaks providers that return a real identifier (MAX,
  // Takbull) — the iframe/link silently points at an id instead of a page.
  //
  // Every allowlist check and embed-detection below must read THIS value, not
  // `paymentIntent.clientSecret` directly — that was the bug: two checks kept
  // reading clientSecret straight off the intent after this fallback was
  // introduced, so a MAX/Takbull-style provider failed `new URL()` on a bare
  // id and the payment step silently rendered nothing.
  const paymentIntentUrl = paymentIntent?.clientSdk?.renderArg || paymentIntent?.clientSecret || '';
  const isBrainerceEmbed = isBrainerceEmbedUrl(paymentIntentUrl);
  const [preloadedSdk, setPreloadedSdk] = useState<PaymentClientSdk | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [sdkReady, setSdkReady] = useState(false);
  // Set by the Cardcom OpenFields embed page via `brainerce:resize` postMessage.
  // Presence of this value is how we distinguish our own compact embed page
  // from a provider's hosted page — used to narrow the modal + auto-size the
  // iframe instead of reserving the tall LowProfile footprint.
  const [embeddedIframeHeight, setEmbeddedIframeHeight] = useState<number | null>(null);
  // Set when the inline embed never posts its first `brainerce:resize` within
  // the timeout below — e.g. the parent's CSP blocks the iframe from framing
  // at all. Without this the shopper stares at a permanently blank/broken box
  // with no error and no way forward.
  const [iframeLoadFailed, setIframeLoadFailed] = useState(false);
  // Provider-hosted iframe modal, closed by the shopper. Without this the
  // modal had no closed state at all: the X did a full navigation to
  // `?canceled=true`, the page resumed on the payment step, a fresh intent
  // re-opened the modal over the "payment canceled" banner, and browser Back
  // did the same — the shopper could never get back to the checkout. Starts
  // closed when the URL already says the previous attempt was canceled.
  const [modalDismissed, setModalDismissed] = useState<boolean>(
    () =>
      typeof window !== 'undefined' &&
      new URLSearchParams(window.location.search).get('canceled') === 'true'
  );
  const walletOpenRef = useRef(false);
  const initialized = useRef(false);

  // Whether the provider-hosted modal is on screen right now. Derived, not
  // stored, so every branch below agrees on it.
  const providerModalOpen =
    !modalDismissed &&
    !!paymentIntent &&
    resolveClientSdk(paymentIntent, preloadedSdk).renderType === 'iframe' &&
    !isBrainerceEmbed;

  // Back closes the modal instead of leaving the shopper inside it. Opening
  // pushes one history entry tagged as ours; popping it (Back, or the X below
  // calling history.back()) dismisses. A provider page that navigates inside
  // the iframe adds entries of its own on top, so Back may need a press per
  // in-frame navigation first — that is the browser's rule, not ours, and it
  // still ends on the checkout rather than looping through the payment page.
  useEffect(() => {
    if (!providerModalOpen) return;
    const marker = { brainercePaymentModal: true };
    window.history.pushState(marker, '');
    const onPop = () => setModalDismissed(true);
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, [providerModalOpen]);

  const closeProviderModal = useCallback(() => {
    if (
      (window.history.state as { brainercePaymentModal?: boolean } | null)?.brainercePaymentModal
    ) {
      // Our entry is on top: popping it fires popstate, which dismisses and
      // leaves the history as it was before the modal opened.
      window.history.back();
    } else {
      setModalDismissed(true);
    }
  }, []);

  // Stable refs for SDK event callbacks (avoids stale closures in onload)
  const cbRef = useRef({
    onSuccess: (_r: unknown) => {},
    onFailure: (_r: unknown) => {},
    onError: (_r: unknown) => {},
    onTimeout: () => {},
    onWalletChange: (_s: string) => {},
    retryRender: () => {},
  });

  const handleSuccess = useCallback(
    async (response: unknown) => {
      console.info('Payment SDK success:', JSON.stringify(response));
      try {
        const client = getClient();
        const resp = response as Record<string, unknown>;
        const data = (resp?.data && typeof resp.data === 'object' ? resp.data : resp) as
          | Record<string, unknown>
          | undefined;
        await client.confirmSdkPayment(checkoutId, data || undefined);
      } catch (err) {
        console.warn('Failed to confirm payment with backend:', err);
      }
      window.location.href = `/order-confirmation?checkout_id=${checkoutId}`;
    },
    [checkoutId]
  );

  cbRef.current = {
    onSuccess: handleSuccess,
    onFailure: (response: unknown) => {
      console.error('Payment SDK failure:', response);
      setError(extractMessage(response) || t('paymentError'));
    },
    onError: (response: unknown) => {
      const TRANSIENT = [
        'Wallet not initialized',
        "SDK was not loaded as needed and therefore can't run",
      ];
      const msg = extractMessage(response);
      if (TRANSIENT.some((e) => msg.includes(e))) {
        console.info('Payment SDK: transient error, retrying render in 1s:', msg);
        setTimeout(() => cbRef.current.retryRender(), 1000);
        return;
      }
      console.error('Payment SDK error:', response);
      setError(msg || t('paymentError'));
    },
    onTimeout: () => {
      console.warn('Payment SDK: wallet timed out');
      setError(t('paymentTimedOut'));
    },
    onWalletChange: (state: string) => {
      console.info('Payment SDK wallet state:', state);
      if (state === 'open') {
        walletOpenRef.current = true;
        setSdkReady(true);
      }
      if (state === 'close') setSdkReady(false);
    },
    retryRender: () => {},
  };

  // =========================================================================
  // MAIN EFFECT — Follows Grow SDK docs exactly:
  //
  // Step 1: Load gs.min.js (insertBefore, as docs show)
  // Step 2: s.onload → growPayment.init({ environment, version, events })
  //         This triggers the SDK to load mp.min.js → CSS, HTML, params, services
  // Step 3: createPaymentIntent (starts wallet timer — should be AFTER init)
  // Step 4: growPayment.renderPaymentOptions(authCode)
  //
  // "call createPaymentProcess right before you need to render the wallet"
  // =========================================================================
  useEffect(() => {
    // Defense in depth: the parent already validates checkoutId from URL
    // params, but we re-check here so the component is safe to render in any
    // context. Invalid id → no SDK loading, no API calls (error UI below).
    if (!isValidCheckoutId(checkoutId)) return;
    if (initialized.current) return;
    initialized.current = true;

    const client = getClient();
    const iframeSuccessUrl = `${window.location.origin}/payment-complete?checkout_id=${checkoutId}`;
    const iframeFailedUrl = `${window.location.origin}/payment-complete?checkout_id=${checkoutId}&failed=true`;
    const redirectSuccessUrl = `${window.location.origin}/order-confirmation?checkout_id=${checkoutId}`;
    const cancelUrl = `${window.location.origin}/checkout?checkout_id=${checkoutId}&canceled=true`;

    let sdkInitDone = false;
    let currentSdk: PaymentClientSdk | null = null;
    const cleanups: (() => void)[] = [];

    // --- Load SDK script exactly as Grow docs show ---
    function loadScript(sdk: PaymentClientSdk) {
      if (!sdk.scriptUrl || !sdk.globalName) return;

      // Inject bodyStyles
      if (sdk.bodyStyles && !document.querySelector('style[data-payment-sdk]')) {
        const style = document.createElement('style');
        style.setAttribute('data-payment-sdk', 'true');
        style.textContent = sdk.bodyStyles;
        document.head.appendChild(style);
        cleanups.push(() => style.remove());
      }

      // Additional scripts (Apple Pay etc.) — fire and forget
      if (sdk.additionalScripts) {
        for (const extra of sdk.additionalScripts) {
          if (document.querySelector(`script[src="${extra.url}"]`)) continue;
          const s = document.createElement('script');
          s.type = 'text/javascript';
          s.async = true;
          s.src = extra.url;
          const ref = document.getElementsByTagName('script')[0];
          if (ref?.parentNode) ref.parentNode.insertBefore(s, ref);
          else document.head.appendChild(s);
        }
      }

      // Already loaded? Init immediately
      if ((window as any)[sdk.globalName]) {
        initSdk(sdk);
        return;
      }

      // Already loading (from a previous call)? Wait for it instead of duplicating
      if (document.querySelector(`script[src="${sdk.scriptUrl}"]`)) {
        const waitId = setInterval(() => {
          if ((window as any)[sdk.globalName!]) {
            clearInterval(waitId);
            initSdk(sdk);
          }
        }, 100);
        cleanups.push(() => clearInterval(waitId));
        return;
      }

      // Load main SDK — insertBefore first <script> as Grow docs show
      const s = document.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      s.src = sdk.scriptUrl;
      s.onload = () => initSdk(sdk); // init DIRECTLY in onload
      s.onerror = () => {
        console.error('Payment SDK: script load failed');
        setError(t('failedToLoadPaymentSdk'));
      };
      const ref = document.getElementsByTagName('script')[0];
      if (ref?.parentNode) ref.parentNode.insertBefore(s, ref);
      else document.head.appendChild(s);
    }

    // --- Init: called in s.onload (as Grow docs require) ---
    function initSdk(sdk: PaymentClientSdk) {
      if (sdkInitDone) return; // Guard against double init

      const global = (window as any)[sdk.globalName!];
      if (!global) {
        setError(t('failedToLoadPaymentSdk'));
        return;
      }

      const method = sdk.initMethod || 'init';
      const config = {
        ...(sdk.initConfig || {}),
        events: {
          onSuccess: (r: unknown) => cbRef.current.onSuccess(r),
          onFailure: (r: unknown) => cbRef.current.onFailure(r),
          onError: (r: unknown) => cbRef.current.onError(r),
          onTimeout: () => cbRef.current.onTimeout(),
          onWalletChange: (s: string) => cbRef.current.onWalletChange(s),
        },
      };

      console.info(`Payment SDK: calling ${method}()`);
      global[method](config);
      sdkInitDone = true;
    }

    // --- Render: call once, then safety-net retries if wallet doesn't open ---
    // Grow SDK sometimes silently swallows renderPaymentOptions when its
    // internal resources (mp.min.js etc.) aren't fully loaded yet.
    // Strategy: render once, then retry up to 3 times with increasing delays
    // (2s, 3s, 4s) if onWalletChange("open") hasn't fired.
    let pendingRender: { sdk: PaymentClientSdk; intent: PaymentIntent } | null = null;
    let renderAttempts = 0;
    const MAX_RENDER_ATTEMPTS = 4;

    function renderPayment(sdk: PaymentClientSdk, intent: PaymentIntent) {
      const global = (window as any)[sdk.globalName!];
      if (!global || walletOpenRef.current) return;

      const renderMethod = sdk.renderMethod || 'renderPaymentOptions';
      const renderArg = sdk.renderArg || intent.clientSecret;
      renderAttempts++;

      try {
        global[renderMethod](renderArg);
        console.info(`Payment SDK: renderPaymentOptions called (attempt ${renderAttempts})`);
      } catch (err) {
        console.info('Payment SDK: render threw, will retry in 1s');
      }

      // Safety net: if wallet doesn't open within a delay, retry
      if (renderAttempts < MAX_RENDER_ATTEMPTS) {
        const delay = 1000 + renderAttempts * 1000; // 2s, 3s, 4s
        const retryId = setTimeout(() => {
          if (!walletOpenRef.current) {
            console.info(`Payment SDK: wallet not open after ${delay}ms, retrying render...`);
            renderPayment(sdk, intent);
          }
        }, delay);
        cleanups.push(() => clearTimeout(retryId));
      }
    }

    function retryRender() {
      if (pendingRender && !walletOpenRef.current) {
        renderPayment(pendingRender.sdk, pendingRender.intent);
      }
    }

    // =============================================
    // Execution flow
    // =============================================

    // A) Get SDK config from providers (fast, no wallet timer)
    const providerPromise = client
      .getPaymentProviders()
      .then((res) => {
        const sdk = res.defaultProvider?.clientSdk;
        if (sdk) setPreloadedSdk(sdk);
        return sdk || null;
      })
      .catch(() => null);

    // B) Load + init SDK as early as possible (skip for sandbox)
    providerPromise.then((providerSdk) => {
      if (providerSdk?.renderType === 'sandbox') return;
      if (providerSdk?.renderType === 'sdk-widget' && providerSdk.scriptUrl) {
        currentSdk = providerSdk;
        loadScript(providerSdk);
      }
    });

    // C) Create payment intent (starts wallet timer)
    // Wait for provider info so we can choose the right success URL:
    // iframe providers redirect inside the iframe to /payment-complete (postMessage),
    // redirect providers go straight to /order-confirmation.
    //
    // The mode is PREDICTED with the platform's own resolution rule
    // (resolveRenderType): the provider's default, unless this storefront asks
    // for a mode the provider declares in `displayModes`. The prediction only
    // picks the return URL; the branch below still reads the `renderType` that
    // comes BACK on the intent, never the prediction.
    const intentPromise = providerPromise
      .then((providerSdk) => {
        const expectedRenderType = resolveRenderType(providerSdk, PREFERRED_RENDER_MODE);
        const isIframe = expectedRenderType === 'iframe';
        const successUrl = isIframe ? iframeSuccessUrl : redirectSuccessUrl;
        const failedUrl = isIframe ? iframeFailedUrl : cancelUrl;
        // `preferredRenderType` is only sent when a preference is set, so a
        // storefront on the provider default sends the same body it always
        // has (and an SDK whose option type predates it still compiles).
        return client.createPaymentIntent(checkoutId, {
          successUrl,
          cancelUrl: failedUrl,
          ...(PREFERRED_RENDER_MODE ? { preferredRenderType: PREFERRED_RENDER_MODE } : {}),
        });
      })
      .then((intent) => {
        setPaymentIntent(intent);
        return intent;
      })
      .catch((err) => {
        // This is intent CREATION, before any card is entered, so a failure
        // here is the merchant's configuration and never the shopper's card.
        // The server said "Stripe account is not connected" and the storefront
        // printed it verbatim: raw English on a Hebrew store, naming a provider
        // to someone who could not install one if they wanted to. Declines come
        // from the provider SDK on a different path and keep their own wording,
        // which is the part a shopper can actually act on.
        console.error('[checkout] could not start payment', err);
        setError(t('paymentUnavailable'));
        return null;
      })
      .finally(() => setLoading(false));

    // D) When both ready: resolve final SDK config and render
    Promise.all([providerPromise, intentPromise]).then(([providerSdk, intent]) => {
      if (!intent) return;

      const sdk = resolveClientSdk(intent, providerSdk);
      currentSdk = sdk;

      // Sandbox mode — no SDK to load, UI handles it
      if (sdk.renderType === 'sandbox') return;

      // The URL to send the customer to is `renderArg`; `clientSecret` is only
      // a fallback for providers that duplicate the URL into it. Reading
      // clientSecret first silently breaks any provider that puts a real
      // identifier there (MAX, Takbull) — the host check rejects the id and the
      // customer never reaches the payment page. Mirrors the sdk-widget branch
      // above, which already prefers renderArg.
      const paymentUrl = sdk.renderArg || intent.clientSecret;

      if (sdk.renderType === 'redirect') {
        if (!isAllowedPaymentUrl(paymentUrl)) {
          setError(t('paymentRedirectBlocked'));
          return;
        }
        safePaymentRedirect(paymentUrl);
        return;
      }

      // Iframe mode: listen for postMessage from either:
      //   (1) the same-origin /payment-complete callback page after a provider
      //       redirect (legacy hosted-page flow), OR
      //   (2) a Brainerce-hosted embed page on an allowlisted payment host
      //       that wraps provider-specific logic (e.g. Cardcom OpenFields).
      if (sdk.renderType === 'iframe') {
        if (!isAllowedPaymentUrl(paymentUrl)) {
          setError(t('paymentRedirectBlocked'));
          return;
        }
        const iframeOrigin = (() => {
          try {
            return new URL(paymentUrl).origin;
          } catch {
            return '';
          }
        })();
        const handleMessage = (event: MessageEvent) => {
          const isSameOrigin = event.origin === window.location.origin;
          const isTrustedIframe = iframeOrigin && event.origin === iframeOrigin;
          if (!isSameOrigin && !isTrustedIframe) return;
          if (event.data?.type === 'brainerce:resize') {
            const h = Number((event.data as { height?: unknown }).height);
            if (Number.isFinite(h) && h > 0 && h < 4000) setEmbeddedIframeHeight(h);
            return;
          }
          // Embed page asking for a top-level redirect (e.g. Bit express-pay).
          // We re-validate against the allowlist even though the URL comes
          // from an already-trusted iframe — defense in depth.
          if (event.data?.type === 'brainerce:redirect') {
            const url = String((event.data as { url?: unknown }).url || '');
            if (url) safePaymentRedirect(url);
            return;
          }
          if (event.data?.type !== 'brainerce:payment-complete') return;

          const params = event.data.data as Record<string, string> | undefined;
          if (params?.failed === 'true') {
            setError(t('paymentError'));
            return;
          }

          // Map provider-specific params to normalized format for
          // server-side verification (e.g. CardCom lowprofilecode → paymentIntentId)
          const lowProfileCode = params?.lowprofilecode || params?.LowProfileCode;
          const normalized: Record<string, unknown> = { ...params };
          if (lowProfileCode) {
            normalized.paymentIntentId = lowProfileCode;
          }

          // Trigger server-side verification + order creation
          handleSuccess(normalized);
        };
        window.addEventListener('message', handleMessage);
        cleanups.push(() => window.removeEventListener('message', handleMessage));
        return;
      }

      if (sdk.renderType !== 'sdk-widget' || !sdk.globalName) return;

      // Store for retryRender from onError callback
      pendingRender = { sdk, intent };
      cbRef.current.retryRender = retryRender;

      // If SDK wasn't loaded from providers, load + init now
      if (!sdkInitDone) {
        loadScript(sdk);
        // Wait for init to complete, then render once
        const id = setInterval(() => {
          if (sdkInitDone) {
            clearInterval(id);
            renderPayment(sdk, intent);
          }
        }, 100);
        cleanups.push(() => clearInterval(id));
        return;
      }

      // Re-init with final config if environment changed
      if (sdk.initConfig?.environment && currentSdk) {
        const global = (window as any)[sdk.globalName];
        if (global) {
          const method = sdk.initMethod || 'init';
          global[method]({
            ...(sdk.initConfig || {}),
            events: {
              onSuccess: (r: unknown) => cbRef.current.onSuccess(r),
              onFailure: (r: unknown) => cbRef.current.onFailure(r),
              onError: (r: unknown) => cbRef.current.onError(r),
              onTimeout: () => cbRef.current.onTimeout(),
              onWalletChange: (s: string) => cbRef.current.onWalletChange(s),
            },
          });
        }
      }

      // SDK ready — render once
      renderPayment(sdk, intent);
    });

    return () => cleanups.forEach((fn) => fn());
  }, [checkoutId]);

  // Brainerce-hosted embed pages announce themselves immediately via the
  // `brainerce:resize` postMessage handled above (it sets
  // `embeddedIframeHeight`). If that never arrives — most commonly the
  // parent origin isn't in the embed page's `frame-ancestors` allowlist and
  // the browser refuses to frame it at all — there is otherwise no signal:
  // cross-origin framing failures are invisible to the parent window, so the
  // shopper is left staring at a blank box forever with no error and no way
  // forward.
  useEffect(() => {
    if (!isBrainerceEmbed || !paymentIntentUrl) return;
    setIframeLoadFailed(false);
    const timer = setTimeout(() => {
      setEmbeddedIframeHeight((h) => {
        if (h === null) setIframeLoadFailed(true);
        return h;
      });
    }, 10000);
    return () => clearTimeout(timer);
  }, [isBrainerceEmbed, paymentIntentUrl]);

  // --- UI ---

  // Invalid checkout id — render the error box instead of ever spinning.
  // (Checked after the hooks above so hook order is stable across renders.)
  if (!isValidCheckoutId(checkoutId)) {
    return (
      <div className={cn('border-destructive/50 rounded-md border p-4', className)}>
        <p className="text-destructive text-sm">{t('paymentError')}</p>
      </div>
    );
  }

  if (loading) {
    return (
      <div className={cn('flex flex-col items-center justify-center py-12', className)}>
        <LoadingSpinner size="lg" />
        <p className="text-muted-foreground mt-4 text-sm">{t('preparingPayment')}</p>
      </div>
    );
  }

  if (error) {
    const isNotConfigured =
      error.toLowerCase().includes('not configured') ||
      error.toLowerCase().includes('no payment') ||
      error.toLowerCase().includes('provider');
    return (
      <div className={cn('py-12 text-center', className)}>
        <svg
          className="text-muted-foreground mx-auto mb-4 h-12 w-12"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.5}
            d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
          />
        </svg>
        <h3 className="text-foreground mb-2 text-lg font-semibold">
          {isNotConfigured ? t('paymentNotConfigured') : t('paymentError')}
        </h3>
        <p className="text-muted-foreground mx-auto max-w-md text-sm">
          {isNotConfigured ? t('paymentNotConfiguredDesc') : error}
        </p>
      </div>
    );
  }

  if (!paymentIntent) return null;

  const sdk = resolveClientSdk(paymentIntent, preloadedSdk);

  if (sdk.renderType === 'sandbox') {
    const handleCompleteSandbox = async () => {
      setLoading(true);
      try {
        const client = getClient();
        await client.completeGuestCheckout(checkoutId);
        window.location.href = `/order-confirmation?checkout_id=${checkoutId}`;
      } catch (err) {
        // Sandbox never declines, so there is nothing here a shopper can act on
        // either.
        console.error('[checkout] sandbox completion failed', err);
        setError(t('paymentError'));
        setLoading(false);
      }
    };

    return (
      <div className={cn('py-8 text-center', className)}>
        <div className="mx-auto max-w-md rounded-lg border border-amber-200 bg-amber-50 p-6">
          <svg
            className="mx-auto mb-3 h-10 w-10 text-amber-500"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={1.5}
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
            />
          </svg>
          <h3 className="text-foreground mb-1 text-lg font-semibold">{t('sandboxTitle')}</h3>
          <p className="text-muted-foreground mb-4 text-sm">{t('sandboxDescription')}</p>
          <button
            onClick={handleCompleteSandbox}
            className="inline-flex items-center rounded-md bg-amber-500 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-amber-600"
          >
            {t('completeTestOrder')}
          </button>
        </div>
      </div>
    );
  }

  if (sdk.renderType === 'sdk-widget') {
    const containerId =
      sdk.containerId || `${paymentIntent.provider || 'payment'}-payment-container`;
    return (
      <div className={cn('py-4', className)}>
        {!sdkReady && (
          <div className="flex flex-col items-center justify-center py-8">
            <LoadingSpinner size="lg" />
            <p className="text-muted-foreground mt-4 text-sm">{t('loadingPaymentOptions')}</p>
          </div>
        )}
        <div id={containerId} />
      </div>
    );
  }

  if (sdk.renderType === 'iframe') {
    if (!isAllowedPaymentUrl(paymentIntentUrl)) return null;

    // Detect Brainerce-hosted embed (path-based — works across localhost/
    // staging/prod without a domain list) vs. a provider-hosted page. The
    // embed page is already brand-styled and compact → render inline in the
    // checkout flow. Provider-hosted pages carry their own branding/chrome →
    // keep the modal overlay so they don't fight the checkout layout.
    if (isBrainerceEmbed) {
      if (iframeLoadFailed) {
        return (
          <div className={cn('border-border rounded-lg border px-4 py-6 text-center', className)}>
            <p className="text-foreground text-sm font-medium">{t('paymentError')}</p>
            <p className="text-muted-foreground mt-1 text-sm">{t('paymentLoadFailed')}</p>
            <a
              href={paymentIntentUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="bg-primary text-primary-foreground mt-4 inline-flex items-center rounded px-6 py-3 text-sm font-medium transition-opacity hover:opacity-90"
            >
              {t('openPaymentModal')}
            </a>
          </div>
        );
      }

      // Inline: default to a reasonable height until the embed posts its real
      // height via `brainerce:resize`. Transition smooths the resize into the
      // final measurement.
      const hasMeasured = embeddedIframeHeight !== null;
      const iframeStyle: CSSProperties = {
        height: hasMeasured ? (embeddedIframeHeight as number) : 540,
        transition: hasMeasured ? 'height 0.2s ease-out' : undefined,
      };
      return (
        <div className={cn('w-full', className)}>
          <iframe
            src={paymentIntentUrl}
            className="block w-full border-0"
            style={iframeStyle}
            title={t('payment')}
            allow="payment"
          />
        </div>
      );
    }

    // Closed by the shopper (X, browser Back, or arriving with
    // `?canceled=true`): hold the payment step with a way back in. The intent
    // is kept; re-opening reuses it (the core hands back the same intent for
    // an unchanged charge).
    if (modalDismissed) {
      return (
        <div
          className={cn('flex flex-col items-center justify-center py-12 text-center', className)}
        >
          <p className="text-muted-foreground mb-4 text-sm">{t('paymentModalClosed')}</p>
          <button
            type="button"
            onClick={() => setModalDismissed(false)}
            className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-6 py-2.5 text-sm font-medium transition-colors"
          >
            {t('openPaymentModal')}
          </button>
        </div>
      );
    }

    // Provider-hosted page (e.g. Cardcom LowProfile with full merchant
    // branding) — modal overlay keeps it visually contained.
    const formattedAmount = formatPrice((Number(paymentIntent.amount) || 0) / 100, {
      currency: paymentIntent.currency,
    }) as string;
    const iframeStyle: CSSProperties = { height: '90vh', minHeight: 700 };
    return (
      <>
        {/* Modal overlay */}
        <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 py-6 backdrop-blur-sm">
          <div className="bg-background relative mx-4 flex w-full max-w-4xl flex-col overflow-hidden rounded-2xl shadow-2xl">
            {/* Header */}
            <div className="border-border flex items-center justify-between gap-4 border-b px-5 py-4">
              <div className="flex min-w-0 flex-col">
                <span className="text-foreground truncate text-sm font-semibold">
                  {storeInfo?.name}
                </span>
                <span className="text-muted-foreground text-xs">{t('payment')}</span>
              </div>
              <div className="flex items-baseline gap-1.5">
                <span className="text-foreground text-lg font-bold tabular-nums">
                  {formattedAmount}
                </span>
                <span className="text-muted-foreground text-xs uppercase">
                  {paymentIntent.currency}
                </span>
              </div>
              <button
                type="button"
                onClick={closeProviderModal}
                className="text-muted-foreground hover:bg-secondary hover:text-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition-colors"
                aria-label="Close"
              >
                <svg
                  width="14"
                  height="14"
                  viewBox="0 0 14 14"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                >
                  <path d="M1 1l12 12M13 1L1 13" />
                </svg>
              </button>
            </div>
            {/* Iframe body */}
            <iframe
              src={paymentIntentUrl}
              className="w-full border-0"
              style={iframeStyle}
              title={t('payment')}
              allow="payment"
            />
            {/* Footer */}
            <div className="border-border bg-secondary/30 text-muted-foreground flex items-center justify-center gap-2 border-t px-5 py-3 text-xs">
              <svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
              >
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                <path d="m9 12 2 2 4-4" />
              </svg>
              <span>
                {t('securePayment')} · <span className="font-medium">Brainerce</span>
              </span>
            </div>
          </div>
        </div>
        {/* Placeholder so the checkout layout doesn't collapse */}
        <div className={cn('flex flex-col items-center justify-center py-12', className)}>
          <LoadingSpinner size="lg" />
          <p className="text-muted-foreground mt-4 text-sm">{t('preparingPayment')}</p>
        </div>
      </>
    );
  }

  return (
    <div className={cn('flex flex-col items-center justify-center py-12', className)}>
      <LoadingSpinner size="lg" />
      <p className="text-muted-foreground mt-4 text-sm">{t('redirectingToPayment')}</p>
      <p className="text-muted-foreground mt-2 text-xs">
        {t('redirectingHint')}
        <a href={paymentIntentUrl} className="text-primary hover:underline">
          {t('clickHere')}
        </a>
        .
      </p>
    </div>
  );
}