import { PrestigeUpgrade } from '../types';
import { formatNumber } from '../utils/formatters';
import '../styles/PrestigePanel.css';

interface PrestigePanelProps {
  totalCurrency: number;
  prestigePoints: number;
  prestigeUpgrades: PrestigeUpgrade[];
  onPrestige: () => void;
  onPurchaseUpgrade: (upgradeId: string) => void;
}

const PrestigePanel = ({
  totalCurrency,
  prestigePoints,
  prestigeUpgrades,
  onPrestige,
  onPurchaseUpgrade
}: PrestigePanelProps) => {
  // Calculate how many prestige points would be earned
  const potentialPrestigePoints = Math.floor(Math.sqrt(totalCurrency / 1000000));
  
  return (
    <div className="prestige-panel">
      <h2>Prestige</h2>
      
      <div className="prestige-info">
        <p>Total Currency Earned: {formatNumber(totalCurrency)}</p>
        <p>Current Prestige Points: {formatNumber(prestigePoints)}</p>
        <p>Prestige Now For: {formatNumber(potentialPrestigePoints)} points</p>
        
        <button 
          className="prestige-button"
          onClick={onPrestige}
          disabled={potentialPrestigePoints <= 0}
        >
          PRESTIGE
        </button>
      </div>
      
      <div className="prestige-upgrades">
        <h3>Prestige Upgrades</h3>
        
        <div className="prestige-upgrades-list">
          {prestigeUpgrades.map(upgrade => {
            const canAfford = prestigePoints >= upgrade.cost;
            
            return (
              <div 
                key={upgrade.id} 
                className={`prestige-upgrade-item ${canAfford ? 'can-afford' : 'cannot-afford'} ${upgrade.purchased ? 'purchased' : ''}`}
                onClick={() => canAfford && !upgrade.purchased && onPurchaseUpgrade(upgrade.id)}
              >
                <div className="prestige-upgrade-icon">{upgrade.icon}</div>
                
                <div className="prestige-upgrade-info">
                  <h4>{upgrade.name}</h4>
                  <p>{upgrade.description}</p>
                  <p>Multiplier: +{upgrade.multiplierBonus.toFixed(2)}x</p>
                  
                  {upgrade.purchased ? (
                    <p className="purchased-label">PURCHASED</p>
                  ) : (
                    <p className="prestige-upgrade-cost">
                      Cost: {formatNumber(upgrade.cost)} PP
                    </p>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default PrestigePanel;