import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";

import { Button } from "@/client/components/ui/button";
import { Card } from "@/client/components/ui/card";
import { ConfirmButton } from "@/client/components/ui/confirm-button";
import { PageError } from "@/client/components/ui/page-error";
import { PageHeader } from "@/client/components/ui/page-header";
import { ListRow } from "@/client/components/ui/row";
import { useRequireAdmin } from "@/client/hooks/use-auth-guard";
import { authClient } from "@/client/lib/auth-client";
import { queryKeys } from "@/client/lib/query";
import { hasAdminRole } from "@/shared/role";

interface AdminUser {
  id: string;
  email: string;
  name: string;
  role?: string | null;
  banned?: boolean | null;
  createdAt: string | Date;
}

export const AdminUsersPage = () => {
  const session = useRequireAdmin("/admin/users");
  const queryClient = useQueryClient();
  const [error, setError] = useState<string | null>(null);
  // Per-user in-flight marker keyed on user id. Promote/Unban use plain
  // <Button> (no ConfirmButton arming) so without this guard a fast
  // double-click would fire two requests for the same row.
  const [pending, setPending] = useState<string | null>(null);
  const isAdmin = hasAdminRole(session.data?.user.role);
  const userId = session.data?.user.id ?? null;
  const usersQueryKey = queryKeys.adminUsers(userId);

  const usersQuery = useQuery({
    queryKey: usersQueryKey,
    queryFn: async () => {
      const res = await authClient.admin.listUsers({ query: { limit: 100 } });
      if (res.error) throw new Error(res.error.message ?? "Could not load users.");
      return (res.data?.users ?? []) as unknown as AdminUser[];
    },
    enabled: isAdmin,
  });
  const users = usersQuery.data ?? [];

  const currentUserId = session.data?.user.id;

  const setRole = async (userId: string, role: "admin" | "user") => {
    if (pending) return;
    setError(null);
    setPending(userId);
    try {
      const res = await authClient.admin.setRole({ userId, role });
      if (res.error) setError(res.error.message ?? "Failed to update role.");
      await queryClient.invalidateQueries({ queryKey: usersQueryKey, exact: true });
    } finally {
      setPending(null);
    }
  };

  const banUser = async (userId: string, banned: boolean) => {
    if (pending) return;
    setError(null);
    setPending(userId);
    try {
      const res = banned ? await authClient.admin.banUser({ userId }) : await authClient.admin.unbanUser({ userId });
      if (res.error) setError(res.error.message ?? "Failed to update ban status.");
      await queryClient.invalidateQueries({ queryKey: usersQueryKey, exact: true });
    } finally {
      setPending(null);
    }
  };

  return (
    <div className="mx-auto max-w-3xl">
      <PageHeader title="Users" />
      <PageError message={error} onDismiss={() => setError(null)} />
      <Card>
        {users.length === 0 ? (
          <p className="text-sm text-zinc-500">No users yet.</p>
        ) : (
          <ul className="flex flex-col gap-2">
            {users.map((user) => {
              const isSelf = user.id === currentUserId;
              return (
                <ListRow
                  key={user.id}
                  className="flex flex-col gap-3 text-sm sm:flex-row sm:items-center sm:justify-between"
                >
                  <div className="min-w-0">
                    <p className="flex items-baseline gap-2 font-medium text-zinc-100">
                      <span className="truncate">{user.name || user.email}</span>
                      {isSelf ? <span className="text-xs font-normal italic text-zinc-500">(you)</span> : null}
                    </p>
                    <p className="truncate text-xs text-zinc-500">
                      {user.email} · role {user.role ?? "user"}
                      {user.banned ? " · banned" : ""}
                    </p>
                  </div>
                  {isSelf ? null : (
                    <div className="flex flex-wrap gap-1">
                      {hasAdminRole(user.role) ? (
                        <ConfirmButton
                          variant="ghost"
                          size="sm"
                          loading={pending === user.id}
                          disabled={pending !== null && pending !== user.id}
                          onConfirm={() => setRole(user.id, "user")}
                        >
                          Demote
                        </ConfirmButton>
                      ) : (
                        <ConfirmButton
                          variant="ghost"
                          size="sm"
                          loading={pending === user.id}
                          disabled={pending !== null && pending !== user.id}
                          onConfirm={() => setRole(user.id, "admin")}
                        >
                          Promote
                        </ConfirmButton>
                      )}
                      {user.banned ? (
                        <Button
                          variant="ghost"
                          size="sm"
                          loading={pending === user.id}
                          disabled={pending !== null && pending !== user.id}
                          onClick={() => banUser(user.id, false)}
                        >
                          Unban
                        </Button>
                      ) : (
                        <ConfirmButton
                          variant="danger"
                          size="sm"
                          loading={pending === user.id}
                          disabled={pending !== null && pending !== user.id}
                          onConfirm={() => banUser(user.id, true)}
                        >
                          Ban
                        </ConfirmButton>
                      )}
                    </div>
                  )}
                </ListRow>
              );
            })}
          </ul>
        )}
      </Card>
    </div>
  );
};