import Link from "next/link";
import Image from "next/image";
import { getCurrentUser } from "@/lib/customerAuth";
import { getOrdersForUser } from "@/lib/queries";
import { formatKes } from "@/lib/format";
import { Package } from "lucide-react";

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 OrdersPage() {
  const user = await getCurrentUser();
  if (!user) return null;

  const orders = await getOrdersForUser(user.id);

  return (
    <div>
      <h1 className="font-display font-semibold text-2xl uppercase text-ink mb-6">
        My Orders
      </h1>

      {orders.length === 0 ? (
        <div className="bg-white border border-line rounded-xl py-16 text-center">
          <Package size={32} className="text-ink/20 mx-auto mb-3" />
          <p className="text-ink/60">You haven't placed any orders yet.</p>
        </div>
      ) : (
        <div className="flex flex-col gap-4">
          {orders.map((order) => (
            <Link
              key={order.id}
              href={`/account/orders/${order.id}`}
              className="block bg-white border border-line rounded-xl p-5 hover:border-harbor hover:shadow-md transition-all"
            >
              <div className="flex items-center justify-between mb-3">
                <div>
                  <p className="font-mono font-semibold text-harbor">{order.orderNumber}</p>
                  <p className="text-xs text-ink/40 font-mono">
                    {new Date(order.createdAt).toLocaleDateString("en-KE", {
                      day: "numeric", month: "short", year: "numeric",
                    })}
                  </p>
                </div>
                <span className={`text-xs font-mono uppercase px-2.5 py-1 rounded ${statusStyles[order.status]}`}>
                  {order.status}
                </span>
              </div>

              <div className="flex items-center gap-2 mb-3">
                {order.items.slice(0, 4).map((item) => (
                  <div key={item.id} className="relative w-12 h-12 rounded-md overflow-hidden bg-sand">
                    {item.product.images[0] && (
                      <Image
                        src={item.product.images[0].url}
                        alt={item.product.name}
                        fill
                        className="object-cover"
                        sizes="48px"
                      />
                    )}
                  </div>
                ))}
                {order.items.length > 4 && (
                  <span className="text-xs text-ink/40">+{order.items.length - 4} more</span>
                )}
              </div>

              <div className="flex items-center justify-between text-sm">
                <span className="text-ink/50">{order.items.length} item{order.items.length !== 1 ? "s" : ""}</span>
                <span className="font-mono font-semibold text-ink">{formatKes(order.total)}</span>
              </div>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}