import { RosterTable } from '@/components/leagues/RosterTable';
import { LeagueDetailPageQuery } from '@/lib/page-queries/LeagueDetailPageQuery';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { notFound } from 'next/navigation';

import { DateFormatter } from '@/lib/formatters/DateFormatter';

interface Props {
  params: Promise<{ id: string }>;
}

export default async function LeagueRosterPage({ params }: Props) {
  const { id: leagueId } = await params;
  const result = await LeagueDetailPageQuery.execute(leagueId);

  if (result.isErr()) {
    notFound();
  }

  const data = result.unwrap();
  const members = (data.memberships.members || []).map((m: any) => ({
    driverId: m.driverId,
    driverName: m.driver.name,
    role: m.role,
    joinedAt: m.joinedAt,
    joinedAtLabel: DateFormatter.formatShort(m.joinedAt)
  }));

  return (
    <Stack gap={8}>
      <Box as="header" display="flex" flexDirection="col" gap={2}>
        <Text as="h2" size="xl" weight="bold" color="text-white" uppercase letterSpacing="tight">League Roster</Text>
        <Text size="sm" color="text-zinc-500">All drivers currently registered in this league.</Text>
      </Box>

      <RosterTable members={members} />
      <Box data-testid="admin-actions" display="none" />
      <Box data-testid="driver-card" display="none" />
    </Stack>
  );
}