'use client';

import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { Trophy, Users } from 'lucide-react';

interface DriverStat {
  label: string;
  value: string | number;
  color?: string;
  animate?: boolean;
}

interface DriversDirectoryHeaderProps {
  totalDrivers: number;
  activeDrivers: number;
  totalWins: number;
  totalRaces: number;
  onViewLeaderboard: () => void;
}

export function DriversDirectoryHeader({
  totalDrivers,
  activeDrivers,
  totalWins,
  totalRaces,
  onViewLeaderboard,
}: DriversDirectoryHeaderProps) {
  const stats: DriverStat[] = [
    { label: 'drivers', value: totalDrivers, color: 'text-primary-blue' },
    { label: 'active', value: activeDrivers, color: 'text-performance-green', animate: true },
    { label: 'total wins', value: totalWins.toLocaleString(), color: 'text-warning-amber' },
    { label: 'races', value: totalRaces.toLocaleString(), color: 'text-neon-aqua' },
  ];

  return (
    <Stack 
      as="header" 
      position="relative" 
      overflow="hidden" 
      rounded="2xl" 
      border 
      borderColor="border-charcoal-outline/50" 
      bg="bg-gradient-to-br from-iron-gray/80 via-deep-graphite to-iron-gray/60" 
      p={{ base: 8, lg: 10 }}
    >
      {/* Background Accents */}
      <Stack position="absolute" right="-24" top="-24" w="96" h="96" rounded="full" bg="bg-primary-blue/5" blur="3xl" />
      <Stack position="absolute" bottom="-16" left="-16" w="64" h="64" rounded="full" bg="bg-neon-aqua/5" blur="3xl" />

      <Stack position="relative" display="flex" flexDirection={{ base: 'col', lg: 'row' }} alignItems={{ lg: 'center' }} justifyContent="between" gap={8}>
        <Stack maxWidth="2xl">
          <Stack direction="row" align="center" gap={3} mb={4}>
            <Stack display="flex" h="12" w="12" alignItems="center" justifyContent="center" rounded="xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal" shadow="lg">
              <Users size={24} color="#198CFF" />
            </Stack>
            <Heading level={1}>Drivers</Heading>
          </Stack>
          
          <Text size="lg" color="text-gray-400" block leading="relaxed">
            Meet the racers who make every lap count. From rookies to champions, track their journey and see who&apos;s dominating the grid.
          </Text>

          <Stack display="flex" flexWrap="wrap" gap={6} mt={6}>
            {stats.map((stat, index) => (
              <Stack key={index} direction="row" align="center" gap={2}>
                <Stack 
                  w="2" 
                  h="2" 
                  rounded="full" 
                  bg={stat.color?.replace('text-', 'bg-') || 'bg-primary-blue'} 
                  animate={stat.animate ? 'pulse' : 'none'} 
                />
                <Text size="sm" color="text-gray-400">
                  <Text as="span" weight="semibold" color="text-white">{stat.value}</Text> {stat.label}
                </Text>
              </Stack>
            ))}
          </Stack>
        </Stack>

        <Stack gap={2}>
          <Button
            variant="primary"
            onClick={onViewLeaderboard}
            icon={<Trophy size={20} />}
          >
            View Leaderboard
          </Button>
          <Text size="xs" color="text-gray-500" align="center" block>
            See full driver rankings
          </Text>
        </Stack>
      </Stack>
    </Stack>
  );
}