"use client";

import { Suspense, useEffect } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import Container from "@/components/ui/Container";
import { clearStoredCart } from "@/lib/store-api";

/** Landing page for a Cash-on-Delivery order — checkout() returns no Stripe checkoutUrl for
 *  COD (the order is placed immediately server-side), so the checkout page routes here with
 *  ?order=<orderNo> instead of redirecting off-site. */
function ConfirmedContent() {
  const searchParams = useSearchParams();
  const orderNo = searchParams.get("order");

  useEffect(() => {
    clearStoredCart();
  }, []);

  return (
    <Container className="max-w-lg mx-auto text-center">
      <p className="text-[11px] font-bold uppercase tracking-[0.15em] text-[#b08968]">3 — Confirmation</p>
      <h1 className="mt-3 font-black uppercase text-3xl text-[#1d2739]">Order confirmed</h1>
      {orderNo ? (
        <p className="mt-4 text-[#515a68]">
          Order <span className="font-bold text-[#1d2739]">{orderNo}</span> has been placed as
          Cash on Delivery. We&apos;ll email you when it ships.
        </p>
      ) : (
        <p className="mt-4 text-[#515a68]">Your Cash on Delivery order has been placed.</p>
      )}
      <div className="mt-8">
        <Link
          href="/shop"
          className="inline-flex items-center justify-center bg-[#b08968] hover:bg-[#8f6d51] text-white text-xs font-bold uppercase tracking-wide px-6 py-3 transition-colors"
        >
          Continue Shopping
        </Link>
      </div>
    </Container>
  );
}

export default function CheckoutConfirmedPage() {
  return (
    <section className="py-24">
      <Suspense fallback={<Container className="text-center text-sm text-[#6f7885]">Loading…</Container>}>
        <ConfirmedContent />
      </Suspense>
    </section>
  );
}