import React from 'react';
import { MILESTONES } from '../config/milestones';
import { GameState } from '../types';

interface MilestonesProps {
  gameState: GameState;
}

export function Milestones({ gameState }: MilestonesProps) {
  const completedMilestones = MILESTONES.filter(m => gameState.milestones[m.id]);
  const nextMilestone = MILESTONES.find(m => !gameState.milestones[m.id]);

  return (
    <div className="bg-gradient-to-b from-green-600 to-blue-600 p-6 rounded-xl border-4 border-yellow-400 shadow-2xl">
      <h2 className="text-3xl font-bold text-yellow-300 mb-6 text-center" style={{ fontFamily: 'Comic Sans MS, cursive' }}>
        🏆 MILESTONES 🏆
      </h2>
      
      {nextMilestone && (
        <div className="mb-6">
          <h3 className="text-xl font-bold text-white mb-2">Next Goal:</h3>
          <div className="bg-gradient-to-r from-purple-500 to-pink-500 p-4 rounded-lg border-2 border-cyan-400">
            <div className="flex justify-between items-center mb-2">
              <span className="text-lg font-bold text-white">{nextMilestone.name}</span>
              <span className="text-yellow-300 font-bold">{nextMilestone.threshold.toLocaleString()}</span>
            </div>
            <p className="text-cyan-200 text-sm mb-3">{nextMilestone.description}</p>
            <div className="w-full bg-gray-700 rounded-full h-4">
              <div 
                className="bg-gradient-to-r from-green-400 to-blue-500 h-4 rounded-full transition-all duration-500"
                style={{ 
                  width: `${Math.min(100, (gameState.totalClicks / nextMilestone.threshold) * 100)}%` 
                }}
              ></div>
            </div>
            <div className="text-center mt-2 text-white">
              {gameState.totalClicks.toLocaleString()} / {nextMilestone.threshold.toLocaleString()}
            </div>
          </div>
        </div>
      )}

      {completedMilestones.length > 0 && (
        <div>
          <h3 className="text-xl font-bold text-white mb-4">Completed:</h3>
          <div className="space-y-2 max-h-40 overflow-y-auto">
            {completedMilestones.map((milestone) => (
              <div key={milestone.id} className="bg-gradient-to-r from-green-500 to-emerald-500 p-3 rounded-lg border border-yellow-300">
                <div className="flex justify-between items-center">
                  <span className="font-bold text-white">{milestone.name}</span>
                  <span className="text-yellow-200">✅ {milestone.threshold.toLocaleString()}</span>
                </div>
                <p className="text-green-100 text-sm">{milestone.reward}</p>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}