import { notFound } from "next/navigation";
import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
import { getOrder } from "@/lib/db";
import { formatPrice } from "@/lib/format";
import { OrderStatusStepper } from "@/components/OrderStatusStepper";
import { siteConfig, whatsappLink } from "@/lib/siteConfig";

export const metadata: Metadata = {
  title: "Order status",
  robots: { index: false, follow: false },
};

export default function OrderPage({ params }: { params: { id: string } }) {
  const order = getOrder(params.id);
  if (!order) notFound();

  return (
    <div className="mx-auto max-w-3xl px-4 py-10 sm:px-6">
      <div className="text-center">
        {order.paymentStatus === "paid" ? (
          <>
            <p className="font-display text-2xl font-bold text-brand-ink">
              Thank you, your order is confirmed
            </p>
            <p className="mt-1.5 text-sm text-black/55">
              Order <span className="font-medium text-brand-ink">{order.id}</span> · a
              confirmation has been sent to {order.customer.email}
            </p>
          </>
        ) : (
          <>
            <p className="font-display text-2xl font-bold text-brand-ink">
              Order {order.id}
            </p>
            <p className="mt-1.5 text-sm text-black/55">
              Payment status: {order.paymentStatus === "unpaid" ? "awaiting payment" : "failed"}
            </p>
          </>
        )}
      </div>

      <div className="mt-10 grid gap-10 sm:grid-cols-[220px_1fr]">
        <div>
          <p className="mb-4 text-sm font-semibold text-brand-ink">Order status</p>
          <OrderStatusStepper status={order.status} />
        </div>

        <div>
          <div className="rounded-2xl border border-black/[0.06] p-5">
            <p className="text-sm font-semibold text-brand-ink">Items</p>
            <ul className="mt-3 flex flex-col gap-3">
              {order.items.map((item) => (
                <li key={item.productId} className="flex gap-3">
                  <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-brand-cream">
                    <Image src={item.image} alt={item.name} fill sizes="56px" className="object-cover" />
                  </div>
                  <div className="min-w-0 flex-1">
                    <p className="line-clamp-1 text-sm font-medium text-brand-ink">{item.name}</p>
                    <p className="text-xs text-black/45">Qty {item.quantity}</p>
                  </div>
                  <span className="shrink-0 text-sm font-medium text-brand-ink">
                    {formatPrice(item.price * item.quantity)}
                  </span>
                </li>
              ))}
            </ul>

            <div className="mt-4 flex flex-col gap-1.5 border-t border-black/[0.06] pt-4 text-sm">
              <div className="flex justify-between text-black/60">
                <span>Subtotal</span>
                <span>{formatPrice(order.subtotal)}</span>
              </div>
              {order.discount > 0 && (
                <div className="flex justify-between text-black/60">
                  <span>Discount{order.promoCode ? ` (${order.promoCode})` : ""}</span>
                  <span>-{formatPrice(order.discount)}</span>
                </div>
              )}
              <div className="flex justify-between text-black/60">
                <span>Delivery</span>
                <span>{formatPrice(order.deliveryFee)}</span>
              </div>
              <div className="flex justify-between border-t border-black/[0.06] pt-2 text-base font-semibold text-brand-ink">
                <span>Total</span>
                <span>{formatPrice(order.total)}</span>
              </div>
            </div>
          </div>

          <div className="mt-5 rounded-2xl border border-black/[0.06] p-5">
            <p className="text-sm font-semibold text-brand-ink">Delivering to</p>
            <p className="mt-1.5 text-sm text-black/65">
              {order.customer.name} · {order.customer.phone}
            </p>
            <p className="text-sm text-black/65">
              {order.customer.address}, {order.customer.city}, {siteConfig.state}
            </p>
            {order.customer.instructions && (
              <p className="mt-1.5 text-sm text-black/50">
                Note: {order.customer.instructions}
              </p>
            )}
          </div>

          <div className="mt-6 flex flex-wrap gap-3">
            <Link
              href="/"
              className="rounded-lg bg-brand-ink px-5 py-2.5 text-sm font-semibold text-white hover:bg-black"
            >
              Continue shopping
            </Link>
            <a
              href={whatsappLink(`Hi, I'd like an update on order ${order.id}.`)}
              target="_blank"
              rel="noopener noreferrer"
              className="rounded-lg border border-black/10 px-5 py-2.5 text-sm font-semibold text-brand-ink hover:bg-black/5"
            >
              Ask about this order on WhatsApp
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}