'use client';

import type { MembershipRole } from '@/lib/types/MembershipRole';
import { useParams } from 'next/navigation';
import { useMemo } from 'react';
import {
  useLeagueJoinRequests,
  useLeagueRosterAdmin,
  useApproveJoinRequest,
  useRejectJoinRequest,
  useUpdateMemberRole,
  useRemoveMember,
} from "@/lib/hooks/league/useLeagueRosterAdmin";
import { RosterAdminTemplate } from '@/templates/RosterAdminTemplate';

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,
  } = useLeagueJoinRequests(leagueId);

  const {
    data: members = [],
    isLoading: loadingMembers,
    refetch: refetchMembers,
  } = useLeagueRosterAdmin(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 (requestId: string) => {
    await approveMutation.mutateAsync({ leagueId, requestId });
  };

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

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

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

  return (
    <RosterAdminTemplate
      joinRequests={joinRequests}
      members={members}
      loading={loading}
      pendingCountLabel={pendingCountLabel}
      onApprove={handleApprove}
      onReject={handleReject}
      onRoleChange={handleRoleChange}
      onRemove={handleRemove}
      roleOptions={ROLE_OPTIONS}
    />
  );
}