EpicNext-Cms/src/app/admin/badges/page.tsx

import { getTranslations } from "next-intl/server";
import { giveBadge } from "@/actions/admin-badges";
import { uploadBadge } from "@/actions/admin-badge-upload";
import { prisma } from "@/lib/prisma";
import { Award } from "lucide-react";

export const dynamic = "force-dynamic";

export const metadata = { title: "Badges" };

export default async function AdminBadges({
  searchParams,
}: {
  searchParams: Promise<{ uploaded?: string; error?: string }>;
}) {
  const t = await getTranslations("pages.admin.badges");
  const { uploaded, error } = await searchParams;

  let badges: Awaited<ReturnType<typeof prisma.websiteBadges.findMany>>;
  try {
    badges = await prisma.websiteBadges.findMany({
      orderBy: { badgeName: "asc" },
      take: 500,
    });
  } catch {
    badges = [];
  }

  return (
    <main>
      <div className="flex items-center gap-3 mb-6">
        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
          <Award size={20} className="text-[var(--admin-accent)]" />
        </div>
        <div>
          <h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("title")}</h1>
          <p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("subtitle")}</p>
        </div>
      </div>

      {uploaded && (
        <div className="mb-4 p-3 rounded-lg bg-[var(--admin-success-subtle)] text-[var(--admin-success)] dark:text-[var(--admin-success)] text-xs">
          {t("uploadedMessage", { code: uploaded })}
        </div>
      )}
      {error && (
        <div className="mb-4 p-3 rounded-lg bg-[var(--admin-error-subtle)] text-[var(--admin-error)] dark:text-[var(--admin-error)] text-xs">
          {t("errorMessage", { error })}
        </div>
      )}

      <section className="mt-6">
        <h2 className="admin-section-title">{t("uploadTitle")}</h2>
        <p className="text-xs text-[var(--admin-text-muted)] -mt-2 mb-3">{t("uploadSubtitle")}</p>
        <form action={uploadBadge} className="admin-card">
          <div className="flex gap-2 flex-wrap items-center">
            <input type="file" name="file" accept=".gif,.png" required />
            <input
              name="code"
              placeholder={t("badgeCodePlaceholder")}
              required
              maxLength={64}
              pattern="[A-Za-z0-9_-]{1,64}"
              className="flex-1 min-w-[160px]"
            />
            <button type="submit" className="btn btn-primary">
              {t("uploadButton")}
            </button>
          </div>
        </form>
      </section>

      <section className="mt-6">
        <h2 className="admin-section-title">{t("giveTitle")}</h2>
        <form action={giveBadge} className="admin-card">
          <div className="flex gap-2 flex-wrap items-center">
            <input name="userId" type="number" min={1} placeholder={t("userIdPlaceholder")} required />
            <input
              name="code"
              placeholder={t("badgeCodePlaceholder")}
              required
              maxLength={32}
              className="flex-1 min-w-[160px]"
              list="badge-codes"
            />
            <datalist id="badge-codes">
              {badges.map((b) => (
                <option key={String(b.id)} value={b.badgeKey}>
                  {b.badgeName}
                </option>
              ))}
            </datalist>
            <button type="submit" className="btn btn-primary">
              {t("giveButton")}
            </button>
          </div>
        </form>
      </section>

      <section className="mt-6">
        <h2 className="admin-section-title">
          {t("catalogueTitle")} ({badges.length})
        </h2>
        {badges.length === 0 ? (
          <div className="admin-empty">{t("noBadges")}</div>
        ) : (
          <div className="overflow-x-auto">
            <table>
              <thead>
                <tr>
                  <th>{t("colCode")}</th>
                  <th>{t("colName")}</th>
                  <th>{t("colDescription")}</th>
                  <th />
                </tr>
              </thead>
              <tbody>
                {badges.map((b) => (
                  <tr key={String(b.id)}>
                    <td>
                      <code>{b.badgeKey}</code>
                    </td>
                    <td>{b.badgeName}</td>
                    <td className="text-sm theme-text-muted dark:theme-text-muted">{b.badgeDescription}</td>
                    <td>
                      <form action={giveBadge} className="flex gap-2 items-center">
                        <input type="hidden" name="code" value={b.badgeKey} />
                        <input
                          name="userId"
                          type="number"
                          min={1}
                          placeholder={t("userIdPlaceholder")}
                          required
                          className="w-[90px]"
                        />
                        <button type="submit" className="btn btn-outline">
                          {t("giveButton")}
                        </button>
                      </form>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </section>
    </main>
  );
}