'use client';

import React, { useMemo } 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 { Surface } from '@/ui/Surface';
import TopThreePodium from '@/components/teams/TopThreePodium';
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
import TeamRankingsFilter from '@/components/TeamRankingsFilter';
import { TeamRankingsTable } from '@/components/teams/TeamRankingsTable';

type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
type SortBy = 'rating' | 'wins' | 'winRate' | 'races';

interface TeamLeaderboardTemplateProps {
  teams: TeamSummaryViewModel[];
  searchQuery: string;
  filterLevel: SkillLevel | 'all';
  sortBy: SortBy;
  onSearchChange: (query: string) => void;
  onFilterLevelChange: (level: SkillLevel | 'all') => void;
  onSortChange: (sort: SortBy) => void;
  onTeamClick: (id: string) => void;
  onBackToTeams: () => void;
}

export default function TeamLeaderboardTemplate({
  teams,
  searchQuery,
  filterLevel,
  sortBy,
  onSearchChange,
  onFilterLevelChange,
  onSortChange,
  onTeamClick,
  onBackToTeams,
}: TeamLeaderboardTemplateProps) {
  // Filter and sort teams
  const filteredAndSortedTeams = useMemo(() => {
    return teams
      .filter((team) => {
        if (searchQuery) {
          const query = searchQuery.toLowerCase();
          if (!team.name.toLowerCase().includes(query) && !(team.description ?? '').toLowerCase().includes(query)) {
            return false;
          }
        }
        if (filterLevel !== 'all' && team.performanceLevel !== filterLevel) {
          return false;
        }
        return true;
      })
      .sort((a, b) => {
        switch (sortBy) {
          case 'rating': return 0; // Placeholder
          case 'wins': return (b.totalWins || 0) - (a.totalWins || 0);
          case 'races': return (b.totalRaces || 0) - (a.totalRaces || 0);
          default: return 0;
        }
      });
  }, [teams, searchQuery, filterLevel, sortBy]);

  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}>
            <Surface variant="muted" rounded="xl" padding={3} style={{ background: 'linear-gradient(to bottom right, rgba(250, 204, 21, 0.2), rgba(217, 119, 6, 0.1))', border: '1px solid rgba(250, 204, 21, 0.3)' }}>
              <Icon icon={Award} size={7} color="#facc15" />
            </Surface>
            <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 */}
        <TeamRankingsFilter
          searchQuery={searchQuery}
          onSearchChange={onSearchChange}
          filterLevel={filterLevel}
          onFilterLevelChange={onFilterLevelChange}
          sortBy={sortBy}
          onSortChange={onSortChange}
        />

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

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