'use client';

import React from 'react';
import { Users } from 'lucide-react';
import { TeamLeaderboardPreview } from '@/ui/TeamLeaderboardPreviewWrapper';
import { Button } from '@/ui/Button';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Container } from '@/ui/Container';
import { Grid } from '@/ui/Grid';
import { TeamCard } from '@/ui/TeamCardWrapper';
import { EmptyState } from '@/ui/EmptyState';
import type { TeamSummaryData, TeamsViewData } from '@/lib/view-data/TeamsViewData';

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">
      <Container size="lg" py={8}>
        <Stack gap={8}>
          {/* Header */}
          <Stack direction="row" align="center" justify="between" wrap gap={4}>
            <Box>
              <Heading level={1}>Teams</Heading>
              <Text color="text-gray-400">Browse and manage your racing teams</Text>
            </Box>
            <Box>
              <Button variant="primary" onClick={onCreateTeam}>Create Team</Button>
            </Box>
          </Stack>

          {/* Teams Grid */}
          {teams.length > 0 ? (
            <Grid cols={3} gap={6}>
              {teams.map((team: TeamSummaryData) => (
                <TeamCard 
                  key={team.teamId} 
                  id={team.teamId}
                  name={team.teamName}
                  logo={team.logoUrl}
                  memberCount={team.memberCount}
                  leagues={[team.leagueName]}
                  onClick={() => onTeamClick?.(team.teamId)}
                />
              ))}
            </Grid>
          ) : (
            <EmptyState
              icon={Users}
              title="No teams yet"
              description="Get started by creating your first racing team"
              action={{
                label: 'Create Team',
                onClick: onCreateTeam,
                variant: 'primary'
              }}
            />
          )}

          {/* Team Leaderboard Preview */}
          <Box mt={12}>
            <TeamLeaderboardPreview 
              topTeams={[]} 
              onTeamClick={(id) => onTeamClick?.(id)} 
              onViewFullLeaderboard={onViewFullLeaderboard}
            />
          </Box>
        </Stack>
      </Container>
    </Box>
  );
}