'use client';

import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Grid } from '@/ui/primitives/Grid';
import { Stack } from '@/ui/primitives/Stack';
import { Surface } from '@/ui/primitives/Surface';
import { Text } from '@/ui/Text';
import { CalendarDays, Clock, Flag, LucideIcon, Trophy, Zap } from 'lucide-react';

interface RacePageHeaderProps {
  totalCount: number;
  scheduledCount: number;
  runningCount: number;
  completedCount: number;
}

export function RacePageHeader({
  totalCount,
  scheduledCount,
  runningCount,
  completedCount,
}: RacePageHeaderProps) {
  return (
    <Surface 
      bg="bg-surface-charcoal" 
      rounded="xl" 
      border 
      borderColor="border-outline-steel" 
      padding={6}
      position="relative"
      overflow="hidden"
    >
      {/* Background Accent */}
      <Stack 
        position="absolute" 
        top={0} 
        left={0} 
        right={0} 
        height="1" 
        bg="bg-primary-accent"
      />

      <Stack gap={6}>
        <Stack gap={2}>
          <Stack direction="row" align="center" gap={3}>
            <Icon icon={Flag} size={6} color="var(--primary-accent)" />
            <Heading level={1}>RACE DASHBOARD</Heading>
          </Stack>
          <Text color="text-gray-400" size="sm">
            Precision tracking for upcoming sessions and live events.
          </Text>
        </Stack>

        <Grid cols={2} mdCols={4} gap={4}>
          <StatItem icon={CalendarDays} label="TOTAL SESSIONS" value={totalCount} />
          <StatItem icon={Clock} label="SCHEDULED" value={scheduledCount} color="text-primary-accent" />
          <StatItem icon={Zap} label="LIVE NOW" value={runningCount} color="text-success-green" />
          <StatItem icon={Trophy} label="COMPLETED" value={completedCount} color="text-gray-400" />
        </Grid>
      </Stack>
    </Surface>
  );
}

function StatItem({ icon, label, value, color = 'text-white' }: { icon: LucideIcon, label: string, value: number, color?: string }) {
  return (
    <Stack p={4} bg="bg-base-black" bgOpacity={0.5} border borderColor="border-outline-steel">
      <Stack gap={1}>
        <Stack direction="row" align="center" gap={2}>
          <Icon icon={icon} size={3} color={color === 'text-white' ? '#9ca3af' : undefined} groupHoverTextColor={color !== 'text-white' ? color : undefined} />
          <Text size="xs" color="text-gray-500" weight="bold" uppercase>{label}</Text>
        </Stack>
        <Text size="2xl" weight="bold" color={color}>{value}</Text>
      </Stack>
    </Stack>
  );
}