import Link from "next/link";
import { MapPin } from "lucide-react";
import type { Address, AddressLabel } from "@/types/api";

const ADDRESS_LABEL_FA: Record<AddressLabel, string> = {
  home: "خانه",
  work: "محل کار",
  other: "سایر",
};

/**
 * Both actions carry `returnTo` (the checkout confirm page's own URL) so the whole
 * address-management chain — map → details form → address list — comes back here
 * instead of stranding the customer on /addresses mid-checkout.
 */
export function CheckoutAddress({
  address,
  returnTo,
}: {
  address: Address | null;
  returnTo: string;
}) {
  const next = encodeURIComponent(returnTo);
  return (
    <section className="flex flex-col gap-3">
      <h2 className="text-[15px] font-bold leading-none text-foreground">
        آدرس تحویل
      </h2>

      {address ? (
        <div className="flex justify-between gap-3 rounded-2xl border border-gray-300 p-4">
          {/* DOM order intentionally mirrors the screenshot's left→right layout — see the
              inherited dir="rtl" note on the /cart page. */}
          <div className="flex flex-col justify-start items-start gap-4">
            <div className="flex items-center gap-1.5">
              <MapPin className="h-4 w-4 text-primary-action" />
              <span className="text-[14px] font-bold leading-none text-foreground">
                {address.title || ADDRESS_LABEL_FA[address.label]}
              </span>
            </div>
            <p className="text-end text-[13px] leading-normal text-gray-600">
              {address.full_address}
            </p>
          </div>
          <Link
            href={`/addresses?next=${next}`}
            className="text-[13px] font-semibold leading-none text-primary-action"
          >
            تغییر آدرس
          </Link>
        </div>
      ) : (
        <div className="flex flex-col items-center gap-3 rounded-2xl border border-gray-300 p-6 text-center">
          <span className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
            <MapPin className="h-5 w-5 text-gray-500" />
          </span>
          <p className="text-[13px] leading-normal text-gray-600">
            هنوز آدرسی ثبت نکرده‌اید. برای ادامه سفارش، لطفاً یک آدرس اضافه
            کنید.
          </p>
          <Link href={`/addresses/map?next=${next}`} className="w-full">
            <button
              type="button"
              className="w-full rounded-xl bg-primary-action py-3 text-[14px] font-bold text-white"
            >
              افزودن آدرس
            </button>
          </Link>
        </div>
      )}
    </section>
  );
}