import { notFound } from "next/navigation";
import Image from "next/image";
import { getCurrentUser } from "@/lib/customerAuth";
import { getOrderById } from "@/lib/queries";
import { formatKes } from "@/lib/format";

const statusStyles: Record<string, string> = {
  PENDING: "bg-yellow-100 text-yellow-700",
  CONFIRMED: "bg-blue-100 text-blue-700",
  PROCESSING: "bg-blue-100 text-blue-700",
  SHIPPED: "bg-purple-100 text-purple-700",
  DELIVERED: "bg-green-100 text-green-700",
  CANCELLED: "bg-red-100 text-red-700",
};

export default async function OrderDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const user = await getCurrentUser();
  if (!user) return null;

  const order = await getOrderById(id);
  if (!order || order.userId !== user.id) notFound();

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="font-display font-semibold text-2xl uppercase text-ink">
            {order.orderNumber}
          </h1>
          <p className="text-sm text-ink/50 mt-1">
            Placed {new Date(order.createdAt).toLocaleDateString("en-KE", {
              day: "numeric", month: "long", year: "numeric",
            })}
          </p>
        </div>
        <span className={`text-xs font-mono uppercase px-3 py-1.5 rounded ${statusStyles[order.status]}`}>
          {order.status}
        </span>
      </div>

      <div className="grid lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 bg-white border border-line rounded-xl p-6">
          <h2 className="font-display font-semibold uppercase text-sm text-ink mb-4">Items</h2>
          <div className="flex flex-col gap-4">
            {order.items.map((item) => (
              <div key={item.id} className="flex items-center gap-4">
                <div className="relative w-16 h-16 rounded-lg overflow-hidden bg-sand shrink-0">
                  {item.product.images[0] && (
                    <Image
                      src={item.product.images[0].url}
                      alt={item.product.name}
                      fill
                      className="object-cover"
                      sizes="64px"
                    />
                  )}
                </div>
                <div className="flex-1">
                  <p className="text-sm font-medium text-ink">{item.product.name}</p>
                  {item.variant && (
                    <p className="text-xs text-ink/50">{item.variant.name}</p>
                  )}
                  <p className="text-xs text-ink/50">Qty: {item.quantity}</p>
                </div>
                <span className="font-mono text-sm text-ink">
                  {formatKes(Number(item.unitPrice) * item.quantity)}
                </span>
              </div>
            ))}
          </div>
        </div>

        <div className="flex flex-col gap-6">
          <div className="bg-white border border-line rounded-xl p-6">
            <h2 className="font-display font-semibold uppercase text-sm text-ink mb-4">
              Delivery Address
            </h2>
            <p className="text-sm text-ink font-medium">
              {order.address.firstName} {order.address.lastName}
            </p>
            <p className="text-sm text-ink/60">
              {order.address.street}{order.address.apartment ? `, ${order.address.apartment}` : ""}
            </p>
            <p className="text-sm text-ink/60">{order.address.city}, {order.address.county}</p>
          </div>

          <div className="bg-white border border-line rounded-xl p-6">
            <h2 className="font-display font-semibold uppercase text-sm text-ink mb-3">
              Payment
            </h2>
            <div className="flex justify-between text-sm text-ink/60 mb-1">
              <span>Method</span>
              <span className="font-mono text-ink">{order.paymentMethod.replace("_", " ")}</span>
            </div>
            <div className="flex justify-between text-sm text-ink/60 mb-3">
              <span>Status</span>
              <span className="font-mono text-ink">{order.paymentStatus}</span>
            </div>
            <div className="border-t border-line pt-3 flex justify-between font-semibold text-ink">
              <span>Total</span>
              <span className="font-mono">{formatKes(order.total)}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}