'use client'; import { useState } from 'react'; import { useParams, useRouter } from 'next/navigation'; import { PageWrapper } from '@/components/shared/state/PageWrapper'; import { LeagueAdminScheduleTemplate } from '@/templates/LeagueAdminScheduleTemplate'; import { useLeagueAdminStatus, useLeagueSeasons, useLeagueAdminSchedule } from "@/hooks/league/useLeagueScheduleAdminPageData"; import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId"; import { publishScheduleAction, unpublishScheduleAction, createRaceAction, updateRaceAction, deleteRaceAction } from './actions'; import { Box } from '@/ui/Box'; import { Stack } from '@/ui/Stack'; import { Text } from '@/ui/Text'; import { Card } from '@/ui/Card'; import { Heading } from '@/ui/Heading'; export function LeagueAdminSchedulePageClient() { const params = useParams(); const leagueId = params.id as string; const currentDriverId = useEffectiveDriverId() || ''; const router = useRouter(); // Form state const [seasonId, setSeasonId] = useState(''); const [track, setTrack] = useState(''); const [car, setCar] = useState(''); const [scheduledAtIso, setScheduledAtIso] = useState(''); const [editingRaceId, setEditingRaceId] = useState(null); // Action state const [isPublishing, setIsPublishing] = useState(false); const [isSaving, setIsSaving] = useState(false); const [deletingRaceId, setDeletingRaceId] = useState(null); // Check admin status using domain hook const { data: isAdmin, isLoading: isAdminLoading } = useLeagueAdminStatus(leagueId, currentDriverId); // Load seasons using domain hook const { data: seasonsData, isLoading: seasonsLoading } = useLeagueSeasons(leagueId, !!isAdmin); // Auto-select season const selectedSeasonId = seasonId || (seasonsData && seasonsData.length > 0 ? (seasonsData.find((s) => s.status === 'active') ?? seasonsData[0])?.seasonId : ''); // Load schedule using domain hook const { data: schedule, isLoading: scheduleLoading } = useLeagueAdminSchedule(leagueId, selectedSeasonId, !!isAdmin); // Handlers const handleSeasonChange = (newSeasonId: string) => { setSeasonId(newSeasonId); setEditingRaceId(null); setTrack(''); setCar(''); setScheduledAtIso(''); }; const handlePublishToggle = async () => { if (!schedule || !selectedSeasonId) return; setIsPublishing(true); try { const result = schedule.published ? await unpublishScheduleAction(leagueId, selectedSeasonId) : await publishScheduleAction(leagueId, selectedSeasonId); if (result.isOk()) { router.refresh(); } else { alert(result.getError()); } } finally { setIsPublishing(false); } }; const handleAddOrSave = async () => { if (!selectedSeasonId || !scheduledAtIso) return; setIsSaving(true); try { const result = !editingRaceId ? await createRaceAction(leagueId, selectedSeasonId, { track, car, scheduledAtIso }) : await updateRaceAction(leagueId, selectedSeasonId, editingRaceId, { ...(track ? { track } : {}), ...(car ? { car } : {}), ...(scheduledAtIso ? { scheduledAtIso } : {}), }); if (result.isOk()) { // Reset form setTrack(''); setCar(''); setScheduledAtIso(''); setEditingRaceId(null); router.refresh(); } else { alert(result.getError()); } } finally { setIsSaving(false); } }; const handleEdit = (raceId: string) => { if (!schedule) return; const race = schedule.races.find((r) => r.id === raceId); if (!race) return; setEditingRaceId(raceId); setTrack(race.track || ''); setCar(race.car || ''); setScheduledAtIso(race.scheduledAt.toISOString()); }; const handleDelete = async (raceId: string) => { if (!selectedSeasonId) return; const confirmed = window.confirm('Delete this race?'); if (!confirmed) return; setDeletingRaceId(raceId); try { const result = await deleteRaceAction(leagueId, selectedSeasonId, raceId); if (result.isOk()) { router.refresh(); } else { alert(result.getError()); } } finally { setDeletingRaceId(null); } }; const handleCancelEdit = () => { setEditingRaceId(null); setTrack(''); setCar(''); setScheduledAtIso(''); }; // Derived states const isLoading = isAdminLoading || seasonsLoading || scheduleLoading; // Prepare template data const templateData = schedule && seasonsData && selectedSeasonId ? { published: schedule.published, races: schedule.races.map(r => ({ id: r.id, name: r.name, track: r.track || '', car: r.car || '', scheduledAt: r.scheduledAt.toISOString(), })), seasons: seasonsData.map(s => ({ seasonId: s.seasonId, name: s.name, })), seasonId: selectedSeasonId, } : undefined; // Render admin access required if not admin if (!isLoading && !isAdmin) { return ( Admin Access Required Only league admins can manage the schedule. ); } // Template component that wraps the actual template with all props const TemplateWrapper = ({ data }: { data: typeof templateData }) => { if (!data) return null; return ( ); }; return ( ); }