'use client';

import React from 'react';
import { Users, Trophy, LucideIcon } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Button } from '@/ui/Button';
import { Surface } from '@/ui/Surface';
import { Icon } from '@/ui/Icon';
import { DecorativeBlur } from '@/ui/DecorativeBlur';

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

function StatItem({ label, value, color, animate }: StatItemProps) {
  return (
    <Stack direction="row" align="center" gap={2}>
      <Box style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', backgroundColor: color }} className={animate ? 'animate-pulse' : ''} />
      <Text size="sm" color="text-gray-400">
        <Text weight="semibold" color="text-white">{value}</Text> {label}
      </Text>
    </Stack>
  );
}

interface DriversHeroProps {
  driverCount: number;
  activeCount: number;
  totalWins: number;
  totalRaces: number;
  onViewLeaderboard: () => void;
}

export function DriversHero({
  driverCount,
  activeCount,
  totalWins,
  totalRaces,
  onViewLeaderboard,
}: DriversHeroProps) {
  return (
    <Surface variant="muted" rounded="2xl" border padding={8} style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.2), rgba(38, 38, 38, 0.8), #0f1115)', borderColor: 'rgba(59, 130, 246, 0.3)' }}>
      <DecorativeBlur color="blue" size="lg" position="top-right" opacity={10} />
      <DecorativeBlur color="yellow" size="md" position="bottom-left" opacity={5} />

      <Stack direction="row" align="center" justify="between" wrap gap={8} style={{ position: 'relative', zIndex: 10 }}>
        <Box style={{ maxWidth: '42rem' }}>
          <Stack direction="row" align="center" gap={3} mb={4}>
            <Surface variant="muted" rounded="xl" padding={3} style={{ background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05))', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
              <Icon icon={Users} size={6} color="#3b82f6" />
            </Surface>
            <Heading level={1}>Drivers</Heading>
          </Stack>
          <Text size="lg" color="text-gray-400" block mb={6} style={{ lineHeight: 1.625 }}>
            Meet the racers who make every lap count. From rookies to champions, track their journey and see who's dominating the grid.
          </Text>

          {/* Quick Stats */}
          <Stack direction="row" gap={6} wrap>
            <StatItem label="drivers" value={driverCount} color="#3b82f6" />
            <StatItem label="active" value={activeCount} color="#10b981" animate />
            <StatItem label="total wins" value={totalWins.toLocaleString()} color="#f59e0b" />
            <StatItem label="races" value={totalRaces.toLocaleString()} color="#00f2ff" />
          </Stack>
        </Box>

        {/* CTA */}
        <Stack align="center" gap={4}>
          <Button
            variant="primary"
            onClick={onViewLeaderboard}
            icon={<Icon icon={Trophy} size={5} />}
          >
            View Leaderboard
          </Button>
          <Text size="xs" color="text-gray-500">See full driver rankings</Text>
        </Stack>
      </Stack>
    </Surface>
  );
}