import { getUsers } from "@/lib/api/admin";
import { ActionButton } from "@/components/admin/action-button";
import { CreateStaffAccountForm } from "@/components/admin/create-staff-account-form";
import { ReasonAction } from "@/components/admin/reason-action";
import { FilterSelect } from "@/components/ui/filter-select";
import { cardClasses } from "@/components/ui/styles";
import { cn } from "@/lib/utils";
import { Pagination } from "@/components/ui/pagination";

const ROLE_LABEL: Record<string, string> = {
  peserta: "Participant",
  organizer: "Organizer",
  petugas: "Staff",
  administrator: "Administrator",
};

export default async function AdminUsersPage({
  searchParams,
}: {
  searchParams: Promise<{ role?: string; page?: string }>;
}) {
  const { role, page } = await searchParams;
  const { data: users, meta } = await getUsers({ role, page: page ? Number(page) : undefined });

  return (
    <div>
      <h2 className="text-lg font-semibold">Manage Users</h2>

      <div className="mt-4">
        <CreateStaffAccountForm />
      </div>

      <form className="mt-4 flex gap-3" method="get">
        <FilterSelect
          name="role"
          ariaLabel="Filter user role"
          defaultValue={role ?? ""}
          options={[
            { value: "", label: "All Roles" },
            ...Object.entries(ROLE_LABEL).map(([value, label]) => ({ value, label })),
          ]}
        />
        <button
          type="submit"
          className="rounded-lg bg-kolabora-primary px-4 py-2 text-sm font-medium text-kolabora-neutral-white hover:opacity-90"
        >
          Filter
        </button>
      </form>

      <div className={cn("mt-4 flex flex-col divide-y divide-kolabora-neutral-dark/10", cardClasses())}>
        {users.length === 0 && (
          <p className="px-4 py-6 text-center text-sm text-kolabora-neutral-dark/70">
            No users found.
          </p>
        )}
        {users.map((user) => (
          <div key={user.id} className="flex flex-wrap items-center justify-between gap-3 px-4 py-3">
            <div>
              <p className="font-medium">
                {user.name} <span className="font-mono text-xs font-normal text-kolabora-neutral-dark/50">#{user.id}</span>
              </p>
              <p className="text-sm text-kolabora-neutral-dark/70">{user.email}</p>
              <p className="text-xs text-kolabora-neutral-dark/70">
                {ROLE_LABEL[user.role] ?? user.role} &middot;{" "}
                {user.status === "active" ? "Active" : "Suspended"}
              </p>
            </div>
            <div className="flex flex-wrap gap-2">
              {user.role !== "administrator" &&
                (user.role === "organizer" ? (
                  <ActionButton
                    endpoint={`/api/admin/users/${user.id}/demote-organizer`}
                    label="Revoke Organizer Role"
                  />
                ) : (
                  <ActionButton
                    endpoint={`/api/admin/users/${user.id}/promote-organizer`}
                    label="Make Organizer"
                    variant="primary"
                  />
                ))}
              {user.status === "active" ? (
                <ReasonAction endpoint={`/api/admin/users/${user.id}/suspend`} label="Suspend" />
              ) : (
                <ActionButton
                  endpoint={`/api/admin/users/${user.id}/reinstate`}
                  label="Reactivate"
                  variant="primary"
                />
              )}
            </div>
          </div>
        ))}
      </div>

      <Pagination meta={meta} basePath="/admin/users" searchParams={{ role }} />
    </div>
  );
}