'use client';

import React from 'react';
import { Award, ArrowLeft } from 'lucide-react';
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Container } from '@/ui/Container';
import { Icon } from '@/ui/Icon';
import { ModalIcon } from '@/ui/ModalIcon';
import { TeamPodium } from '@/ui/TeamPodium';
import { TeamFilter } from '@/ui/TeamFilter';
import { TeamRankingsTable } from '@/ui/TeamRankingsTable';
import type { TeamLeaderboardViewData, SkillLevel, SortBy } from '@/lib/view-data/TeamLeaderboardViewData';

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,
  filterLevelChange,
  onSortChange,
  onTeamClick,
  onBackToTeams,
}: TeamLeaderboardTemplateProps) {
  const { searchQuery, filterLevel, sortBy, filteredAndSortedTeams } = viewData;

  return (
    <Container size="lg" py={8}>
      <Stack gap={8}>
        {/* Header */}
        <Box>
          <Box mb={6}>
            <Button
              variant="secondary"
              onClick={onBackToTeams}
              icon={<Icon icon={ArrowLeft} size={4} />}
            >
              Back to Teams
            </Button>
          </Box>

          <Stack direction="row" align="center" gap={4}>
            <ModalIcon 
              icon={Award} 
              color="text-yellow-400" 
              bgColor="bg-yellow-400/10" 
              borderColor="border-yellow-400/30" 
            />
            <Box>
              <Heading level={1}>Team Leaderboard</Heading>
              <Text color="text-gray-400" block mt={1}>Rankings of all teams by performance metrics</Text>
            </Box>
          </Stack>
        </Box>

        {/* Filters and Search */}
        <TeamFilter
          searchQuery={searchQuery}
          onSearchChange={onSearchChange}
          filterLevel={filterLevel}
          onFilterLevelChange={filterLevelChange}
          sortBy={sortBy}
          onSortChange={onSortChange}
        />

        {/* Podium for Top 3 */}
        {sortBy === 'rating' && filterLevel === 'all' && !searchQuery && filteredAndSortedTeams.length >= 3 && (
          <TeamPodium teams={filteredAndSortedTeams} onClick={onTeamClick} />
        )}

        {/* Leaderboard Table */}
        <TeamRankingsTable 
          teams={filteredAndSortedTeams} 
          sortBy={sortBy} 
          onTeamClick={onTeamClick} 
        />
      </Stack>
    </Container>
  );
}