'use client';

import { EmptyState } from '@/components/shared/state/EmptyState';
import { TeamCard } from '@/components/teams/TeamCardWrapper';
import { TeamGrid } from '@/components/teams/TeamGrid';
import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreviewWrapper';
import { TeamsDirectoryHeader } from '@/components/teams/TeamsDirectoryHeader';
import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';
import { Container } from '@/ui/Container';
import { Box } from '@/ui/primitives/Box';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { Users } from 'lucide-react';

interface TeamsTemplateProps {
  viewData: TeamsViewData;
  onTeamClick?: (teamId: string) => void;
  onViewFullLeaderboard: () => void;
  onCreateTeam: () => void;
}

export function TeamsTemplate({ viewData, onTeamClick, onViewFullLeaderboard, onCreateTeam }: TeamsTemplateProps) {
  const { teams } = viewData;

  return (
    <Box as="main" bg="base-black" minH="screen">
      <Container size="lg" py={12}>
        <Stack gap={10}>
          <TeamsDirectoryHeader onCreateTeam={onCreateTeam} />

          <Box>
            <Stack direction="row" align="center" gap={2} mb={6}>
              <Box w="2" h="2" bg="primary-accent" />
              <Text size="xs" weight="bold" color="text-gray-400" uppercase>Active Rosters</Text>
            </Stack>
            
            {teams.length > 0 ? (
              <TeamGrid>
                {teams.map((team) => (
                  <TeamCard
                    key={team.teamId}
                    id={team.teamId}
                    name={team.teamName}
                    memberCount={team.memberCount}
                    logo={team.logoUrl}
                    onClick={() => onTeamClick?.(team.teamId)}
                  />
                ))}
              </TeamGrid>
            ) : (
              <EmptyState
                icon={Users}
                title="No teams yet"
                description="Get started by creating your first racing team"
                action={{
                  label: 'Create Team',
                  onClick: onCreateTeam,
                  variant: 'primary'
                }}
              />
            )}
          </Box>

          {/* Team Leaderboard Preview */}
          <Box pt={10} borderTop borderColor="outline-steel" borderOpacity={0.3}>
            <Stack direction="row" align="center" gap={2} mb={6}>
              <Box w="2" h="2" bg="telemetry-aqua" />
              <Text size="xs" weight="bold" color="text-gray-400" uppercase>Global Standings</Text>
            </Stack>
            <TeamLeaderboardPreview 
              topTeams={[]} 
              onTeamClick={(id) => onTeamClick?.(id)} 
              onViewFullLeaderboard={onViewFullLeaderboard}
            />
          </Box>
        </Stack>
      </Container>
    </Box>
  );
}