import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { formatPaise } from "@/lib/format";
import { isRazorpayConfigured } from "@/lib/razorpay";
import { SITE } from "@/lib/site";

export default async function OrderConfirmationPage({
  params,
  searchParams,
}: {
  params: Promise<{ orderNumber: string }>;
  searchParams: Promise<{ email?: string }>;
}) {
  const { orderNumber } = await params;
  const { email } = await searchParams;

  const order = await prisma.order.findUnique({
    where: { orderNumber },
    include: { items: { include: { product: true, variant: true } } },
  });

  if (!order) notFound();
  // Order details include the customer's name, phone, and address — require proof of ownership
  // (the checkout email) rather than showing them to anyone who has or guesses the order number.
  if (!email || email.trim().toLowerCase() !== order.email.toLowerCase()) {
    redirect(`/track-order?orderNumber=${encodeURIComponent(orderNumber)}`);
  }

  const demoMode = order.status === "pending" && !isRazorpayConfigured();

  return (
    <div className="mx-auto max-w-2xl px-4 py-16 sm:px-6">
      {demoMode ? (
        <div className="rounded-lg bg-amber-50 px-4 py-3 text-sm text-amber-800">
          Payment gateway isn&apos;t configured yet, so this order was placed without taking payment (demo mode).
          Add your real Razorpay keys to <code>.env</code> to accept live payments.
        </div>
      ) : order.status === "paid" ? (
        <div className="rounded-lg bg-emerald-50 px-4 py-3 text-sm text-emerald-800">Payment received — thank you!</div>
      ) : (
        <div className="rounded-lg bg-amber-50 px-4 py-3 text-sm text-amber-800">
          Payment is still pending for this order.
        </div>
      )}

      <h1 className="mt-6 font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">
        Thank you, {order.customerName.split(" ")[0]}!
      </h1>
      <p className="mt-1 text-sm text-stone-500">
        Order <span className="font-semibold text-stone-700">{order.orderNumber}</span>
      </p>

      <div className="mt-6 rounded-xl border border-rose-100 bg-white p-4">
        <ul className="divide-y divide-rose-100">
          {order.items.map((item) => (
            <li key={item.id} className="flex justify-between py-2 text-sm text-stone-600">
              <span>
                {item.product.name}
                {item.variant ? ` (${item.variant.name})` : ""} × {item.quantity}
                {item.personalization ? ` — “${item.personalization}”` : ""}
              </span>
              <span>{formatPaise(item.lineTotal)}</span>
            </li>
          ))}
        </ul>
        <div className="mt-3 space-y-1 border-t border-rose-100 pt-3 text-sm">
          <div className="flex justify-between text-stone-500">
            <span>Subtotal</span>
            <span>{formatPaise(order.subtotal)}</span>
          </div>
          <div className="flex justify-between text-stone-500">
            <span>Shipping</span>
            <span>{order.shippingFee === 0 ? "Free" : formatPaise(order.shippingFee)}</span>
          </div>
          <div className="flex justify-between text-base font-semibold text-stone-800">
            <span>Total</span>
            <span>{formatPaise(order.total)}</span>
          </div>
        </div>
      </div>

      <div className="mt-6 rounded-xl border border-rose-100 bg-white p-4 text-sm text-stone-600">
        <div className="font-medium text-stone-700">Shipping to</div>
        <div>{order.customerName}</div>
        <div>{order.addressLine1}{order.addressLine2 ? `, ${order.addressLine2}` : ""}</div>
        <div>{order.city}, {order.state} {order.pincode}</div>
        <div>{order.phone}</div>
      </div>

      <a
        href={SITE.instagramUrl}
        target="_blank"
        rel="noopener noreferrer"
        className="mt-6 flex items-center gap-4 rounded-xl border border-gold-100 bg-gradient-to-r from-gold-50 to-rose-50 p-4 transition hover:from-gold-100"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-9 w-9 shrink-0 text-rose-700">
          <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.332.014 7.052.072 2.695.272.273 2.69.073 7.052.014 8.332 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.332 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.668-.072-4.948-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
        </svg>
        <div>
          <div className="text-sm font-semibold text-stone-800">Follow @iniyaval_return_gifts on Instagram</div>
          <div className="mt-0.5 text-xs text-stone-600">
            New designs, offers &amp; behind-the-scenes — plus <span className="font-semibold text-rose-700">5% off your next order</span> with code{" "}
            <span className="font-semibold text-rose-700">FOLLOW5</span>.
          </div>
        </div>
      </a>

      <Link href="/shop" className="mt-6 inline-block text-sm font-medium text-rose-700 hover:underline">
        ← Continue shopping
      </Link>
    </div>
  );
}