wip

apps/website/components/leagues/LeagueAdmin.tsx

@@ -1,23 +1,33 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
-import { useRouter } from 'next/navigation';
+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 {
-  getJoinRequests,
-  approveJoinRequest,
-  rejectJoinRequest,
-  removeMember,
-  updateMemberRole,
-  getCurrentDriverId,
-  type JoinRequest,
-  type MembershipRole,
-} from '@/lib/racingLegacyFacade';
-import { getDriverRepository } from '@/lib/di-container';
-import { Driver } from '@gridpilot/racing/domain/entities/Driver';
+  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;
@@ -26,24 +36,38 @@ interface LeagueAdminProps {
 
 export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps) {
   const router = useRouter();
-  const currentDriverId = getCurrentDriverId();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const currentDriverId = useEffectiveDriverId();
   const [joinRequests, setJoinRequests] = useState<JoinRequest[]>([]);
-  const [requestDrivers, setRequestDrivers] = useState<Driver[]>([]);
+  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'>('members');
+  const [activeTab, setActiveTab] = useState<'members' | 'requests' | 'races' | 'settings' | 'disputes'>('members');
+  const [rejectReason, setRejectReason] = useState('');
 
   const loadJoinRequests = useCallback(async () => {
     setLoading(true);
     try {
-      const requests = getJoinRequests(league.id);
+      const membershipRepo = getLeagueMembershipRepository();
+      const requests = await membershipRepo.getJoinRequests(league.id);
       setJoinRequests(requests);
 
       const driverRepo = getDriverRepository();
-      const drivers = await Promise.all(
-        requests.map(r => driverRepo.findById(r.driverId))
+      const uniqueDriverIds = Array.from(new Set(requests.map((r) => r.driverId)));
+      const driverEntities = await Promise.all(
+        uniqueDriverIds.map((id) => driverRepo.findById(id)),
       );
-      setRequestDrivers(drivers.filter((d): d is Driver => d !== null));
+      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 {
@@ -55,52 +79,189 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
     loadJoinRequests();
   }, [loadJoinRequests]);
 
-  const handleApproveRequest = (requestId: string) => {
+  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 {
-      approveJoinRequest(requestId);
-      loadJoinRequests();
+      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 = (requestId: string) => {
+  const handleRejectRequest = async (requestId: string, trimmedReason: string) => {
     try {
-      rejectJoinRequest(requestId);
-      loadJoinRequests();
+      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 = (driverId: string) => {
+  const handleRemoveMember = async (driverId: string) => {
     if (!confirm('Are you sure you want to remove this member?')) {
       return;
     }
 
     try {
-      removeMember(league.id, driverId, currentDriverId);
+      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 = (driverId: string, newRole: MembershipRole) => {
+  const handleUpdateRole = async (driverId: string, newRole: MembershipRole) => {
     try {
-      updateMemberRole(league.id, driverId, newRole, currentDriverId);
+      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 getDriverName = (driverId: string): string => {
-    const driver = requestDrivers.find(d => d.id === driverId);
-    return driver?.name || 'Unknown Driver';
+
+  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 && (
@@ -153,6 +314,16 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
           >
             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 ${
@@ -191,48 +362,60 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
             </div>
           ) : (
             <div className="space-y-4">
-              {joinRequests.map((request) => (
-                <div
-                  key={request.id}
-                  className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
-                >
-                  <div className="flex items-center justify-between">
-                    <div className="flex-1">
-                      <h3 className="text-white font-medium">
-                        {getDriverName(request.driverId)}
-                      </h3>
-                      <p className="text-sm text-gray-400 mt-1">
-                        Requested {new Date(request.requestedAt).toLocaleDateString('en-US', {
-                          month: 'short',
-                          day: 'numeric',
-                          year: 'numeric',
-                        })}
-                      </p>
-                      {request.message && (
-                        <p className="text-sm text-gray-400 mt-2 italic">
-                          &ldquo;{request.message}&rdquo;
-                        </p>
-                      )}
-                    </div>
-                    <div className="flex gap-2">
-                      <Button
-                        variant="primary"
-                        onClick={() => handleApproveRequest(request.id)}
-                        className="px-4"
-                      >
-                        Approve
-                      </Button>
-                      <Button
-                        variant="secondary"
-                        onClick={() => handleRejectRequest(request.id)}
-                        className="px-4"
-                      >
-                        Reject
-                      </Button>
+              {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>
-              ))}
+                );
+              })}
             </div>
           )}
         </Card>
@@ -240,16 +423,40 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
 
       {activeTab === 'races' && (
         <Card>
-          <h2 className="text-xl font-semibold text-white mb-4">Create New Race</h2>
-          <p className="text-gray-400 mb-4">
-            Schedule a new race for this league
+          <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>
-          <Button
-            variant="primary"
-            onClick={() => router.push(`/races?leagueId=${league.id}`)}
-          >
-            Go to Race Scheduler
-          </Button>
+          <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>
       )}
 
@@ -257,50 +464,165 @@ export default function LeagueAdmin({ league, onLeagueUpdate }: LeagueAdminProps
         <Card>
           <h2 className="text-xl font-semibold text-white mb-4">League Settings</h2>
           
-          <div className="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="pt-4 border-t border-charcoal-outline">
-              <h3 className="text-white font-medium mb-3">Racing Settings</h3>
-              
-              <div className="grid grid-cols-2 gap-4">
+          <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="text-sm text-gray-500">Points System</label>
-                  <p className="text-white">{league.settings.pointsSystem.toUpperCase()}</p>
+                  <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="text-sm text-gray-500">Session Duration</label>
-                  <p className="text-white">{league.settings.sessionDuration} minutes</p>
+                  <label className="block text-sm font-medium text-gray-300 mb-2">
+                    Description
+                  </label>
+                  <p className="text-white">{league.description}</p>
                 </div>
 
-                <div>
-                  <label className="text-sm text-gray-500">Qualifying Format</label>
-                  <p className="text-white capitalize">{league.settings.qualifyingFormat}</p>
+                <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 will be available in a future update
+                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>
   );
 }