import { Box } from '@/ui/Box';
import { Card } from '@/ui/Card';
import { CircularProgress } from '@/ui/CircularProgress';
import { Grid } from '@/ui/Grid';
import { GridItem } from '@/ui/GridItem';
import { Heading } from '@/ui/Heading';
import { HorizontalBarChart } from '@/ui/HorizontalBarChart';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Activity, BarChart3, Target, TrendingUp } from 'lucide-react';

interface PerformanceOverviewProps {
  stats: {
    wins: number;
    podiums: number;
    totalRaces: number;
    consistency: number | null;
    dnfs: number;
    bestFinish: number;
    avgFinish: number | null;
  };
}

export function PerformanceOverview({ stats }: PerformanceOverviewProps) {
  return (
    <Card>
      <Box mb={6}>
        <Heading level={2} icon={<Icon icon={Activity} size={5} color="#00f2ff" />}>
          Performance Overview
        </Heading>
      </Box>
      <Grid cols={12} gap={8}>
        <GridItem colSpan={12} lgSpan={6}>
          <Stack align="center" gap={4}>
            <Stack direction="row" gap={6}>
              <CircularProgress
                value={stats.wins}
                max={stats.totalRaces}
                label="Win Rate"
                color="#10b981"
              />
              <CircularProgress
                value={stats.podiums}
                max={stats.totalRaces}
                label="Podium Rate"
                color="#f59e0b"
              />
            </Stack>
            <Stack direction="row" gap={6}>
              <CircularProgress
                value={stats.consistency ?? 0}
                max={100}
                label="Consistency"
                color="#3b82f6"
              />
              <CircularProgress
                value={stats.totalRaces - stats.dnfs}
                max={stats.totalRaces}
                label="Finish Rate"
                color="#00f2ff"
              />
            </Stack>
          </Stack>
        </GridItem>

        <GridItem colSpan={12} lgSpan={6}>
          <Box mb={4}>
            <Heading level={3} icon={<Icon icon={BarChart3} size={4} color="#9ca3af" />}>
              Results Breakdown
            </Heading>
          </Box>
          <HorizontalBarChart
            data={[
              { label: 'Wins', value: stats.wins, color: 'bg-performance-green' },
              { label: 'Podiums (2nd-3rd)', value: stats.podiums - stats.wins, color: 'bg-warning-amber' },
              { label: 'DNFs', value: stats.dnfs, color: 'bg-red-500' },
            ]}
            maxValue={stats.totalRaces}
          />

          <Box mt={6}>
            <Grid cols={2} gap={4}>
              <Box p={4} style={{ backgroundColor: '#0f1115', borderRadius: '0.75rem', border: '1px solid #262626' }}>
                <Stack gap={2}>
                  <Stack direction="row" align="center" gap={2}>
                    <Icon icon={TrendingUp} size={4} color="#10b981" />
                    <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase' }}>Best Finish</Text>
                  </Stack>
                  <Text size="2xl" weight="bold" color="text-performance-green">P{stats.bestFinish}</Text>
                </Stack>
              </Box>
              <Box p={4} style={{ backgroundColor: '#0f1115', borderRadius: '0.75rem', border: '1px solid #262626' }}>
                <Stack gap={2}>
                  <Stack direction="row" align="center" gap={2}>
                    <Icon icon={Target} size={4} color="#3b82f6" />
                    <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase' }}>Avg Finish</Text>
                  </Stack>
                  <Text size="2xl" weight="bold" color="text-primary-blue">
                    P{(stats.avgFinish ?? 0).toFixed(1)}
                  </Text>
                </Stack>
              </Box>
            </Grid>
          </Box>
        </GridItem>
      </Grid>
    </Card>
  );
}