import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Trophy, Award, Crown, Compass } from "lucide-react";

export default function Achievements({ earnedXp, phaseClaims }: { earnedXp: number; phaseClaims: Record<string, number>; }) {
  const badges: { id: string; label: string; unlocked: boolean; icon: any; desc: string }[] = [
    { id: "rookie", label: "Rookie Explorer", unlocked: earnedXp >= 100, icon: Compass, desc: "Earn 100+ XP" },
    { id: "seasoned", label: "Seasoned Adventurer", unlocked: earnedXp >= 300, icon: Trophy, desc: "Earn 300+ XP" },
    { id: "master", label: "Master Builder", unlocked: earnedXp >= 600, icon: Crown, desc: "Earn 600+ XP" },
    { id: "trailblazer", label: "Trailblazer", unlocked: ["now","month1","month2","month3"].every((k) => (phaseClaims[k] || 0) > 0), icon: Award, desc: "Complete a quest in every phase" },
  ];

  return (
    <Card className="bg-card/60 border-border/40 backdrop-blur">
      <CardHeader>
        <CardTitle>Achievements</CardTitle>
        <CardDescription>Earn badges as you progress. Displayed publicly soon.</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-wrap gap-3">
        {badges.map((b) => {
          const Icon = b.icon;
          return (
            <div key={b.id} className="flex items-center gap-2 rounded border border-border/40 px-3 py-2">
              <Icon className={"h-4 w-4 " + (b.unlocked ? "text-aethex-300" : "text-muted-foreground")} />
              <div className="text-sm">
                <div className={b.unlocked ? "text-foreground" : "text-muted-foreground"}>{b.label}</div>
                <div className="text-[11px] text-muted-foreground">{b.desc}</div>
              </div>
              <Badge variant="outline" className={b.unlocked ? "ml-2 border-emerald-500/40 text-emerald-300" : "ml-2"}>
                {b.unlocked ? "Unlocked" : "Locked"}
              </Badge>
            </div>
          );
        })}
      </CardContent>
    </Card>
  );
}
