import { motion } from 'framer-motion';
import { useAchievements } from '@/contexts/AchievementsContext';
import { Trophy, Lock, Clock } from 'lucide-react';

const Achievements = () => {
  const { achievements, getUnlockedCount, getTotalCount, timeOnSite, unlockAchievement } = useAchievements();

  // Unlock the achievement for finding this page
  unlockAchievement('found_achievements');

  const formatTime = (seconds: number) => {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;
    if (hours > 0) {
      return `${hours}h ${minutes}m ${secs}s`;
    }
    if (minutes > 0) {
      return `${minutes}m ${secs}s`;
    }
    return `${secs}s`;
  };

  const formatUnlockDate = (timestamp: number) => {
    return new Date(timestamp).toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  const unlockedAchievements = achievements.filter(a => a.unlocked);
  const lockedAchievements = achievements.filter(a => !a.unlocked);

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="min-h-screen p-4 md:p-8"
    >
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-2xl md:text-4xl font-minecraft text-primary text-glow mb-2 flex items-center gap-3">
          <Trophy className="w-8 h-8" />
          ACHIEVEMENTS
        </h1>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
        <div className="border-2 border-primary/50 bg-background/50 p-4 box-glow">
          <div className="text-primary/60 text-xs font-mono mb-1">UNLOCKED</div>
          <div className="text-primary text-2xl font-minecraft text-glow">
            {getUnlockedCount()}/{getTotalCount()}
          </div>
        </div>
        <div className="border-2 border-primary/50 bg-background/50 p-4 box-glow">
          <div className="text-primary/60 text-xs font-mono mb-1">PROGRESS</div>
          <div className="text-primary text-2xl font-minecraft text-glow">
            {Math.round((getUnlockedCount() / getTotalCount()) * 100)}%
          </div>
        </div>
        <div className="border-2 border-primary/50 bg-background/50 p-4 box-glow">
          <div className="text-primary/60 text-xs font-mono mb-1 flex items-center gap-1">
            <Clock className="w-3 h-3" /> TIME ON SITE
          </div>
          <div className="text-primary text-2xl font-minecraft text-glow">
            {formatTime(timeOnSite)}
          </div>
        </div>
        <div className="border-2 border-primary/50 bg-background/50 p-4 box-glow">
          <div className="text-primary/60 text-xs font-mono mb-1">SECRET</div>
          <div className="text-primary text-2xl font-minecraft text-glow">
            {achievements.filter(a => a.secret && a.unlocked).length}/{achievements.filter(a => a.secret).length}
          </div>
        </div>
      </div>

      {/* Progress bar */}
      <div className="mb-8">
        <div className="h-4 border-2 border-primary/50 bg-background/50 overflow-hidden">
          <motion.div
            className="h-full bg-primary/50"
            initial={{ width: 0 }}
            animate={{ width: `${(getUnlockedCount() / getTotalCount()) * 100}%` }}
            transition={{ duration: 1, ease: 'easeOut' }}
          />
        </div>
      </div>

      {/* Unlocked Achievements */}
      {unlockedAchievements.length > 0 && (
        <div className="mb-8">
          <h2 className="text-lg font-minecraft text-primary text-glow mb-4">
            UNLOCKED ({unlockedAchievements.length})
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {unlockedAchievements
              .sort((a, b) => (b.unlockedAt || 0) - (a.unlockedAt || 0))
              .map((achievement, index) => (
                <motion.div
                  key={achievement.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.05 }}
                  className="border-2 border-primary bg-primary/10 p-4 box-glow"
                >
                  <div className="flex items-start gap-3">
                    <span className="text-2xl">{achievement.icon}</span>
                    <div className="flex-1 min-w-0">
                      <div className="font-minecraft text-primary text-glow text-sm flex items-center gap-2">
                        {achievement.name}
                        {achievement.secret && (
                          <span className="text-xs bg-primary/20 px-1 border border-primary/50">SECRET</span>
                        )}
                      </div>
                      <div className="text-primary/70 text-xs font-mono mt-1">
                        {achievement.description}
                      </div>
                      {achievement.unlockedAt && (
                        <div className="text-primary/50 text-xs font-mono mt-2">
                          {formatUnlockDate(achievement.unlockedAt)}
                        </div>
                      )}
                    </div>
                  </div>
                </motion.div>
              ))}
          </div>
        </div>
      )}

      {/* Locked Achievements */}
      {lockedAchievements.length > 0 && (
        <div>
          <h2 className="text-lg font-minecraft text-primary/60 mb-4 flex items-center gap-2">
            <Lock className="w-4 h-4" />
            LOCKED ({lockedAchievements.length})
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {lockedAchievements.map((achievement, index) => (
              <motion.div
                key={achievement.id}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.02 }}
                className="border-2 border-primary/30 bg-background/30 p-4 opacity-60"
              >
                <div className="flex items-start gap-3">
                  <span className="text-2xl grayscale opacity-50">
                    {achievement.secret ? '❓' : achievement.icon}
                  </span>
                  <div className="flex-1 min-w-0">
                    <div className="font-minecraft text-primary/50 text-sm flex items-center gap-2">
                      {achievement.secret ? '???' : achievement.name}
                      {achievement.secret && (
                        <span className="text-xs bg-primary/10 px-1 border border-primary/30">SECRET</span>
                      )}
                    </div>
                    <div className="text-primary/40 text-xs font-mono mt-1">
                      {achievement.secret ? 'Hidden achievement' : achievement.description}
                    </div>
                  </div>
                  <Lock className="w-4 h-4 text-primary/30" />
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      )}
    </motion.div>
  );
};

export default Achievements;
