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

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 || [];

  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>

      <Box border borderColor="zinc-800" bg="zinc-900/30" overflow="hidden">
        <table className="w-full text-left border-collapse">
          <thead>
            <tr className="border-b border-zinc-800 bg-zinc-900/50">
              <th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-zinc-500">Driver</th>
              <th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-zinc-500">Role</th>
              <th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-zinc-500">Joined</th>
            </tr>
          </thead>
          <tbody>
            {members.map((member) => (
              <tr key={member.driverId} className="border-b border-zinc-800/50 hover:bg-zinc-800/30 transition-colors">
                <td className="px-6 py-4">
                  <Box display="flex" alignItems="center" gap={3}>
                    <Box w="8" h="8" bg="zinc-800" rounded="full" />
                    <Text weight="bold" color="text-white">{member.driver.name}</Text>
                  </Box>
                </td>
                <td className="px-6 py-4">
                  <Text size="xs" color="text-zinc-400" uppercase weight="bold">{member.role}</Text>
                </td>
                <td className="px-6 py-4">
                  <Text size="sm" color="text-zinc-500">{new Date(member.joinedAt).toLocaleDateString()}</Text>
                </td>
              </tr>
            ))}
            {members.length === 0 && (
              <tr>
                <td colSpan={3} className="px-6 py-12 text-center">
                  <Text color="text-zinc-600" italic>No members found in this league.</Text>
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </Box>
    </Stack>
  );
}