import { PageWrapper } from '@/components/shared/state/PageWrapper';
import LeaderboardsTemplate from '@/templates/LeaderboardsTemplate';
import { PageDataFetcher } from '@/lib/page/PageDataFetcher';
import { DRIVER_SERVICE_TOKEN, TEAM_SERVICE_TOKEN } from '@/lib/di/tokens';
import { DriverService } from '@/lib/services/drivers/DriverService';
import { TeamService } from '@/lib/services/teams/TeamService';
import { Trophy } from 'lucide-react';
import { redirect , useRouter } from 'next/navigation';
import type { DriverLeaderboardViewModel } from '@/lib/view-models/DriverLeaderboardViewModel';
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';

// ============================================================================
// TYPES
// ============================================================================

interface LeaderboardsPageData {
  drivers: DriverLeaderboardViewModel | null;
  teams: TeamSummaryViewModel[] | null;
}

// ============================================================================
// WRAPPER COMPONENT
// ============================================================================

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

  const drivers = data.drivers?.drivers || [];
  const teams = data.teams || [];

  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');
  };

  return (
    <LeaderboardsTemplate
      drivers={drivers}
      teams={teams}
      onDriverClick={handleDriverClick}
      onTeamClick={handleTeamClick}
      onNavigateToDrivers={handleNavigateToDrivers}
      onNavigateToTeams={handleNavigateToTeams}
    />
  );
}

// ============================================================================
// MAIN PAGE COMPONENT
// ============================================================================

export default async function LeaderboardsPage() {
  // Fetch data using PageDataFetcher with proper type annotations
  const [driverData, teamsData] = await Promise.all([
    PageDataFetcher.fetch<DriverService, 'getDriverLeaderboard'>(
      DRIVER_SERVICE_TOKEN,
      'getDriverLeaderboard'
    ),
    PageDataFetcher.fetch<TeamService, 'getAllTeams'>(
      TEAM_SERVICE_TOKEN,
      'getAllTeams'
    ),
  ]);

  // Prepare data for template
  const data: LeaderboardsPageData = {
    drivers: driverData as DriverLeaderboardViewModel | null,
    teams: teamsData as TeamSummaryViewModel[] | null,
  };

  const hasData = (driverData as any)?.drivers?.length > 0 || (teamsData as any)?.length > 0;

  // Handle loading state (should be fast since we're using async/await)
  const isLoading = false;
  const error = null;
  const retry = async () => {
    // In server components, we can't retry without a reload
    // This would typically trigger a page reload
    redirect('/leaderboards');
  };

  return (
    <PageWrapper
      data={hasData ? data : null}
      isLoading={isLoading}
      error={error}
      retry={retry}
      Template={LeaderboardsPageWrapper}
      loading={{ variant: 'full-screen', message: 'Loading leaderboards...' }}
      errorConfig={{ variant: 'full-screen' }}
      empty={{
        icon: Trophy,
        title: 'No leaderboard data',
        description: 'There is no leaderboard data available at the moment.',
      }}
    />
  );
}