import { db } from "@/lib/db"
import { auth } from "@/lib/auth"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { setUserRole } from "./actions"

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

export default async function AdminUsersPage() {
  const [session, users] = await Promise.all([
    auth(),
    db.user.findMany({
      include: { _count: { select: { orders: true } } },
      orderBy: { createdAt: "desc" },
    }),
  ])

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

      <div className="border border-[var(--border)] bg-[var(--surface)]">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-[var(--border)]">
              {["Nom", "Email", "Rôle", "Commandes", "Inscrit le"].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)]">
            {users.map((u) => {
              const isSelf = u.id === session?.user?.id
              const toggleRole = setUserRole.bind(null, u.id)
              const nextRole = u.role === "ADMIN" ? "CUSTOMER" : "ADMIN"
              return (
                <tr key={u.id} className="hover:bg-[var(--surface-raised)] transition-colors">
                  <td className="px-4 py-4 text-[var(--text)]">{u.name ?? "—"}</td>
                  <td className="px-4 py-4 text-[var(--text-secondary)]">{u.email}</td>
                  <td className="px-4 py-4">
                    <Badge variant={u.role === "ADMIN" ? "accent" : "outline"}>{u.role}</Badge>
                  </td>
                  <td className="px-4 py-4 font-mono text-[var(--text-secondary)]">{u._count.orders}</td>
                  <td className="px-4 py-4 text-[var(--text-secondary)]">
                    {new Date(u.createdAt).toLocaleDateString("fr-BE")}
                  </td>
                  <td className="px-4 py-4 text-right">
                    <form action={toggleRole}>
                      <input type="hidden" name="role" value={nextRole} />
                      <Button
                        type="submit"
                        variant="ghost"
                        size="sm"
                        disabled={isSelf}
                        title={isSelf ? "Impossible de modifier son propre rôle" : undefined}
                      >
                        {u.role === "ADMIN" ? "Rétrograder" : "Promouvoir admin"}
                      </Button>
                    </form>
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
        {users.length === 0 && (
          <div className="py-16 text-center text-[var(--text-muted)]">Aucun utilisateur.</div>
        )}
      </div>
    </div>
  )
}