342 lines
12 KiB
TypeScript
342 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
import { useParams } from 'next/navigation';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import Card from '@/components/ui/Card';
|
|
import Button from '@/components/ui/Button';
|
|
import Breadcrumbs from '@/components/layout/Breadcrumbs';
|
|
import SponsorInsightsCard, { useSponsorMode, MetricBuilders, SlotTemplates } from '@/components/sponsors/SponsorInsightsCard';
|
|
import { getImageService } from '@/lib/di-container';
|
|
import { TeamMembersPresenter } from '@/lib/presenters/TeamMembersPresenter';
|
|
import TeamRoster from '@/components/teams/TeamRoster';
|
|
import TeamStandings from '@/components/teams/TeamStandings';
|
|
import TeamAdmin from '@/components/teams/TeamAdmin';
|
|
import JoinTeamButton from '@/components/teams/JoinTeamButton';
|
|
import {
|
|
getGetTeamDetailsUseCase,
|
|
getGetTeamMembersUseCase,
|
|
getTeamMembershipRepository,
|
|
} from '@/lib/di-container';
|
|
import { useEffectiveDriverId } from '@/lib/currentDriver';
|
|
import type { Team } from '@gridpilot/racing';
|
|
import { Users, Trophy, TrendingUp, Star, Zap } from 'lucide-react';
|
|
|
|
type TeamRole = 'owner' | 'manager' | 'driver';
|
|
|
|
interface TeamMembership {
|
|
driverId: string;
|
|
role: TeamRole;
|
|
joinedAt: Date;
|
|
}
|
|
|
|
type Tab = 'overview' | 'roster' | 'standings' | 'admin';
|
|
|
|
export default function TeamDetailPage() {
|
|
const params = useParams();
|
|
const teamId = params.id as string;
|
|
|
|
const [team, setTeam] = useState<Team | null>(null);
|
|
const [memberships, setMemberships] = useState<TeamMembership[]>([]);
|
|
const [activeTab, setActiveTab] = useState<Tab>('overview');
|
|
const [loading, setLoading] = useState(true);
|
|
const [isAdmin, setIsAdmin] = useState(false);
|
|
const currentDriverId = useEffectiveDriverId();
|
|
const isSponsorMode = useSponsorMode();
|
|
|
|
const loadTeamData = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const detailsUseCase = getGetTeamDetailsUseCase();
|
|
const membersUseCase = getGetTeamMembersUseCase();
|
|
|
|
await detailsUseCase.execute(teamId, currentDriverId);
|
|
const detailsPresenter = detailsUseCase.presenter;
|
|
const detailsViewModel = detailsPresenter
|
|
? (detailsPresenter as any).getViewModel?.() as { team: Team } | null
|
|
: null;
|
|
|
|
if (!detailsViewModel) {
|
|
setTeam(null);
|
|
setMemberships([]);
|
|
setIsAdmin(false);
|
|
return;
|
|
}
|
|
|
|
const teamMembersPresenter = new TeamMembersPresenter();
|
|
await membersUseCase.execute({ teamId }, teamMembersPresenter);
|
|
const membersViewModel = teamMembersPresenter.getViewModel();
|
|
|
|
const teamMemberships: TeamMembership[] = (membersViewModel?.members ?? []).map((m) => ({
|
|
driverId: m.driverId,
|
|
role: m.role as TeamRole,
|
|
joinedAt: new Date(m.joinedAt),
|
|
}));
|
|
|
|
const adminStatus =
|
|
teamMemberships.some(
|
|
(m: TeamMembership) =>
|
|
m.driverId === currentDriverId &&
|
|
(m.role === 'owner' || m.role === 'manager'),
|
|
) ?? false;
|
|
|
|
setTeam(detailsViewModel.team);
|
|
setMemberships(teamMemberships);
|
|
setIsAdmin(adminStatus);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [teamId, currentDriverId]);
|
|
|
|
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 membershipRepo = getTeamMembershipRepository();
|
|
const performer = await membershipRepo.getMembership(teamId, currentDriverId);
|
|
if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) {
|
|
throw new Error('Only owners or managers can remove members');
|
|
}
|
|
|
|
const membership = await membershipRepo.getMembership(teamId, driverId);
|
|
if (!membership) {
|
|
throw new Error('Member not found');
|
|
}
|
|
if (membership.role === 'owner') {
|
|
throw new Error('Cannot remove the team owner');
|
|
}
|
|
|
|
await membershipRepo.removeMembership(teamId, driverId);
|
|
handleUpdate();
|
|
} catch (error) {
|
|
alert(error instanceof Error ? error.message : 'Failed to remove member');
|
|
}
|
|
};
|
|
|
|
const handleChangeRole = async (driverId: string, newRole: TeamRole) => {
|
|
try {
|
|
const membershipRepo = getTeamMembershipRepository();
|
|
const performer = await membershipRepo.getMembership(teamId, currentDriverId);
|
|
if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) {
|
|
throw new Error('Only owners or managers can update roles');
|
|
}
|
|
|
|
const membership = await membershipRepo.getMembership(teamId, 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,
|
|
});
|
|
handleUpdate();
|
|
} catch (error) {
|
|
alert(error instanceof Error ? error.message : 'Failed to change role');
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="text-center text-gray-400">Loading team...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!team) {
|
|
return (
|
|
<div className="max-w-6xl mx-auto">
|
|
<Card>
|
|
<div className="text-center py-12">
|
|
<h2 className="text-2xl font-bold text-white mb-2">Team Not Found</h2>
|
|
<p className="text-gray-400 mb-6">
|
|
The team you're looking for doesn't exist or has been disbanded.
|
|
</p>
|
|
<Button variant="primary" onClick={() => window.history.back()}>
|
|
Go Back
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const tabs: { id: Tab; label: string; visible: boolean }[] = [
|
|
{ id: 'overview', label: 'Overview', visible: true },
|
|
{ id: 'roster', label: 'Roster', visible: true },
|
|
{ id: 'standings', label: 'Standings', visible: true },
|
|
{ id: 'admin', label: 'Admin', visible: isAdmin },
|
|
];
|
|
|
|
const visibleTabs = tabs.filter(tab => tab.visible);
|
|
|
|
// Build sponsor insights for team
|
|
const teamMetrics = [
|
|
MetricBuilders.members(memberships.length),
|
|
MetricBuilders.reach(memberships.length * 15),
|
|
MetricBuilders.races(team.leagues.length * 8),
|
|
MetricBuilders.engagement(82),
|
|
];
|
|
|
|
return (
|
|
<div className="max-w-6xl mx-auto">
|
|
{/* Breadcrumb */}
|
|
<Breadcrumbs
|
|
items={[
|
|
{ label: 'Home', href: '/' },
|
|
{ label: 'Teams', href: '/teams' },
|
|
{ label: team.name }
|
|
]}
|
|
/>
|
|
|
|
{/* Sponsor Insights Card - Consistent placement at top */}
|
|
{isSponsorMode && team && (
|
|
<SponsorInsightsCard
|
|
entityType="team"
|
|
entityId={team.id}
|
|
entityName={team.name}
|
|
tier="standard"
|
|
metrics={teamMetrics}
|
|
slots={SlotTemplates.team(true, true, 500, 250)}
|
|
trustScore={90}
|
|
monthlyActivity={85}
|
|
/>
|
|
)}
|
|
|
|
<Card className="mb-6">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-start gap-6">
|
|
<div className="w-24 h-24 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
|
|
<Image
|
|
src={getImageService().getTeamLogo(team.id)}
|
|
alt={team.name}
|
|
width={96}
|
|
height={96}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<h1 className="text-3xl font-bold text-white">{team.name}</h1>
|
|
<span className="px-3 py-1 bg-charcoal-outline text-gray-300 rounded-full text-sm font-medium">
|
|
{team.tag}
|
|
</span>
|
|
</div>
|
|
|
|
<p className="text-gray-300 mb-4 max-w-2xl">{team.description}</p>
|
|
|
|
<div className="flex items-center gap-4 text-sm text-gray-400">
|
|
<span>{memberships.length} {memberships.length === 1 ? 'member' : 'members'}</span>
|
|
<span>•</span>
|
|
<span>Created {new Date(team.createdAt).toLocaleDateString()}</span>
|
|
{team.leagues.length > 0 && (
|
|
<>
|
|
<span>•</span>
|
|
<span>{team.leagues.length} {team.leagues.length === 1 ? 'league' : 'leagues'}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<JoinTeamButton teamId={teamId} onUpdate={handleUpdate} />
|
|
</div>
|
|
</Card>
|
|
|
|
<div className="mb-6">
|
|
<div className="flex items-center gap-2 border-b border-charcoal-outline">
|
|
{visibleTabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`
|
|
px-4 py-3 font-medium transition-all relative
|
|
${activeTab === tab.id
|
|
? 'text-primary-blue'
|
|
: 'text-gray-400 hover:text-white'
|
|
}
|
|
`}
|
|
>
|
|
{tab.label}
|
|
{activeTab === tab.id && (
|
|
<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary-blue" />
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
{activeTab === 'overview' && (
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<Card className="lg:col-span-2">
|
|
<h3 className="text-xl font-semibold text-white mb-4">About</h3>
|
|
<p className="text-gray-300 leading-relaxed">{team.description}</p>
|
|
</Card>
|
|
|
|
<Card>
|
|
<h3 className="text-xl font-semibold text-white mb-4">Quick Stats</h3>
|
|
<div className="space-y-3">
|
|
<StatItem label="Members" value={memberships.length.toString()} color="text-primary-blue" />
|
|
<StatItem label="Leagues" value={team.leagues.length.toString()} color="text-green-400" />
|
|
<StatItem label="Founded" value={new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })} color="text-gray-300" />
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card>
|
|
<h3 className="text-xl font-semibold text-white mb-4">Recent Activity</h3>
|
|
<div className="text-center py-8 text-gray-400">
|
|
No recent activity to display
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'roster' && (
|
|
<TeamRoster
|
|
teamId={teamId}
|
|
memberships={memberships}
|
|
isAdmin={isAdmin}
|
|
onRemoveMember={handleRemoveMember}
|
|
onChangeRole={handleChangeRole}
|
|
/>
|
|
)}
|
|
|
|
{activeTab === 'standings' && (
|
|
<TeamStandings teamId={teamId} leagues={team.leagues} />
|
|
)}
|
|
|
|
{activeTab === 'admin' && isAdmin && (
|
|
<TeamAdmin team={team} onUpdate={handleUpdate} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StatItem({ label, value, color }: { label: string; value: string; color: string }) {
|
|
return (
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-gray-400 text-sm">{label}</span>
|
|
<span className={`font-semibold ${color}`}>{value}</span>
|
|
</div>
|
|
);
|
|
} |