//main.wasp
//adding the dependencies array
app Poketrader {
  wasp: {
    version: "^0.11.1"
  },
  title: "Poketrader",
  client: {
    rootComponent: import { Layout } from "@client/Layout.jsx",
  },
  dependencies: [
    ("pokedex-promise-v2","^4.1.1")
  ],
...
}

//src/server/queries.js
// a simples async await fetch to get the pokemon data
async function loadPokemons() {
    const P = new Pokedex();
    const response = await P.getGenerationByName("generation-i");
    return response.pokemon_species;
}

export const getPokemon = async () => {
    const pokemons = await loadPokemons();

    return pokemons;
};

//src/client/pages/Trade.jsx
//creating a state to hold all selected pokemons
//mapping all pokemons to options for our selector
//adding the onChange method to insert selected pokemons in our state
const [selectedPokemon, setSelectedPokemon] = useState({
    areaA: null,
    areaB: null,
  });
...
return(
<h3>Trade Area A</h3>
<select
    onChange={(e) => {
    setSelectedPokemon({ ...selectedPokemon, areaA: e.target.value });
  }}
>
<option disabled selected value>
    -- select an option --
</option>
  {pokemons.map((pokemon) => (
    <option key={pokemon.name} value={pokemon}>
      {pokemon.name}
    </option>
  ))}
</select>
)

//src/server/queries.js
//refactoring loadPokemons to also get images and base_experience values
async function loadPokemons() {
  const P = new Pokedex();
  const response = await P.getGenerationByName("generation-i");
  const pokemons = response.pokemon_species;
  const pokemonsWithImages = await Promise.all(
    pokemons.map(async (pokemon) => {
      const pokemonData = await P.getPokemonByName(pokemon.name);
      return {
        id: pokemonData.id,
        name: pokemonData.name,
        base_experience: pokemonData.base_experience,
        image: pokemonData.sprites.front_default,
      };
    })
  );

  return pokemonsWithImages;
}

export const getPokemon = async () => {
  const pokemons = await loadPokemons();

  return pokemons;
};

//src/client/components/TradeArea.jsx
// adding those imgs that the back-end now sends
// adding a button to add to the trade area
// also adding a max size of pokémons on each side (6)
import React from "react";

function TradeArea({
  pokemons,
  tradeAreaName,
  setSelectedPokemon,
  selectedPokemon,
  setTradeArea,
  tradeArea,
}) {
  const displayName =
    tradeAreaName === "areaA" ? "Trade Area A" : "Trade Area B";
  return (
    <div>
      <h3 className="text-xl">{displayName}</h3>
      {tradeArea.map((pokemon) => (
        <div className="grid grid-flow-col items-center">
          <p>
            Pokemon: <strong className="capitalize"> {pokemon.name} </strong>
          </p>
          <img className="w-10" src={pokemon.image} alt={pokemon.name} />
        </div>
      ))}
      <div className="grid gap-2">
        <select
          className="border border-gray-400 rounded-md"
          onChange={(e) => {
            const targetPokemon = pokemons.find(
              (pokemon) => pokemon.name === e.target.value
            );
            setSelectedPokemon({
              ...selectedPokemon,
              [tradeAreaName]: targetPokemon,
            });
          }}
        >
          <option disabled selected value>
            -- select an option --
          </option>
          {pokemons.map((pokemon) => (
            <option key={pokemon.name} value={pokemon.name}>
              {pokemon.name}
            </option>
          ))}
        </select>
        <button
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          onClick={() => {
            if (!selectedPokemon[tradeAreaName]) return;

            if (tradeArea.length < 6) {
              setTradeArea([...tradeArea, selectedPokemon[tradeAreaName]]);
            }
          }}
        >
          Add to {displayName}
        </button>
      </div>
    </div>
  );
}

export default TradeArea;

//src/server/actions.js
export const evaluateTrade = async (args) => {
  const pokemonAList = args.tradeAreaA;
  const pokemonBList = args.tradeAreaB;

  const totalA = pokemonAList.reduce(
    (acc, pokemon) => acc + pokemon.base_experience,
    0
  );
  const totalB = pokemonBList.reduce(
    (acc, pokemon) => acc + pokemon.base_experience,
    0
  );

  const difference = Math.abs(totalA - totalB);
  const lowerTotal = Math.min(totalA, totalB);
  const fairThreshold = lowerTotal * 0.1;

  if (difference < fairThreshold) {
    return "fair";
  } else {
    return "unfair";
  }
};

