'use client';

import { Suspense, useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { CdnImage as Image } from '@/ui/shared/cdn-image';
import { Link } from '@/core/lib/navigation';
import type { Order, WaitForOrderResult, OrderDownloadLink } from 'brainerce';
import { formatPrice } from 'brainerce';
import { getClient } from '@/core/lib/brainerce';
import { useCart } from '@/core/providers/store-provider';
import { useCurrency } from '@/core/lib/use-currency';
import { OrderCustomizations } from '@/components/account/order-customizations';
import { LoadingSpinner } from '@/ui/shared/loading-spinner';
import { useTranslations } from '@/core/lib/translations';
import { trackPurchase } from '@/core/lib/tracking';

function OrderConfirmationContent() {
  const searchParams = useSearchParams();
  const checkoutId = searchParams.get('checkout_id');

  const { refreshCart } = useCart();
  const t = useTranslations('orderConfirmation');
  const tc = useTranslations('common');
  const [result, setResult] = useState<WaitForOrderResult | null>(null);
  // The real Order behind the checkout. `waitForOrder` resolves to a status
  // envelope that carries no line items at all, so this second fetch is the
  // only way this page can show what was actually bought.
  const [order, setOrder] = useState<Order | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!checkoutId) {
      setError(t('missingCheckoutInfo'));
      setLoading(false);
      return;
    }

    async function waitForOrder() {
      try {
        const client = getClient();

        // Clear cart state after successful payment. handlePaymentSuccess is
        // SYNCHRONOUS: it returns the outcome rather than a promise, so there
        // is nothing to await. Read the result, then refresh the cart AFTER
        // it, or the header badge can be repopulated from the pre-clear cart.
        //
        //   mode 'full'    - whole cart cleared
        //   mode 'partial' - only the purchased items were removed (partial
        //                    checkout); whatever is left is still for sale
        //   mode 'none'    - nothing to clear. Usually the SDK's idempotency
        //                    guard: React Strict Mode runs this effect twice
        //                    in development, and a refresh of this URL hits it
        //                    too. On a good order this is expected, so it must
        //                    never become a warning to the shopper.
        const clearResult = client.handlePaymentSuccess(checkoutId!);
        await refreshCart();

        if (!clearResult.cleared && clearResult.mode !== 'none') {
          // A clear that neither succeeded nor was skipped leaves purchased
          // items in the badge. Nothing the shopper can act on, but a silent
          // gap here looks exactly like a working cart.
          console.warn('Cart not cleared after payment:', clearResult);
        }

        // For redirect-based payment providers, the customer returns with
        // provider params in the URL — CardCom: lowprofilecode; PayPal:
        // token + PayerID. Send these to the backend for server-side
        // verification via the provider's API (e.g. GetLpResult / PayPal
        // capture) — never trust URL params alone. For PayPal this call is
        // what actually captures the approved payment.
        const lowProfileCode =
          searchParams.get('lowprofilecode') || searchParams.get('LowProfileCode');
        const paypalOrderToken =
          searchParams.get('token') && searchParams.get('PayerID')
            ? searchParams.get('token')
            : null;
        const redirectReturnToken = lowProfileCode || paypalOrderToken;
        if (redirectReturnToken) {
          try {
            await client.confirmSdkPayment(checkoutId!, {
              paymentIntentId: redirectReturnToken,
            });
          } catch (err) {
            console.warn('Redirect payment confirmation failed:', err);
            // Don't block — payment-status polling re-verifies server-side
          }
        }

        const orderResult = await client.waitForOrder(checkoutId!, {
          maxWaitMs: 30000,
        });
        setResult(orderResult);

        // `purchase` — the one event ad platforms optimize campaigns on.
        // Read the real order rather than the pre-payment cart so value, tax,
        // shipping and coupon match what was actually charged; `trackPurchase`
        // de-duplicates on the order id, so a refresh cannot double-count it.
        //
        // The same Order is what this page renders its line items from, so
        // keep it rather than discarding it after the conversion call.
        // `getOrderByCheckout` is typed `Promise<Order>` and REJECTS on 404 —
        // it never resolves to null — so the catch below is what degrades this
        // page to the order-number-only view instead of breaking it.
        if (orderResult.success) {
          try {
            const fetchedOrder = await client.getOrderByCheckout(checkoutId!);
            setOrder(fetchedOrder);
            trackPurchase(fetchedOrder);
          } catch (err) {
            // A conversion we failed to report must never break the page the
            // shopper is looking at — but it should be visible, because a
            // silent gap here looks identical to "no sales" in ad reporting.
            console.warn('Purchase conversion not reported:', err);
          }
        }
      } catch (err) {
        const message = err instanceof Error ? err.message : 'Failed to confirm order';
        setError(message);
      } finally {
        setLoading(false);
      }
    }

    waitForOrder();
  }, [checkoutId, refreshCart]);

  if (loading) {
    return (
      <div className="flex min-h-[60vh] flex-col items-center justify-center">
        <LoadingSpinner size="lg" />
        <p className="text-muted-foreground mt-4">{t('confirming')}</p>
        <p className="text-muted-foreground mt-1 text-xs">{t('confirmingHint')}</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="mx-auto max-w-2xl px-4 py-16 text-center sm:px-6 lg:px-8">
        <svg
          className="text-destructive mx-auto mb-4 h-16 w-16"
          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 4c-.77-.834-2.694-.834-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
          />
        </svg>
        <h1 className="text-foreground text-2xl font-bold">{t('errorTitle')}</h1>
        <p className="text-muted-foreground mt-2">{error}</p>
        <p className="text-muted-foreground mt-1 text-sm">{t('errorChargedHint')}</p>
        <Link
          href="/"
          className="bg-primary text-primary-foreground mt-6 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
        >
          {t('returnHome')}
        </Link>
      </div>
    );
  }

  // Order was created successfully
  if (result?.success) {
    const orderNumber = result.status.orderNumber;

    return (
      <div className="mx-auto max-w-2xl px-4 py-16 text-center sm:px-6 lg:px-8">
        <svg
          className="text-primary mx-auto mb-4 h-16 w-16"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.5}
            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>

        <h1 className="text-foreground text-2xl font-bold">{t('thankYou')}</h1>

        {orderNumber && (
          <p className="text-foreground mt-3 text-lg">
            {t('orderNumber')} <span className="font-semibold">{orderNumber}</span>
          </p>
        )}

        <p className="text-muted-foreground mt-2">{t('confirmationEmail')}</p>

        {/* What was actually bought. Renders nothing at all when the order
            fetch failed or came back with no lines, leaving the number-only
            view above intact. */}
        <ConfirmationLineItems order={order} />

        {result.status.orderId && (
          <ConfirmationDownloads orderId={result.status.orderId} checkoutId={checkoutId!} />
        )}

        <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
          <Link
            href="/products"
            className="bg-primary text-primary-foreground inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
          >
            {tc('continueShopping')}
          </Link>

          <Link
            href="/account"
            className="border-border text-foreground hover:bg-muted inline-flex items-center rounded border px-6 py-3 font-medium transition-colors"
          >
            {t('viewOrders')}
          </Link>
        </div>
      </div>
    );
  }

  // Order not yet confirmed (polling timed out) - still show success
  return (
    <div className="mx-auto max-w-2xl px-4 py-16 text-center sm:px-6 lg:px-8">
      <svg
        className="text-primary mx-auto mb-4 h-16 w-16"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={1.5}
          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>

      <h1 className="text-foreground text-2xl font-bold">{t('paymentReceived')}</h1>

      <p className="text-muted-foreground mt-2">{t('orderProcessing')}</p>

      <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
        <Link
          href="/products"
          className="bg-primary text-primary-foreground inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
        >
          {tc('continueShopping')}
        </Link>

        <Link
          href="/account"
          className="border-border text-foreground hover:bg-muted inline-flex items-center rounded border px-6 py-3 font-medium transition-colors"
        >
          {t('viewOrders')}
        </Link>
      </div>
    </div>
  );
}

