628 lines
22 KiB
TypeScript
628 lines
22 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useCallback, useMemo } from 'react';
|
|
import { useRouter, useSearchParams, usePathname } from 'next/navigation';
|
|
import Button from '../ui/Button';
|
|
import Card from '../ui/Card';
|
|
import LeagueMembers from './LeagueMembers';
|
|
import ScheduleRaceForm from './ScheduleRaceForm';
|
|
import { League } from '@gridpilot/racing/domain/entities/League';
|
|
import {
|
|
getLeagueMembershipRepository,
|
|
getDriverStats,
|
|
getAllDriverRankings,
|
|
getDriverRepository,
|
|
} from '@/lib/di-container';
|
|
import { useEffectiveDriverId } from '@/lib/currentDriver';
|
|
import type { MembershipRole } from '@/lib/leagueMembership';
|
|
import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
|
|
import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
|
|
import DriverSummaryPill from '@/components/profile/DriverSummaryPill';
|
|
import DriverIdentity from '@/components/drivers/DriverIdentity';
|
|
import Modal from '@/components/ui/Modal';
|
|
|
|
interface JoinRequest {
|
|
id: string;
|
|
leagueId: string;
|
|
driverId: string;
|
|
requestedAt: Date;
|
|
message?: string;
|
|
}
|
|
|
|
interface LeagueAdminProps {
|
|
league: League;
|
|
onLeagueUpdate?: () => void;
|
|
}
|
|
|
|
export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps) {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const pathname = usePathname();
|
|
const currentDriverId = useEffectiveDriverId();
|
|
const [joinRequests, setJoinRequests] = useState<JoinRequest[]>([]);
|
|
const [requestDriversById, setRequestDriversById] = useState<Record<string, DriverDTO>>({});
|
|
const [ownerDriver, setOwnerDriver] = useState<DriverDTO | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [activeTab, setActiveTab] = useState<'members' | 'requests' | 'races' | 'settings' | 'disputes'>('members');
|
|
const [rejectReason, setRejectReason] = useState('');
|
|
|
|
const loadJoinRequests = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const membershipRepo = getLeagueMembershipRepository();
|
|
const requests = await membershipRepo.getJoinRequests(league.id);
|
|
setJoinRequests(requests);
|
|
|
|
const driverRepo = getDriverRepository();
|
|
const uniqueDriverIds = Array.from(new Set(requests.map((r) => r.driverId)));
|
|
const driverEntities = await Promise.all(
|
|
uniqueDriverIds.map((id) => driverRepo.findById(id)),
|
|
);
|
|
const driverDtos = driverEntities
|
|
.map((driver) => (driver ? EntityMappers.toDriverDTO(driver) : null))
|
|
.filter((dto): dto is DriverDTO => dto !== null);
|
|
|
|
const byId: Record<string, DriverDTO> = {};
|
|
for (const dto of driverDtos) {
|
|
byId[dto.id] = dto;
|
|
}
|
|
setRequestDriversById(byId);
|
|
} catch (err) {
|
|
console.error('Failed to load join requests:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [league.id]);
|
|
|
|
useEffect(() => {
|
|
loadJoinRequests();
|
|
}, [loadJoinRequests]);
|
|
|
|
useEffect(() => {
|
|
async function loadOwner() {
|
|
try {
|
|
const driverRepo = getDriverRepository();
|
|
const entity = await driverRepo.findById(league.ownerId);
|
|
setOwnerDriver(EntityMappers.toDriverDTO(entity));
|
|
} catch (err) {
|
|
console.error('Failed to load league owner:', err);
|
|
}
|
|
}
|
|
|
|
loadOwner();
|
|
}, [league.ownerId]);
|
|
|
|
const handleApproveRequest = async (requestId: string) => {
|
|
try {
|
|
const membershipRepo = getLeagueMembershipRepository();
|
|
const requests = await membershipRepo.getJoinRequests(league.id);
|
|
const request = requests.find((r) => r.id === requestId);
|
|
if (!request) {
|
|
throw new Error('Join request not found');
|
|
}
|
|
|
|
await membershipRepo.saveMembership({
|
|
leagueId: request.leagueId,
|
|
driverId: request.driverId,
|
|
role: 'member',
|
|
status: 'active',
|
|
joinedAt: new Date(),
|
|
});
|
|
await membershipRepo.removeJoinRequest(requestId);
|
|
|
|
await loadJoinRequests();
|
|
onLeagueUpdate?.();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to approve request');
|
|
}
|
|
};
|
|
|
|
const handleRejectRequest = async (requestId: string, trimmedReason: string) => {
|
|
try {
|
|
const membershipRepo = getLeagueMembershipRepository();
|
|
// Alpha-only: we do not persist the reason yet, but we at least log it.
|
|
console.log('Join request rejected with reason:', {
|
|
requestId,
|
|
reason: trimmedReason,
|
|
});
|
|
await membershipRepo.removeJoinRequest(requestId);
|
|
await loadJoinRequests();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to reject request');
|
|
}
|
|
};
|
|
|
|
const handleRemoveMember = async (driverId: string) => {
|
|
if (!confirm('Are you sure you want to remove this member?')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const membershipRepo = getLeagueMembershipRepository();
|
|
const performer = await membershipRepo.getMembership(league.id, currentDriverId);
|
|
if (!performer || (performer.role !== 'owner' && performer.role !== 'admin')) {
|
|
throw new Error('Only owners or admins can remove members');
|
|
}
|
|
|
|
const membership = await membershipRepo.getMembership(league.id, driverId);
|
|
if (!membership) {
|
|
throw new Error('Member not found');
|
|
}
|
|
if (membership.role === 'owner') {
|
|
throw new Error('Cannot remove the league owner');
|
|
}
|
|
|
|
await membershipRepo.removeMembership(league.id, driverId);
|
|
onLeagueUpdate?.();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to remove member');
|
|
}
|
|
};
|
|
|
|
const handleUpdateRole = async (driverId: string, newRole: MembershipRole) => {
|
|
try {
|
|
const membershipRepo = getLeagueMembershipRepository();
|
|
const performer = await membershipRepo.getMembership(league.id, currentDriverId);
|
|
if (!performer || performer.role !== 'owner') {
|
|
throw new Error('Only the league owner can update roles');
|
|
}
|
|
|
|
const membership = await membershipRepo.getMembership(league.id, driverId);
|
|
if (!membership) {
|
|
throw new Error('Member not found');
|
|
}
|
|
if (membership.role === 'owner') {
|
|
throw new Error('Cannot change the owner role');
|
|
}
|
|
|
|
await membershipRepo.saveMembership({
|
|
...membership,
|
|
role: newRole,
|
|
});
|
|
|
|
onLeagueUpdate?.();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to update role');
|
|
}
|
|
};
|
|
|
|
|
|
const modal = searchParams?.get('modal');
|
|
const modalRequestId = searchParams?.get('requestId');
|
|
|
|
const activeRejectRequest =
|
|
modal === 'reject-request'
|
|
? joinRequests.find((r) => r.id === modalRequestId) ?? null
|
|
: null;
|
|
|
|
useEffect(() => {
|
|
if (!activeRejectRequest) {
|
|
setRejectReason('');
|
|
}
|
|
}, [activeRejectRequest?.id]);
|
|
|
|
const isRejectModalOpen = modal === 'reject-request' && !!activeRejectRequest;
|
|
|
|
const openRejectModal = (requestId: string) => {
|
|
const params = new URLSearchParams(searchParams?.toString());
|
|
params.set('modal', 'reject-request');
|
|
params.set('requestId', requestId);
|
|
const query = params.toString();
|
|
const url = query ? `${pathname}?${query}` : pathname;
|
|
router.push(url, { scroll: false });
|
|
};
|
|
|
|
const closeModal = () => {
|
|
const params = new URLSearchParams(searchParams?.toString());
|
|
params.delete('modal');
|
|
params.delete('requestId');
|
|
const query = params.toString();
|
|
const url = query ? `${pathname}?${query}` : pathname;
|
|
router.push(url, { scroll: false });
|
|
};
|
|
|
|
const ownerSummary = useMemo(() => {
|
|
if (!ownerDriver) {
|
|
return null;
|
|
}
|
|
|
|
const stats = getDriverStats(ownerDriver.id);
|
|
const allRankings = getAllDriverRankings();
|
|
|
|
let rating: number | null = stats?.rating ?? null;
|
|
let rank: number | null = null;
|
|
|
|
if (stats) {
|
|
if (typeof stats.overallRank === 'number' && stats.overallRank > 0) {
|
|
rank = stats.overallRank;
|
|
} else {
|
|
const indexInGlobal = allRankings.findIndex(
|
|
(stat) => stat.driverId === stats.driverId,
|
|
);
|
|
if (indexInGlobal !== -1) {
|
|
rank = indexInGlobal + 1;
|
|
}
|
|
}
|
|
|
|
if (rating === null) {
|
|
const globalEntry = allRankings.find(
|
|
(stat) => stat.driverId === stats.driverId,
|
|
);
|
|
if (globalEntry) {
|
|
rating = globalEntry.rating;
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
driver: ownerDriver,
|
|
rating,
|
|
rank,
|
|
};
|
|
}, [ownerDriver]);
|
|
|
|
return (
|
|
<div>
|
|
{error && (
|
|
<div className="mb-6 p-4 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400">
|
|
{error}
|
|
<button
|
|
onClick={() => setError(null)}
|
|
className="ml-4 text-sm underline hover:no-underline"
|
|
>
|
|
Dismiss
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Admin Tabs */}
|
|
<div className="mb-6 border-b border-charcoal-outline">
|
|
<div className="flex gap-4">
|
|
<button
|
|
onClick={() => setActiveTab('members')}
|
|
className={`pb-3 px-1 font-medium transition-colors ${
|
|
activeTab === 'members'
|
|
? 'text-primary-blue border-b-2 border-primary-blue'
|
|
: 'text-gray-400 hover:text-white'
|
|
}`}
|
|
>
|
|
Manage Members
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('requests')}
|
|
className={`pb-3 px-1 font-medium transition-colors flex items-center gap-2 ${
|
|
activeTab === 'requests'
|
|
? 'text-primary-blue border-b-2 border-primary-blue'
|
|
: 'text-gray-400 hover:text-white'
|
|
}`}
|
|
>
|
|
Join Requests
|
|
{joinRequests.length > 0 && (
|
|
<span className="px-2 py-0.5 text-xs bg-primary-blue text-white rounded-full">
|
|
{joinRequests.length}
|
|
</span>
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('races')}
|
|
className={`pb-3 px-1 font-medium transition-colors ${
|
|
activeTab === 'races'
|
|
? 'text-primary-blue border-b-2 border-primary-blue'
|
|
: 'text-gray-400 hover:text-white'
|
|
}`}
|
|
>
|
|
Create Race
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('disputes')}
|
|
className={`pb-3 px-1 font-medium transition-colors ${
|
|
activeTab === 'disputes'
|
|
? 'text-primary-blue border-b-2 border-primary-blue'
|
|
: 'text-gray-400 hover:text-white'
|
|
}`}
|
|
>
|
|
Disputes
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('settings')}
|
|
className={`pb-3 px-1 font-medium transition-colors ${
|
|
activeTab === 'settings'
|
|
? 'text-primary-blue border-b-2 border-primary-blue'
|
|
: 'text-gray-400 hover:text-white'
|
|
}`}
|
|
>
|
|
Settings
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tab Content */}
|
|
{activeTab === 'members' && (
|
|
<Card>
|
|
<h2 className="text-xl font-semibold text-white mb-4">Manage Members</h2>
|
|
<LeagueMembers
|
|
leagueId={league.id}
|
|
onRemoveMember={handleRemoveMember}
|
|
onUpdateRole={handleUpdateRole}
|
|
showActions={true}
|
|
/>
|
|
</Card>
|
|
)}
|
|
|
|
{activeTab === 'requests' && (
|
|
<Card>
|
|
<h2 className="text-xl font-semibold text-white mb-4">Join Requests</h2>
|
|
|
|
{loading ? (
|
|
<div className="text-center py-8 text-gray-400">Loading requests...</div>
|
|
) : joinRequests.length === 0 ? (
|
|
<div className="text-center py-8 text-gray-400">
|
|
No pending join requests
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{joinRequests.map((request) => {
|
|
const driver = requestDriversById[request.driverId];
|
|
const requestedOn = new Date(request.requestedAt).toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
});
|
|
const metaPieces = [
|
|
`Requested ${requestedOn}`,
|
|
request.message ? `Message: "${request.message}"` : null,
|
|
].filter(Boolean);
|
|
const meta = metaPieces.join(' • ');
|
|
|
|
return (
|
|
<div
|
|
key={request.id}
|
|
className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
|
|
>
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div className="flex-1 min-w-0">
|
|
{driver ? (
|
|
<DriverIdentity
|
|
driver={driver}
|
|
href={`/drivers/${request.driverId}?from=league-join-requests&leagueId=${league.id}`}
|
|
meta={meta}
|
|
size="sm"
|
|
/>
|
|
) : (
|
|
<div>
|
|
<h3 className="text-white font-medium">Unknown Driver</h3>
|
|
<p className="text-sm text-gray-400 mt-1">Unable to load driver details</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-2 shrink-0">
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => handleApproveRequest(request.id)}
|
|
className="px-4"
|
|
>
|
|
Approve
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => openRejectModal(request.id)}
|
|
className="px-4"
|
|
>
|
|
Reject
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
)}
|
|
|
|
{activeTab === 'races' && (
|
|
<Card>
|
|
<h2 className="text-xl font-semibold text-white mb-4">Schedule Race</h2>
|
|
<p className="text-gray-400 mb-6">
|
|
Create a new race for this league; this is an alpha-only in-memory scheduler.
|
|
</p>
|
|
<ScheduleRaceForm
|
|
preSelectedLeagueId={league.id}
|
|
onSuccess={(race) => {
|
|
router.push(`/leagues/${league.id}/races/${race.id}`);
|
|
}}
|
|
/>
|
|
</Card>
|
|
)}
|
|
|
|
{activeTab === 'disputes' && (
|
|
<Card>
|
|
<h2 className="text-xl font-semibold text-white mb-4">Disputes (Alpha)</h2>
|
|
<div className="space-y-4">
|
|
<p className="text-sm text-gray-400">
|
|
Demo-only view of potential protest and dispute workflow for this league.
|
|
</p>
|
|
<div className="rounded-lg border border-charcoal-outline bg-deep-graphite/70 p-4">
|
|
<h3 className="text-sm font-semibold text-white mb-1">Sample Protest</h3>
|
|
<p className="text-xs text-gray-400 mb-2">
|
|
Driver contact in Turn 3, Lap 12. Protest submitted by a driver against another
|
|
competitor for avoidable contact.
|
|
</p>
|
|
<p className="text-xs text-gray-500">
|
|
In the full product, this area would show protests, steward reviews, penalties, and appeals.
|
|
</p>
|
|
</div>
|
|
<p className="text-xs text-gray-500">
|
|
For the alpha, this tab is static and read-only and does not affect any race or league state.
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{activeTab === 'settings' && (
|
|
<Card>
|
|
<h2 className="text-xl font-semibold text-white mb-4">League Settings</h2>
|
|
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div className="lg:col-span-2 space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|
League Name
|
|
</label>
|
|
<p className="text-white">{league.name}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
|
Description
|
|
</label>
|
|
<p className="text-white">{league.description}</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-2 border-t border-charcoal-outline">
|
|
<div>
|
|
<label className="text-sm text-gray-500">Season / Series</label>
|
|
<p className="text-white">Alpha Demo Season</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm text-gray-500">Points System</label>
|
|
<p className="text-white">{league.settings.pointsSystem.toUpperCase()}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm text-gray-500">Qualifying Format</label>
|
|
<p className="text-white capitalize">{league.settings.qualifyingFormat}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{league.socialLinks && (
|
|
<div className="pt-4 border-t border-charcoal-outline space-y-2">
|
|
<h3 className="text-sm font-medium text-gray-300">Social Links</h3>
|
|
<div className="space-y-1 text-sm">
|
|
{league.socialLinks.discordUrl && (
|
|
<div className="flex items-center justify-between gap-3">
|
|
<span className="text-gray-400">Discord</span>
|
|
<a
|
|
href={league.socialLinks.discordUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-primary-blue hover:underline break-all"
|
|
>
|
|
{league.socialLinks.discordUrl}
|
|
</a>
|
|
</div>
|
|
)}
|
|
{league.socialLinks.youtubeUrl && (
|
|
<div className="flex items-center justify-between gap-3">
|
|
<span className="text-gray-400">YouTube</span>
|
|
<a
|
|
href={league.socialLinks.youtubeUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-red-400 hover:underline break-all"
|
|
>
|
|
{league.socialLinks.youtubeUrl}
|
|
</a>
|
|
</div>
|
|
)}
|
|
{league.socialLinks.websiteUrl && (
|
|
<div className="flex items-center justify-between gap-3">
|
|
<span className="text-gray-400">Website</span>
|
|
<a
|
|
href={league.socialLinks.websiteUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-gray-100 hover:underline break-all"
|
|
>
|
|
{league.socialLinks.websiteUrl}
|
|
</a>
|
|
</div>
|
|
)}
|
|
{!league.socialLinks.discordUrl &&
|
|
!league.socialLinks.youtubeUrl &&
|
|
!league.socialLinks.websiteUrl && (
|
|
<p className="text-gray-500">
|
|
No social links configured for this league in the alpha demo.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<h3 className="text-sm font-medium text-gray-300">League Owner</h3>
|
|
{ownerSummary ? (
|
|
<DriverSummaryPill
|
|
driver={ownerSummary.driver}
|
|
rating={ownerSummary.rating}
|
|
rank={ownerSummary.rank}
|
|
/>
|
|
) : (
|
|
<p className="text-sm text-gray-500">Loading owner details...</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-4 border-t border-charcoal-outline">
|
|
<p className="text-sm text-gray-400">
|
|
League settings editing is alpha-only and changes are not persisted yet.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
<Modal
|
|
title="Reject join request"
|
|
description={
|
|
activeRejectRequest
|
|
? `Provide a reason for rejecting ${requestDriversById[activeRejectRequest.driverId]?.name ?? 'this driver'}.`
|
|
: 'Provide a reason for rejecting this join request.'
|
|
}
|
|
primaryActionLabel="Reject"
|
|
secondaryActionLabel="Cancel"
|
|
onPrimaryAction={async () => {
|
|
const trimmed = rejectReason.trim();
|
|
if (!trimmed) {
|
|
setError('A rejection reason is required to reject a join request.');
|
|
return;
|
|
}
|
|
if (!activeRejectRequest) {
|
|
return;
|
|
}
|
|
await handleRejectRequest(activeRejectRequest.id, trimmed);
|
|
closeModal();
|
|
}}
|
|
onSecondaryAction={() => {
|
|
setRejectReason('');
|
|
}}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
closeModal();
|
|
}
|
|
}}
|
|
isOpen={isRejectModalOpen}
|
|
>
|
|
<div className="space-y-3">
|
|
<p className="text-sm text-gray-300">
|
|
This will remove the join request and the driver will not be added to the league.
|
|
</p>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-200 mb-1">
|
|
Rejection reason
|
|
</label>
|
|
<textarea
|
|
value={rejectReason}
|
|
onChange={(e) => setRejectReason(e.target.value)}
|
|
rows={4}
|
|
className="w-full rounded-lg border border-charcoal-outline bg-iron-gray/80 px-3 py-2 text-sm text-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-blue"
|
|
placeholder="Let the driver know why this request was rejected..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
} |