'use client';

import { useMemo, useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Achievement, BADGE_DEFINITIONS, BadgeDefinition } from '@/lib/storage';
import { useTheme } from '@/lib/theme-context';
import {
  Trophy,
  Lock,
  Footprints,
  Flame,
  Shield,
  Swords,
  Crown,
} from 'lucide-react';

interface AchievementsCardProps {
  achievements: Achievement[];
  substance: 'nicotine' | 'weed';
}

const iconMap: Record<string, React.ElementType> = {
  Footprints,
  Flame,
  Shield,
  Swords,
  Crown,
  Trophy,
};

export function AchievementsCard({ achievements, substance }: AchievementsCardProps) {
  const { theme } = useTheme();
  const [hoveredBadge, setHoveredBadge] = useState<string | null>(null);

  const unlockedBadgeIds = useMemo(() => {
    return new Set(
      achievements
        .filter((a) => a.substance === substance || a.substance === 'both')
        .map((a) => a.badgeId)
    );
  }, [achievements, substance]);

  const cardBackground =
    theme === 'light'
      ? 'linear-gradient(135deg, rgba(124, 58, 237, 0.85) 0%, rgba(109, 40, 217, 0.9) 100%)'
      : 'linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%)';

  const borderColor = 'border-purple-500/40';

  return (
    <Card
      className={`backdrop-blur-xl border ${borderColor} shadow-xl drop-shadow-lg hover-lift transition-all duration-300 overflow-hidden relative`}
      style={{ background: cardBackground }}
    >
      <div className="absolute top-0 right-0 w-40 h-40 bg-gradient-to-br from-yellow-500/10 to-transparent rounded-full -translate-y-1/2 translate-x-1/2 pointer-events-none" />

      <CardHeader className="relative z-10 pb-2">
        <CardTitle className="flex items-center gap-2 text-white text-shadow-sm">
          <Trophy className="h-5 w-5 text-yellow-400" />
          <span>Achievements</span>
        </CardTitle>
      </CardHeader>

      <CardContent className="relative z-10">
        <div className="grid grid-cols-3 gap-3">
          {BADGE_DEFINITIONS.map((badge) => {
            const isUnlocked = unlockedBadgeIds.has(badge.id);
            const Icon = iconMap[badge.icon] || Trophy;
            const unlockedAchievement = achievements.find(
              (a) =>
                a.badgeId === badge.id &&
                (a.substance === substance || a.substance === 'both')
            );
            const isHovered = hoveredBadge === badge.id;

            return (
              <div
                key={badge.id}
                className={`relative p-3 rounded-xl text-center transition-all duration-300 cursor-pointer ${
                  isUnlocked
                    ? 'bg-gradient-to-br from-yellow-500/30 to-amber-600/20 border border-yellow-500/50 hover:scale-105'
                    : 'bg-white/5 border border-white/10 hover:bg-white/10 hover:border-white/20'
                }`}
                onMouseEnter={() => setHoveredBadge(badge.id)}
                onMouseLeave={() => setHoveredBadge(null)}
              >
                {/* Hover tooltip */}
                {isHovered && (
                  <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-20 w-48 p-2 bg-gray-900/95 border border-white/20 rounded-lg shadow-xl backdrop-blur-sm">
                    <p className="text-xs text-white font-medium mb-1">{badge.name}</p>
                    <p className="text-[10px] text-white/70">
                      {isUnlocked
                        ? `Unlocked: ${new Date(unlockedAchievement!.unlockedAt).toLocaleDateString()}`
                        : badge.howToUnlock}
                    </p>
                    <div className="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900/95" />
                  </div>
                )}

                {!isUnlocked && (
                  <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded-xl pointer-events-none">
                    <Lock className="h-4 w-4 text-white/40" />
                  </div>
                )}
                <div
                  className={`mx-auto mb-1 p-2 rounded-full w-fit ${
                    isUnlocked
                      ? 'bg-yellow-500/30 text-yellow-300'
                      : 'bg-white/10 text-white/30'
                  }`}
                >
                  <Icon className="h-5 w-5" />
                </div>
                <p
                  className={`text-xs font-medium ${
                    isUnlocked ? 'text-white' : 'text-white/40'
                  }`}
                >
                  {badge.name}
                </p>
              </div>
            );
          })}
        </div>

        <div className="mt-4 text-center">
          <p className="text-sm text-white/70">
            {unlockedBadgeIds.size} of {BADGE_DEFINITIONS.length} badges unlocked
          </p>
        </div>
      </CardContent>
    </Card>
  );
}
