import { AdminUserCard } from "@/admin/components/AdminUserCard";
import { AdminAutoLayout } from "@/admin/layout/AdminAutoLayout";
import { requireSuperAdmin } from "@/lib/auth";
import { prisma } from "@/lib/prisma";

type AdminUsersPageProps = {
  searchParams: Promise<{ error?: string; success?: string }>;
};

const errorMessages: Record<string, string> = {
  "not-found": "User account was not found.",
  required: "Please check the form."
};

const successMessages: Record<string, string> = {
  deleted: "User account deleted successfully.",
  saved: "User settings saved successfully."
};

export default async function AdminUsersPage({ searchParams }: AdminUsersPageProps) {
  await requireSuperAdmin();
  const params = await searchParams;
  const publicUsers = await prisma.user.findMany({
    orderBy: [{ isApproved: "asc" }, { createdAt: "desc" }],
    where: { role: "USER" }
  });

  const pendingCount = publicUsers.filter((user) => !user.isApproved).length;
  const approvedCount = publicUsers.length - pendingCount;

  return (
    <AdminAutoLayout
      description="Super Admin can approve, revoke access, email, or delete any public user account."
      error={params.error}
      errorMessages={errorMessages}
      eyebrow="Human resources"
      title="Website users"
      width="full"
    >
      {params.success ? (
        <p className="admin-success-message">{successMessages[params.success] ?? "Saved successfully."}</p>
      ) : null}

      <div className="admin-users-summary">
        <div className="admin-users-summary__stat">
          <span className="pill">Total users</span>
          <strong>{publicUsers.length}</strong>
        </div>
        <div className="admin-users-summary__stat">
          <span className="pill">Approved</span>
          <strong>{approvedCount}</strong>
        </div>
        <div className="admin-users-summary__stat">
          <span className="pill">Pending</span>
          <strong>{pendingCount}</strong>
        </div>
      </div>

      <section className="glass-panel admin-users-panel">
        <div className="admin-panel-heading">
          <div>
            <span className="pill">
              {publicUsers.length} public user{publicUsers.length === 1 ? "" : "s"}
            </span>
            <h2>All registered users</h2>
            <p className="muted admin-users-panel__desc">Pending users are listed first.</p>
          </div>
        </div>

        {publicUsers.length > 0 ? (
          <div className="admin-users-grid">
            {publicUsers.map((user) => (
              <AdminUserCard key={user.id} user={user} />
            ))}
          </div>
        ) : (
          <p className="admin-empty-state">No public users registered yet.</p>
        )}
      </section>
    </AdminAutoLayout>
  );
}