'use client';

import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { TeamRankingsTemplate } from '@/templates/TeamRankingsTemplate';
import { routes } from '@/lib/routing/RouteConfig';
import type { TeamRankingsViewData } from '@/lib/view-data/TeamRankingsViewData';
import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';

export function TeamRankingsPageClient({ viewData }: ClientWrapperProps<TeamRankingsViewData>) {
  const router = useRouter();
  const [searchQuery, setSearchQuery] = useState('');

  const handleTeamClick = (id: string) => {
    router.push(routes.team.detail(id));
  };

  const handleBackToLeaderboards = () => {
    router.push(routes.leaderboards.root);
  };

  const filteredTeams = viewData.teams.filter(team => 
    team.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    team.tag.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <TeamRankingsTemplate
      viewData={{
        ...viewData,
        teams: filteredTeams
      }}
      searchQuery={searchQuery}
      onSearchChange={setSearchQuery}
      onTeamClick={handleTeamClick}
      onBackToLeaderboards={handleBackToLeaderboards}
    />
  );
}