'use client';

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 { TeamsDirectory, TeamsDirectorySection } from '@/components/teams/TeamsDirectory';
import { SharedEmptyState } from '@/components/shared/UIComponents';
import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';
import { Users } from 'lucide-react';
import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';

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

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

  return (
    <TeamsDirectory>
      <TeamsDirectoryHeader onCreateTeam={onCreateTeam} />

      <TeamsDirectorySection title="Active Rosters" accentColor="primary-accent">
        {teams.length > 0 ? (
          <TeamGrid>
            {teams.map((team) => (
              <TeamCard
                key={team.teamId}
                id={team.teamId}
                name={team.teamName}
                memberCount={team.memberCount}
                logo={team.logoUrl}
                ratingLabel={team.ratingLabel}
                winsLabel={team.winsLabel}
                racesLabel={team.racesLabel}
                onClick={() => onTeamClick?.(team.teamId)}
              />
            ))}
          </TeamGrid>
        ) : (
          <SharedEmptyState
            icon={Users}
            title="No teams yet"
            description="Get started by creating your first racing team"
            action={{
              label: 'Create Team',
              onClick: onCreateTeam,
              variant: 'primary'
            }}
          />
        )}
      </TeamsDirectorySection>

      <TeamsDirectorySection title="Global Standings" accentColor="telemetry-aqua">
        <TeamLeaderboardPreview 
          topTeams={[]} 
          onTeamClick={(id) => onTeamClick?.(id)} 
          onViewFullLeaderboard={onViewFullLeaderboard}
        />
      </TeamsDirectorySection>
    </TeamsDirectory>
  );
}