EpicNext-Cms/src/app/admin/radio/ranks/page.tsx

import Link from "next/link";
import { createRadioRank, deleteRadioRank, updateRadioRank } from "@/actions/admin-radio-extra";
import { prisma } from "@/lib/prisma";
import { StatusCard } from "@/components/admin/dashboard";
import { Medal } from "lucide-react";
import { getTranslations } from "next-intl/server";

export const dynamic = "force-dynamic";

type Rank = {
  id: bigint;
  name: string;
  description: string | null;
  badgeCode: string | null;
  isActive: boolean;
};

export default async function AdminRadioRanksPage() {
  const t = await getTranslations("pages.admin.radio");

  let ranks: Rank[] = [];
  let dbError = false;

  try {
    ranks = await prisma.radioRanks.findMany({
      select: {
        id: true,
        name: true,
        description: true,
        badgeCode: true,
        isActive: true,
      },
      orderBy: { id: "asc" },
    });
  } catch {
    dbError = true;
    ranks = [];
  }

  const activeCount = ranks.filter((r) => r.isActive).length;

  return (
    <main>
      <nav className="text-xs theme-text-muted dark:theme-text-muted mb-2">
        <Link href="/admin/radio">{t("title")}</Link> ·{" "}
        <Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
        <Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
        <Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
        <Link href="/admin/radio/history">{t("history")}</Link>
      </nav>

      <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">
          <Medal size={20} className="text-[var(--admin-accent)]" />
        </div>
        <div>
          <h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("ranksForm.title")}</h1>
          <p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("ranksForm.subtitle")}</p>
        </div>
      </div>

      {dbError ? (
        <div className="admin-card mb-6">
          <p className="text-xs theme-text-muted dark:theme-text-muted m-0">{t("ranksForm.dbError")}</p>
        </div>
      ) : (
        <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
          <StatusCard label={t("ranks")} value={ranks.length} icon="\u{1F396}\uFE0F" />
          <StatusCard
            label={t("ranksForm.active")}
            value={activeCount}
            state={activeCount > 0 ? "ok" : "neutral"}
            icon="\u{2705}"
          />
        </div>
      )}

      <section className="mt-6">
        <h2 className="admin-section-title">{t("ranksForm.addRank")}</h2>
        <form action={createRadioRank} className="admin-card">
          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
            <div>
              <label htmlFor="new_name" style={{ display: "block", fontWeight: 700 }}>
                {t("ranksForm.name")}
              </label>
              <input id="new_name" name="name" required style={{ width: "100%" }} />
            </div>
            <div>
              <label htmlFor="new_badge" style={{ display: "block", fontWeight: 700 }}>
                {t("ranksForm.badgeCode")}
              </label>
              <input id="new_badge" name="badgeCode" style={{ width: "100%" }} />
            </div>
            <div style={{ display: "flex", alignItems: "flex-end" }}>
              <label style={{ display: "inline-flex", gap: "0.4rem", alignItems: "center" }}>
                <input type="checkbox" name="isActive" value="1" defaultChecked /> {t("ranksForm.active")}
              </label>
            </div>
            <div style={{ gridColumn: "1 / -1" }}>
              <label htmlFor="new_desc" style={{ display: "block", fontWeight: 700 }}>
                {t("ranksForm.description")}
              </label>
              <input id="new_desc" name="description" style={{ width: "100%" }} />
            </div>
          </div>
          <div style={{ marginTop: "0.75rem" }}>
            <button type="submit" className="btn btn-primary">
              {t("ranksForm.createRank")}
            </button>
          </div>
        </form>
      </section>

      <section className="mt-6">
        <h2 className="admin-section-title">{t("ranksForm.existing", { count: ranks.length })}</h2>
        {ranks.length === 0 ? (
          <div className="admin-empty">{t("ranksForm.noRanks")}</div>
        ) : (
          <div className="grid">
            {ranks.map((r) => (
              <div key={String(r.id)} className="admin-card">
                <div className="flex justify-between items-baseline gap-3 mb-2">
                  <strong>#{String(r.id)}</strong>
                  <span
                    className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${r.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
                  >
                    {r.isActive ? t("ranksForm.activeLabel") : t("ranksForm.inactiveLabel")}
                  </span>
                </div>

                <form action={updateRadioRank} className="flex items-center gap-2 flex-wrap">
                  <input type="hidden" name="id" value={String(r.id)} />
                  <input
                    name="name"
                    defaultValue={r.name}
                    required
                    placeholder={t("ranksForm.name")}
                    style={{ minWidth: 140 }}
                  />
                  <input
                    name="badgeCode"
                    defaultValue={r.badgeCode ?? ""}
                    placeholder={t("ranksForm.badgeCode")}
                    style={{ minWidth: 100 }}
                  />
                  <input
                    name="description"
                    defaultValue={r.description ?? ""}
                    placeholder={t("ranksForm.description")}
                    className="flex-1 min-w-[160px]"
                  />
                  <label style={{ display: "inline-flex", gap: "0.3rem", alignItems: "center" }}>
                    <input type="checkbox" name="isActive" value="1" defaultChecked={r.isActive} />{" "}
                    {t("ranksForm.active")}
                  </label>
                  <button type="submit" className="btn btn-primary">
                    {t("ranksForm.save")}
                  </button>
                </form>

                <form action={deleteRadioRank} style={{ marginTop: "0.5rem" }}>
                  <input type="hidden" name="id" value={String(r.id)} />
                  <button type="submit" className="btn btn-danger">
                    {t("ranksForm.deleteRank", { id: String(r.id) })}
                  </button>
                </form>
              </div>
            ))}
          </div>
        )}
      </section>
    </main>
  );
}