// EvolutionTree.tsx — Arbre d'Évolution permanent (jamais reset)
// Visible après le premier prestige (prestigeCount >= 1)

import React from "react";
import { useGameStore } from "../store/useGameStore";
import { canBuyEvolutionNode } from "../core/economy";
import type { EvolutionNode } from "../core/economy";

const EFFECT_DESCRIPTIONS: Record<string, (value: number) => string> = {
  click_multiplier: (v) => `x${v} puissance de Ponte`,
  production_multiplier: (v) => `x${v} production tous générateurs`,
  start_bonus: (v) => `+${v} têtards au début de chaque run`,
  unlock_generator: () => `Débloque le Lac Mystique dès le début`,
  achievement_scaling: (v) => `+${(v * 100).toFixed(0)}% production par succès`,
};

function NodeCard({
  node,
  canBuy,
  onBuy,
}: {
  node: EvolutionNode;
  canBuy: boolean;
  onBuy: () => void;
}) {
  return (
    <div
      className={`flex flex-col gap-2 p-3 rounded-lg border text-sm transition-colors ${
        node.unlocked
          ? "border-emerald-500/50 bg-emerald-950/30"
          : canBuy
          ? "border-amber-500/50 bg-amber-950/20"
          : "border-gray-700/50 bg-gray-800/30 opacity-50"
      }`}
    >
      <div className="flex justify-between items-center">
        <span className="text-white font-semibold">{node.name}</span>
        <span className="text-xs text-gray-400">
          {node.unlocked ? "Débloqué" : `${node.cost} ADN`}
        </span>
      </div>
      <p className="text-xs text-gray-300">
        {EFFECT_DESCRIPTIONS[node.effect](node.value)}
      </p>
      {!node.unlocked && (
        <button
          disabled={!canBuy}
          onClick={onBuy}
          className={`px-3 py-1 rounded text-xs font-medium transition-colors cursor-pointer ${
            canBuy
              ? "bg-amber-600 hover:bg-amber-500 text-white"
              : "bg-gray-700 text-gray-500 cursor-not-allowed"
          }`}
        >
          {canBuy ? "Débloquer" : "Verrouillé"}
        </button>
      )}
    </div>
  );
}

export function EvolutionTree() {
  const state = useGameStore((s) => s.state);
  const buyNode = useGameStore((s) => s.buyNode);
  const { evolutionTree, prestigeCount } = state;

  if (prestigeCount < 1) return null;

  return (
    <div className="flex flex-col gap-3 p-4 rounded-xl bg-gray-900/80 backdrop-blur-sm max-w-md w-full">
      <div className="flex justify-between items-center">
        <h3 className="text-lg font-bold text-white">Arbre d'Évolution</h3>
        <span className="text-sm text-amber-300">{state.ancestralDna} ADN</span>
      </div>
      <div className="flex flex-col gap-2">
        {evolutionTree.map((node, index) => (
          <React.Fragment key={node.id}>
            {index > 0 && (
              <div
                className={`text-center text-xs ${
                  evolutionTree[index - 1].unlocked
                    ? "text-emerald-400"
                    : "text-gray-600"
                }`}
              >
                |
              </div>
            )}
            <NodeCard
              node={node}
              canBuy={canBuyEvolutionNode(state, node.id)}
              onBuy={() => buyNode(node.id)}
            />
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}