'use client'; import { useState, useEffect, useCallback } from 'react'; import { useParams, useRouter } from 'next/navigation'; import TeamDetailTemplate from '@/templates/TeamDetailTemplate'; import { useServices } from '@/lib/services/ServiceProvider'; import { TeamDetailsViewModel } from '@/lib/view-models/TeamDetailsViewModel'; import { TeamMemberViewModel } from '@/lib/view-models/TeamMemberViewModel'; import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId'; type Tab = 'overview' | 'roster' | 'standings' | 'admin'; export default function TeamDetailInteractive() { const params = useParams(); const teamId = params.id as string; const { teamService } = useServices(); const router = useRouter(); const currentDriverId = useEffectiveDriverId(); const [team, setTeam] = useState(null); const [memberships, setMemberships] = useState([]); const [activeTab, setActiveTab] = useState('overview'); const [loading, setLoading] = useState(true); const [isAdmin, setIsAdmin] = useState(false); const loadTeamData = useCallback(async () => { setLoading(true); try { const teamDetails = await teamService.getTeamDetails(teamId, currentDriverId); if (!teamDetails) { setTeam(null); setMemberships([]); setIsAdmin(false); return; } const teamMembers = await teamService.getTeamMembers(teamId, currentDriverId, teamDetails.ownerId); const adminStatus = teamDetails.isOwner || teamMembers.some((m) => m.driverId === currentDriverId && (m.role === 'manager' || m.role === 'owner')); setTeam(teamDetails); setMemberships(teamMembers); setIsAdmin(adminStatus); } finally { setLoading(false); } }, [teamId, currentDriverId, teamService]); useEffect(() => { void loadTeamData(); }, [loadTeamData]); const handleUpdate = () => { loadTeamData(); }; const handleRemoveMember = async (driverId: string) => { if (!confirm('Are you sure you want to remove this member?')) { return; } try { const performer = await teamService.getMembership(teamId, currentDriverId); if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) { throw new Error('Only owners or admins can remove members'); } const membership = await teamService.getMembership(teamId, driverId); if (!membership) { throw new Error('Member not found'); } if (membership.role === 'owner') { throw new Error('Cannot remove the team owner'); } await teamService.removeMembership(teamId, driverId); handleUpdate(); } catch (error) { alert(error instanceof Error ? error.message : 'Failed to remove member'); } }; const handleChangeRole = async (driverId: string, newRole: 'owner' | 'admin' | 'member') => { try { const performer = await teamService.getMembership(teamId, currentDriverId); if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) { throw new Error('Only owners or admins can update roles'); } const membership = await teamService.getMembership(teamId, driverId); if (!membership) { throw new Error('Member not found'); } if (membership.role === 'owner') { throw new Error('Cannot change the owner role'); } // Convert 'admin' to 'manager' for the service const serviceRole = newRole === 'admin' ? 'manager' : newRole; await teamService.updateMembership(teamId, driverId, serviceRole); handleUpdate(); } catch (error) { alert(error instanceof Error ? error.message : 'Failed to change role'); } }; const handleGoBack = () => { window.history.back(); }; return ( ); }