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

import React from "react";

const PRESTIGE_THRESHOLD = 1_000_000;

interface MilestoneBarProps {
  resources: number;
}

export function MilestoneBar({ resources }: MilestoneBarProps) {
  const progress = Math.min(resources / PRESTIGE_THRESHOLD, 1);
  const progressPercent = (progress * 100).toFixed(1);
  const remaining = Math.max(PRESTIGE_THRESHOLD - resources, 0);

  const formatNumber = (n: number): string => {
    if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(2)}M`;
    if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
    return Math.floor(n).toString();
  };

  return (
    <div className="milestone-bar" aria-label="Progression vers le prestige">
      <div className="milestone-label">
        Prochain prestige : {formatNumber(resources)} / {formatNumber(PRESTIGE_THRESHOLD)}
      </div>
      <div
        className="milestone-track"
        role="progressbar"
        aria-valuenow={Math.floor(progress * 100)}
        aria-valuemin={0}
        aria-valuemax={100}
      >
        <div
          className="milestone-fill"
          style={{ width: `${progressPercent}%` }}
        />
      </div>
      {remaining > 0 && (
        <div className="milestone-remaining">
          {formatNumber(remaining)} ressources restantes
        </div>
      )}
      {remaining === 0 && (
        <div className="milestone-ready">Prestige disponible !</div>
      )}
    </div>
  );
}
