gridpilot.gg/apps/website/templates/TeamRankingsTemplate.tsx

import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
import type { LeaderboardTeamItem } from '@/lib/view-data/LeaderboardTeamItem';
import type { TeamRankingsViewData } from '@/lib/view-data/TeamRankingsViewData';
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Panel } from '@/ui/Panel';
import { Section } from '@/ui/Section';
import { Select } from '@/ui/Select';
import { Table, TableBody, TableCell, TableHead, TableRow } from '@/ui/Table';
import { Group } from '@/ui/Group';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Award, ChevronLeft, Users, ChevronRight } from 'lucide-react';
import React from 'react';

type SkillLevel = 'all' | 'pro' | 'advanced' | 'intermediate' | 'beginner';
type SortBy = 'rank' | 'rating' | 'wins' | 'memberCount';

interface TeamRankingsTemplateProps {
  viewData: TeamRankingsViewData;
  onSearchChange: (query: string) => void;
  onSkillChange: (level: SkillLevel) => void;
  onSortChange: (sort: SortBy) => void;
  onPageChange: (page: number) => void;
  currentPage: number;
  totalPages: number;
  totalTeams: number;
  onTeamClick: (id: string) => void;
  onBackToLeaderboards: () => void;
}

export function TeamRankingsTemplate({
  viewData,
  onSearchChange,
  onSkillChange,
  onSortChange,
  onPageChange,
  currentPage,
  totalPages,
  totalTeams,
  onTeamClick,
  onBackToLeaderboards,
}: TeamRankingsTemplateProps) {
  const { searchQuery, selectedSkill, sortBy, teams } = viewData;

  const levelOptions = [
    { value: 'all', label: 'All Levels' },
    { value: 'pro', label: 'Professional' },
    { value: 'advanced', label: 'Advanced' },
    { value: 'intermediate', label: 'Intermediate' },
    { value: 'beginner', label: 'Beginner' },
  ];

  const sortOptions = [
    { value: 'rank', label: 'Rank' },
    { value: 'rating', label: 'Rating' },
    { value: 'wins', label: 'Wins' },
    { value: 'memberCount', label: 'Members' },
  ];

  return (
    <Section variant="default" padding="lg">
      <Group direction="column" gap={8} fullWidth>
        {/* Header */}
        <Group direction="row" align="center" justify="between" fullWidth>
          <Group direction="row" align="center" gap={4}>
            <Button 
              variant="secondary" 
              size="sm" 
              onClick={onBackToLeaderboards} 
              icon={<Icon icon={ChevronLeft} size={4} />}
              data-testid="back-to-leaderboards"
            >
              Back
            </Button>
            <Group direction="column">
              <Heading level={1} weight="bold">Team Leaderboard</Heading>
              <Text variant="low" size="sm" font="mono" uppercase letterSpacing="widest">Global Performance Index</Text>
            </Group>
          </Group>
          <Icon icon={Award} size={8} intent="warning" />
        </Group>

        <LeaderboardFiltersBar
          searchQuery={searchQuery}
          onSearchChange={onSearchChange}
          placeholder="Search teams..."
        >
          <Group gap={4}>
            <Select
              size="sm"
              value={selectedSkill}
              options={levelOptions}
              onChange={(e) => onSkillChange(e.target.value as SkillLevel)}
              data-testid="skill-filter"
            />
            <Select
              size="sm"
              value={sortBy}
              options={sortOptions}
              onChange={(e) => onSortChange(e.target.value as SortBy)}
              data-testid="sort-filter"
            />
          </Group>
        </LeaderboardFiltersBar>

        <Box paddingY={2}>
          <Text variant="low" size="sm" data-testid="team-count">
            Showing {totalTeams} teams
          </Text>
        </Box>

        <Panel variant="dark" padding="none">
          <Table>
            <TableHead>
              <TableRow>
                <TableCell w="80px">Rank</TableCell>
                <TableCell>Team</TableCell>
                <TableCell textAlign="center">Personnel</TableCell>
                <TableCell textAlign="center">Races</TableCell>
                <TableCell textAlign="center">Wins</TableCell>
                <TableCell textAlign="right">Rating</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {teams.length > 0 ? (
                teams.map((team) => (
                  <TableRow 
                    key={team.id} 
                    onClick={() => onTeamClick(team.id)}
                    clickable
                    data-testid={`standing-team-${team.id}`}
                  >
                    <TableCell>
                      <Text font="mono" weight="bold" variant={team.position <= 3 ? 'warning' : 'low'} data-testid={`standing-position-${team.position}`}>
                        #{team.position}
                      </Text>
                    </TableCell>
                    <TableCell>
                      <Group direction="row" align="center" gap={3}>
                        <Panel variant="muted" padding="sm">
                          <Icon icon={Users} size={4} intent="low" />
                        </Panel>
                        <Group direction="column" gap={0}>
                          <Text weight="bold" size="sm" data-testid="team-name">{team.name}</Text>
                          <Text size="xs" variant="low" uppercase font="mono">{team.performanceLevel}</Text>
                        </Group>
                      </Group>
                    </TableCell>
                    <TableCell textAlign="center">
                      <Text size="xs" variant="low" font="mono" data-testid="team-member-count">{team.memberCount}</Text>
                    </TableCell>
                    <TableCell textAlign="center">
                      <Group direction="column" align="center" gap={0} data-testid="standing-stats">
                        <Text size="xs" variant="low" font="mono" data-testid="stat-races">{team.totalRaces}</Text>
                      </Group>
                    </TableCell>
                    <TableCell textAlign="center">
                      <Group direction="column" align="center" gap={0} data-testid="standing-stats">
                        <Text size="xs" variant="low" font="mono" data-testid="stat-wins">{team.totalWins}</Text>
                      </Group>
                    </TableCell>
                    <TableCell textAlign="right">
                      <Group direction="column" align="end" gap={0} data-testid="standing-stats">
                        <Text font="mono" weight="bold" variant="primary" data-testid="stat-rating">
                          {team.rating?.toFixed(0) || '1000'}
                        </Text>
                      </Group>
                    </TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell colSpan={6} textAlign="center">
                    <Box padding={12} data-testid="empty-state">
                      <Text variant="low" font="mono" size="xs" uppercase letterSpacing="widest">
                        No teams found matching criteria
                      </Text>
                    </Box>
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </Panel>

        {totalPages > 1 && (
          <Box paddingY={8}>
            <Group justify="center" gap={4} data-testid="pagination-controls">
              <Button
                variant="secondary"
                size="sm"
                disabled={currentPage === 1}
                onClick={() => onPageChange(currentPage - 1)}
                icon={<Icon icon={ChevronLeft} size={4} />}
                data-testid="prev-page"
              >
                Previous
              </Button>
              <Text variant="low" size="sm" font="mono">
                Page {currentPage} of {totalPages}
              </Text>
              <Button
                variant="secondary"
                size="sm"
                disabled={currentPage === totalPages}
                onClick={() => onPageChange(currentPage + 1)}
                icon={<Icon icon={ChevronRight} size={4} />}
                data-testid="next-page"
              >
                Next
              </Button>
            </Group>
          </Box>
        )}
      </Group>
    </Section>
  );
}