/**
 * Line items on the confirmation page.
 *
 * `OrderItem` is FLAT — `item.name`, `item.price`, `item.image` — unlike the
 * nested `CartItem` / `CheckoutLineItem` shapes used elsewhere in this
 * storefront. Do not copy a cart row renderer here; `item.product.name` does
 * not exist on an order.
 *
 * Auto-hides: returns null when the order fetch failed (`order === null`) or
 * the order carries no lines, so the number-only confirmation still renders.
 */
function ConfirmationLineItems({ order }: { order: Order | null }) {
  // Named `tch` rather than `t` on purpose: the other components in this file
  // bind `t` to the `orderConfirmation` namespace, and a same-named alias on a
  // different namespace is how a wrong-namespace key slips through review.
  const tch = useTranslations('checkout');
  const ta = useTranslations('account');
  const tc = useTranslations('common');
  const currency = useCurrency(order?.currency);

  if (!order || !order.items || order.items.length === 0) return null;

  const totalAmount = order.totalAmount || order.total || '0';

  return (
    <div className="border-border bg-muted/30 mx-auto mt-8 max-w-md rounded-lg border p-6 text-start">
      <h3 className="text-foreground mb-3 text-sm font-semibold">{tch('orderSummary')}</h3>

      <div className="space-y-3">
        {order.items.map((item, index) => (
          <div key={`${item.productId}-${index}`} className="space-y-1">
            <div className="flex items-center gap-3">
              <div className="bg-muted relative h-12 w-12 flex-shrink-0 overflow-hidden rounded">
                {item.image ? (
                  <Image
                    src={item.image}
                    alt={item.name || ta('productFallback')}
                    fill
                    sizes="48px"
                    className="object-cover"
                  />
                ) : null}
              </div>

              <div className="min-w-0 flex-1">
                <p className="text-foreground truncate text-sm">
                  {item.name || ta('productFallback')}
                </p>
                <p className="text-muted-foreground text-xs">
                  {tc('qty')} {item.quantity}
                </p>
              </div>

              <span className="text-foreground flex-shrink-0 text-sm">
                {formatPrice(parseFloat(item.price), { currency }) as string}
              </span>
            </div>

            {/* What the buyer typed / uploaded / picked, with the merchant's
                own labels. Renders nothing when the line has none. */}
            {item.customizations && <OrderCustomizations customizations={item.customizations} />}
          </div>
        ))}
      </div>

      <div className="border-border mt-3 flex items-center justify-between border-t pt-3">
        <span className="text-foreground text-sm font-medium">{tc('total')}</span>
        <span className="text-foreground text-sm font-semibold">
          {formatPrice(parseFloat(totalAmount), { currency }) as string}
        </span>
      </div>

      {/* What actually paid.
          This is the first screen a customer sees after handing over money, and
          a total with no gift-card line tells them they paid an amount they did
          not. The total above is what the order was WORTH and stays unreduced —
          tax was calculated on it — so the cards sit below it, followed by what
          the card or wallet was really charged. */}
      {order.tenders && order.tenders.length > 0 && (
        <>
          {order.tenders.map((tender) => (
            <div key={tender.id} className="mt-2 flex items-center justify-between text-sm">
              <span className="text-muted-foreground">
                {tender.giftCard?.codeLast4
                  ? `${tc('giftCard')} ····${tender.giftCard.codeLast4}`
                  : tc('giftCard')}
              </span>
              <span className="text-primary">
                -{formatPrice(parseFloat(tender.amountBase), { currency }) as string}
              </span>
            </div>
          ))}
          <div className="border-border mt-2 flex items-center justify-between border-t pt-2">
            <span className="text-foreground text-sm font-medium">{tc('amountCharged')}</span>
            <span className="text-foreground text-sm font-semibold">
              {
                formatPrice(
                  order.tenders.reduce(
                    (due, tn) => due - parseFloat(tn.amountBase),
                    parseFloat(totalAmount)
                  ),
                  { currency }
                ) as string
              }
            </span>
          </div>
        </>
      )}
    </div>
  );
}

