import { prisma } from "@/lib/prisma";
import {
  addBlacklistAction,
  removeBlacklistAction,
} from "@/server/actions/admin";

export default async function AdminBlacklistPage() {
  const rows = await prisma.blacklistEntry.findMany({ orderBy: { date: "desc" } });
  return (
    <div>
      <h1 className="text-2xl font-semibold">Blacklist</h1>
      <form action={addBlacklistAction} className="card mt-4 flex flex-wrap gap-2">
        <input className="input max-w-xs" name="email" placeholder="email" required />
        <input className="input max-w-xs" name="reason" placeholder="razon" />
        <button className="btn-primary" type="submit">
          Bloquear
        </button>
      </form>
      <div className="mt-4 space-y-2">
        {rows.map((b) => (
          <div key={b.id} className="card flex items-center justify-between">
            <div>
              <p className="font-medium">{b.email}</p>
              <p className="text-sm text-white/50">{b.reason}</p>
            </div>
            <form action={removeBlacklistAction}>
              <input type="hidden" name="id" value={b.id} />
              <button className="btn-ghost" type="submit">
                Quitar
              </button>
            </form>
          </div>
        ))}
      </div>
    </div>
  );
}