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

import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";
import { Users, Newspaper, Ban, Database, Activity, ArrowRight } from "lucide-react";

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() {
  const t = await getTranslations("pages.admin.dashboard");
  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 {
  }
  const dbOk = users >= 0;

  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>
      <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">
          <Activity 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-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <StatusCard label={t("playersOnline")} value={online} hint={dbOk ? t("totalAccounts", { count: users }) : t("databaseDown")} state={dbOk ? "neutral" : "danger"} icon={<Users size={18} />} />
        <StatusCard label={t("articles")} value={dbOk ? articles : "—"} state="neutral" icon={<Newspaper size={18} />} />
        <StatusCard label={t("activeBans")} value={dbOk ? bans : "—"} state={bans > 0 ? "warn" : "neutral"} icon={<Ban size={18} />} />
        <StatusCard label={t("database")} value={dbOk ? t("databaseConnected") : t("databaseDown")} state={dbOk ? "ok" : "danger"} icon={<Database size={18} />} />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <section className="admin-card p-5">
          <h2 className="text-sm font-bold text-[var(--color-text)] mb-4 admin-section-title">{t("usersByRank")}</h2>
          {rankCounts.length === 0 ? (
            <p className="text-xs text-[var(--color-text-muted)]">{dbOk ? t("noAccountsToBreakDown") : t("databaseDown")}</p>
          ) : (
            <div className="space-y-2.5">
              {rankCounts.map((r) => {
                const pct = maxRankCount > 0 ? Math.round((r.count / maxRankCount) * 100) : 0;
                return (
                  <div key={r.rank} className="grid items-center gap-3" style={{ gridTemplateColumns: "5rem 1fr 2.5rem" }}>
                    <span className="text-xs font-medium text-[var(--color-text-muted)]">{t("rankLabel", { rank: r.rank })}</span>
                    <div className="h-3 rounded-md overflow-hidden bg-[var(--color-primary)]/10" role="img" aria-label={t("rankWithCount", { rank: r.rank, count: r.count })}>
                      <div className="h-full rounded-md bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-hover)] transition-all duration-500" style={{ width: `${Math.max(pct, r.count > 0 ? 4 : 0)}%` }} />
                    </div>
                    <strong className="text-xs text-right text-[var(--color-text-muted)]">{r.count}</strong>
                  </div>
                );
              })}
            </div>
          )}
        </section>

        <section className="admin-card p-5">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-sm font-bold text-[var(--color-text)] admin-section-title">{t("recentStaffActivity")}</h2>
            <Link href="/admin/commandocentrum" className="text-xs font-medium text-[var(--color-primary)] hover:text-[var(--color-primary-hover)] flex items-center gap-1 no-underline">
              {t("viewAll")} <ArrowRight size={12} />
            </Link>
          </div>
          {activity.length === 0 ? (
            <p className="text-xs text-[var(--color-text-muted)]">{t("noStaffActivityLogged")}</p>
          ) : (
            <div className="space-y-0">
              {activity.map((a, i) => (
                <div key={String(a.id)} className={`flex items-center gap-3 py-2.5 ${i > 0 ? "border-t border-[var(--border-subtle)]" : ""}`}>
                  <div className="w-7 h-7 rounded-full bg-[var(--color-primary)]/10 grid place-items-center flex-none">
                    <Activity size={12} className="text-[var(--color-primary)]" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="text-sm font-medium text-[var(--color-text)] truncate">{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</div>
                    <div className="text-xs text-[var(--color-text-muted)] truncate">{a.description}</div>
                  </div>
                  <div className="text-right flex-none">
                    <span className="inline-block text-[0.6rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)] admin-card inline-flex items-center justify-center min-w-[60px]">{a.action}</span>
                    <div className="text-[0.6rem] text-[var(--color-text-muted)] mt-0.5">{fromDate(a.createdAt)}</div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </section>
      </div>
    </main>
  );
}