import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
import { removeLineItemAction, saveCartAsQuoteAction, startStripeCheckoutAction, submitCartEventDateAction, updateLineItemAction, updateShippingOptionAction } from "@/app/actions/cart";
import { MondialRelayPicker } from "@/components/cart/mondial-relay-picker";
import { OrderNoteTextarea } from "@/components/cart/order-note-textarea";
import { getCart, getCartShippingOptions } from "@/lib/medusa/cart";
import { env } from "@/lib/env";
import { getActiveQuoteLockedPricing } from "@/lib/medusa/quotes";
import { isLocalPickupShippingMethod, isLocalPickupShippingOption } from "@/lib/local-pickup";
import { getMondialRelayPointFromCart, isMondialRelayShippingMethod } from "@/lib/mondial-relay";
import { getMondialRelayQuote } from "@/lib/mondial-relay-pricing";
import { isCustomizationHexColorValue, isCustomizationImageValue, normalizeCustomizationHexColor, readLineItemCustomizations } from "@/lib/personalization";
import { getLineItemCustomizationSurchargeTotalCents } from "@/lib/personalization-pricing";
import { getEffectiveCartTotal, getEffectiveShippingTotal, hasFreeShipping } from "@/lib/utils/cart-pricing";
import { formatEuro } from "@/lib/utils/money";
import { getResolvedSiteText } from "@/lib/site-text-server";
import { text } from "@/lib/site-text";
import { AnalyticsViewCartScript } from "@/components/analytics/analytics-view-cart-script";
import { getCustomerAuthState } from "@/lib/medusa/customer";

type Props = {
  searchParams: Promise<{ stripe?: string; step?: string; quote?: string }>;
};

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

function getStripeNotice(status: string | undefined, t: (key: string, fallback?: string) => string) {
  if (status === "success") {
    return { tone: "success", message: "Paiement Stripe valide. Consultez votre page de confirmation." } as const;
  }

  if (status === "cancelled") {
    return { tone: "neutral", message: "Paiement annulé. Votre panier est conservé." } as const;
  }

  if (status === "config-missing") {
    return {
      tone: "error",
      message: "Stripe n'est pas configure. Ajoutez STRIPE_SECRET_KEY dans les variables d'environnement.",
    } as const;
  }

  if (status === "empty-cart") {
    return { tone: "error", message: t("cart.empty") } as const;
  }

  if (status === "invalid-total" || status === "checkout-error") {
    return { tone: "error", message: "Impossible de démarrer le paiement Stripe pour le moment." } as const;
  }

  if (status === "relay-missing") {
    return { tone: "error", message: "Sélectionnez un Point Relais Mondial Relay avant le paiement." } as const;
  }

  if (status === "relay-unavailable") {
    return { tone: "error", message: "Mondial Relay indisponible pour ce panier (poids ou dimensions)." } as const;
  }

  return null;
}

type CartItemImageCandidate = {
  thumbnail?: string | null;
  variant?: {
    thumbnail?: string | null;
    product?: {
      thumbnail?: string | null;
      images?: Array<{ url?: string | null }> | null;
    } | null;
  } | null;
};

function getCartItemImageUrl(item: CartItemImageCandidate) {
  const candidates = [
    item?.thumbnail,
    item?.variant?.thumbnail,
    item?.variant?.product?.thumbnail,
    item?.variant?.product?.images?.[0]?.url,
  ];

  for (const value of candidates) {
    if (typeof value === "string" && value.trim()) {
      return value.trim();
    }
  }

  return "";
}

