"use client";

import Image from "next/image";
import Link from "next/link";
import { useMemo, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/cn";
import { detonexFigmaAssets } from "@/lib/detonex-figma";
import type {
  StorefrontCartItem,
  StorefrontCheckoutAddress,
  StorefrontCheckoutPaymentMethod,
  StorefrontCheckoutShippingPackage,
  StorefrontCheckoutState,
} from "@/types/storefront";

type CheckoutStepId = "login" | "shipping" | "payment";

const CHECKOUT_STEP_ORDER: Array<{
  id: CheckoutStepId;
  label: string;
}> = [
  { id: "login", label: "Prijava" },
  { id: "shipping", label: "Dostava" },
  { id: "payment", label: "Način plaćanja" },
];

function normalizeAddress(address?: StorefrontCheckoutAddress): StorefrontCheckoutAddress {
  return {
    firstName: address?.firstName ?? "",
    lastName: address?.lastName ?? "",
    address1: address?.address1 ?? "",
    address2: address?.address2 ?? "",
    city: address?.city ?? "",
    postcode: address?.postcode ?? "",
    country: address?.country || "HR",
    email: address?.email ?? "",
    phone: address?.phone ?? "",
  };
}

function getInitialShippingSelection(packages: StorefrontCheckoutShippingPackage[]) {
  for (const shippingPackage of packages) {
    const selectedRate = shippingPackage.rates.find((rate) => rate.selected);

    if (selectedRate) {
      return {
        packageId: shippingPackage.id,
        rateId: selectedRate.id,
      };
    }
  }

  const firstPackage = packages[0];
  const firstRate = firstPackage?.rates[0];

  if (!firstPackage || !firstRate) {
    return null;
  }

  return {
    packageId: firstPackage.id,
    rateId: firstRate.id,
  };
}

function addressesDiffer(
  billingAddress: StorefrontCheckoutAddress,
  shippingAddress: StorefrontCheckoutAddress,
) {
  return (
    billingAddress.firstName !== shippingAddress.firstName ||
    billingAddress.lastName !== shippingAddress.lastName ||
    billingAddress.address1 !== shippingAddress.address1 ||
    billingAddress.address2 !== shippingAddress.address2 ||
    billingAddress.city !== shippingAddress.city ||
    billingAddress.postcode !== shippingAddress.postcode ||
    billingAddress.country !== shippingAddress.country
  );
}

function buildShippingAddress(
  billingAddress: StorefrontCheckoutAddress,
  shippingAddress: StorefrontCheckoutAddress,
  useSeparateShippingAddress: boolean,
) {
  if (!useSeparateShippingAddress) {
    return {
      ...billingAddress,
    };
  }

  return {
    ...shippingAddress,
    email: billingAddress.email,
    phone: billingAddress.phone,
    country: shippingAddress.country || billingAddress.country || "HR",
  };
}

function Stepper({
  currentStep,
}: {
  currentStep: CheckoutStepId;
}) {
  const activeIndex = CHECKOUT_STEP_ORDER.findIndex((step) => step.id === currentStep);

  return (
    <nav
      aria-label="Checkout koraci"
      className="border-b border-black/10 pb-6"
    >
      <ol className="flex flex-wrap items-center gap-6 xl:gap-10">
        {CHECKOUT_STEP_ORDER.map((step, index) => {
          const isActive = step.id === currentStep;
          const isCompleted = index < activeIndex;

          return (
            <li key={step.id} className="flex items-center gap-3">
              <span
                className={cn(
                  "inline-flex size-5 items-center justify-center rounded-[4px] text-[12px] font-bold leading-none tracking-[-0.02em]",
                  isActive || isCompleted
                    ? "bg-accent text-white"
                    : "border border-[rgba(0,0,0,0.20)] text-primary/60",
                )}
              >
                {index + 1}
              </span>
              <span
                className={cn(
                  "text-[14px] font-bold leading-[1.5] tracking-[-0.02em]",
                  isActive || isCompleted ? "text-primary" : "text-primary/60",
                )}
              >
                {step.label}
              </span>
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

function CheckoutField({
  label,
  value,
  onChange,
  type = "text",
  autoComplete,
  required = true,
}: {
  label: string;
  value: string;
  onChange: (value: string) => void;
  type?: string;
  autoComplete?: string;
  required?: boolean;
}) {
  return (
    <label className="space-y-2">
      <span className="block text-[14px] font-medium leading-[1.5] tracking-[-0.02em] text-primary">
        {label}
        {required ? <span className="text-accent"> *</span> : null}
      </span>
      <input
        type={type}
        autoComplete={autoComplete}
        value={value}
        onChange={(event) => onChange(event.target.value)}
        className="h-[52px] w-full appearance-none rounded-[6px] border border-black/10 bg-white px-5 text-[16px] font-medium leading-[1.5] tracking-[-0.02em] text-primary outline-none transition-colors placeholder:text-primary/35 focus:border-accent focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus:shadow-none focus-visible:shadow-none"
      />
    </label>
  );
}

function CheckoutCheckbox({
  label,
  checked,
  onChange,
}: {
  label: string;
  checked: boolean;
  onChange: (checked: boolean) => void;
}) {
  return (
    <button
      type="button"
      onClick={() => onChange(!checked)}
      className="inline-flex cursor-pointer items-center gap-3 text-left"
    >
      <span
        className={cn(
          "inline-flex size-5 items-center justify-center rounded-[4px] border border-black/10 bg-white",
          checked ? "bg-accent border-accent" : "",
        )}
      >
        <span
          className={cn(
            "size-2.5 rounded-[2px] bg-white transition-opacity",
            checked ? "opacity-100" : "opacity-0",
          )}
        />
      </span>
      <span className="text-[14px] font-medium leading-[1.5] tracking-[-0.02em] text-primary">
        {label}
      </span>
    </button>
  );
}

function OptionRow({
  title,
  description,
  price,
  selected,
  onSelect,
}: {
  title: string;
  description?: string;
  price?: string;
  selected: boolean;
  onSelect: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onSelect}
      className={cn(
        "flex min-h-[59px] w-full cursor-pointer items-center justify-between gap-4 rounded-[6px] border bg-white px-5 py-4 text-left transition-colors",
        selected ? "border-accent" : "border-black/10",
      )}
    >
      <span className="flex min-w-0 items-center gap-4">
        <span
          className={cn(
            "inline-flex size-5 shrink-0 items-center justify-center rounded-full border",
            selected ? "border-accent" : "border-black/10",
          )}
        >
          <span
            className={cn(
              "size-2 rounded-full bg-accent transition-opacity",
              selected ? "opacity-100" : "opacity-0",
            )}
          />
        </span>
        <span className="min-w-0">
          <span className="block text-[16px] font-medium leading-[1.5] tracking-[-0.02em] text-primary">
            {title}
          </span>
          {description ? (
            <span className="block text-[14px] font-medium leading-[1.5] tracking-[-0.02em] text-primary/60">
              {description}
            </span>
          ) : null}
        </span>
      </span>
      {price ? (
        <span className="shrink-0 text-[16px] font-bold leading-[1.5] tracking-[-0.02em] text-primary">
          {price}
        </span>
      ) : null}
    </button>
  );
}

function CheckoutSummaryItem({
  item,
}: {
  item: StorefrontCartItem;
}) {
  return (
    <article className="flex items-start gap-3">
      <Link
        href={item.href}
        className="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-[6px] border border-black/10 bg-white p-2"
      >
        {item.image ? (
          <div className="relative h-full w-full">
            <Image
              src={item.image.src}
              alt={item.image.alt}
              fill
              sizes="64px"
              className="object-contain"
            />
          </div>
        ) : null}
      </Link>
      <div className="min-w-0 flex-1 space-y-0.5">
        <p className="text-[14px] font-medium leading-[1.5] tracking-[-0.02em] text-primary/60">
          {item.label}
        </p>
        <Link
          href={item.href}
          className="block text-[14px] font-medium leading-[1.5] tracking-[-0.02em] text-primary"
        >
          {item.name}
        </Link>
      </div>
      <p className="shrink-0 text-[14px] font-bold leading-[1.5] tracking-[-0.02em] text-primary">
        {item.total}
      </p>
    </article>
  );
}

export function CheckoutPageClient({
  initialCheckout,
}: {
  initialCheckout: StorefrontCheckoutState;
}) {
  const router = useRouter();
  const [checkout, setCheckout] = useState(initialCheckout);
  const [currentStep, setCurrentStep] = useState<CheckoutStepId>("login");
  const [billingAddress, setBillingAddress] = useState<StorefrontCheckoutAddress>(
    normalizeAddress(initialCheckout.billingAddress),
  );
  const [shippingAddress, setShippingAddress] = useState<StorefrontCheckoutAddress>(
    normalizeAddress(initialCheckout.shippingAddress),
  );
  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(
    initialCheckout.selectedPaymentMethod ||
      initialCheckout.paymentMethods[0]?.id ||
      "",
  );
  const [selectedShippingSelection, setSelectedShippingSelection] = useState(
    getInitialShippingSelection(initialCheckout.shippingPackages),
  );
  const [useSeparateShippingAddress, setUseSeparateShippingAddress] = useState(
    addressesDiffer(
      normalizeAddress(initialCheckout.billingAddress),
      normalizeAddress(initialCheckout.shippingAddress),
    ),
  );
  const [needsCompanyInvoice, setNeedsCompanyInvoice] = useState(false);
  const [companyName, setCompanyName] = useState("");
  const [companyAddress, setCompanyAddress] = useState("");
  const [companyOib, setCompanyOib] = useState("");
  const [orderNote, setOrderNote] = useState("");
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [validationIssues, setValidationIssues] = useState<string[]>([]);
  const [isUpdatingCheckout, setIsUpdatingCheckout] = useState(false);
  const [isSubmittingOrder, setIsSubmittingOrder] = useState(false);
  const pendingCheckoutSyncRef = useRef<Promise<void> | null>(null);

  const selectedShippingRate = useMemo(() => {
    if (!selectedShippingSelection) {
      return null;
    }

    const activePackage = checkout.shippingPackages.find(
      (shippingPackage) => shippingPackage.id === selectedShippingSelection.packageId,
    );

    return (
      activePackage?.rates.find(
        (rate) => rate.id === selectedShippingSelection.rateId,
      ) || null
    );
  }, [checkout.shippingPackages, selectedShippingSelection]);

  const orderSummaryShippingLabel = selectedShippingRate?.price || "Besplatno";

  function setBillingField<K extends keyof StorefrontCheckoutAddress>(
    field: K,
    value: StorefrontCheckoutAddress[K],
  ) {
    setBillingAddress((current) => ({
      ...current,
      [field]: value,
    }));
  }

  function setShippingField<K extends keyof StorefrontCheckoutAddress>(
    field: K,
    value: StorefrontCheckoutAddress[K],
  ) {
    setShippingAddress((current) => ({
      ...current,
      [field]: value,
    }));
  }

  function getShippingStepValidationIssues() {
    const issues: string[] = [];

    if (!billingAddress.firstName.trim()) issues.push("Unesite ime.");
    if (!billingAddress.lastName.trim()) issues.push("Unesite prezime.");
    if (!billingAddress.email.trim()) issues.push("Unesite e-mail.");
    if (!billingAddress.phone.trim()) issues.push("Unesite telefon.");
    if (!billingAddress.address1.trim()) issues.push("Unesite adresu.");
    if (!billingAddress.city.trim()) issues.push("Unesite grad.");
    if (!billingAddress.postcode.trim()) issues.push("Unesite poštanski broj.");

    if (needsCompanyInvoice) {
      if (!companyName.trim()) issues.push("Unesite naziv tvrtke.");
      if (!companyOib.trim()) issues.push("Unesite OIB.");
      if (!companyAddress.trim()) issues.push("Unesite adresu tvrtke.");
    }

    if (useSeparateShippingAddress) {
      if (!shippingAddress.firstName.trim()) issues.push("Unesite ime primatelja.");
      if (!shippingAddress.lastName.trim()) issues.push("Unesite prezime primatelja.");
      if (!shippingAddress.address1.trim()) issues.push("Unesite adresu dostave.");
      if (!shippingAddress.city.trim()) issues.push("Unesite grad dostave.");
      if (!shippingAddress.postcode.trim()) issues.push("Unesite poštanski broj dostave.");
    }

    if (checkout.needsShipping && !selectedShippingSelection) {
      issues.push("Odaberite način dostave.");
    }

    return issues;
  }

  async function syncCheckoutAndContinue() {
    const issues = getShippingStepValidationIssues();

    if (issues.length > 0) {
      setValidationIssues(issues);
      setErrorMessage(null);
      return;
    }

    const resolvedShippingAddress = buildShippingAddress(
      billingAddress,
      shippingAddress,
      useSeparateShippingAddress,
    );

    if (!selectedPaymentMethod) {
      setValidationIssues([]);
      setErrorMessage("Odaberite način plaćanja.");
      return;
    }

    setValidationIssues([]);
    setErrorMessage(null);
    setCurrentStep("payment");
    setIsUpdatingCheckout(true);

    const syncPromise = (async () => {
      const response = await fetch("/api/checkout", {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          billingAddress,
          shippingAddress: resolvedShippingAddress,
          paymentMethod: selectedPaymentMethod,
          customerNote: orderNote,
          shippingSelection: selectedShippingSelection || undefined,
        }),
      });

      if (!response.ok) {
        const payload = (await response.json().catch(() => null)) as {
          message?: string;
        } | null;

        throw new Error(payload?.message || "Ažuriranje checkouta nije uspjelo.");
      }

      const nextCheckout = (await response.json()) as StorefrontCheckoutState;

      setCheckout(nextCheckout);
      setSelectedPaymentMethod(
        nextCheckout.selectedPaymentMethod ||
          nextCheckout.paymentMethods[0]?.id ||
          selectedPaymentMethod,
      );
      setSelectedShippingSelection(
        getInitialShippingSelection(nextCheckout.shippingPackages),
      );
    })();

    pendingCheckoutSyncRef.current = syncPromise;

    try {
      await syncPromise;
    } catch (error) {
      setErrorMessage(
        error instanceof Error ? error.message : "Ažuriranje checkouta nije uspjelo.",
      );
      pendingCheckoutSyncRef.current = null;
    } finally {
      setIsUpdatingCheckout(false);
      if (pendingCheckoutSyncRef.current === syncPromise) {
        pendingCheckoutSyncRef.current = null;
      }
    }
  }

  async function submitOrder() {
    if (pendingCheckoutSyncRef.current) {
      try {
        await pendingCheckoutSyncRef.current;
      } catch {
        return;
      }
    }

    const resolvedShippingAddress = buildShippingAddress(
      billingAddress,
      shippingAddress,
      useSeparateShippingAddress,
    );

    setErrorMessage(null);
    setIsSubmittingOrder(true);

    try {
      const response = await fetch("/api/checkout", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          billingAddress,
          shippingAddress: resolvedShippingAddress,
          paymentMethod: selectedPaymentMethod,
          customerNote: orderNote,
          shippingSelection: selectedShippingSelection || undefined,
        }),
      });

      if (!response.ok) {
        const payload = (await response.json().catch(() => null)) as {
          message?: string;
        } | null;

        throw new Error(payload?.message || "Slanje narudžbe nije uspjelo.");
      }

      const payload = (await response.json()) as {
        redirectUrl?: string | null;
        orderId?: number | null;
      };

      if (payload.redirectUrl) {
        window.location.assign(payload.redirectUrl);
        return;
      }

      router.refresh();
      setErrorMessage(
        payload.orderId
          ? `Narudžba #${payload.orderId} je uspješno zaprimljena.`
          : "Narudžba je uspješno zaprimljena.",
      );
    } catch (error) {
      setErrorMessage(
        error instanceof Error ? error.message : "Slanje narudžbe nije uspjelo.",
      );
    } finally {
      setIsSubmittingOrder(false);
    }
  }

  return (
    <div className="space-y-12 pb-20 pt-[60px]">
      <Stepper currentStep={currentStep} />

      <div className="grid gap-10 xl:grid-cols-[minmax(0,780px)_400px] xl:gap-20">
        <section className="space-y-8">
          {currentStep === "login" ? (
            <div className="space-y-8">
              <div className="space-y-4">
                <h1 className="text-[34px] font-bold leading-[1.2] tracking-[-0.03em] text-primary">
                  Prijavi se
                </h1>
                <p className="max-w-[620px] text-[16px] font-medium leading-[1.5] tracking-[-0.02em] text-primary/60">
                  Prijavite se na svoj korisnički račun ili nastavite kao gost i
                  dovršite narudžbu u tri jednostavna koraka.
                </p>
              </div>

              <div className="flex flex-col gap-4 sm:flex-row">
                <Button
                  href="/login"
                  className="w-full cursor-pointer rounded-[6px] sm:max-w-[382px]"
                >
                  Prijavi se
                </Button>
                <Button
                  variant="secondary"
                  className="w-full cursor-pointer rounded-[6px] border border-black/10 bg-white sm:max-w-[382px]"
                  onClick={() => setCurrentStep("shipping")}
                >
                  Nastavi kao gost
                </Button>
              </div>
            </div>
          ) : null}

          {currentStep === "shipping" ? (
            <div className="space-y-8">
              <div className="space-y-4">
                <h1 className="text-[34px] font-bold leading-[1.2] tracking-[-0.03em] text-primary">
                  Dostava
                </h1>
                <p className="text-[16px] font-medium leading-[1.5] tracking-[-0.02em] text-primary/60">
                  Unesite podatke za naplatu i odaberite način dostave.
                </p>
              </div>

              {validationIssues.length > 0 ? (
                <div className="rounded-[6px] border border-accent/20 bg-accent/5 px-5 py-4">
                  <p className="text-[14px] font-bold leading-[1.5] tracking-[-0.02em] text-accent">
                    Potrebno je ispuniti sljedeća obavezna polja:
                  </p>
                  <ul className="mt-2 space-y-1">
                    {validationIssues.map((issue) => (
                      <li
                        key={issue}
                        className="text-[14px] font-medium leading-[1.5] tracking-[-0.02em] text-accent"
                      >
                        {issue}
                      </li>
                    ))}
                  </ul>
                </div>
              ) : null}

              {checkout.needsShipping && checkout.shippingPackages.length > 0 ? (
                <div className="space-y-3">
                  {checkout.shippingPackages.flatMap((shippingPackage) =>
                    shippingPackage.rates.map((rate) => (
                      <OptionRow
                        key={`${shippingPackage.id}-${rate.id}`}
                        title={rate.label}
                        description={rate.description}
                        price={rate.price}
                        selected={
                          selectedShippingSelection?.packageId === shippingPackage.id &&
                          selectedShippingSelection?.rateId === rate.id
                        }
                        onSelect={() =>
                          setSelectedShippingSelection({
                            packageId: shippingPackage.id,
                            rateId: rate.id,
                          })
                        }
                      />
                    )),
                  )}
                </div>
              ) : null}

              <div className="grid gap-x-5 gap-y-6 md:grid-cols-2">
                <CheckoutField
                  label="Ime"
                  value={billingAddress.firstName}
                  onChange={(value) => setBillingField("firstName", value)}
                  autoComplete="given-name"
                />
                <CheckoutField
                  label="Prezime"
                  value={billingAddress.lastName}
                  onChange={(value) => setBillingField("lastName", value)}
                  autoComplete="family-name"
                />
                <CheckoutField
                  label="E-mail"
                  value={billingAddress.email}
                  onChange={(value) => setBillingField("email", value)}
                  type="email"
                  autoComplete="email"
                />
                <CheckoutField
                  label="Telefon"
                  value={billingAddress.phone}
                  onChange={(value) => setBillingField("phone", value)}
                  type="tel"
                  autoComplete="tel"
                />
                <div className="md:col-span-2">
                  <CheckoutField
                    label="Adresa"
                    value={billingAddress.address1}
                    onChange={(value) => setBillingField("address1", value)}
                    autoComplete="address-line1"
                  />
                </div>
                <CheckoutField
                  label="Grad"
                  value={billingAddress.city}
                  onChange={(value) => setBillingField("city", value)}
                  autoComplete="address-level2"
                />
                <CheckoutField
                  label="Poštanski broj"
                  value={billingAddress.postcode}
                  onChange={(value) => setBillingField("postcode", value)}
                  autoComplete="postal-code"
                />
              </div>

              <div className="space-y-6">
                <CheckoutCheckbox
                  label="Trebam R1 račun"
                  checked={needsCompanyInvoice}
                  onChange={setNeedsCompanyInvoice}
                />

                {needsCompanyInvoice ? (
                  <div className="grid gap-x-5 gap-y-6 md:grid-cols-2">
                    <CheckoutField
                      label="Naziv tvrtke"
                      value={companyName}
                      onChange={setCompanyName}
                    />
                    <CheckoutField
                      label="OIB"
                      value={companyOib}
                      onChange={setCompanyOib}
                    />
                    <div className="md:col-span-2">
                      <CheckoutField
                        label="Adresa tvrtke"
                        value={companyAddress}
                        onChange={setCompanyAddress}
                      />
                    </div>
                  </div>
                ) : null}
              </div>

              <div className="space-y-6">
                <CheckoutCheckbox
                  label="Dostava na različitu adresu"
                  checked={useSeparateShippingAddress}
                  onChange={setUseSeparateShippingAddress}
                />

                {useSeparateShippingAddress ? (
                  <div className="grid gap-x-5 gap-y-6 md:grid-cols-2">
                    <CheckoutField
                      label="Ime primatelja"
                      value={shippingAddress.firstName}
                      onChange={(value) => setShippingField("firstName", value)}
                    />
                    <CheckoutField
                      label="Prezime primatelja"
                      value={shippingAddress.lastName}
                      onChange={(value) => setShippingField("lastName", value)}
                    />
                    <div className="md:col-span-2">
                      <CheckoutField
                        label="Adresa dostave"
                        value={shippingAddress.address1}
                        onChange={(value) => setShippingField("address1", value)}
                      />
                    </div>
                    <CheckoutField
                      label="Grad"
                      value={shippingAddress.city}
                      onChange={(value) => setShippingField("city", value)}
                    />
                    <CheckoutField
                      label="Poštanski broj"
                      value={shippingAddress.postcode}
                      onChange={(value) => setShippingField("postcode", value)}
                    />
                  </div>
                ) : null}
              </div>

              <label className="block space-y-2 border-t border-black/10 pt-8">
                <span className="block text-[14px] font-medium leading-[1.5] tracking-[-0.02em] text-primary">
                  Napomena uz narudžbu
                </span>
                <textarea
                  value={orderNote}
                  onChange={(event) => setOrderNote(event.target.value)}
                  className="min-h-[100px] w-full resize-none appearance-none rounded-[6px] border border-black/10 bg-white px-5 py-4 text-[16px] font-medium leading-[1.5] tracking-[-0.02em] text-primary outline-none transition-colors placeholder:text-primary/35 focus:border-accent focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus:shadow-none focus-visible:shadow-none"
                />
              </label>

              {errorMessage ? (
                <p className="text-[14px] font-medium leading-[1.5] tracking-[-0.02em] text-accent">
                  {errorMessage}
                </p>
              ) : null}

              <div className="flex flex-col gap-4 border-t border-black/10 pt-6 sm:flex-row sm:items-center sm:justify-between">
                <button
                  type="button"
                  onClick={() => setCurrentStep("login")}
                  className="inline-flex h-12 cursor-pointer items-center gap-2 text-[16px] font-medium leading-[1.5] tracking-[-0.02em] text-primary"
                >
                  <Image
                    src={detonexFigmaAssets.icons.blogArrow}
                    alt=""
                    width={18}
                    height={18}
                    unoptimized
                    className="size-[18px] rotate-180 brightness-0"
                  />
                  Nazad
                </button>
                <Button
                  className="w-full cursor-pointer rounded-[6px] sm:w-[659px]"
                  onClick={syncCheckoutAndContinue}
                  disabled={isUpdatingCheckout}
                >
                  Nastavi na plaćanje
                </Button>
              </div>
            </div>
          ) : null}

          {currentStep === "payment" ? (
            <div className="space-y-8">
              <div className="space-y-4">
                <h1 className="text-[34px] font-bold leading-[1.2] tracking-[-0.03em] text-primary">
                  Odaberite način plaćanja
                </h1>
                <p className="text-[16px] font-medium leading-[1.5] tracking-[-0.02em] text-primary/60">
                  Pregledajte podatke i dovršite narudžbu odabirom metode plaćanja.
                </p>
              </div>

              <div className="space-y-3">
                {checkout.paymentMethods.map((paymentMethod: StorefrontCheckoutPaymentMethod) => (
                  <OptionRow
                    key={paymentMethod.id}
                    title={paymentMethod.label}
                    selected={selectedPaymentMethod === paymentMethod.id}
                    onSelect={() => setSelectedPaymentMethod(paymentMethod.id)}
                  />
                ))}
              </div>

              {errorMessage ? (
                <p className="text-[14px] font-medium leading-[1.5] tracking-[-0.02em] text-accent">
                  {errorMessage}
                </p>
              ) : null}

              <div className="flex flex-col gap-4 border-t border-black/10 pt-6 sm:flex-row sm:items-center sm:justify-between">
                <button
                  type="button"
                  onClick={() => setCurrentStep("shipping")}
                  className="inline-flex h-12 cursor-pointer items-center gap-2 text-[16px] font-medium leading-[1.5] tracking-[-0.02em] text-primary"
                >
                  <Image
                    src={detonexFigmaAssets.icons.blogArrow}
                    alt=""
                    width={18}
                    height={18}
                    unoptimized
                    className="size-[18px] rotate-180 brightness-0"
                  />
                  Nazad
                </button>
                <Button
                  className="w-full cursor-pointer rounded-[6px] sm:w-[659px]"
                  onClick={submitOrder}
                  disabled={isSubmittingOrder}
                >
                  Nastavi
                </Button>
              </div>
            </div>
          ) : null}
        </section>

        <aside className="h-fit rounded-[6px] bg-[#FAFAFA] p-6">
          <div className="space-y-6">
            <h2 className="text-[20px] font-bold leading-[1.2] tracking-[-0.03em] text-primary">
              Pregled narudžbe
            </h2>

            <div className="space-y-4">
              {checkout.cart.items.map((item) => (
                <CheckoutSummaryItem key={item.key} item={item} />
              ))}
            </div>

            <div className="space-y-3 border-t border-black/10 pt-6">
              <div className="flex items-center justify-between gap-6">
                <span className="text-[14px] font-bold leading-[1.5] tracking-[-0.02em] text-primary">
                  Vrijednost narudžbe
                </span>
                <span className="text-[14px] font-bold leading-[1.5] tracking-[-0.02em] text-primary">
                  {checkout.cart.subtotal}
                </span>
              </div>
              <div className="flex items-center justify-between gap-6">
                <span className="text-[14px] font-bold leading-[1.5] tracking-[-0.02em] text-primary">
                  Dostava
                </span>
                <span className="text-[14px] font-bold leading-[1.5] tracking-[-0.02em] text-primary">
                  {orderSummaryShippingLabel}
                </span>
              </div>
              <div className="flex items-start justify-between gap-6 border-t border-black/10 pt-4">
                <span className="text-[14px] font-bold leading-[1.5] tracking-[-0.02em] text-primary">
                  Ukupno
                </span>
                <span className="text-right">
                  <span className="block text-[14px] font-bold leading-[1.5] tracking-[-0.02em] text-primary">
                    {checkout.cart.total}
                  </span>
                  <span className="block text-[12px] font-medium leading-[1.5] tracking-[-0.02em] text-primary/60">
                    Uklj. PDV
                  </span>
                </span>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}