'use client';

import React from 'react';
import { Trophy, ChevronLeft } from 'lucide-react';
import { Container } from '@/ui/Container';
import { PageHeader } from '@/ui/PageHeader';
import { RankingsPodium } from '@/components/leaderboards/RankingsPodium';
import { RankingsTable } from '@/components/leaderboards/RankingsTable';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { LeaderboardFiltersBar } from '@/components/leaderboards/LeaderboardFiltersBar';
import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';

interface DriverRankingsTemplateProps {
  viewData: DriverRankingsViewData;
  searchQuery: string;
  onSearchChange: (query: string) => void;
  onDriverClick?: (id: string) => void;
  onBackToLeaderboards?: () => void;
}

export function DriverRankingsTemplate({
  viewData,
  searchQuery,
  onSearchChange,
  onDriverClick,
  onBackToLeaderboards,
}: DriverRankingsTemplateProps): React.ReactElement {
  return (
    <Container size="lg" py={8}>
      <PageHeader
        title="Driver Leaderboard"
        description="Full rankings of all drivers by performance metrics"
        icon={Trophy}
        action={
          onBackToLeaderboards && (
            <Button 
              variant="secondary" 
              onClick={onBackToLeaderboards} 
              icon={<Icon icon={ChevronLeft} size={4} />}
            >
              Back to Leaderboards
            </Button>
          )
        }
      />

      {/* Top 3 Podium */}
      {viewData.podium.length > 0 && !searchQuery && (
        <RankingsPodium 
          podium={viewData.podium.map(d => ({
            ...d,
            rating: Number(d.rating),
            wins: Number(d.wins),
            podiums: Number(d.podiums)
          }))} 
          onDriverClick={onDriverClick} 
        />
      )}

      <LeaderboardFiltersBar 
        searchQuery={searchQuery}
        onSearchChange={onSearchChange}
        placeholder="Search drivers..."
      />

      {/* Leaderboard Table */}
      <RankingsTable 
        drivers={viewData.drivers.map(d => ({
          ...d,
          rating: Number(d.rating),
          wins: Number(d.wins)
        }))} 
        onDriverClick={onDriverClick} 
      />
    </Container>
  );
}