import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
import type { SkillLevel, SortBy } from '@/lib/view-data/TeamLeaderboardViewData';
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
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 { Award, ChevronLeft, Users } from 'lucide-react';

interface TeamLeaderboardTemplateProps {
  viewData: {
    teams: TeamSummaryViewModel[];
    searchQuery: string;
    filterLevel: SkillLevel | 'all';
    sortBy: SortBy;
    filteredAndSortedTeams: TeamSummaryViewModel[];
  };
  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;

  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: 'rating', label: 'Rating' },
    { value: 'wins', label: 'Wins' },
    { value: 'winRate', label: 'Win Rate' },
    { value: 'races', label: 'Races' },
  ];

  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={onBackToTeams} icon={<Icon icon={ChevronLeft} size={4} />}>
              Back
            </Button>
            <Group direction="column">
              <Heading level={1} weight="bold">Team Standings</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={filterLevel}
              options={levelOptions}
              onChange={(e) => filterLevelChange(e.target.value as SkillLevel | 'all')}
            />
            <Select
              size="sm"
              value={sortBy}
              options={sortOptions}
              onChange={(e) => onSortChange(e.target.value as SortBy)}
            />
          </Group>
        </LeaderboardFiltersBar>

        <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>
              {filteredAndSortedTeams.length > 0 ? (
                filteredAndSortedTeams.map((team, index) => (
                  <TableRow 
                    key={team.id} 
                    onClick={() => onTeamClick(team.id)}
                    clickable
                  >
                    <TableCell>
                      <Text font="mono" weight="bold" variant={index < 3 ? 'warning' : 'low'}>
                        #{index + 1}
                      </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">{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">{team.memberCount}</Text>
                    </TableCell>
                    <TableCell textAlign="center">
                      <Text size="xs" variant="low" font="mono">{team.totalRaces}</Text>
                    </TableCell>
                    <TableCell textAlign="center">
                      <Text size="xs" variant="low" font="mono">{team.totalWins}</Text>
                    </TableCell>
                    <TableCell textAlign="right">
                      <Text font="mono" weight="bold" variant="primary">
                        {team.rating?.toFixed(0) || '1000'}
                      </Text>
                    </TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell colSpan={6} textAlign="center">
                    <Section variant="dark" padding="lg">
                      <Group align="center" justify="center" fullWidth>
                        <Text variant="low" font="mono" size="xs" uppercase letterSpacing="widest">
                          No teams found matching criteria
                        </Text>
                      </Group>
                    </Section>
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </Panel>
      </Group>
    </Section>
  );
}