gridpilot.gg/apps/website/app/leagues/[id]/roster/admin/RosterAdminPage.tsx

'use client';

import Card from '@/components/ui/Card';
import type { MembershipRole } from '@/lib/types/MembershipRole';
import { useParams } from 'next/navigation';
import { useMemo } from 'react';
import {
  useLeagueRosterJoinRequests,
  useLeagueRosterMembers,
  useApproveJoinRequest,
  useRejectJoinRequest,
  useUpdateMemberRole,
  useRemoveMember,
} from "@/lib/hooks/league/useLeagueRosterAdmin";

const ROLE_OPTIONS: MembershipRole[] = ['owner', 'admin', 'steward', 'member'];

export function RosterAdminPage() {
  const params = useParams();
  const leagueId = params.id as string;

  // Fetch data using React-Query + DI
  const {
    data: joinRequests = [],
    isLoading: loadingJoinRequests,
    refetch: refetchJoinRequests,
  } = useLeagueRosterJoinRequests(leagueId);

  const {
    data: members = [],
    isLoading: loadingMembers,
    refetch: refetchMembers,
  } = useLeagueRosterMembers(leagueId);

  const loading = loadingJoinRequests || loadingMembers;

  // Mutations
  const approveMutation = useApproveJoinRequest({
    onSuccess: () => refetchJoinRequests(),
  });

  const rejectMutation = useRejectJoinRequest({
    onSuccess: () => refetchJoinRequests(),
  });

  const updateRoleMutation = useUpdateMemberRole({
    onError: () => refetchMembers(), // Refetch on error to restore state
  });

  const removeMemberMutation = useRemoveMember({
    onSuccess: () => refetchMembers(),
  });

  const pendingCountLabel = useMemo(() => {
    return joinRequests.length === 1 ? '1 request' : `${joinRequests.length} requests`;
  }, [joinRequests.length]);

  const handleApprove = async (joinRequestId: string) => {
    await approveMutation.mutateAsync({ leagueId, joinRequestId });
  };

  const handleReject = async (joinRequestId: string) => {
    await rejectMutation.mutateAsync({ leagueId, joinRequestId });
  };

  const handleRoleChange = async (driverId: string, newRole: MembershipRole) => {
    await updateRoleMutation.mutateAsync({ leagueId, driverId, role: newRole });
  };

  const handleRemove = async (driverId: string) => {
    await removeMemberMutation.mutateAsync({ leagueId, driverId });
  };

  return (
    <div className="space-y-6">
      <Card>
        <div className="space-y-4">
          <div>
            <h1 className="text-2xl font-bold text-white">Roster Admin</h1>
            <p className="text-sm text-gray-400">Manage join requests and member roles.</p>
          </div>

          <div className="border-t border-charcoal-outline pt-4 space-y-3">
            <div className="flex items-center justify-between gap-3">
              <h2 className="text-lg font-semibold text-white">Pending join requests</h2>
              <p className="text-xs text-gray-500">{pendingCountLabel}</p>
            </div>

            {loading ? (
              <div className="py-4 text-sm text-gray-400">Loading…</div>
            ) : joinRequests.length ? (
              <div className="space-y-2">
                {joinRequests.map((req) => (
                  <div
                    key={req.id}
                    className="flex items-center justify-between gap-3 bg-deep-graphite border border-charcoal-outline rounded p-3"
                  >
                    <div className="min-w-0">
                      <p className="text-white font-medium truncate">{req.driverName}</p>
                      <p className="text-xs text-gray-400 truncate">{req.requestedAtIso}</p>
                      {req.message ? <p className="text-xs text-gray-500 truncate">{req.message}</p> : null}
                    </div>

                    <div className="flex items-center gap-2">
                      <button
                        type="button"
                        data-testid={`join-request-${req.id}-approve`}
                        onClick={() => handleApprove(req.id)}
                        className="px-3 py-1.5 rounded bg-primary-blue text-white"
                      >
                        Approve
                      </button>
                      <button
                        type="button"
                        data-testid={`join-request-${req.id}-reject`}
                        onClick={() => handleReject(req.id)}
                        className="px-3 py-1.5 rounded bg-iron-gray text-gray-200"
                      >
                        Reject
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="py-4 text-sm text-gray-500">No pending join requests.</div>
            )}
          </div>

          <div className="border-t border-charcoal-outline pt-4 space-y-3">
            <h2 className="text-lg font-semibold text-white">Members</h2>

            {loading ? (
              <div className="py-4 text-sm text-gray-400">Loading…</div>
            ) : members.length ? (
              <div className="space-y-2">
                {members.map((member) => (
                  <div
                    key={member.driverId}
                    className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 bg-deep-graphite border border-charcoal-outline rounded p-3"
                  >
                    <div className="min-w-0">
                      <p className="text-white font-medium truncate">{member.driverName}</p>
                      <p className="text-xs text-gray-400 truncate">{member.joinedAtIso}</p>
                    </div>

                    <div className="flex flex-col md:flex-row md:items-center gap-2">
                      <label className="text-xs text-gray-400" htmlFor={`role-${member.driverId}`}>
                        Role for {member.driverName}
                      </label>
                      <select
                        id={`role-${member.driverId}`}
                        aria-label={`Role for ${member.driverName}`}
                        value={member.role}
                        onChange={(e) => handleRoleChange(member.driverId, e.target.value as MembershipRole)}
                        className="bg-iron-gray text-white px-3 py-2 rounded"
                      >
                        {ROLE_OPTIONS.map((role) => (
                          <option key={role} value={role}>
                            {role}
                          </option>
                        ))}
                      </select>

                      <button
                        type="button"
                        data-testid={`member-${member.driverId}-remove`}
                        onClick={() => handleRemove(member.driverId)}
                        className="px-3 py-1.5 rounded bg-iron-gray text-gray-200"
                      >
                        Remove
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="py-4 text-sm text-gray-500">No members found.</div>
            )}
          </div>
        </div>
      </Card>
    </div>
  );
}