// GeneratorShop.tsx — Boutique de générateurs (economy.ts)
// Remplace Amelioration.jsx (legacy WildCoinContext)

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

export function GeneratorShop() {
  const generators = useGameStore((s) => s.state.generators);
  const resources = useGameStore((s) => s.state.resources);
  const buy = useGameStore((s) => s.buy);
  const generatorCost = useGameStore((s) => s.generatorCost);

  return (
    <div className="flex flex-col gap-3 p-4 rounded-xl bg-gray-900/80 backdrop-blur-sm max-w-md w-full">
      <h2 className="text-lg font-bold text-white">Générateurs</h2>
      {generators.map((gen) => {
        const cost = generatorCost(gen);
        const canAfford = resources >= cost;

        return (
          <div
            key={gen.id}
            className={`flex items-center justify-between gap-3 p-3 rounded-lg border transition-colors ${
              canAfford
                ? "border-emerald-500/50 bg-emerald-950/30 hover:bg-emerald-950/50"
                : "border-gray-700/50 bg-gray-800/30 opacity-60"
            }`}
          >
            <div className="flex flex-col min-w-0">
              <span className="text-white font-semibold text-sm">{gen.name}</span>
              <span className="text-gray-400 text-xs">
                +{gen.baseProduction}/s &middot; x{gen.owned}
              </span>
            </div>
            <button
              onClick={() => buy(gen.id)}
              disabled={!canAfford}
              className={`shrink-0 px-3 py-1.5 rounded-md text-sm font-medium transition-colors cursor-pointer ${
                canAfford
                  ? "bg-emerald-600 hover:bg-emerald-500 text-white"
                  : "bg-gray-700 text-gray-500 cursor-not-allowed"
              }`}
            >
              {formatNumber(cost)}
            </button>
          </div>
        );
      })}
    </div>
  );
}
