'use client';

import { Suspense, useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import { Link } from '@/core/lib/navigation';
import type { Order } from 'brainerce';
import { BrainerceError } from 'brainerce';
import { getClient } from '@/core/lib/brainerce';
import { LoadingSpinner } from '@/ui/shared/loading-spinner';
import { OrderHistory } from '@/components/account/order-history';
import { useTranslations } from '@/core/lib/translations';

// Read-only order lookup for links from transactional emails (order confirmation,
// shipped, refunded, etc). Unlike /order-confirmation, this page never calls
// handlePaymentSuccess() or touches cart state — it only fetches and displays,
// so it's safe to revisit at any time without side effects on an unrelated
// active cart. Works for guests too: the checkout id itself is the credential.
function OrderStatusContent() {
  const searchParams = useSearchParams();
  const checkoutId = searchParams.get('checkout_id');

  const t = useTranslations('orderStatus');
  const tc = useTranslations('common');
  const [order, setOrder] = useState<Order | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  /** Separates our own outage from a link that names no order. */
  const [unavailable, setUnavailable] = useState(false);

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

    let cancelled = false;
    async function loadOrder() {
      try {
        const client = getClient();
        const result = await client.getOrderByCheckout(checkoutId!);
        if (!cancelled) setOrder(result);
      } catch (err) {
        if (!cancelled) {
          // "We could not find your order" and "we could not reach the server"
          // are different facts, and only one of them is about the customer.
          // A backend outage rendered as ORDER NOT FOUND on the page people
          // open from their receipt email -- seen for real during a redeploy.
          // Telling someone the order they just paid for does not exist is
          // worse than telling them nothing.
          //
          // A 4xx really is "no order for this link". Anything else is us.
          const missing = err instanceof BrainerceError && err.statusCode < 500;
          if (!missing) console.error('[order-status] could not load order', err);
          setUnavailable(!missing);
          setError(missing ? t('notFound') : t('unavailableBody'));
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    loadOrder();
    return () => {
      cancelled = true;
    };
  }, [checkoutId, t]);

  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('loading')}</p>
      </div>
    );
  }

  if (error || !order) {
    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">
          {unavailable ? t('unavailableTitle') : t('errorTitle')}
        </h1>
        <p className="text-muted-foreground mt-2">{error || t('notFound')}</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>
    );
  }

  return (
    <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
      <h1 className="text-foreground mb-6 text-2xl font-bold">{t('pageTitle')}</h1>
      <OrderHistory orders={[order]} />
      <div className="mt-8 flex items-center justify-center">
        <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>
      </div>
    </div>
  );
}

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