Epicnabbo-Catalogus-Updated-Daily/src/app/admin/teams/page.tsx

import { Users } from "lucide-react";
import { createTeam, deleteTeam } from "@/actions/admin-teams";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";
import { getTranslations } from "next-intl/server";

export const dynamic = "force-dynamic";

type TeamRow = {
  id: bigint;
  rankName: string;
  badge: string | null;
  jobDescription: string | null;
  staffColor: string;
  hiddenRank: boolean;
};

export default async function AdminTeams() {
  const t = await getTranslations("pages.admin.teams");
  let teams: TeamRow[] = [];
  try {
    teams = await prisma.websiteTeams.findMany({
      select: {
        id: true,
        rankName: true,
        badge: true,
        jobDescription: true,
        staffColor: true,
        hiddenRank: true,
      },
      orderBy: { id: "asc" },
    });
  } catch {
    teams = [];
  }

  const hidden = teams.filter((t) => t.hiddenRank).length;

  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(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
          <Users size={20} className="text-[var(--color-primary)]" />
        </div>
        <div>
          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("title")}</h1>
          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("subtitle")}</p>
        </div>
      </div>

      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
        <StatusCard label={t("teamRanks")} value={teams.length} icon="🛡️" />
        <StatusCard
          label={t("visible")}
          value={teams.length - hidden}
          state={teams.length - hidden > 0 ? "ok" : "neutral"}
          icon="👁️"
        />
        <StatusCard label={t("hidden")} value={hidden} icon="🙈" />
      </div>

      <div className="admin-card" style={{ marginBottom: "1.5rem" }}>
        <h3 style={{ marginTop: 0 }}>{t("newTeamRank")}</h3>
        <form action={createTeam} style={{ display: "grid", gap: "0.6rem" }}>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <label style={{ display: "grid", gap: "0.25rem" }}>
              <span className="text-sm theme-text-muted dark:theme-text-muted">{t("rankName")}</span>
              <input name="rankName" placeholder={t("rankNamePlaceholder")} required />
            </label>
            <label style={{ display: "grid", gap: "0.25rem" }}>
              <span className="text-sm theme-text-muted dark:theme-text-muted">{t("badgeCode")}</span>
              <input name="badge" placeholder={t("badgeCodePlaceholder")} />
            </label>
            <label style={{ display: "grid", gap: "0.25rem" }}>
              <span className="text-sm theme-text-muted dark:theme-text-muted">{t("jobDescription")}</span>
              <input name="jobDescription" placeholder={t("jobDescriptionPlaceholder")} />
            </label>
            <label style={{ display: "grid", gap: "0.25rem" }}>
              <span className="text-sm theme-text-muted dark:theme-text-muted">{t("staffColor")}</span>
              <input name="staffColor" defaultValue="#327fa8" placeholder={t("staffColorPlaceholder")} />
            </label>
          </div>
          <label style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}>
            <input type="checkbox" name="hiddenRank" style={{ width: "auto" }} />
            <span className="text-sm theme-text-muted dark:theme-text-muted">{t("hiddenRank")}</span>
          </label>
          <div>
            <button type="submit" className="btn btn-primary">
              {t("createTeam")}
            </button>
          </div>
        </form>
      </div>

      <section className="mt-6">
        <h2 className="admin-section-title">{t("ranksTitle", { count: teams.length })}</h2>
        {teams.length === 0 ? (
          <div className="admin-empty">{t("noTeams")}</div>
        ) : (
          <div className="overflow-x-auto">
            <table>
              <thead>
                <tr>
                  <th>{t("colId")}</th>
                  <th>{t("rankName")}</th>
                  <th>{t("badge")}</th>
                  <th>{t("jobDescription")}</th>
                  <th>{t("color")}</th>
                  <th>{t("visibility")}</th>
                  <th />
                </tr>
              </thead>
              <tbody>
                {teams.map((team) => (
                  <tr key={String(team.id)}>
                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                      {String(team.id)}
                    </td>
                    <td>{team.rankName}</td>
                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                      {team.badge ?? "—"}
                    </td>
                    <td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
                      {team.jobDescription ?? "—"}
                    </td>
                    <td>
                      <span
                        style={{
                          display: "inline-flex",
                          alignItems: "center",
                          gap: "0.4rem",
                        }}
                      >
                        <span
                          aria-hidden
                          style={{
                            width: 14,
                            height: 14,
                            borderRadius: 4,
                            border: "1px solid var(--border-color)",
                            background: team.staffColor,
                          }}
                        />
                        {team.staffColor}
                      </span>
                    </td>
                    <td>
                      <span
                        className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${team.hiddenRank ? "bg-[var(--color-primary)]/18 text-[var(--color-text)]" : "bg-[var(--color-success-subtle)] text-[var(--color-text)]"}`}
                      >
                        {team.hiddenRank ? t("hidden") : t("visible")}
                      </span>
                    </td>
                    <td>
                      <form action={deleteTeam}>
                        <input type="hidden" name="id" value={String(team.id)} />
                        <button type="submit" className="btn btn-danger">
                          {t("delete")}
                        </button>
                      </form>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </section>
    </main>
  );
}