'use client';

import { Icon } from '@/ui/Icon';
import { ProgressBar } from '@/ui/ProgressBar';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { Trophy } from 'lucide-react';

interface SeasonProgressWidgetProps {
  completedRaces: number;
  totalRaces: number;
  percentage: number;
}

export function SeasonProgressWidget({
  completedRaces,
  totalRaces,
  percentage,
}: SeasonProgressWidgetProps) {
  return (
    <Surface
      variant="precision"
      rounded="xl"
      padding={6}
      data-testid="season-progress-bar"
    >
      <Stack gap={4}>
        {/* Header */}
        <Stack direction="row" align="center" gap={3}>
          <Stack
            display="flex"
            h="10"
            w="10"
            alignItems="center"
            justifyContent="center"
            rounded="lg"
            bg="bg-success-green/10"
          >
            <Icon icon={Trophy} size={4} intent="success" />
          </Stack>
          <Stack gap={0}>
            <Text size="sm" weight="bold" variant="high" block>
              Season Progress
            </Text>
            <Text size="xs" variant="low" block>
              Race {completedRaces} of {totalRaces}
            </Text>
          </Stack>
        </Stack>

        {/* Progress Bar */}
        <Stack gap={2}>
          <ProgressBar
            value={percentage}
            intent="success"
            size="lg"
          />
          <Stack direction="row" justify="between" align="center">
            <Text size="xs" variant="low">
              {percentage}% Complete
            </Text>
            <Text size="xs" variant="success" weight="bold">
              {completedRaces}/{totalRaces} Races
            </Text>
          </Stack>
        </Stack>

        {/* Visual Indicator */}
        <Stack
          rounded="lg"
          bg="bg-success-green/10"
          border
          borderColor="border-success-green/30"
          p={3}
        >
          <Text size="xs" variant="success" weight="medium" block>
            {percentage >= 100
              ? 'Season Complete! 🏆'
              : percentage >= 50
              ? 'Over halfway there! 🚀'
              : 'Season underway! 🏁'}
          </Text>
        </Stack>
      </Stack>
    </Surface>
  );
}