import Link from "next/link";
import type { Metadata } from "next";
import { getStripeServerClient, isStripeConfigured } from "@/lib/stripe";
import { completeCartById } from "@/lib/medusa/orders";
import { getResolvedSiteText } from "@/lib/site-text-server";
import { text } from "@/lib/site-text";
import { AnalyticsPurchaseScript } from "@/components/analytics/analytics-purchase-script";

type Props = {
  searchParams: Promise<{ session_id?: string }>;
};

export const metadata: Metadata = {
  title: "Confirmation de commande",
  robots: { index: false, follow: false },
};

function getPaymentStatusLabel(paymentStatus: string, t: (key: string, fallback?: string) => string) {
  switch (paymentStatus) {
    case "paid":
      return t("success.statusPaid", "Paiement confirmé");
    case "unpaid":
      return t("success.statusUnpaid", "Paiement non confirmé");
    case "no_payment_required":
      return t("success.statusNoPaymentRequired", "Aucun paiement requis");
    default:
      return t("success.statusUnknown", "Statut en cours de mise à jour");
  }
}

function formatCurrency(amount: number | null | undefined, currency: string | null | undefined, fallback: string) {
  if (typeof amount !== "number") {
    return fallback;
  }

  const normalizedCurrency = (currency || "eur").toUpperCase();
  return new Intl.NumberFormat("fr-FR", {
    style: "currency",
    currency: normalizedCurrency,
  }).format(amount / 100);
}

