"use client";

import Link from "next/link";
import { Suspense, useEffect, useRef, useState } from "react";
import { useSearchParams } from "next/navigation";
import { CheckCircle2, Package } from "lucide-react";
import { PageShell } from "@/components/layout/PageShell";
import { SafeImage } from "@/components/ui/SafeImage";
import { useCart } from "@/context/cart-context";
import { loadOrder, saveOrder, type PlacedOrder } from "@/lib/orders";
import { formatPrice } from "@/lib/format";

function ConfirmationContent() {
  const searchParams = useSearchParams();
  const orderId = searchParams.get("order");
  const sessionId = searchParams.get("session_id");
  const { clearCart } = useCart();
  const [order, setOrder] = useState<PlacedOrder | null>(null);
  const clearedRef = useRef(false);

  useEffect(() => {
    const saved = loadOrder();
    if (saved) {
      if (sessionId) {
        saved.stripeSessionId = sessionId;
        saved.paymentMethod = "stripe";
        saveOrder(saved);
        if (!clearedRef.current) {
          clearedRef.current = true;
          clearCart();
        }
      }
      setOrder(saved);
    }
  }, [sessionId, clearCart]);

  if (!order) {
    return (
      <PageShell
        crumbs={[{ label: "Home", href: "/" }, { label: "Confirmation" }]}
        title="Order confirmation"
        description="We couldn’t find a recent order on this device."
      >
        <Link
          href="/shop"
          className="inline-flex h-11 items-center rounded-full bg-foreground px-5 text-sm font-semibold text-background"
        >
          Back to shop
        </Link>
      </PageShell>
    );
  }

  return (
    <PageShell
      crumbs={[{ label: "Home", href: "/" }, { label: "Thank you" }]}
    >
      <div className="mx-auto max-w-3xl">
        <div className="rounded-[1.5rem] border border-border bg-card px-6 py-10 text-center sm:px-10">
          <CheckCircle2 className="mx-auto h-12 w-12 text-emerald-600" />
          <p className="mt-4 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted">
            Payment confirmed
          </p>
          <h1 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
            Thank you, {order.name.split(" ")[0]}!
          </h1>
          <p className="mx-auto mt-3 max-w-md text-sm leading-relaxed text-muted">
            Your order is confirmed. A receipt will be sent to{" "}
            <span className="font-medium text-foreground">{order.email}</span>.
          </p>
          <p className="mt-4 inline-flex items-center gap-2 rounded-full border border-border px-3 py-1.5 text-xs font-medium">
            <Package className="h-3.5 w-3.5" />
            Order {orderId || order.id}
          </p>
        </div>

        <div className="mt-6 rounded-[1.35rem] border border-border bg-card p-5 sm:p-6">
          <h2 className="text-lg font-semibold tracking-tight">Order details</h2>
          <ul className="mt-4 space-y-3">
            {order.items.map((item) => (
              <li
                key={`${item.productId}-${item.variantLabel ?? ""}`}
                className="flex gap-3"
              >
                <div className="relative h-16 w-16 shrink-0 overflow-hidden rounded-xl bg-surface">
                  <SafeImage
                    src={item.image}
                    alt={item.name}
                    fill
                    sizes="64px"
                    className="object-cover"
                  />
                </div>
                <div className="min-w-0 flex-1">
                  <p className="truncate text-sm font-medium">{item.name}</p>
                  {item.variantLabel ? (
                    <p className="text-xs text-muted">{item.variantLabel}</p>
                  ) : null}
                  <p className="mt-1 text-xs text-muted">
                    Qty {item.quantity} ·{" "}
                    {formatPrice(item.price * item.quantity)}
                  </p>
                </div>
              </li>
            ))}
          </ul>

          <div className="mt-5 space-y-1.5 border-t border-border pt-4 text-sm">
            <div className="flex justify-between text-muted">
              <span>Ship to</span>
              <span className="max-w-[60%] text-right text-foreground">
                {order.address}, {order.city}, {order.state} {order.zip}
              </span>
            </div>
            <div className="flex justify-between text-muted">
              <span>Subtotal</span>
              <span className="tabular-nums">{formatPrice(order.subtotal)}</span>
            </div>
            <div className="flex justify-between text-muted">
              <span>Shipping</span>
              <span className="tabular-nums">
                {order.shipping === 0 ? "Free" : formatPrice(order.shipping)}
              </span>
            </div>
            <div className="flex justify-between pt-1 text-base font-semibold">
              <span>Total paid</span>
              <span className="tabular-nums">{formatPrice(order.total)}</span>
            </div>
          </div>
        </div>

        <div className="mt-6 flex flex-wrap justify-center gap-3">
          <Link
            href="/shop"
            className="inline-flex h-11 items-center rounded-full bg-foreground px-5 text-sm font-semibold text-background"
          >
            Continue shopping
          </Link>
          <Link
            href="/account/orders"
            className="inline-flex h-11 items-center rounded-full border border-border px-5 text-sm font-medium"
          >
            View orders
          </Link>
        </div>
      </div>
    </PageShell>
  );
}

export default function OrderConfirmationPage() {
  return (
    <Suspense
      fallback={
        <div className="p-8 text-sm text-muted">Loading confirmation…</div>
      }
    >
      <ConfirmationContent />
    </Suspense>
  );
}