import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { formatPaise } from "@/lib/format";
import { whatsappLink } from "@/lib/site";

export const metadata = { title: "Track Order — Iniyaval Return Gifts" };

export default async function TrackOrderPage({
  searchParams,
}: {
  searchParams: Promise<{ orderNumber?: string; email?: string }>;
}) {
  const { orderNumber, email } = await searchParams;
  const submitted = Boolean(orderNumber && email);

  const order = submitted
    ? await prisma.order.findFirst({
        where: {
          orderNumber: orderNumber!.trim(),
          email: { equals: email!.trim() },
        },
        include: { items: { include: { product: true, variant: true } } },
      })
    : null;

  return (
    <div className="mx-auto max-w-xl px-4 py-14 sm:px-6">
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Track your order</h1>
      <p className="mt-2 text-sm text-stone-500">
        Enter your order number and the email you used at checkout to see its status.
      </p>

      <form action="/track-order" method="GET" className="mt-6 space-y-4">
        <div>
          <label className="text-sm font-medium text-stone-700">Order number</label>
          <input
            type="text"
            name="orderNumber"
            required
            defaultValue={orderNumber}
            placeholder="IVR-XXXXXXXX-XXXX"
            className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm"
          />
        </div>
        <div>
          <label className="text-sm font-medium text-stone-700">Email used at checkout</label>
          <input
            type="email"
            name="email"
            required
            defaultValue={email}
            className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm"
          />
        </div>
        <button type="submit" className="w-full rounded-md bg-rose-700 py-2.5 text-sm font-semibold text-white hover:bg-rose-800">
          Find my order
        </button>
      </form>

      {submitted && !order && (
        <div className="mt-6 rounded-md bg-amber-50 px-4 py-3 text-sm text-amber-800">
          We couldn&apos;t find an order with that number and email. Double-check them, or{" "}
          <a href={whatsappLink("Hi! I'm trying to track my order.")} target="_blank" rel="noopener noreferrer" className="font-medium underline">
            WhatsApp us
          </a>{" "}
          for help.
        </div>
      )}

      {order && (
        <div className="mt-6 rounded-xl border border-rose-100 bg-white p-4">
          <div className="flex items-center justify-between">
            <div className="text-sm font-semibold text-stone-800">{order.orderNumber}</div>
            <span className="rounded-full bg-rose-50 px-2 py-0.5 text-xs font-medium capitalize text-rose-700">{order.status}</span>
          </div>
          <p className="mt-1 text-xs text-stone-400">Placed {order.createdAt.toLocaleDateString("en-IN")}</p>
          <ul className="mt-3 divide-y divide-rose-100 text-sm">
            {order.items.map((item) => (
              <li key={item.id} className="flex justify-between py-2 text-stone-600">
                <span>
                  {item.product.name}
                  {item.variant ? ` (${item.variant.name})` : ""} × {item.quantity}
                </span>
                <span>{formatPaise(item.lineTotal)}</span>
              </li>
            ))}
          </ul>
          <div className="mt-3 flex justify-between border-t border-rose-100 pt-3 text-sm font-semibold text-stone-800">
            <span>Total</span>
            <span>{formatPaise(order.total)}</span>
          </div>
          <Link href={`/order/${order.orderNumber}?email=${encodeURIComponent(order.email)}`} className="mt-4 inline-block text-sm font-medium text-rose-700 hover:underline">
            View full order details →
          </Link>
        </div>
      )}
    </div>
  );
}