'use client';

import React from 'react';
import { Trophy, ArrowLeft } from 'lucide-react';
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Container } from '@/ui/Container';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';
import { RankingsPodium } from '@/ui/RankingsPodium';
import { RankingsTable } from '@/ui/RankingsTable';

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

export function DriverRankingsTemplate({
  viewData,
  onDriverClick,
  onBackToLeaderboards,
}: DriverRankingsTemplateProps): React.ReactElement {
  return (
    <Container size="lg" py={8}>
      <Stack gap={8}>
        {/* Header */}
        <Box>
          {onBackToLeaderboards && (
            <Box mb={6}>
              <Button
                variant="secondary"
                onClick={onBackToLeaderboards}
                icon={<Icon icon={ArrowLeft} size={4} />}
              >
                Back to Leaderboards
              </Button>
            </Box>
          )}

          <Stack direction="row" align="center" gap={4}>
            <Surface variant="muted" rounded="xl" padding={3} bg="linear-gradient(to bottom right, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05))" border borderColor="border-blue-500/20">
              <Icon icon={Trophy} size={7} color="#3b82f6" />
            </Surface>
            <Box>
              <Heading level={1}>Driver Leaderboard</Heading>
              <Text color="text-gray-400" block mt={1}>Full rankings of all drivers by performance metrics</Text>
            </Box>
          </Stack>
        </Box>

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

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