"use client";

import toast from "react-hot-toast";
import { authenticatedFetch } from "@/lib/authenticated-fetch";

import z from "zod";
import { formSchema } from "./schemas";
import { useDispatch, useSelector } from "react-redux";
import {
  saveOrder,
  getCartProducts,
  resetStatus,
} from "@/store/slices/cart-slice";
import { getCurrentUser } from "@/store/slices/auth-slice";
import { useCallback, useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { useTranslations } from "next-intl";
import AuthModal from "@/components/auth/auth-modal";
import {
  MapPin,
  CreditCard,
  Truck,
  Loader2,
  Check,
  Wallet,
  ShieldCheck,
} from "lucide-react";

export type CheckoutFormValues = z.infer<typeof formSchema>;

interface SavedAddress {
  id: number;
  first_name: string;
  last_name: string;
  email: string;
  address1: string;
  city: string;
  state: string;
  country: string;
  postcode: string;
  phone: string;
}

/**
 * Checkout dialog — select saved address, shipping & payment methods, place order.
 * Premium UI with no re-entry of address data.
 */
export default function Checkout() {
  const { locale } = useParams() as { locale: string };
  const router = useRouter();
  const t = useTranslations("cart");
  const tButtons = useTranslations("buttons");
  const isRtl = locale === "ar";

  const { status } = useSelector((state: any) => state.cart);
  const dispatch = useDispatch();
  const [showAuthModal, setShowAuthModal] = useState(false);
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  // Address states
  const [savedAddresses, setSavedAddresses] = useState<SavedAddress[]>([]);
  const [selectedAddressId, setSelectedAddressId] = useState<number | null>(null);
  const [addressLoading, setAddressLoading] = useState(true);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [showNewAddressForm, setShowNewAddressForm] = useState(false);
  const [isSavingNewAddress, setIsSavingNewAddress] = useState(false);

  const mapCheckoutAddresses = (data: any): SavedAddress[] => {
    const list = (data?.address ??
      data?.data?.address ??
      data?.data?.addresses ??
      data?.addresses ??
      data?.data ??
      []) as any[];

    if (!Array.isArray(list) || list.length === 0) return [];

    const fallbackFirstName = data?.firstName || user?.firstName || user?.first_name || "";
    const fallbackLastName = data?.lastName || user?.lastName || user?.last_name || "";
    const fallbackEmail = user?.email || "";
    const fallbackPhone = user?.phone || user?.mobile || "";

    const mapped: SavedAddress[] = list.map((addr: any, i: number) => {
      const id = addr?.id || addr?.address_id || addr?.entity_id || i + 1;
      const valueLines =
        typeof addr?.value === "string"
          ? addr.value.split("\n").map((s: string) => s.trim()).filter(Boolean)
          : [];
      return {
        id,
        first_name: addr?.first_name || addr?.firstName || fallbackFirstName,
        last_name: addr?.last_name || addr?.lastName || fallbackLastName,
        email: addr?.email || fallbackEmail,
        address1: addr?.address1 || addr?.address || addr?.street || valueLines[1] || valueLines[0] || "",
        city: addr?.city || "",
        state: addr?.state || addr?.region || addr?.city || "",
        country: addr?.country || addr?.country_name || "SA",
        postcode: addr?.postcode || addr?.zip || "00000",
        phone: addr?.phone || addr?.telephone || fallbackPhone,
      };
    });

    // Dedupe exact duplicates (backend sometimes returns repeated entries)
    const normalizeKey = (a: SavedAddress) =>
      `${a.address1}|${a.city}|${a.state}|${a.country}|${a.postcode}|${a.phone}`
        .replace(/\s+/g, " ")
        .trim();
    const seen = new Set<string>();
    return mapped.filter((a) => {
      const key = normalizeKey(a);
      if (seen.has(key)) return false;
      seen.add(key);
      return true;
    });
  };

  // New address form fields
  const [newAddress, setNewAddress] = useState({
    address1: "",
    city: "",
    phone: "",
    country: "SA",
  });

  // Payment & Shipping
  const [paymentMethod, setPaymentMethod] = useState("cashondelivery");
  const [paymentMethods, setPaymentMethods] = useState<Array<{ code: string; title?: string }>>([]);
  const [shippingMethod] = useState("flatrate_flatrate");

  const {
    isAuthenticated: authStatus,
    user,
  } = useSelector((state: any) => state.auth);

  useEffect(() => {
    setIsAuthenticated(authStatus && !!user);
  }, [authStatus, user]);

  useEffect(() => {
    if (authStatus) {
      dispatch(getCurrentUser() as any);
    }
  }, [dispatch, authStatus]);

  // Build addresses from user profile data
  useEffect(() => {
    if (!user) return;

    const firstName = user.firstName || user.first_name || "";
    const lastName = user.lastName || user.last_name || "";
    const email = user.email || "";
    const phone = user.phone || user.mobile || "";

    const addresses: SavedAddress[] = [];
    const userAddresses = user.addresses || user.addressData || [];

    if (Array.isArray(userAddresses) && userAddresses.length > 0) {
      userAddresses.forEach((addr: any, i: number) => {
        addresses.push({
          id: addr.id || addr.address_id || i + 1,
          first_name: addr.first_name || firstName,
          last_name: addr.last_name || lastName,
          email: addr.email || email,
          address1: addr.address1 || addr.address || addr.street || "",
          city: addr.city || "",
          state: addr.state || addr.region || addr.city || "",
          country: addr.country || addr.country_name || "SA",
          postcode: addr.postcode || addr.zip || "00000",
          phone: addr.phone || addr.telephone || phone,
        });
      });
    }

    // If we already fetched addresses from the dedicated checkout endpoint,
    // don't overwrite them with a possibly-empty user payload.
    setSavedAddresses((prev) => (prev.length > 0 ? prev : addresses));
    setSelectedAddressId((prev) => prev ?? (addresses.length > 0 ? addresses[0].id : null));
    setAddressLoading(false);
  }, [user]);

  // Reusable address fetcher — called both by the effect and explicitly after login.
  const fetchAddressesFromBackend = useCallback(async () => {
    setAddressLoading(true);
    try {
      const res = await authenticatedFetch("/api/checkout/addresses", { method: "GET" });
      const data = await res.json();
      if (!res.ok || data?.success === false) return;
      const deduped = mapCheckoutAddresses(data);
      if (deduped.length === 0) {
        setSavedAddresses([]);
        setSelectedAddressId(null);
        return;
      }
      setSavedAddresses(deduped);
      setSelectedAddressId((prev) => prev ?? deduped[0].id);
      setShowNewAddressForm(false);
    } catch (e) {
      console.error("[Checkout] Fetch addresses failed:", e);
    } finally {
      setAddressLoading(false);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // stable ref — mapCheckoutAddresses closes over user but only uses it as fallback

  // Fetch saved addresses when auth status changes (login / page load while authenticated).
  // Intentionally omits `user` to prevent a redundant second fetch when getCurrentUser()
  // resolves after login and writes a new user object to Redux.
  useEffect(() => {
    if (!authStatus) return;
    void fetchAddressesFromBackend();
  }, [authStatus, fetchAddressesFromBackend]);

  const getSelectedAddress = (): SavedAddress | undefined =>
    savedAddresses.find((a) => a.id === selectedAddressId);

  /** Place the order */
  const handlePlaceOrder = async () => {
    if (!isAuthenticated) {
      setShowAuthModal(true);
      return;
    }

    const selected = getSelectedAddress();

    // Use new address form if showing or no saved address selected
    const addressData = (showNewAddressForm || !selected)
      ? {
        first_name: user?.firstName || user?.first_name || "",
        last_name: user?.lastName || user?.last_name || "",
        email: user?.email || "",
        address1: newAddress.address1,
        city: newAddress.city,
        country: newAddress.country,
        phone: newAddress.phone,
      }
      : {
        first_name: selected.first_name,
        last_name: selected.last_name,
        email: selected.email,
        address1: selected.address1,
        city: selected.city,
        country: selected.country,
        phone: selected.phone,
      };

    // Validate only when entering a brand-new address
    if ((showNewAddressForm || !selected) && (!addressData.address1 || !addressData.city || !addressData.phone)) {
      const toast = (await import("react-hot-toast")).default;
      toast.error(t("checkout.fill-all-fields"));
      return;
    }

    setIsSubmitting(true);

    const billingData = {
      ...addressData,
      use_for_shipping: true,
    };

    try {
      const result = await dispatch(
        saveOrder({
          addressId: selected?.id ?? 0,
          billing: billingData,
          shipping: {
            address1: addressData.address1,
            city: addressData.city,
            country: addressData.country,
            phone: addressData.phone,
          },
          payment: { method: paymentMethod },
          shipping_method: shippingMethod,
        }) as any
      ).unwrap();

      // Markatty storeorder returns order_no on success (COD), redirect_url for online payments
      const isSuccess =
        result?.success !== false &&
        (result?.order_no || result?.orderId || result?.order || result?.redirect_url || result?.increment_id);

      if (isSuccess || result?.success === true) {
        // If the backend returns a redirect URL for payment gateway (e.g., Tabby, Tamara)
        if (result?.redirect_url) {
          window.location.href = result.redirect_url;
          return;
        }

        const finalOrderId =
          result?.orderId || result?.order?.id || result?.id || result?.order_id || "";
        const finalIncrementId =
          result?.incrementId ||
          result?.order?.increment_id ||
          result?.increment_id ||
          result?.order_no ||
          "";

        if (finalOrderId || finalIncrementId) {
          router.push(
            `/${locale}/order-success?orderId=${finalOrderId}&incrementId=${finalIncrementId}`
          );
        } else {
          // Fallback — order placed but no ID returned
          router.push(`/${locale}/order-success`);
        }
      } else {
        toast.error(result?.message || t("checkout.orderFailed"));
      }
    } catch (error: any) {
      console.error("[Checkout] Order failed:", error);
      toast.error(error?.message || t("checkout.orderFailed"));
    } finally {
      setIsSubmitting(false);
      dispatch(resetStatus());
    }
  };

  useEffect(() => {
    dispatch(getCartProducts() as any);
  }, [dispatch]);

  // Fetch available payment methods from checkoutForm (matches old system)
  useEffect(() => {
    const run = async () => {
      try {
        const res = await authenticatedFetch(`/api/checkout/checkoutForm?locale=${encodeURIComponent(locale)}`, {
          method: "GET",
        });
        const data = await res.json();
        if (!res.ok || data?.success === false) return;
        const list = (data?.payments ?? []) as any[];
        if (!Array.isArray(list) || list.length === 0) return;

        const normalized = list
          .map((m: any) => ({
            code: String(m?.code ?? ""),
            title: typeof m?.title === "string" ? m.title : undefined,
          }))
          .filter((m) => m.code);

        setPaymentMethods(normalized);
        // Keep existing selection if still available, else default to first.
        setPaymentMethod((prev) => (normalized.some((m) => m.code === prev) ? prev : normalized[0].code));
      } catch (e) {
        console.error("[Checkout] checkoutForm failed:", e);
      }
    };
    void run();
  }, [locale]);

  // Not authenticated — login prompt
  if (!isAuthenticated) {
    return (
      <>
        <div className="flex flex-col items-center justify-center p-8 text-center">
          <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
            <ShieldCheck className="w-8 h-8 text-gray-400" />
          </div>
          <h3 className="text-lg font-semibold mb-2">{t("login-required")}</h3>
          <p className="text-gray-500 text-sm mb-6">{t("please-login-to-checkout")}</p>
          <Button
            onClick={() => setShowAuthModal(true)}
            className="bg-black text-white hover:bg-gray-800 rounded-xl px-8"
          >
            {tButtons("login")}
          </Button>
        </div>
        <AuthModal
          isOpen={showAuthModal}
          onOpenChange={setShowAuthModal}
          onAuthenticated={() => {
            setIsAuthenticated(true);
            setShowAuthModal(false);
            // Explicitly fetch addresses after login in case the useEffect
            // fired before the auth_token cookie was fully propagated.
            void fetchAddressesFromBackend();
          }}
        />
      </>
    );
  }

  return (
    <>
      <div className="flex flex-col gap-4 py-1" dir={isRtl ? "rtl" : "ltr"}>
        {/* ── Header ── */}
        <div className="text-center pb-2 border-b border-gray-100 dark:border-gray-800">
          <h2 className="text-lg font-bold text-gray-900 dark:text-white">{t("checkout.title")}</h2>
          <p className="text-xs text-gray-400 mt-0.5">{t("checkout.subtitle")}</p>
        </div>

        {/* ── 1. Address Selection ── */}
        <div className="space-y-2">
          <div className="flex items-center gap-2 mb-1">
            <div className="w-6 h-6 rounded-full bg-black text-white flex items-center justify-center text-xs font-bold">1</div>
            <span className="text-sm font-bold text-gray-800 dark:text-white">{t("checkout.shipping-address")}</span>
          </div>

          {addressLoading ? (
            <div className="flex items-center justify-center py-6">
              <Loader2 className="w-5 h-5 animate-spin text-gray-400" />
            </div>
          ) : savedAddresses.length > 0 ? (
            <div className="space-y-2">
              {savedAddresses.map((addr) => {
                const isSelected = selectedAddressId === addr.id;
                return (
                  <button
                    key={addr.id}
                    type="button"
                    onClick={() => setSelectedAddressId(addr.id)}
                    className={`group w-full text-start p-3.5 rounded-2xl border-2 transition-all duration-200 ${isSelected
                      ? "border-black dark:border-white bg-gray-50 dark:bg-gray-800/60 shadow-sm"
                      : "border-gray-100 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-600"
                      }`}
                  >
                    <div className="flex items-start gap-3">
                      {/* Radio dot */}
                      <div className={`mt-0.5 w-[18px] h-[18px] rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-all ${isSelected
                        ? "border-black bg-black dark:border-white dark:bg-white"
                        : "border-gray-300 dark:border-gray-600 group-hover:border-gray-400"
                        }`}>
                        {isSelected && <Check className="w-2.5 h-2.5 text-white dark:text-black" />}
                      </div>

                      {/* Address info */}
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-1.5 mb-0.5">
                          <MapPin className="w-3.5 h-3.5 text-gray-400 flex-shrink-0" />
                          <span className="text-sm font-semibold text-gray-800 dark:text-gray-200 truncate">
                            {addr.first_name} {addr.last_name}
                          </span>
                        </div>
                        {addr.address1 && (
                          <p className="text-xs text-gray-500 dark:text-gray-400 ps-5 leading-relaxed">
                            {[addr.address1, addr.city, addr.country].filter(Boolean).join("، ")}
                          </p>
                        )}
                        {addr.phone && (
                          <p className="text-[11px] text-gray-400 ps-5 mt-0.5 font-mono" dir="ltr">
                            {addr.phone}
                          </p>
                        )}
                      </div>
                    </div>
                  </button>
                );
              })}
            </div>
          ) : (
            <div className="space-y-3">
              <div className="text-center py-3 bg-gray-50 dark:bg-gray-800/40 rounded-2xl border border-dashed border-gray-200 dark:border-gray-700">
                <MapPin className="w-5 h-5 text-gray-300 mx-auto mb-1" />
                <p className="text-xs text-gray-500">{t("checkout.no-addresses")}</p>
              </div>
            </div>
          )}

          {/* Add New Address Button or Form */}
          {!showNewAddressForm && savedAddresses.length > 0 && (
            <button
              type="button"
              onClick={() => { setShowNewAddressForm(true); setSelectedAddressId(null); }}
              className="w-full mt-2 text-sm text-blue-600 dark:text-blue-400 hover:underline font-medium py-2"
            >
              {t("checkout.add-new-address")}
            </button>
          )}

          {(showNewAddressForm || savedAddresses.length === 0) && (
            <div className="mt-3 space-y-3 p-4 bg-gray-50 dark:bg-gray-800/40 rounded-2xl border border-gray-200 dark:border-gray-700">
              <h4 className="text-sm font-bold text-gray-700 dark:text-gray-200">{t("checkout.new-address")}</h4>
              <div>
                <label className="block text-xs text-gray-500 mb-1">{t("checkout.address-label")} *</label>
                <input
                  type="text"
                  value={newAddress.address1}
                  onChange={(e) => setNewAddress(prev => ({ ...prev, address1: e.target.value }))}
                  placeholder={t("checkout.address-placeholder")}
                  className={`w-full border border-gray-200 dark:border-gray-700 rounded-xl px-3 py-2.5 text-sm bg-white dark:bg-gray-900 ${isRtl ? "text-right" : "text-left"} focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white`}
                />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs text-gray-500 mb-1">{t("checkout.city-label")} *</label>
                  <input
                    type="text"
                    value={newAddress.city}
                    onChange={(e) => setNewAddress(prev => ({ ...prev, city: e.target.value }))}
                    placeholder={t("checkout.city-placeholder")}
                    className={`w-full border border-gray-200 dark:border-gray-700 rounded-xl px-3 py-2.5 text-sm bg-white dark:bg-gray-900 ${isRtl ? "text-right" : "text-left"} focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white`}
                  />
                </div>
                <div>
                  <label className="block text-xs text-gray-500 mb-1">{t("checkout.phone-label")} *</label>
                  <input
                    type="tel"
                    value={newAddress.phone}
                    onChange={(e) => setNewAddress(prev => ({ ...prev, phone: e.target.value }))}
                    placeholder={t("checkout.phone-placeholder")}
                    dir="ltr"
                    className="w-full border border-gray-200 dark:border-gray-700 rounded-xl px-3 py-2.5 text-sm bg-white dark:bg-gray-900 text-left focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white"
                  />
                </div>
              </div>
              <button
                type="button"
                onClick={async () => {
                  if (isSavingNewAddress) return;
                  if (!newAddress.address1 || !newAddress.city || !newAddress.phone) {
                    toast.error(t("checkout.fill-all-fields"));
                    return;
                  }
                  setIsSavingNewAddress(true);
                  try {
                    const res = await authenticatedFetch("/api/checkout/saveaddress", {
                      method: "POST",
                      headers: { "Content-Type": "application/json" },
                      body: JSON.stringify({
                        billing: {
                          address1: newAddress.address1,
                          city: newAddress.city,
                          phone: newAddress.phone,
                          save_as_address: "1",
                          first_name: ".",
                          last_name: ".",
                          email: "user@balmy.sa",
                          country: "SA",
                          state: newAddress.city,
                          postcode: "00000",
                        },
                        shipping: {
                          address1: newAddress.address1,
                          city: newAddress.city,
                          phone: newAddress.phone,
                          save_as_address: "1",
                          first_name: ".",
                          last_name: ".",
                          email: "user@balmy.sa",
                          country: "SA",
                          state: newAddress.city,
                          postcode: "00000",
                        },
                      }),
                    });
                    const data = await res.json();
                    if (!res.ok || data.success === false) {
                      toast.error(data.message || t("checkout.save-address-failed"));
                      return;
                    }
                    toast.success(t("checkout.save-address-success"));
                    // Switch checkout to use the newly-saved addressId so place order won't create another one
                    const newId = Number(data?.addressId || 0) || 0;
                    // Refresh list immediately so it appears in UI
                    try {
                      const addrRes = await authenticatedFetch("/api/checkout/addresses", { method: "GET" });
                      const addrData = await addrRes.json();
                      const deduped = addrRes.ok && addrData?.success !== false ? mapCheckoutAddresses(addrData) : [];
                      if (deduped.length > 0) {
                        setSavedAddresses(deduped);
                      }
                    } catch {}
                    if (newId) setSelectedAddressId(newId);
                    setShowNewAddressForm(false);
                    setNewAddress({ address1: "", city: "", phone: "", country: "SA" });
                  } catch {
                    toast.error(t("checkout.save-address-error"));
                  } finally {
                    setIsSavingNewAddress(false);
                  }
                }}
                disabled={isSavingNewAddress}
                className="w-full py-2.5 bg-black text-white text-sm font-bold rounded-xl hover:bg-gray-800 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
              >
                {isSavingNewAddress ? (
                  <span className="flex items-center justify-center gap-2">
                    <Loader2 className="w-4 h-4 animate-spin" />
                    <span>{t("processing")}</span>
                  </span>
                ) : (
                  t("checkout.save-address")
                )}
              </button>
              {savedAddresses.length > 0 && (
                <button
                  type="button"
                  onClick={() => { setShowNewAddressForm(false); if (savedAddresses.length > 0) setSelectedAddressId(savedAddresses[0].id); }}
                  className="text-xs text-gray-400 hover:text-gray-600 underline"
                >
                  {t("checkout.use-saved-address")}
                </button>
              )}
            </div>
          )}

          {/* Link to full address management */}
          <div className="flex flex-col gap-2 mt-2">
            <a
              href={`/${locale}/order`}
              className="flex items-center justify-center gap-2 py-2.5 px-4 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl text-sm font-medium text-gray-700 dark:text-gray-300 transition-colors"
            >
              <MapPin className="w-4 h-4" />
              {t("checkout.manage-addresses")}
            </a>
          </div>
        </div>

        {/* ── 2. Shipping Method ── */}
        <div className="space-y-2">
          <div className="flex items-center gap-2 mb-1">
            <div className="w-6 h-6 rounded-full bg-black text-white flex items-center justify-center text-xs font-bold">2</div>
            <span className="text-sm font-bold text-gray-800 dark:text-white">{t("checkout.shipping-method")}</span>
          </div>
          <div className="bg-gray-50 dark:bg-gray-800/40 rounded-2xl p-3.5 border border-gray-100 dark:border-gray-800">
            <label className="flex items-center gap-3 cursor-pointer">
              <div className="w-8 h-8 rounded-xl bg-black/5 dark:bg-white/5 flex items-center justify-center">
                <Truck className="w-4 h-4 text-gray-600 dark:text-gray-400" />
              </div>
              <div className="flex-1">
                <span className="text-sm font-medium text-gray-800 dark:text-gray-200">{t("checkout.flat-rate")}</span>
                <p className="text-[11px] text-gray-400">{t("checkout.delivery-time")}</p>
              </div>
              <div className="w-[18px] h-[18px] rounded-full border-2 border-black bg-black dark:border-white dark:bg-white flex items-center justify-center">
                <Check className="w-2.5 h-2.5 text-white dark:text-black" />
              </div>
            </label>
          </div>
        </div>

        {/* ── 3. Payment Method ── */}
        <div className="space-y-2">
          <div className="flex items-center gap-2 mb-1">
            <div className="w-6 h-6 rounded-full bg-black text-white flex items-center justify-center text-xs font-bold">3</div>
            <span className="text-sm font-bold text-gray-800 dark:text-white">{t("checkout.payment-method")}</span>
          </div>
          <div className="space-y-2">
            {(paymentMethods.length > 0 ? paymentMethods : [
              { code: "cashondelivery", title: t("checkout.cod") },
              { code: "creditcard", title: t("checkout.credit-card") },
            ]).map((method) => {
              const isSelected = paymentMethod === method.code;
              const isCOD = method.code === "cashondelivery";
              return (
                <button
                  key={method.code}
                  type="button"
                  onClick={() => setPaymentMethod(method.code)}
                  className={`w-full text-start p-3.5 rounded-2xl border-2 transition-all duration-200 ${isSelected
                    ? "border-black dark:border-white bg-gray-50 dark:bg-gray-800/60"
                    : "border-gray-100 dark:border-gray-800 hover:border-gray-300"
                    }`}
                >
                  <div className="flex items-center gap-3">
                    <div className={`w-8 h-8 rounded-xl flex items-center justify-center ${isCOD ? "bg-green-50 dark:bg-green-900/20" : "bg-blue-50 dark:bg-blue-900/20"}`}>
                      {isCOD ? (
                        <Wallet className="w-4 h-4 text-green-600" />
                      ) : (
                        <CreditCard className="w-4 h-4 text-blue-600" />
                      )}
                    </div>
                    <span className="text-sm font-medium text-gray-800 dark:text-gray-200 flex-1">
                      {method.title || method.code}
                    </span>
                    <div className={`w-[18px] h-[18px] rounded-full border-2 flex items-center justify-center transition-all ${isSelected
                      ? "border-black bg-black dark:border-white dark:bg-white"
                      : "border-gray-300 dark:border-gray-600"
                      }`}>
                      {isSelected && <Check className="w-2.5 h-2.5 text-white dark:text-black" />}
                    </div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        {/* ── Place Order Button ── */}
        <Button
          onClick={handlePlaceOrder}
          disabled={isSubmitting || !selectedAddressId || savedAddresses.length === 0}
          className="w-full h-12 bg-black text-white rounded-2xl text-base font-bold hover:bg-gray-900 transition-all shadow-lg disabled:opacity-40 disabled:shadow-none mt-1"
        >
          {isSubmitting ? (
            <div className="flex items-center gap-2">
              <Loader2 className="w-4 h-4 animate-spin" />
              <span>{t("checkout.processing")}</span>
            </div>
          ) : (
            <div className="flex items-center gap-2">
              <ShieldCheck className="w-4 h-4" />
              <span>{t("checkout.place-order")}</span>
            </div>
          )}
        </Button>

        {/* ── Security note ── */}
        <p className="text-[10px] text-gray-400 text-center flex items-center justify-center gap-1">
          <ShieldCheck className="w-3 h-3" />
          {t("checkout.secure-checkout")}
        </p>
      </div >

      <AuthModal
        isOpen={showAuthModal}
        onOpenChange={setShowAuthModal}
        authContext="checkout"
        onAuthenticated={() => {
          setIsAuthenticated(true);
          setShowAuthModal(false);
          void fetchAddressesFromBackend();
        }}
      />
    </>
  );
}