//src/client/pages/Trade.jsx
// if the tradeAreaA or tradeAreaB changes, useEffect will execute handleEvaluteTrade()
const handleEvaluateTrade = async () => {
    const result = await evaluateTradeFn({
      tradeAreaA: tradeAreaA,
      tradeAreaB: tradeAreaB,
    });
    setFairness(result);
  };

useEffect(() => {
    if (tradeAreaA.length > 0 && tradeAreaB.length > 0) {
      handleEvaluateTrade();
    }
  }, [tradeAreaA, tradeAreaB]);

//src/client/pages/Trade.jsx
<h2
  className={`text-2xl mb-4 font-bold ${
    fairness === "fair" ? "text-green-500" : "text-red-500"
  } `}
>
  Trade {fairness && `- is ${fairness}`}
</h2>

//src/client/pages/Trade.jsx
<button
  onClick={handleRegisterTrade}
  className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mt-4"
>
  Register Trade
</button>

//src/client/pages/Trade.jsx
import registerTrade from "@wasp/actions/registerTrade";

const handleRegisterTrade = async () => {
    await registerTrade({
      tradeAreaA: tradeAreaA,
      tradeAreaB: tradeAreaB,
      fairness: fairness,
    });

    setTradeRegisteredStatus(true);
  };

//main.wasp
//added the tradeAreaA and tradeAreaB fields as String type (we will JSON.stringify()
//they later)
entity Trade {=psl
    id         Int      @id @default(autoincrement())
    userId     Int
    user      User     @relation(fields: [userId], references: [id])
    tradeAreaA String
    tradeAreaB String
    fairness   String @default("unfair")
psl=}

//src/server/actions.js
//here we convert the trade areas to string and save to our db!
export const registerTrade = async (args, context) => {
  const pokemonAList = args.tradeAreaA;
  const pokemonBList = args.tradeAreaB;
  const { user, entities } = context;

  const stringifiedPokemonAList = JSON.stringify(pokemonAList);
  const stringifiedPokemonBList = JSON.stringify(pokemonBList);

  if (!user) {
    throw new HttpError(401);
  }

  const trade = await entities.Trade.create({
    data: {
      tradeAreaA: stringifiedPokemonAList,
      tradeAreaB: stringifiedPokemonBList,
      fairness: args.fairness,
      user: { connect: { id: user.id } },
    },
  });

  return trade;
};

//src/client/pages/Profile.jsx
//map all trades, for each one parse the tradeAreas and render them on the screen
{trades.map((trade) => {
        const tradeAreaA = JSON.parse(trade.tradeAreaA);
        const tradeAreaB = JSON.parse(trade.tradeAreaB);
        return (
          <div
            className={`mb-4 border rounded shadow p-4 ${
              trade.fairness === "fair" ? "bg-green-300" : "bg-red-300"
            }`}
          >
            <div className="mb-2">
              <span className="font-bold">Trade ID: </span>
              <span className="capitalize">{trade.id}</span>
            </div>
            <div className="mb-2">
              <span className="font-bold">Trade Area A: </span>
              <span className="capitalize">
                {tradeAreaA.map((pokemon) => {
                  return pokemon.name + " ";
                })}
              </span>
            </div>
            <div className="mb-2">
              <span className="font-bold">Trade Area B: </span>
              <span className="capitalize">
                {tradeAreaB.map((pokemon) => {
                  return pokemon.name + " ";
                })}
              </span>
            </div>
            <div className="mb-2">
              <span className="font-bold">Fairness: </span>
              <span>{trade.fairness}</span>
            </div>
          </div>
        );
      })}

//main.wasp -> in the db section, add the PostgresSQL system!
db: {
    prisma: {
      clientPreviewFeatures: ["extendedWhereUnique"],
    },
      system: PostgreSQL,
  },
  auth: {
    userEntity: User,