<template>
   <transition name="modalAni">
      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
         <div class="modalContainer">
            <div class="modalWrapper">
               <img
                  class="closeModalImg"
                  src="cancel-black-36dp.svg"
                  alt="closeModalIMG"
                  @click="closeModal"
               />
               <h1>{{ playerName }}, choose your fighter!</h1>
               <div v-if="isLoading" class="loading">Loading characters...</div>
               <div class="fighterDiv" v-else>
                  <div
                     v-for="character in characters"
                     :key="character"
                     class="fighter"
                     @click="chooseFighter(character)"
                  >
                     <img
                        :src="getCharacterImageUrl(character)"
                        :alt="getCharacterName(character)"
                     />
                     <p>{{ getCharacterName(character) }}</p>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </transition>
</template>

<script>
export default {
   data() {
      return {
         show: false,
         playerName: "",
         characters: [],
         isLoading: false,
      };
   },
   methods: {
      closeModal() {
         this.show = false;
      },
      async openModal(playerName) {
         this.playerName = playerName;
         this.show = true;
         await this.fetchCharacters();
      },
      checkIfClickShouldCloseModal(event) {
         if (event.target.classList[0] === "modal") {
            this.closeModal();
         }
      },
      async fetchCharacters() {
         this.isLoading = true;
         try {
            const response = await this.axios({
               method: "get",
               url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/characters`,
            });
            this.characters = response.data || [];
         } catch (error) {
            console.error("Failed to fetch characters:", error);
            // Fallback to hardcoded list if API fails
            this.characters = [
               "Adol.png",
               "Link.png",
               "Barbarian.png",
               "Layton.png",
               "Kiryu.png",
               "Miles.png",
               "Lemmings.png",
               "Samus.png",
               "Kratos.png",
               "Aloy.png",
               "Sora.png",
               "Raiden.png",
               "PaperMario.png",
            ];
         } finally {
            this.isLoading = false;
         }
      },
      getCharacterImageUrl(character) {
         return `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/character?name=${encodeURIComponent(character)}`;
      },
      getCharacterName(character) {
         // Remove file extension
         return character.replace(/\.(png|jpg|jpeg|gif)$/i, "");
      },
      chooseFighter(characterFilename) {
         const apiHostname = window.__RUNTIME_CONFIG__.API_HOSTNAME;
         const profile = `${apiHostname}/character?name=${encodeURIComponent(characterFilename)}`;
         
         let payload = {
            playerName: this.playerName,
            profile: profile,
         };
         this.$store.dispatch("changePlayerProfile", payload);
         this.closeModal();
      },
   },
};
</script>

<style scoped>
.modalContainer {
   width: 80%; /* Could be more or less, depending on screen size */
}
.fighterDiv {
   display: flex;
   width: 100%;
   justify-content: center;
   margin-top: 30px;
   flex-wrap: wrap;
}

.fighterDiv img {
   width: 180px;
   height: 90px;
   object-fit: contain;
}

.fighter {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   text-align: center;
   width: 14vw;
   margin-top: 30px;
}
.fighter > * {
   width: 100%;
}
.fighter:hover {
   outline: 1px solid rgb(128, 83, 0);
   outline-offset: 2px;
   cursor: pointer;
}
.fighter p {
   margin-top: 8px;
   font-size: 1.3rem;
}

.loading {
   text-align: center;
   padding: 40px;
   font-size: 1.2rem;
   color: #666;
}

@media only screen and (max-width: 1000px) {
   .modalContainer {
      width: 95%; /* Could be more or less, depending on screen size */
   }
   .fighterDiv {
      margin-top: 30px;
   }
   .fighterDiv img {
      width: 80px;
      height: 40px;
      object-fit: contain;
   }

   .fighter {
      width: 25vw;
   }
}
</style>
