import { auth } from "@/lib/auth"
import { db } from "@/lib/db"
import { redirect } from "next/navigation"
import { Badge } from "@/components/ui/badge"
import { formatPrice } from "@/lib/utils"

export const metadata = { title: "Mes commandes" }

const STATUS_MAP = {
  PENDING:   { label: "En attente", variant: "outline" as const },
  PAID:      { label: "Payée", variant: "accent" as const },
  SHIPPED:   { label: "Expédiée", variant: "accent" as const },
  DELIVERED: { label: "Livrée", variant: "default" as const },
  CANCELLED: { label: "Annulée", variant: "sold" as const },
}

export default async function OrdersPage() {
  const session = await auth()
  if (!session?.user) redirect("/login")

  const orders = await db.order.findMany({
    where: { userId: session.user.id },
    include: { items: { include: { product: true } } },
    orderBy: { createdAt: "desc" },
  })

  return (
    <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 py-16">
      <h1 className="text-3xl font-heading font-bold uppercase tracking-tight text-[var(--text)] mb-12">
        Mes commandes
      </h1>

      {orders.length === 0 ? (
        <div className="border border-[var(--border)] p-16 text-center">
          <p className="text-[var(--text-secondary)]">Aucune commande pour l&rsquo;instant.</p>
        </div>
      ) : (
        <div className="space-y-4">
          {orders.map((order) => {
            const status = STATUS_MAP[order.status]
            return (
              <div key={order.id} className="border border-[var(--border)] bg-[var(--surface)] p-6">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-5">
                  <div>
                    <p className="font-mono text-xs text-[var(--text-muted)] uppercase tracking-widest mb-1">
                      #{order.id.slice(-8).toUpperCase()}
                    </p>
                    <p className="text-sm text-[var(--text-secondary)]">
                      {new Date(order.createdAt).toLocaleDateString("fr-BE", {
                        day: "numeric",
                        month: "long",
                        year: "numeric",
                      })}
                    </p>
                  </div>
                  <div className="flex items-center gap-4">
                    <Badge variant={status.variant}>{status.label}</Badge>
                    <span className="font-mono font-bold text-[var(--text)]">
                      {formatPrice(order.total)}
                    </span>
                  </div>
                </div>
                <div className="space-y-2">
                  {order.items.map((item) => (
                    <div key={item.id} className="flex justify-between text-sm">
                      <span className="text-[var(--text-secondary)]">
                        {item.product.name} — {item.size} × {item.quantity}
                        {item.editionNumber && item.product.editionSize && (
                          <span className="ml-2 font-mono text-xs text-[var(--accent)]">
                            N°{String(item.editionNumber).padStart(3, "0")}/{item.product.editionSize}
                          </span>
                        )}
                      </span>
                      <span className="font-mono text-[var(--text)]">
                        {formatPrice(item.price * item.quantity)}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}