'use client';

import { useRouter } from 'next/navigation';
import { TeamLeaderboardTemplate } from '@/templates/TeamLeaderboardTemplate';
import { useState } from 'react';
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';

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

export function TeamLeaderboardPageWrapper({ data }: { data: TeamSummaryViewModel[] | null }) {
  const router = useRouter();
  
  // Client-side UI state only (no business logic)
  const [searchQuery, setSearchQuery] = useState('');
  const [filterLevel, setFilterLevel] = useState<SkillLevel | 'all'>('all');
  const [sortBy, setSortBy] = useState<SortBy>('rating');

  if (!data || data.length === 0) {
    return null;
  }

  const handleTeamClick = (teamId: string) => {
    router.push(`/teams/${teamId}`);
  };

  const handleBackToTeams = () => {
    router.push('/teams');
  };

  const viewData = {
    teams: data,
    searchQuery,
    filterLevel,
    sortBy,
    filteredAndSortedTeams: data,
  };

  return (
    <TeamLeaderboardTemplate
      viewData={viewData}
      onSearchChange={setSearchQuery}
      filterLevelChange={setFilterLevel}
      onSortChange={setSortBy}
      onTeamClick={handleTeamClick}
      onBackToTeams={handleBackToTeams}
    />
  );
}