'use client';

import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
import type { SkillLevel, SortBy, TeamLeaderboardViewData } from '@/lib/view-data/TeamLeaderboardViewData';
import { Button } from '@/ui/Button';
import { Container } from '@/ui/Container';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Box } from '@/ui/primitives/Box';
import { Stack } from '@/ui/primitives/Stack';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { Award, ChevronLeft } from 'lucide-react';

interface TeamLeaderboardTemplateProps {
  viewData: TeamLeaderboardViewData;
  onSearchChange: (query: string) => void;
  filterLevelChange: (level: SkillLevel | 'all') => void;
  onSortChange: (sort: SortBy) => void;
  onTeamClick: (id: string) => void;
  onBackToTeams: () => void;
}

export function TeamLeaderboardTemplate({
  viewData,
  onSearchChange,
  onTeamClick,
  onBackToTeams,
}: TeamLeaderboardTemplateProps) {
  const { searchQuery, filteredAndSortedTeams } = viewData;

  return (
    <Box bg="base-black" minH="screen">
      <Container size="lg" py={12}>
        <Stack gap={8}>
          {/* Header */}
          <Stack direction="row" align="center" justify="between">
            <Stack direction="row" align="center" gap={4}>
              <Button variant="secondary" size="sm" onClick={onBackToTeams} icon={<Icon icon={ChevronLeft} size={4} />}>
                Back
              </Button>
              <Box>
                <Heading level={1} weight="bold">Global Standings</Heading>
                <Text color="text-gray-500" size="sm" font="mono" uppercase letterSpacing="widest">Team Performance Index</Text>
              </Box>
            </Stack>
            <Icon icon={Award} size={8} color="warning-amber" />
          </Stack>

          <LeaderboardFiltersBar
            searchQuery={searchQuery}
            onSearchChange={onSearchChange}
            placeholder="Search teams..."
          />

          <Box border borderColor="outline-steel" bg="surface-charcoal/30">
            <Table>
              <TableHead>
                <TableRow>
                  <TableHeader w="20">Rank</TableHeader>
                  <TableHeader>Team</TableHeader>
                  <TableHeader textAlign="center">Personnel</TableHeader>
                  <TableHeader textAlign="center">Races</TableHeader>
                  <TableHeader textAlign="right">Rating</TableHeader>
                </TableRow>
              </TableHead>
              <TableBody>
                {filteredAndSortedTeams.length > 0 ? (
                  filteredAndSortedTeams.map((team, index) => (
                    <TableRow 
                      key={team.id} 
                      onClick={() => onTeamClick(team.id)}
                      cursor="pointer"
                      hoverBg="surface-charcoal/50"
                    >
                      <TableCell>
                        <Text font="mono" weight="bold" color={index < 3 ? 'warning-amber' : 'text-gray-500'}>
                          #{index + 1}
                        </Text>
                      </TableCell>
                      <TableCell>
                        <Stack direction="row" align="center" gap={3}>
                          <Box w="8" h="8" bg="base-black" border borderColor="outline-steel" display="flex" center>
                            <Text size="xs" weight="bold" color="primary-accent">{team.name.substring(0, 2).toUpperCase()}</Text>
                          </Box>
                          <Text weight="bold" size="sm" color="text-white">{team.name}</Text>
                        </Stack>
                      </TableCell>
                      <TableCell textAlign="center">
                        <Text size="xs" color="text-gray-400" font="mono">{team.memberCount}</Text>
                      </TableCell>
                      <TableCell textAlign="center">
                        <Text size="xs" color="text-gray-400" font="mono">{team.totalRaces}</Text>
                      </TableCell>
                      <TableCell textAlign="right">
                        <Text font="mono" weight="bold" color="primary-accent">1450</Text>
                      </TableCell>
                    </TableRow>
                  ))
                ) : (
                  <TableRow>
                    <TableCell colSpan={5} textAlign="center" py={12}>
                      <Text color="text-gray-600" font="mono" size="xs" uppercase letterSpacing="widest">
                        No teams found matching criteria
                      </Text>
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </Box>
        </Stack>
      </Container>
    </Box>
  );
}