import { Box } from '@/ui/Box';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { RatingComponent } from '@/components/drivers/RatingComponent';
import { RatingHistoryItem } from '@/components/drivers/RatingHistoryItem';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';

interface RatingBreakdownProps {
  skillRating?: number;
  safetyRating?: number;
  sportsmanshipRating?: number;
}

export function RatingBreakdown({ 
  skillRating = 1450,
  safetyRating = 92,
  sportsmanshipRating = 4.8
}: RatingBreakdownProps) {
  return (
    <Stack gap={6}>
      <Card>
        <Heading level={3} mb={6}>Rating Components</Heading>
        
        <Stack gap={6}>
          <RatingComponent
            label="Skill Rating"
            value={skillRating}
            maxValue={2000}
            color="text-primary-blue"
            description="Based on race results, competition strength, and consistency"
            breakdown={[
              { label: 'Race Results', percentage: 60 },
              { label: 'Competition Quality', percentage: 25 },
              { label: 'Consistency', percentage: 15 }
            ]}
          />

          <RatingComponent
            label="Safety Rating"
            value={safetyRating}
            maxValue={100}
            color="text-performance-green"
            suffix="%"
            description="Reflects incident-free racing and clean overtakes"
            breakdown={[
              { label: 'Incident Rate', percentage: 70 },
              { label: 'Clean Overtakes', percentage: 20 },
              { label: 'Position Awareness', percentage: 10 }
            ]}
          />

          <RatingComponent
            label="Sportsmanship"
            value={sportsmanshipRating}
            maxValue={5}
            color="text-warning-amber"
            suffix="/5"
            description="Community feedback on racing behavior and fair play"
            breakdown={[
              { label: 'Peer Reviews', percentage: 50 },
              { label: 'Fair Racing', percentage: 30 },
              { label: 'Team Play', percentage: 20 }
            ]}
          />
        </Stack>
      </Card>

      <Card>
        <Heading level={3} mb={4}>Rating History</Heading>
        
        <Stack gap={3}>
          <RatingHistoryItem
            date="November 2024"
            skillChange={+15}
            safetyChange={+2}
            sportsmanshipChange={0}
          />
          <RatingHistoryItem
            date="October 2024"
            skillChange={+28}
            safetyChange={-1}
            sportsmanshipChange={+0.1}
          />
          <RatingHistoryItem
            date="September 2024"
            skillChange={-12}
            safetyChange={+3}
            sportsmanshipChange={0}
          />
        </Stack>
      </Card>

      <Card borderColor="border-primary-blue/30" bg="bg-charcoal-outline/20">
        <Box display="flex" alignItems="center" gap={3} mb={3}>
          <Text size="2xl">📈</Text>
          <Heading level={3}>Rating Insights</Heading>
        </Box>
        <Stack as="ul" gap={2}>
          <Box as="li" display="flex" alignItems="start" gap={2}>
            <Text color="text-performance-green" mt={0.5}>✓</Text>
            <Text size="sm" color="text-gray-400">Strong safety rating - keep up the clean racing!</Text>
          </Box>
          <Box as="li" display="flex" alignItems="start" gap={2}>
            <Text color="text-warning-amber" mt={0.5}>→</Text>
            <Text size="sm" color="text-gray-400">Skill rating improving - competitive against higher-rated drivers</Text>
          </Box>
          <Box as="li" display="flex" alignItems="start" gap={2}>
            <Text color="text-primary-blue" mt={0.5}>i</Text>
            <Text size="sm" color="text-gray-400">Complete more races to stabilize your ratings</Text>
          </Box>
        </Stack>
      </Card>
    </Stack>
  );
}