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

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

export const dynamic = "force-dynamic";

const PER_PAGE = 25;

type RoomRow = {
  id: number;
  name: string;
  ownerName: string;
  users: number;
  usersMax: number;
  state: string;
  category: number;
};

export default async function AdminRooms({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; page?: string }>;
}) {
  const sp = await searchParams;
  const q = (sp.q ?? "").trim();
  const page = Math.max(1, Number(sp.page ?? "1") || 1);

  // Search matches room name OR owner username (ownerName is denormalised on the
  // emulator rooms table, so no join is needed).
  const where = q
    ? { OR: [{ name: { contains: q } }, { ownerName: { contains: q } }] }
    : {};

  let rooms: RoomRow[] = [];
  let total = 0;
  try {
    [rooms, total] = await Promise.all([
      prisma.rooms.findMany({
        where,
        select: {
          id: true,
          name: true,
          ownerName: true,
          users: true,
          usersMax: true,
          state: true,
          category: true,
        },
        orderBy: { id: "desc" },
        skip: (page - 1) * PER_PAGE,
        take: PER_PAGE,
      }),
      prisma.rooms.count({ where }),
    ]);
  } catch {
    rooms = [];
    total = 0;
  }

  const pages = Math.max(1, Math.ceil(total / PER_PAGE));
  const qs = (p: number) =>
    `/admin/rooms?q=${encodeURIComponent(q)}&page=${p}`;

  // Page-local tallies (the full counts aren't fetched to keep the query cheap).
  const openOnPage = rooms.filter((r) => r.state === "open").length;
  const usersOnPage = rooms.reduce((sum, r) => sum + r.users, 0);

  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">
          <DoorOpen size={20} className="text-[var(--color-primary)]" />
        </div>
        <div>
          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Rooms</h1>
          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{q ? `Matching "${q}" · ` : ""}{total} room{total === 1 ? "" : "s"} total.</p>
        </div>
      </div>

      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
        <StatusCard label={q ? "Matching rooms" : "Total rooms"} value={total} icon="🏠" />
        <StatusCard label="Open (this page)" value={openOnPage} state="ok" icon="🔓" />
        <StatusCard label="Users in-room (this page)" value={usersOnPage} icon="👥" />
      </div>

      <form className="flex gap-2 mb-4">
        <input name="q" defaultValue={q} placeholder="Search room or owner" />
        <button type="submit" className="btn btn-primary">
          Search
        </button>
      </form>

      <div className="admin-card overflow-x-auto" style={{ padding: 0 }}>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Owner</th>
              <th>Users</th>
              <th>State</th>
              <th>Cat</th>
            </tr>
          </thead>
          <tbody>
            {rooms.map((r) => (
              <tr key={r.id}>
                <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{r.id}</td>
                <td>
                  <Link href={`/admin/rooms/${r.id}`}>{r.name || "(unnamed)"}</Link>
                </td>
                <td>{r.ownerName || "—"}</td>
                <td>
                  {r.users} / {r.usersMax}
                </td>
                <td>
                  <span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${r.state === "open" ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>
                    {r.state}
                  </span>
                </td>
                <td>{r.category}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {rooms.length === 0 ? (
        <p className="text-xs text-gray-500 dark:text-gray-400" style={{ marginTop: "1rem" }}>
          No rooms found.
        </p>
      ) : null}

      <p className="text-xs text-gray-500 dark:text-gray-400" style={{ marginTop: "1rem" }}>
        Page {page} / {pages} · {total} rooms
        {page > 1 ? (
          <>
            {" · "}
            <Link href={qs(page - 1)}>← Prev</Link>
          </>
        ) : null}
        {page < pages ? (
          <>
            {" · "}
            <Link href={qs(page + 1)}>Next →</Link>
          </>
        ) : null}
      </p>
    </main>
  );
}