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", " ") : "—";
}

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;

  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="admin-stats">
        <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="admin-section">
        <div style={{ display: "flex", alignItems: "baseline", gap: "0.75rem" }}>
          <h2 style={{ margin: 0 }}>Recent staff activity</h2>
          <Link href="/admin/commandocentrum" className="muted" style={{ fontSize: "0.82rem" }}>
            View all →
          </Link>
        </div>
        {activity.length === 0 ? (
          <p className="muted">No staff activity logged yet.</p>
        ) : (
          <table style={{ marginTop: "0.7rem" }}>
            <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" style={{ whiteSpace: "nowrap" }}>
                    {fromDate(a.createdAt)}
                  </td>
                  <td>{nameById.get(Number(a.userId)) ?? `#${a.userId}`}</td>
                  <td>
                    <span className="admin-badge">{a.action}</span>
                  </td>
                  <td>{a.description}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </section>
    </main>
  );
}