import { db } from "@/lib/db";
import type { BadgeTrack } from "@prisma/client";
import { BadgeRow } from "./BadgeRow";
import { NewBadgeForm } from "./NewBadgeForm";
import { AdminOnlyGate } from "../AdminOnlyGate";

const TRACKS: BadgeTrack[] = ["uploads", "requests_fulfilled"];

const TRACK_LABELS: Record<BadgeTrack, string> = {
  uploads: "Labels Uploaded",
  requests_fulfilled: "Requests Fulfilled",
};

export default async function AdminBadgesPage() {
  const badges = await db.badge.findMany({ orderBy: { threshold: "asc" } });

  return (
    <AdminOnlyGate>
    <div>
      <h1 className="font-heading text-3xl font-semibold text-terracotta">
        Badge Management
      </h1>
      <p className="mt-2 text-charcoal/60">
        Edit thresholds and names for each badge track, or add a new tier.
      </p>

      <div className="mt-8 flex flex-col gap-10">
        {TRACKS.map((track) => {
          const trackBadges = badges.filter((b) => b.track === track);
          return (
            <div key={track}>
              <h2 className="font-heading text-xl font-semibold text-charcoal">
                {TRACK_LABELS[track]}
              </h2>
              <ul className="mt-4 flex flex-col gap-3">
                {trackBadges.map((badge) => (
                  <BadgeRow key={badge.id} badge={badge} />
                ))}
              </ul>
              {trackBadges.length === 0 && (
                <p className="mt-2 text-sm text-charcoal/60">
                  No thresholds yet for this track.
                </p>
              )}
              <div className="mt-4">
                <NewBadgeForm track={track} />
              </div>
            </div>
          );
        })}
      </div>
    </div>
    </AdminOnlyGate>
  );
}