import { AchievementDisplay } from '@/lib/display-objects/AchievementDisplay';
import { Card } from '@/ui/Card';
import { Grid } from '@/ui/Grid';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { Award, Crown, Medal, Star, Target, Trophy, Zap } from 'lucide-react';
import React from 'react';

interface Achievement {
  id: string;
  title: string;
  description: string;
  icon: string;
  rarity: 'common' | 'rare' | 'epic' | 'legendary' | string;
  earnedAtLabel: string;
}

interface AchievementGridProps {
  achievements: Achievement[];
}

function getAchievementIcon(icon: string) {
  switch (icon) {
    case 'trophy': return Trophy;
    case 'medal': return Medal;
    case 'star': return Star;
    case 'crown': return Crown;
    case 'target': return Target;
    case 'zap': return Zap;
    default: return Award;
  }
}

export function AchievementGrid({ achievements }: AchievementGridProps) {
  return (
    <Card>
      <Stack gap={4} fullWidth>
        <Group align="center" justify="between" fullWidth>
          <Group align="center" gap={2}>
            <Icon icon={Award} size={5} intent="warning" />
            <Heading level={2}>
              Achievements
            </Heading>
          </Group>
          <Text size="sm" variant="low" weight="normal">{achievements.length} earned</Text>
        </Group>

        <Grid cols={1} gap={4}>
          {achievements.map((achievement) => {
            const AchievementIcon = getAchievementIcon(achievement.icon);
            const rarity = AchievementDisplay.getRarityVariant(achievement.rarity);
            return (
              <Card
                key={achievement.id}
                variant={rarity.surface}
              >
                <Group align="start" gap={3}>
                  <Surface variant="default" padding={3} rounded="md">
                    <Icon icon={AchievementIcon} size={5} intent={rarity.iconIntent} />
                  </Surface>
                  <Stack flex={1} gap={1}>
                    <Text weight="semibold" size="sm" variant="high" block>{achievement.title}</Text>
                    <Text size="xs" variant="med" block>{achievement.description}</Text>
                    <Group align="center" gap={2}>
                      <Text size="xs" variant={rarity.text} weight="medium" uppercase>
                        {achievement.rarity}
                      </Text>
                      <Text size="xs" variant="low">•</Text>
                      <Text size="xs" variant="low">
                        {achievement.earnedAtLabel}
                      </Text>
                    </Group>
                  </Stack>
                </Group>
              </Card>
            );
          })}
        </Grid>
      </Stack>
    </Card>
  );
}