import { db } from "@/lib/db";
import { NewBlockedEntryForm } from "./NewBlockedEntryForm";
import { BlockedEntryRow } from "./BlockedEntryRow";
import { AdminOnlyGate } from "../AdminOnlyGate";

export default async function AdminBlocklistPage() {
  const entries = await db.blockedEntry.findMany({
    orderBy: { createdAt: "desc" },
  });

  return (
    <AdminOnlyGate>
    <div>
      <h1 className="font-heading text-3xl font-semibold text-terracotta">
        Blocklist
      </h1>
      <p className="mt-2 text-charcoal/60">
        Banned brand and blend names. Blocked entries are rejected on the
        upload form with the note shown to the user.
      </p>

      <div className="mt-8">
        <NewBlockedEntryForm />
      </div>

      {entries.length === 0 ? (
        <p className="mt-8 text-charcoal/60">No blocked entries yet.</p>
      ) : (
        <ul className="mt-8 flex flex-col gap-3">
          {entries.map((entry) => (
            <BlockedEntryRow key={entry.id} entry={entry} />
          ))}
        </ul>
      )}
    </div>
    </AdminOnlyGate>
  );
}