export default async function PanierPage({ searchParams }: Props) {
  const [{ stripe, step, quote }, cart, siteText, shippingOptions, account] = await Promise.all([
    searchParams,
    getCart(),
    getResolvedSiteText(),
    getCartShippingOptions(),
    getCustomerAuthState(),
  ]);
  const t = (key: string, fallback?: string) => text(siteText, key, fallback);
  const stripeNotice = getStripeNotice(stripe, t);
  const quoteNotice =
    quote === "empty"
      ? { tone: "error", message: "Impossible d'enregistrer un devis avec un panier vide." }
      : quote === "restored"
        ? { tone: "success", message: "Le devis a été renvoyé dans votre panier." }
        : quote === "expired"
          ? { tone: "error", message: "Ce devis a expiré. Une offre est valable 1 mois après sa création." }
      : quote === "error"
        ? { tone: "error", message: "Impossible d'enregistrer le devis pour le moment." }
        : null;

  if (!cart || !cart.items?.length) {
    return (
      <section className="space-y-4 rounded-[1.8rem] border border-[var(--line)] bg-[var(--surface)] p-8 shadow-[0_14px_30px_rgba(49,18,18,0.06)]">
        <h1 className="font-serif text-3xl text-[var(--foreground)]">{t("cart.page.title")}</h1>
        {stripeNotice || quoteNotice ? (
          <p
            className={`rounded-xl border px-4 py-3 text-sm ${
              (stripeNotice || quoteNotice)?.tone === "success"
                ? "border-[#cfe9df] bg-[#f3fcf7] text-[#0e5c45]"
                : (stripeNotice || quoteNotice)?.tone === "error"
                  ? "border-[#ffd4d4] bg-[#fff5f5] text-[#a21717]"
                  : "border-[#ffe7d6] bg-[#fffaf4] text-[#7c4b23]"
            }`}
          >
            {(stripeNotice || quoteNotice)?.message}
          </p>
        ) : null}
        <p className="text-[var(--muted)]">{t("cart.page.emptyMessage")}</p>
        <Link href="/boutique" className="inline-flex rounded-xl bg-[var(--accent)] px-4 py-2 text-sm font-semibold text-white hover:bg-[var(--accent-2)]">
          {t("cart.page.shopCta")}
        </Link>
      </section>
    );
  }

  const itemCount = (cart.items || []).reduce((total, item) => total + (item.quantity || 0), 0);
  const cartCustomizationSurchargeCents = (cart.items || []).reduce(
    (total, item) => total + getLineItemCustomizationSurchargeTotalCents({ quantity: item.quantity || 1, metadata: item.metadata || null }),
    0,
  );
  const adjustedSubtotal = typeof cart.subtotal === "number" ? cart.subtotal + cartCustomizationSurchargeCents : cart.subtotal;
  const adjustedCartTotal = typeof cart.total === "number" ? cart.total + cartCustomizationSurchargeCents : cart.total;
  const freeShipping = hasFreeShipping(adjustedSubtotal);
  const relayPoint = getMondialRelayPointFromCart(cart);
  const usesMondialRelay = isMondialRelayShippingMethod(cart);
  const usesLocalPickup = isLocalPickupShippingMethod(cart);
  const relayQuote = getMondialRelayQuote(cart);
  const quoteLockedPricing = getActiveQuoteLockedPricing((cart as { metadata?: Record<string, unknown> | null }).metadata || null);
  const relayWeightGrams = Math.max(1, Math.round((relayQuote.weightKg || 0) * 1000));
  const selectedShippingOptionId = ((cart as { shipping_methods?: Array<{ shipping_option_id?: string }> }).shipping_methods || [])[0]?.shipping_option_id || "";
  const cartEventDate =
    typeof (cart as { metadata?: Record<string, unknown> | null }).metadata?.event_date === "string"
      ? String((cart as { metadata?: Record<string, unknown> | null }).metadata?.event_date || "")
      : "";
  const cartOrderNote =
    typeof (cart as { metadata?: Record<string, unknown> | null }).metadata?.order_note === "string"
      ? String((cart as { metadata?: Record<string, unknown> | null }).metadata?.order_note || "")
      : "";

  const uniqueShippingOptions = Array.from(
    (shippingOptions || [])
      .filter((option): option is { id: string; name?: string | null; amount?: number | null } => Boolean(option.id))
      .reduce((map, option) => {
        const key = (option.name || "").trim().toLowerCase() || option.id;
        if (!map.has(key)) {
          map.set(key, option);
        }
        return map;
      }, new Map<string, { id: string; name?: string | null; amount?: number | null }>())
      .values(),
  );

  const baseShippingTotal = getEffectiveShippingTotal({
    subtotal: adjustedSubtotal,
    shippingTotal: cart.shipping_total,
  });

  const effectiveShippingTotal =
    typeof quoteLockedPricing?.shipping_total === "number"
      ? quoteLockedPricing.shipping_total
      : usesLocalPickup
      ? 0
      : usesMondialRelay && relayQuote && typeof relayQuote.amount === "number"
      ? relayQuote.amount
      : baseShippingTotal;

  const baseTotal = getEffectiveCartTotal({
    subtotal: adjustedSubtotal,
    shippingTotal: cart.shipping_total,
    total: adjustedCartTotal,
  });

  const total =
    typeof quoteLockedPricing?.total === "number"
      ? quoteLockedPricing.total
      : typeof baseTotal === "number" && typeof baseShippingTotal === "number" && typeof effectiveShippingTotal === "number"
      ? Math.max(0, baseTotal - baseShippingTotal + effectiveShippingTotal)
      : baseTotal;
  const displayedSubtotal = typeof quoteLockedPricing?.subtotal === "number" ? quoteLockedPricing.subtotal : adjustedSubtotal;

  const canCheckout =
    (!usesMondialRelay || Boolean(relayPoint)) &&
    (!usesMondialRelay || Boolean(relayQuote && relayQuote.amount !== null));

  const parsedStep = Number(step || "1");
  const currentStep = parsedStep === 2 || parsedStep === 3 ? parsedStep : 1;
  const canProceedToPayment = Boolean(selectedShippingOptionId) && canCheckout;
  const todayIso = new Date().toISOString().split("T")[0];
  const selectedOptionName =
    uniqueShippingOptions.find((option) => option.id === selectedShippingOptionId)?.name || "Aucun mode choisi";

  const checkoutHref = (targetStep: 1 | 2 | 3) => {
    const params = new URLSearchParams();
    params.set("step", String(targetStep));
    if (stripe) {
      params.set("stripe", stripe);
    }
    return `/panier?${params.toString()}`;
  };
  const paymentNext = "/panier?step=3";
  const loginForPaymentHref = `/connexion?notice=checkout-login-required&next=${encodeURIComponent(paymentNext)}`;
  const registerForPaymentHref = `/inscription?next=${encodeURIComponent(paymentNext)}`;

  return (
    <>
      <AnalyticsViewCartScript items={cart.items} />
      <div className="grid gap-8 lg:grid-cols-[1fr_360px]">
      <section className="space-y-4">
        <h1 className="font-serif text-3xl text-[var(--foreground)]">{t("cart.checkoutTitle")}</h1>
        <div className="grid grid-cols-3 gap-2 rounded-2xl border border-[var(--line)] bg-white p-2">
          {[
            { id: 1, label: "1. Panier" },
            { id: 2, label: "2. Livraison" },
            { id: 3, label: "3. Paiement" },
          ].map((item) => {
            const active = currentStep === item.id;
            const completed = currentStep > item.id;
            return (
              <div
                key={item.id}
                className={`rounded-xl px-3 py-2 text-center text-sm font-semibold ${
                  active
                    ? "bg-[var(--accent)] text-white"
                    : completed
                      ? "bg-[#ffe9e9] text-[var(--accent)]"
                      : "bg-[#faf6f6] text-[var(--muted)]"
                }`}
              >
                {item.label}
              </div>
            );
          })}
        </div>

         {stripeNotice || quoteNotice ? (
           <p
             className={`rounded-xl border px-4 py-3 text-sm ${
               (stripeNotice || quoteNotice)?.tone === "success"
                 ? "border-[#cfe9df] bg-[#f3fcf7] text-[#0e5c45]"
                 : (stripeNotice || quoteNotice)?.tone === "error"
                   ? "border-[#ffd4d4] bg-[#fff5f5] text-[#a21717]"
                   : "border-[#ffe7d6] bg-[#fffaf4] text-[#7c4b23]"
             }`}
           >
             {(stripeNotice || quoteNotice)?.message}
           </p>
         ) : null}

        {currentStep === 1 ? (
          <>
            <section className="space-y-3 rounded-2xl border border-[var(--line)] bg-white p-4">
              <p className="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--accent-3)]">Informations commande</p>
              {quoteLockedPricing ? (
                <p className="rounded-xl border border-[#ffe0b2] bg-[#fff8ed] px-3 py-2 text-sm text-[#7c4b23]">
                  Tarif devis applique jusqu&apos;au{" "}
                  {new Intl.DateTimeFormat("fr-FR", { dateStyle: "medium" }).format(new Date(String(quoteLockedPricing.expires_at || "")))}.
                  Toute modification du panier retire ce tarif.
                </p>
              ) : null}
              <form action={submitCartEventDateAction} className="space-y-3">
                <label className="block space-y-1 text-sm">
                  <span className="font-medium text-[var(--foreground)]">Date de l&apos;evenement</span>
                  <input
                    type="date"
                    name="eventDate"
                    min={todayIso}
                    defaultValue={cartEventDate}
                    className="w-full max-w-xs rounded-xl border border-[var(--line)] bg-white px-3 py-2 outline-none focus:border-[#f5505080]"
                  />
                </label>
                <button type="submit" className="rounded-lg border border-[var(--line)] px-3 py-2 text-sm font-medium text-[var(--foreground)]">
                  Enregistrer
                </button>
              </form>
              <OrderNoteTextarea
                initialValue={cartOrderNote}
                title={t("cart.note.title")}
                description={t("cart.note.description")}
                placeholder={t("cart.note.placeholder")}
                savingLabel={t("cart.note.saving")}
                savedLabel={t("cart.note.saved")}
                errorLabel={t("cart.note.error")}
              />
            </section>

            {cart.items.map((item) => (
              <article key={item.id} className="rounded-2xl border border-[var(--line)] bg-[var(--surface)] p-5 shadow-[0_12px_26px_rgba(49,18,18,0.06)]">
                <div className="flex items-start justify-between gap-4">
                  <div className="flex items-start gap-3">
                    {getCartItemImageUrl(item) ? (
                      <div className="relative h-16 w-16 overflow-hidden rounded-lg border border-[var(--line)]">
                        <Image
                          src={getCartItemImageUrl(item)}
                          alt={item.product_title || "Produit"}
                          fill
                          sizes="64px"
                          className="object-cover"
                          loading="lazy"
                        />
                      </div>
                    ) : (
                      <div className="grid h-16 w-16 place-items-center rounded-lg border border-[var(--line)] bg-[#faf6f6] text-xs text-[var(--muted)]">
                        Photo
                      </div>
                    )}
                    <div>
                    <h2 className="font-semibold text-[var(--foreground)]">{item.product_title}</h2>
                    <p className="text-sm text-[var(--muted)]">{item.variant_title}</p>
                    {item.metadata?.theme ? (
                      <p className="mt-2 text-sm text-[var(--muted)]">
                        Theme: <span className="font-medium">{String(item.metadata.theme)}</span>
                      </p>
                    ) : null}
                    {item.metadata?.paper_finish ? (
                      <p className="mt-2 text-sm text-[var(--muted)]">
                        Effet du papier: <span className="font-medium">{String(item.metadata.paper_finish)}</span>
                      </p>
                    ) : null}
                    {readLineItemCustomizations(item.metadata).map((entry) =>
                      isCustomizationImageValue(entry.value) ? (
                        <div key={`${item.id}-${entry.key}`} className="mt-2 space-y-2 text-sm text-[var(--muted)]">
                          <p>{entry.label}</p>
                          <div className="relative h-20 w-20 overflow-hidden rounded-lg border border-[var(--line)]">
                            <Image src={entry.value} alt={entry.label} fill sizes="80px" className="object-cover" loading="lazy" />
                          </div>
                        </div>
                      ) : isCustomizationHexColorValue(entry.value) ? (
                        <div key={`${item.id}-${entry.key}`} className="mt-2 flex items-center gap-2 text-sm text-[var(--muted)]">
                          <span>{entry.label}:</span>
                          <span
                            className="inline-block h-4 w-4 rounded-sm border border-black/10 shadow-sm"
                            style={{ backgroundColor: normalizeCustomizationHexColor(entry.value) || entry.value }}
                            aria-label={`${entry.label}: ${entry.value}`}
                            title={entry.value}
                          />
                        </div>
                      ) : (
                        <p key={`${item.id}-${entry.key}`} className="mt-2 text-sm text-[var(--muted)]">
                          {entry.label}: <span className="font-medium">{entry.value}</span>
                        </p>
                      ),
                    )}
                    {item.metadata?.personalization ? (
                      <p className="mt-2 text-sm text-[var(--muted)]">
                        {t("cart.page.personalization")}: <span className="font-medium">{String(item.metadata.personalization)}</span>
                      </p>
                    ) : null}
                    </div>
                  </div>
                  <p className="font-semibold text-[var(--accent)]">
                    {formatEuro(
                      (quoteLockedPricing?.items?.find(
                        (lockedItem) => lockedItem.quote_line_index === Number(item.metadata?.quote_line_index),
                      )?.total ?? item.total ?? 0) +
                        getLineItemCustomizationSurchargeTotalCents({
                          quantity: item.quantity || 1,
                          metadata: item.metadata || null,
                        }),
                    )}
                  </p>
                </div>

                <div className="mt-4 flex items-center gap-3">
                  <form action={updateLineItemAction} className="flex items-center gap-2">
                    <input type="hidden" name="lineId" value={item.id} />
                    <input
                      type="number"
                      name="quantity"
                      min={1}
                      defaultValue={item.quantity}
                      className="w-20 rounded-lg border border-[var(--line)] px-2 py-1"
                    />
                    <button type="submit" className="rounded-lg border border-[var(--line)] px-3 py-1 text-sm font-medium text-[var(--foreground)]">
                      {t("cart.page.update")}
                    </button>
                  </form>

                  <form action={removeLineItemAction}>
                    <input type="hidden" name="lineId" value={item.id} />
                    <button type="submit" className="rounded-lg border border-[#f5505048] px-3 py-1 text-sm font-medium text-[var(--accent)]">
                      {t("cart.remove")}
                    </button>
                  </form>
                </div>
              </article>
            ))}
          </>
        ) : null}

        {currentStep === 2 ? (
          <>
            {uniqueShippingOptions.length > 0 ? (
              <section className="space-y-3 rounded-2xl border border-[var(--line)] bg-white p-4">
                <p className="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--accent-3)]">Mode de livraison</p>
                <div className="space-y-2">
                  {uniqueShippingOptions.map((option) => {
                    const isSelected = option.id === selectedShippingOptionId;
                    const optionName = option.name || "Livraison";
                    const isMondialOption = optionName.toLowerCase().includes("mondial") || optionName.toLowerCase().includes("relay");
                    const isLocalPickupOption = isLocalPickupShippingOption(option);
                    return (
                      <form key={option.id} action={updateShippingOptionAction} className="rounded-xl border border-[var(--line)] p-3">
                        <input type="hidden" name="optionId" value={option.id} />
                        <button type="submit" className="flex w-full items-center justify-between gap-4 text-left">
                          <span className="text-sm font-medium text-[var(--foreground)]">
                            {isSelected ? "* " : "o "}
                            {optionName}
                          </span>
                          <span className="text-sm text-[var(--muted)]">
                            {isLocalPickupOption
                              ? "0,00 €"
                              : isMondialOption && typeof relayQuote.amount === "number"
                              ? formatEuro(relayQuote.amount)
                              : typeof option.amount === "number"
                                ? formatEuro(option.amount)
                                : "-"}
                          </span>
                        </button>
                      </form>
                    );
                  })}
                </div>
              </section>
            ) : null}

            {usesMondialRelay ? (
              <>
                <MondialRelayPicker brand={env.mondialRelayBrand} selectedPoint={relayPoint} weightGrams={relayWeightGrams} />
                {relayQuote?.reason ? (
                  <p className="rounded-xl border border-[#ffd4d4] bg-[#fff5f5] px-3 py-2 text-sm text-[#a21717]">
                    {relayQuote.reason}
                  </p>
                ) : null}
              </>
            ) : null}
            {usesLocalPickup ? (
              <section className="rounded-2xl border border-[#d8eadf] bg-[#f5fcf7] p-4 text-sm text-[#24513d]">
                <p className="font-semibold">{env.localPickupLabel}</p>
                <p className="mt-1">Aucun frais de livraison ne sera ajouté à votre commande.</p>
                {env.localPickupAddress ? <p className="mt-1">Lieu de retrait: {env.localPickupAddress}</p> : null}
              </section>
            ) : null}
          </>
        ) : null}

        {currentStep === 3 ? (
          <section className="space-y-3 rounded-2xl border border-[var(--line)] bg-white p-5">
            <p className="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--accent-3)]">Recapitulatif avant paiement</p>
            <p className="text-sm text-[var(--foreground)]">
              Mode de livraison: <span className="font-semibold">{selectedOptionName}</span>
            </p>
            {usesLocalPickup ? (
              <p className="text-sm text-[var(--foreground)]">
                Retrait: <span className="font-semibold">{env.localPickupAddress || "Retrait sur place sans frais de livraison"}</span>
              </p>
            ) : null}
            {usesMondialRelay ? (
              <p className="text-sm text-[var(--foreground)]">
                Point relais:{" "}
                <span className="font-semibold">
                  {relayPoint
                    ? `${relayPoint.name}, ${relayPoint.address1}, ${relayPoint.postalCode} ${relayPoint.city}`
                    : "Non sélectionné"}
                </span>
              </p>
            ) : null}
            <p className="text-sm text-[var(--foreground)]">
              Total à payer: <span className="font-semibold text-[var(--accent)]">{formatEuro(total)}</span>
            </p>
            {cartEventDate ? (
              <p className="text-sm text-[var(--foreground)]">
                Date de l&apos;événement: <span className="font-semibold">{cartEventDate}</span>
              </p>
            ) : null}
            {!account.authenticated ? (
              <div className="rounded-xl border border-[#ffd8d8] bg-[#fff8f8] p-4">
                <p className="text-sm font-semibold text-[var(--foreground)]">{t("cart.checkout.authTitle")}</p>
                <p className="mt-1 text-sm text-[var(--muted)]">{t("cart.checkout.authDescription")}</p>
                <div className="mt-3 flex flex-wrap gap-2">
                  <Link
                    href={loginForPaymentHref}
                    className="inline-flex items-center justify-center rounded-xl bg-[var(--accent)] px-4 py-2.5 text-sm font-semibold text-white hover:bg-[var(--accent-2)]"
                  >
                    {t("cart.checkout.loginCta")}
                  </Link>
                  <Link
                    href={registerForPaymentHref}
                    className="inline-flex items-center justify-center rounded-xl border border-[var(--accent-3)] px-4 py-2.5 text-sm font-semibold text-[var(--accent-3)] hover:bg-[#fff6f6]"
                  >
                    {t("cart.checkout.registerCta")}
                  </Link>
                </div>
              </div>
            ) : null}
          </section>
        ) : null}
      </section>

      <aside className="h-fit space-y-3 rounded-[1.5rem] border border-[var(--line)] bg-[var(--surface)] p-6 shadow-[0_12px_24px_rgba(49,18,18,0.08)]">
        <p className="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--accent-3)]">{t("cart.page.summary")}</p>
        <p className="flex items-center justify-between text-sm text-[var(--muted)]">
          <span>{t("cart.page.items")}</span>
          <span className="font-medium">{itemCount}</span>
        </p>
        <p className="flex items-center justify-between text-sm text-[var(--muted)]">
          <span>{t("cart.subtotal")}</span>
          <span className="font-medium">{formatEuro(displayedSubtotal)}</span>
        </p>
        <p className="flex items-center justify-between text-sm text-[var(--muted)]">
          <span>{t("cart.shipping")}</span>
          <span className="font-medium">
            {usesLocalPickup
              ? env.localPickupLabel
              : freeShipping
              ? t("cart.shipping.free")
              : formatEuro(effectiveShippingTotal)}
          </span>
        </p>
        <p className="flex items-center justify-between border-t border-[var(--line)] pt-3 text-base font-semibold text-[var(--foreground)]">
          <span>{t("cart.total")}</span>
          <span>{formatEuro(total)}</span>
        </p>
        <form action={saveCartAsQuoteAction}>
          <button
            type="submit"
            className="mt-2 inline-flex w-full items-center justify-center rounded-xl border border-[var(--accent-3)] px-4 py-3 text-sm font-semibold text-[var(--accent-3)] hover:bg-[#fff6f6]"
          >
            Enregistrer en devis
          </button>
        </form>

        {currentStep === 1 ? (
          <Link
            href={checkoutHref(2)}
            className="mt-2 inline-flex w-full items-center justify-center rounded-xl bg-[var(--accent)] px-4 py-3 text-sm font-semibold text-white hover:bg-[var(--accent-2)]"
          >
            Continuer vers livraison
          </Link>
        ) : null}

        {currentStep === 2 ? (
          <div className="mt-2 flex flex-wrap items-center justify-end gap-2">
            <Link
              href={checkoutHref(1)}
              className="inline-flex items-center justify-center whitespace-nowrap rounded-xl border border-[var(--line)] px-4 py-2.5 text-sm font-semibold text-[var(--foreground)] hover:bg-[#fff7f7]"
            >
              Retour panier
            </Link>
            {canProceedToPayment ? (
              <Link
                href={checkoutHref(3)}
                className="inline-flex items-center justify-center whitespace-nowrap rounded-xl bg-[var(--accent)] px-4 py-2.5 text-sm font-semibold text-white hover:bg-[var(--accent-2)]"
              >
                Continuer paiement
              </Link>
            ) : (
              <button
                type="button"
                disabled
                className="inline-flex items-center justify-center whitespace-nowrap rounded-xl bg-[var(--accent)] px-4 py-2.5 text-sm font-semibold text-white opacity-50"
              >
                Continuer paiement
              </button>
            )}
          </div>
        ) : null}

        {currentStep === 3 ? (
          <>
            <div className="mt-2 flex">
              <Link
                href={checkoutHref(2)}
                className="inline-flex w-full items-center justify-center rounded-xl border border-[var(--line)] px-4 py-3 text-sm font-semibold text-[var(--foreground)] hover:bg-[#fff7f7]"
              >
                Retour livraison
              </Link>
            </div>
            {account.authenticated ? (
              <form action={startStripeCheckoutAction}>
                <button type="submit" disabled={!canCheckout} className="mt-2 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-[var(--accent)] px-4 py-3 text-sm font-semibold text-white hover:bg-[var(--accent-2)] disabled:cursor-not-allowed disabled:opacity-60">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-4 w-4">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M3 4h2l2.2 10.2a2 2 0 0 0 2 1.6h8.8a2 2 0 0 0 2-1.7L23 7H7.2" />
                    <circle cx="10" cy="20" r="1.5" />
                    <circle cx="18" cy="20" r="1.5" />
                  </svg>
                  <span>{t("cart.page.payStripe")}</span>
                </button>
              </form>
            ) : (
              <div className="mt-2 grid gap-2">
                <Link
                  href={loginForPaymentHref}
                  className="inline-flex w-full items-center justify-center rounded-xl bg-[var(--accent)] px-4 py-3 text-sm font-semibold text-white hover:bg-[var(--accent-2)]"
                >
                  {t("cart.checkout.loginCta")}
                </Link>
                <Link
                  href={registerForPaymentHref}
                  className="inline-flex w-full items-center justify-center rounded-xl border border-[var(--accent-3)] px-4 py-3 text-sm font-semibold text-[var(--accent-3)] hover:bg-[#fff6f6]"
                >
                  {t("cart.checkout.registerCta")}
                </Link>
              </div>
            )}
          </>
        ) : null}

        {usesMondialRelay && !relayPoint ? (
          <p className="text-xs text-[#a21717]">Sélection du Point Relais obligatoire avant paiement.</p>
        ) : null}
        {usesMondialRelay && relayQuote?.reason ? (
          <p className="text-xs text-[#a21717]">Mondial Relay indisponible: {relayQuote.reason}</p>
        ) : null}
      </aside>
    </div>
    </>
  );
}