// MilestoneBar.tsx — Progression vers le prochain prestige
// Barre visuelle ressources / 1 000 000

import { useGameStore } from "../store/useGameStore";
import { formatNumber } from "../utils/formatNumber";

const PRESTIGE_THRESHOLD = 1_000_000;

export function MilestoneBar() {
  const resources = useGameStore((s) => s.state.resources);

  const progress = Math.min(resources / PRESTIGE_THRESHOLD, 1);
  const progressPercent = (progress * 100).toFixed(1);
  const remaining = Math.max(PRESTIGE_THRESHOLD - resources, 0);

  return (
    <div className="flex flex-col gap-1 max-w-md w-full">
      <div className="text-xs text-gray-300 flex justify-between">
        <span>Prochaine Génération</span>
        <span>
          {formatNumber(resources)} / {formatNumber(PRESTIGE_THRESHOLD)}
        </span>
      </div>
      <div className="h-2 bg-gray-800 rounded-full overflow-hidden">
        <div
          className="h-full bg-gradient-to-r from-purple-600 to-purple-400 transition-all duration-500 rounded-full"
          style={{ width: `${progressPercent}%` }}
        />
      </div>
      <div className="text-xs text-gray-400 text-right">
        {remaining > 0
          ? `${formatNumber(remaining)} têtards restants`
          : "Nouvelle Génération disponible !"}
      </div>
    </div>
  );
}
