'use client';

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

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

interface TeamLeaderboardInteractiveProps {
  teams: TeamSummaryViewModel[];
}

export default function TeamLeaderboardInteractive({ teams }: TeamLeaderboardInteractiveProps) {
  const router = useRouter();
  const [searchQuery, setSearchQuery] = useState('');
  const [filterLevel, setFilterLevel] = useState<SkillLevel | 'all'>('all');
  const [sortBy, setSortBy] = useState<SortBy>('rating');

  const handleTeamClick = (teamId: string) => {
    if (teamId.startsWith('demo-team-')) {
      return;
    }
    router.push(`/teams/${teamId}`);
  };

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

  return (
    <TeamLeaderboardTemplate
      teams={teams}
      searchQuery={searchQuery}
      filterLevel={filterLevel}
      sortBy={sortBy}
      onSearchChange={setSearchQuery}
      onFilterLevelChange={setFilterLevel}
      onSortChange={setSortBy}
      onTeamClick={handleTeamClick}
      onBackToTeams={handleBackToTeams}
    />
  );
}