'use client';

import { useRouter } from 'next/navigation';
import LeaderboardsTemplate from '@/templates/LeaderboardsTemplate';
import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';

export function LeaderboardsPageWrapper({ data }: { data: LeaderboardsViewData | null }) {
  const router = useRouter();
  
  if (!data || (!data.drivers && !data.teams)) {
    return null;
  }

  const handleDriverClick = (driverId: string) => {
    router.push(`/drivers/${driverId}`);
  };

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

  const handleNavigateToDrivers = () => {
    router.push('/leaderboards/drivers');
  };

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

  // Transform ViewData to template props
  const templateData = {
    drivers: data.drivers.map(d => ({
      id: d.id,
      name: d.name,
      rating: d.rating,
      skillLevel: d.skillLevel,
      nationality: d.nationality,
      wins: d.wins,
      rank: d.rank,
      avatarUrl: d.avatarUrl,
      position: d.position,
    })),
    teams: data.teams.map(t => ({
      id: t.id,
      name: t.name,
      tag: t.tag,
      memberCount: t.memberCount,
      category: t.category,
      totalWins: t.totalWins,
      logoUrl: t.logoUrl,
      position: t.position,
    })),
    onDriverClick: handleDriverClick,
    onTeamClick: handleTeamClick,
    onNavigateToDrivers: handleNavigateToDrivers,
    onNavigateToTeams: handleNavigateToTeams,
  };

  return <LeaderboardsTemplate {...templateData} />;
}