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

import Link from "next/link";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

function fromDate(d: Date | null | undefined): string {
  return d ? d.toISOString().slice(0, 16).replace("T", " ") : "—";
}

type RankCount = { rank: number; count: number };

export default async function AdminDashboard() {
  let users = -1;
  let online = 0;
  let articles = 0;
  let bans = 0;
  try {
    [users, online, articles, bans] = await Promise.all([
      prisma.user.count(),
      prisma.user.count({ where: { online: "1" } }),
      prisma.websiteArticles.count(),
      prisma.ban.count({ where: { banExpire: { gt: Math.floor(Date.now() / 1000) } } }),
    ]);
  } catch {
    // DB unavailable — show zeroed stats instead of a 500.
  }
  const dbOk = users >= 0;

  // Users-by-rank breakdown (small inline bar chart, no chart library).
  const rankGroups = await prisma.user
    .groupBy({ by: ["rank"], _count: { _all: true }, orderBy: { rank: "desc" } })
    .catch(() => [] as Array<{ rank: number; _count: { _all: number } }>);
  const rankCounts: RankCount[] = rankGroups
    .map((g) => ({ rank: g.rank, count: g._count._all }))
    .sort((a, b) => b.count - a.count);
  const maxRankCount = rankCounts.reduce((m, r) => Math.max(m, r.count), 0);

  const activity = await prisma.staffActivities
    .findMany({ orderBy: { createdAt: "desc" }, take: 8 })
    .catch(() => [] as Awaited<ReturnType<typeof prisma.staffActivities.findMany>>);
  const staffIds = Array.from(new Set(activity.map((a) => Number(a.userId)))).filter((n) => n > 0);
  let nameById = new Map<number, string>();
  if (staffIds.length) {
    const u = await prisma.user
      .findMany({ where: { id: { in: staffIds } }, select: { id: true, username: true } })
      .catch(() => []);
    nameById = new Map(u.map((x) => [x.id, x.username]));
  }

  return (
    <main>
      <h1>Dashboard</h1>

      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
        <StatusCard
          label="Players online"
          value={online}
          hint={dbOk ? `${users} accounts` : "DB unavailable"}
          state={dbOk ? "neutral" : "danger"}
          icon="👤"
        />
        <StatusCard label="Articles" value={dbOk ? articles : "—"} icon="📰" />
        <StatusCard
          label="Active bans"
          value={dbOk ? bans : "—"}
          state={bans > 0 ? "warn" : "neutral"}
          icon="🔧"
        />
        <StatusCard
          label="Database"
          value={dbOk ? "Connected" : "Down"}
          state={dbOk ? "ok" : "danger"}
          icon="🗄️"
        />
      </div>

      <section className="mt-6">
        <h2 className="m-0 text-lg">Users by rank</h2>
        {rankCounts.length === 0 ? (
          <p className="muted mt-3">
            {dbOk ? "No accounts to break down yet." : "DB unavailable."}
          </p>
        ) : (
          <div className="grid gap-2 mt-3">
            {rankCounts.map((r) => {
              const pct = maxRankCount > 0 ? Math.round((r.count / maxRankCount) * 100) : 0;
              return (
                <div
                  key={r.rank}
                  className="grid items-center gap-2.5"
                  style={{ gridTemplateColumns: "5.5rem 1fr 3rem" }}
                >
                  <span className="text-[var(--color-text-muted)] text-[0.82rem] whitespace-nowrap">
                    Rank {r.rank}
                  </span>
                  <div
                    className="h-3.5 rounded-[var(--radius-sm)] overflow-hidden"
                    style={{ background: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}
                    role="img"
                    aria-label={`Rank ${r.rank}: ${r.count} accounts`}
                  >
                    <div
                      className="h-full rounded-[var(--radius-sm)]"
                      style={{
                        width: `${Math.max(pct, r.count > 0 ? 4 : 0)}%`,
                        background: "var(--color-primary, #eeb425)",
                      }}
                    />
                  </div>
                  <strong className="text-[0.85rem] text-right">{r.count}</strong>
                </div>
              );
            })}
          </div>
        )}
      </section>

      <section className="mt-6">
        <div className="flex items-baseline gap-3">
          <h2 className="m-0 text-lg">Recent staff activity</h2>
          <Link href="/admin/commandocentrum" className="muted text-[0.82rem]">
            View all →
          </Link>
        </div>
        {activity.length === 0 ? (
          <p className="muted mt-3">No staff activity logged yet.</p>
        ) : (
          <table className="mt-3">
            <thead>
              <tr>
                <th>When</th>
                <th>Staff</th>
                <th>Action</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              {activity.map((a) => (
                <tr key={String(a.id)}>
                  <td className="muted whitespace-nowrap">
                    {fromDate(a.createdAt)}
                  </td>
                  <td>{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</td>
                  <td>
                    <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">
                      {a.action}
                    </span>
                  </td>
                  <td>{a.description}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </section>
    </main>
  );
}