export default async function OrderSuccessPage({ searchParams }: Props) {
  const [{ session_id: sessionId }, siteText] = await Promise.all([searchParams, getResolvedSiteText()]);
  const t = (key: string, fallback?: string) => text(siteText, key, fallback);

  if (!isStripeConfigured()) {
    return (
      <section className="space-y-4 rounded-[1.8rem] border border-[var(--line)] bg-[var(--surface)] p-8">
        <h1 className="font-serif text-3xl text-[var(--foreground)]">{t("success.orderTitle")}</h1>
        <p className="rounded-xl border border-[#ffd4d4] bg-[#fff5f5] px-4 py-3 text-sm text-[#a21717]">
          {t("success.stripeNotConfigured")}
        </p>
        <Link href="/panier" className="inline-flex rounded-xl bg-[var(--accent)] px-4 py-2 text-sm font-semibold text-white">
          {t("success.backToCart")}
        </Link>
      </section>
    );
  }

  if (!sessionId) {
    return (
      <section className="space-y-4 rounded-[1.8rem] border border-[var(--line)] bg-[var(--surface)] p-8">
        <h1 className="font-serif text-3xl text-[var(--foreground)]">{t("success.orderTitle")}</h1>
        <p className="rounded-xl border border-[#ffd4d4] bg-[#fff5f5] px-4 py-3 text-sm text-[#a21717]">
          {t("success.sessionMissing")}
        </p>
        <Link href="/panier" className="inline-flex rounded-xl bg-[var(--accent)] px-4 py-2 text-sm font-semibold text-white">
          {t("success.backToCart")}
        </Link>
      </section>
    );
  }

  const stripe = getStripeServerClient();
  const session = await stripe.checkout.sessions.retrieve(sessionId, {
    expand: ["line_items"],
  });

  const paymentStatus = session.payment_status || "unknown";
  const paymentStatusLabel = getPaymentStatusLabel(paymentStatus, t);
  const paid = paymentStatus === "paid";
  const medusaCartId = session.metadata?.medusa_cart_id || null;
  let medusaOrderId = session.metadata?.medusa_order_id || null;
  let medusaSyncNote: string | null = null;
  const customerEmail = session.customer_details?.email || session.customer_email || null;

  if (paid && medusaCartId && !medusaOrderId) {
    const completion = await completeCartById(medusaCartId);
    medusaOrderId = completion.orderId;

    if (medusaOrderId) {
      medusaSyncNote = t("success.syncDone");
      try {
        await stripe.checkout.sessions.update(session.id, {
          metadata: {
            ...(session.metadata || {}),
            medusa_order_id: medusaOrderId,
          },
        });
      } catch {
        // Metadata update is best-effort.
      }
    } else if (completion.error) {
      medusaSyncNote = `${t("success.syncPendingPrefix")} ${completion.error}`;
    }
  }

  const lineItems = session.line_items?.data || [];
  const orderReference =
    medusaOrderId && medusaOrderId.startsWith("order_")
      ? medusaOrderId.replace("order_", "").slice(-8).toUpperCase()
      : medusaOrderId || t("success.orderReferencePending", "Confirmation en cours");

  return (
    <div className="space-y-6">
      {paid && session.amount_total ? (
        <AnalyticsPurchaseScript
          orderId={medusaOrderId || session.id}
          totalAmount={session.amount_total}
          currency={session.currency || "EUR"}
          items={lineItems.map((item) => ({
            productId: item.id || "",
            productName: item.description || "Article",
            quantity: item.quantity || 1,
            price: item.amount_total || 0,
          }))}
        />
      ) : null}
      <header className="rounded-[1.9rem] border border-[#cfe9df] bg-[linear-gradient(135deg,#f7fdf9_0%,#edf8f1_100%)] p-6 shadow-[0_14px_30px_rgba(22,66,50,0.08)] md:p-8">
        <p className="text-xs font-semibold uppercase tracking-[0.16em] text-[#0e5c45]">
          {t("success.customerEyebrow", "Merci, votre commande est bien prise en compte")}
        </p>
        <h1 className="mt-2 font-serif text-4xl text-[var(--foreground)] md:text-5xl">
          {paid ? t("success.paidTitle") : t("success.pendingTitle")}
        </h1>
        <p className="mt-3 max-w-2xl text-[var(--muted)]">
          {paid
            ? t(
                "success.paidCustomerText",
                "Votre paiement est bien confirmé. Nous préparons maintenant votre commande et vous recevrez les prochaines informations par email."
              )
            : t(
                "success.pendingCustomerText",
                "Votre paiement est en cours de vérification. Cette page se mettra à jour dès que la confirmation sera finalisée."
              )}
        </p>
        <div className="mt-6 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
          <div className="rounded-2xl bg-white/90 px-4 py-4 shadow-[0_8px_18px_rgba(22,66,50,0.08)]">
            <p className="text-xs font-semibold uppercase tracking-[0.12em] text-[#0e5c45]">
              {t("success.paymentStatusLabel", "Paiement")}
            </p>
            <p className="mt-2 text-lg font-semibold text-[var(--foreground)]">{paymentStatusLabel}</p>
          </div>
          <div className="rounded-2xl bg-white/90 px-4 py-4 shadow-[0_8px_18px_rgba(22,66,50,0.08)]">
            <p className="text-xs font-semibold uppercase tracking-[0.12em] text-[#0e5c45]">
              {t("success.totalPaidLabel", "Montant réglé")}
            </p>
            <p className="mt-2 text-lg font-semibold text-[var(--foreground)]">
              {formatCurrency(session.amount_total, session.currency, t("success.amountUnavailable"))}
            </p>
          </div>
          {customerEmail ? (
            <div className="rounded-2xl bg-white/90 px-4 py-4 shadow-[0_8px_18px_rgba(22,66,50,0.08)] sm:col-span-2 xl:col-span-1">
              <p className="text-xs font-semibold uppercase tracking-[0.12em] text-[#0e5c45]">
                {t("success.emailLabel", "Email de suivi")}
              </p>
              <p className="mt-2 break-all text-lg font-semibold text-[var(--foreground)]">{customerEmail}</p>
            </div>
          ) : null}
        </div>
      </header>

      <section className="grid gap-4 md:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]">
        <div className="rounded-[1.5rem] border border-[var(--line)] bg-[var(--surface)] p-6 shadow-[0_12px_24px_rgba(49,18,18,0.08)]">
          <h2 className="font-serif text-2xl text-[var(--foreground)]">
            {t("success.summaryCustomerTitle", "Les informations importantes")}
          </h2>
          <div className="mt-4 space-y-3 text-sm text-[var(--muted)]">
            <p className="flex items-center justify-between gap-4">
              <span>{t("success.orderReferenceLabel", "Numéro de commande")}</span>
              <span className="text-right font-semibold text-[var(--foreground)]">{orderReference}</span>
            </p>
            <p className="rounded-xl border border-[#f1e7d6] bg-[#fffaf4] px-4 py-3 leading-6 text-[var(--foreground)]">
              {t(
                "success.referenceHelp",
                "Conservez ce numéro de commande. Il pourra vous être demandé si vous nous contactez."
              )}
            </p>
          </div>
          {medusaSyncNote ? (
            <p className="mt-4 rounded-lg border border-[#ffe3c7] bg-[#fff8ef] px-3 py-2 text-xs text-[#8a5a2b]">{medusaSyncNote}</p>
          ) : null}
        </div>

        <div className="rounded-[1.5rem] border border-[#e8dcc7] bg-[#fffaf1] p-6 shadow-[0_12px_24px_rgba(86,56,18,0.08)]">
          <h2 className="font-serif text-2xl text-[var(--foreground)]">{t("success.nextStepsTitle", "Et maintenant ?")}</h2>
          <div className="mt-4 space-y-3 text-sm text-[var(--muted)]">
            <p>
              <span className="font-semibold text-[var(--foreground)]">1.</span>{" "}
              {paid
                ? t("success.nextStep1Paid", "Votre commande est enregistrée et prise en charge par notre équipe.")
                : t("success.nextStep1Pending", "Nous attendons la confirmation définitive du paiement.")}
            </p>
            <p>
              <span className="font-semibold text-[var(--foreground)]">2.</span>{" "}
              {t("success.nextStep2", "Vous recevrez les prochaines informations à l'adresse email utilisée lors du paiement.")}
            </p>
            <p>
              <span className="font-semibold text-[var(--foreground)]">3.</span>{" "}
              {t("success.nextStep3", "Vous pouvez retrouver le suivi de votre commande à tout moment dans votre compte client.")}
            </p>
          </div>
          <p className="mt-4 rounded-xl border border-[#f1e7d6] bg-white/80 px-4 py-3 text-sm text-[var(--foreground)]">
            {t(
              "success.supportNote",
              "Si vous avez une question sur cette commande, contactez-nous en indiquant votre numéro de commande."
            )}
          </p>
        </div>
      </section>

      <section className="rounded-[1.5rem] border border-[var(--line)] bg-[var(--surface)] p-6 shadow-[0_12px_24px_rgba(49,18,18,0.08)]">
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div>
            <h2 className="font-serif text-2xl text-[var(--foreground)]">{t("success.itemsTitle", "Votre commande")}</h2>
            <p className="mt-1 text-sm text-[var(--muted)]">
              {t("success.itemsSubtitle", "Voici le détail des articles confirmés avec votre paiement.")}
            </p>
          </div>
        </div>
        {lineItems.length > 0 ? (
          <div className="mt-4 space-y-3">
            {lineItems.map((item) => (
              <article key={item.id} className="rounded-xl border border-[var(--line)] bg-white p-4">
                <p className="font-semibold text-[var(--foreground)]">{item.description || "Article"}</p>
                <p className="mt-1 text-sm text-[var(--muted)]">{t("success.qty")}: {item.quantity || 1}</p>
                <p className="mt-1 text-sm font-medium text-[var(--foreground)]">
                  {formatCurrency(item.amount_total, session.currency, t("success.amountUnavailable"))}
                </p>
              </article>
            ))}
          </div>
        ) : (
          <p className="mt-4 text-sm text-[var(--muted)]">{t("success.noLineItems")}</p>
        )}
      </section>

      <div className="flex flex-wrap gap-3">
        <Link href="/compte/commandes" className="inline-flex rounded-xl bg-[var(--accent)] px-4 py-2 text-sm font-semibold text-white">
          {t("success.viewOrders")}
        </Link>
        <Link href="/boutique" className="inline-flex rounded-xl border border-[var(--line)] px-4 py-2 text-sm font-semibold text-[var(--foreground)]">
          {t("success.continueShopping")}
        </Link>
      </div>
    </div>
  );
}