import { db } from "@/lib/db"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Plus } from "lucide-react"

export const metadata = { title: "Admin — Drops" }

const STATUS_MAP = {
  UPCOMING: { label: "Bientôt", variant: "upcoming" as const },
  LIVE:     { label: "Live", variant: "drop" as const },
  SOLD_OUT: { label: "Sold Out", variant: "sold" as const },
}

export default async function AdminDropsPage() {
  const drops = await db.drop.findMany({
    include: { _count: { select: { products: true } } },
    orderBy: { releaseDate: "desc" },
  })

  return (
    <div>
      <div className="flex items-center justify-between mb-8">
        <h1 className="text-2xl font-heading font-bold uppercase tracking-tight text-[var(--text)]">
          Drops
        </h1>
        <Button asChild size="sm">
          <Link href="/admin/drops/new">
            <Plus size={14} />
            Nouveau drop
          </Link>
        </Button>
      </div>

      <div className="border border-[var(--border)] bg-[var(--surface)]">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-[var(--border)]">
              {["Nom", "Date", "Produits", "Statut"].map((h) => (
                <th key={h} className="text-left px-4 py-3 font-mono text-xs uppercase tracking-widest text-[var(--text-muted)]">
                  {h}
                </th>
              ))}
              <th className="px-4 py-3" />
            </tr>
          </thead>
          <tbody className="divide-y divide-[var(--border)]">
            {drops.map((drop) => {
              const status = STATUS_MAP[drop.status]
              return (
                <tr key={drop.id} className="hover:bg-[var(--surface-raised)] transition-colors">
                  <td className="px-4 py-4 font-medium text-[var(--text)]">{drop.name}</td>
                  <td className="px-4 py-4 text-[var(--text-secondary)]">
                    {new Date(drop.releaseDate).toLocaleDateString("fr-BE")}
                  </td>
                  <td className="px-4 py-4 font-mono text-[var(--text-secondary)]">
                    {drop._count.products}
                  </td>
                  <td className="px-4 py-4 flex gap-2 flex-wrap">
                    <Badge variant={status.variant}>{status.label}</Badge>
                    {drop.isDraft && <Badge variant="outline">Brouillon</Badge>}
                  </td>
                  <td className="px-4 py-4 text-right">
                    <Button asChild variant="ghost" size="sm">
                      <Link href={`/admin/drops/${drop.id}`}>Modifier</Link>
                    </Button>
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
        {drops.length === 0 && (
          <div className="py-16 text-center text-[var(--text-muted)]">
            Aucun drop planifié.
          </div>
        )}
      </div>
    </div>
  )
}