import { db } from "@/lib/db"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { createCategory, renameCategory, deleteCategory } from "./actions"

export const metadata = { title: "Admin — Catégories" }

export default async function AdminCategoriesPage() {
  const categories = await db.category.findMany({
    include: { _count: { select: { products: true } } },
    orderBy: { name: "asc" },
  })

  return (
    <div>
      <h1 className="text-2xl font-heading font-bold uppercase tracking-tight text-[var(--text)] mb-8">
        Catégories
      </h1>

      <div className="border border-[var(--border)] bg-[var(--surface)] mb-8">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-[var(--border)]">
              {["Nom", "Slug", "Produits"].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)]">
            {categories.map((c) => {
              const renameWithId = renameCategory.bind(null, c.id)
              const deleteWithId = deleteCategory.bind(null, c.id)
              return (
                <tr key={c.id} className="hover:bg-[var(--surface-raised)] transition-colors">
                  <td className="px-4 py-3">
                    <form action={renameWithId} className="flex items-center gap-2">
                      <Input name="name" defaultValue={c.name} className="h-9" />
                      <Button type="submit" variant="ghost" size="sm">
                        Renommer
                      </Button>
                    </form>
                  </td>
                  <td className="px-4 py-4 font-mono text-xs text-[var(--text-muted)]">{c.slug}</td>
                  <td className="px-4 py-4 font-mono text-[var(--text-secondary)]">{c._count.products}</td>
                  <td className="px-4 py-4 text-right">
                    <form action={deleteWithId}>
                      <Button
                        type="submit"
                        variant="ghost"
                        size="sm"
                        disabled={c._count.products > 0}
                        title={c._count.products > 0 ? "Catégorie utilisée par des produits" : undefined}
                      >
                        Supprimer
                      </Button>
                    </form>
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
        {categories.length === 0 && (
          <div className="py-16 text-center text-[var(--text-muted)]">Aucune catégorie.</div>
        )}
      </div>

      <div className="border border-[var(--border)] bg-[var(--surface)] p-6 max-w-md">
        <p className="font-mono text-xs uppercase tracking-widest text-[var(--text-muted)] mb-4">
          Nouvelle catégorie
        </p>
        <form action={createCategory} className="flex items-center gap-2">
          <Input name="name" placeholder="Nom de la catégorie" required className="h-9" />
          <Button type="submit" size="sm">
            Ajouter
          </Button>
        </form>
      </div>
    </div>
  )
}