import { auth } from "@/lib/auth";
import { db } from "@/lib/db";
import { UserRow } from "./UserRow";

export default async function AdminUsersPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string }>;
}) {
  const { q } = await searchParams;
  const session = await auth();
  const viewerRole = (session?.user as { role?: string } | undefined)?.role ?? "member";

  const users = await db.user.findMany({
    where: q?.trim()
      ? {
          OR: [
            { username: { contains: q.trim(), mode: "insensitive" } },
            { email: { contains: q.trim(), mode: "insensitive" } },
          ],
        }
      : undefined,
    orderBy: { createdAt: "desc" },
    take: 50,
  });

  return (
    <div>
      <h1 className="font-heading text-3xl font-semibold text-terracotta">
        Users
      </h1>
      <p className="mt-2 text-charcoal/60">
        Search, promote to moderator, set contributor status, or ban.
      </p>

      <form method="get" className="mt-6 flex gap-2">
        <input
          type="text"
          name="q"
          defaultValue={q ?? ""}
          placeholder="Search username or email"
          className="w-72 rounded border border-charcoal/20 bg-warm-white px-3 py-1.5 text-sm text-charcoal"
        />
        <button
          type="submit"
          className="rounded-full border border-charcoal/20 px-4 py-1.5 text-sm font-medium text-charcoal hover:bg-charcoal/5"
        >
          Search
        </button>
      </form>

      {users.length === 0 ? (
        <p className="mt-8 text-charcoal/60">No users found.</p>
      ) : (
        <ul className="mt-6 flex flex-col gap-3">
          {users.map((user) => (
            <UserRow
              key={user.id}
              user={{
                id: user.id,
                username: user.username,
                email: user.email,
                role: user.role,
                contributorFlag: user.contributorFlag,
                uploadCount: user.uploadCount,
                banned: user.banned,
              }}
              viewerRole={viewerRole}
            />
          ))}
        </ul>
      )}
    </div>
  );
}