function ConfirmationDownloads({ orderId, checkoutId }: { orderId: string; checkoutId: string }) {
  const t = useTranslations('orderConfirmation');
  const [downloads, setDownloads] = useState<OrderDownloadLink[] | null>(null);

  useEffect(() => {
    let cancelled = false;
    async function fetchDownloads() {
      const client = getClient();
      // Retry a few times — the worker may still be writing downloadMeta
      for (let attempt = 0; attempt < 3; attempt++) {
        try {
          const links = await client.getOrderDownloads(orderId, { checkoutId });
          if (!cancelled && links.length > 0) {
            setDownloads(links);
            return;
          }
        } catch {
          // Not all orders have downloads
        }
        if (attempt < 2 && !cancelled) {
          await new Promise((r) => setTimeout(r, 1500));
        }
      }
    }
    fetchDownloads();
    return () => {
      cancelled = true;
    };
  }, [orderId, checkoutId]);

  if (!downloads || downloads.length === 0) return null;

  return (
    <div className="border-border bg-muted/30 mx-auto mt-8 max-w-md rounded-lg border p-6 text-start">
      <h3 className="text-foreground mb-3 text-sm font-semibold">{t('yourDownloads')}</h3>
      <div className="space-y-2">
        {downloads.map((link, idx) => (
          <div key={idx} className="flex items-center justify-between gap-3">
            <div className="min-w-0 flex-1">
              <p className="text-foreground truncate text-sm">{link.fileName}</p>
              <p className="text-muted-foreground truncate text-xs">{link.productName}</p>
            </div>
            <a
              href={link.downloadUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="bg-primary text-primary-foreground flex-shrink-0 rounded px-3 py-1.5 text-xs font-medium hover:opacity-90"
            >
              {t('download')}
            </a>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function OrderConfirmationPage() {
  return (
    <Suspense
      fallback={
        <div className="flex min-h-[60vh] items-center justify-center">
          <LoadingSpinner size="lg" />
        </div>
      }
    >
      <OrderConfirmationContent />
    </Suspense>
  );
}