﻿<template>
  <div class="flex flex-col space-y-8 px-6 rounded-2xl py-8"
       :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">

    <!-- Bouton Edit -->
    <div class="flex justify-end space-x-2">
      <button
          v-if="isLoggedIn"
          @click="toggleEditMode"
          class="px-4 py-2 rounded-md hover:opacity-90"
          :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }">
        {{ isEditMode ? 'Enregistrer' : 'Éditer' }}
      </button>
      <div v-if="isEditMode">
        <button
            v-if="isLoggedIn"           
            class="px-4 py-2 rounded-md hover:opacity-90"
            :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }">
         Annuler
        </button>
      </div>
    </div>
    

    <!-- Titre principal -->
    <div v-if="isEditMode">
      <div class="text-2xl py-2"> Titre</div>
      <textarea v-model="editableMainTitle" class="w-full p-2 border rounded-md h-24"
                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
    </div>
    <h1 v-else-if="mainTitle" class="text-3xl font-bold text-center ">{{ mainTitle }}</h1>

    <!-- Image principale -->
    <div class="relative flex justify-center">
      <label v-if="isEditMode">
        <input type="file" @change="updateImage('mainImageUrl', $event)" class="hidden"/>
        <img :src="mainImageUrl || fallbackImage"
             alt="Image principale"
             class="rounded-md max-w-full h-auto cursor-pointer"/>
      </label>
      <img v-else-if="mainImageUrl" :src="mainImageUrl"
           alt="Image principale"
           class="rounded-md max-w-full h-auto"/>
      <button v-if="isEditMode" @click="deleteImage('mainImageUrl')"
              class="absolute top-10 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
        X
      </button>
    </div>

    <!-- Texte sous l'image principale -->
    <div v-if="isEditMode">
      <div class="text-2xl py-2"> Description</div>
      <textarea v-model="editableMainImageText" class="w-full p-2 border rounded-md h-24"
                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
    </div>
    <p v-else-if="mainImageText" class="text-lg text-justify">
      {{ mainImageText }}
    </p>

    <!-- Titre video principale -->
    <div v-if="isEditMode">
      <div class="text-2xl py-2"> Titre Vidéo Princpiale</div>
      <textarea v-model="editableVideoSubtitleMain" class="w-full p-2 border rounded-md h-24"
                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
    </div>
    <h2 v-else-if="videoSubtitleMain" class="text-2xl font-semibold text-center" >
      {{ videoSubtitleMain }}
    </h2>
    
    <!-- Vidéo YouTube principale -->
    <div v-if="isEditMode">
      <div class="text-2xl py-2">URL vidéo</div>
      <input
          v-if="isEditMode"
          type="text"
          v-model="editableVideoUrlMain"
          class="w-full p-2 border rounded-md"
          :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
      />
    </div>
    <div class="flex justify-center">
      <div v-if="isEditMode"></div>
      <div v-else-if="videoUrlMain" class="video-container">
        <iframe
            :src="videoUrlMain"
            title="YouTube video player"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
            class="video-frame">
        </iframe>
      </div>
    </div>


    <!-- Texte sous video principale -->
    <div v-if="isEditMode">
      <div class="text-2xl py-2"> Description</div>
      <textarea v-model="editableMainVideoText" class="w-full p-2 border rounded-md h-24"
                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
    </div>
    <p v-else-if="mainVideoText" class="text-lg text-justify">
      {{ mainVideoText }}
    </p>
    
    
    <!-- Sous-titre avant les deux images -->

    <div v-if="isEditMode">
      <div v-if="isEditMode" class="text-2xl py-2"> Sous-titre</div>
      <textarea v-model="editableImagesSubtitle" class="w-full p-2 border rounded-md h-24"
                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
    </div>
    <h2 v-else-if="imagesSubtitle" class="text-2xl font-semibold text-center">
      {{ imagesSubtitle }}
    </h2>

    <!-- 4 images côte à côte -->

    <div>
      <div v-if="isEditMode" class="text-2xl py-2"> Images</div>
      <div class="flex justify-center space-x-4">
        <!-- Première image -->        
        <div v-if="image1Url || isEditMode" :class="image1Url" class="relative w-1/2">
          <label v-if="isEditMode">
            <input type="file" @change="updateImage('image1Url', $event)" class="hidden"/>
            <img :src="image1Url || fallbackImage"
                 alt="Image 1"
                 class="rounded-md max-w-full h-auto cursor-pointer"/>
          </label>
          <img v-else-if="image1Url" :src="image1Url"
               alt="Image 1"
               class="rounded-md max-w-full h-auto"/>
          <button v-if="isEditMode" @click="deleteImage('image1Url')"
                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
            X
          </button>
        </div>

        <!-- Deuxième image -->
        <div v-if="image2Url || isEditMode" :class="image1Url" class="relative w-1/2">
          <label v-if="isEditMode">
            <input type="file" @change="updateImage('image2Url', $event)" class="hidden"/>
            <img :src="image2Url || fallbackImage"
                 alt="Image 2"
                 class="rounded-md max-w-full h-auto cursor-pointer"/>
          </label>
          <img v-else-if="image2Url" :src="image2Url"
               alt="Image 2"
               class="rounded-md max-w-full h-auto"/>
          <button v-if="isEditMode" @click="deleteImage('image2Url')"
                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
            X
          </button>
        </div>

        <!-- Troisième image -->
        <div v-if="image3Url || isEditMode" :class="image3Url" class="relative w-1/2">
          <label v-if="isEditMode">
            <input type="file" @change="updateImage('image3Url', $event)" class="hidden"/>
            <img :src="image3Url || fallbackImage"
                 alt="Image 2"
                 class="rounded-md max-w-full h-auto cursor-pointer"/>
          </label>
          <img v-else-if="image3Url" :src="image3Url"
               alt="Image 2"
               class="rounded-md max-w-full h-auto"/>
          <button v-if="isEditMode" @click="deleteImage('image3Url')"
                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
            X
          </button>
        </div>

        <!-- Quatrième image -->
        <div v-if="image4Url || isEditMode" :class="image4Url " class="relative w-1/2">
          <label v-if="isEditMode">
            <input type="file" @change="updateImage('image4Url', $event)" class="hidden"/>
            <img :src="image4Url || fallbackImage"
                 alt="Image 2"
                 class="rounded-md max-w-full h-auto cursor-pointer"/>
          </label>
          <img v-else-if="image4Url" :src="image4Url"
               alt="Image 2"
               class="rounded-md max-w-full h-auto"/>
          <button v-if="isEditMode" @click="deleteImage('image4Url')"
                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
            X
          </button>
        </div>
      </div>
    </div>

    <!-- Texte sous les deux images -->
    <div v-if="isEditMode">
      <div class="text-2xl py-2"> Images</div>
      <textarea v-model="editableImagesText" class="w-full p-2 border rounded-md h-24"
                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
    </div>
    <p v-else-if="imagesText" class="text-lg text-justify">
      {{ imagesText }}
    </p>

    <!-- Sous-titre avant la vidéo -->
  
    <div v-if="isEditMode">
      <div class="text-2xl py-2"> Titre Video</div>
      <textarea v-model="editableVideoSubtitle" class="w-full p-2 border rounded-md h-24"
                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
    </div>
    <h2 v-else-if="videoSubtitle" class="text-2xl font-semibold text-center">
      {{ videoSubtitle }}
    </h2>

    <!-- Vidéo YouTube -->
    <div v-if="isEditMode">
      <div class="text-2xl py-2">URL vidéo</div>
      <input
          v-if="isEditMode"
          type="text"
          v-model="editableVideoUrl"
          class="w-full p-2 border rounded-md"
          :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
      />
    </div>
    <div class="flex justify-center">
      <div v-if="isEditMode"></div>
      <iframe
          v-else-if="videoUrl"
          :src="videoUrl"
          title="YouTube video player"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen
          class="rounded-md"
          style="width: 600px; height: 337px;"
      ></iframe>
    </div>



    <!-- Texte sous la vidéo -->
    <div v-if="isEditMode" class="text-2xl"> Description</div>
    <div v-if="isEditMode">
      <textarea v-model="editableVideoText" class="w-full p-2 border rounded-md h-24"
                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
    </div>
    <p v-else-if="videoText" class="text-lg text-justify">
      {{ videoText }}
    </p>

    <!-- Informations de contact -->
    <div class="flex flex-col space-y-6 mt-8">
      <div v-if="isEditMode" class="flex flex-col space-y-2">
        <!-- Édition du téléphone -->
        <div>
          <label class="text-lg">Numéro de téléphone</label>
          <input
              v-model="editablePhoneNumber"
              type="text"
              class="w-full p-2 border rounded-md"
              :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
          />
        </div>
        <!-- Édition de l'email -->
        <div>
          <label class="text-lg">Adresse email</label>
          <input
              v-model="editableEmail"
              type="text"
              class="w-full p-2 border rounded-md"
              :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
          />
        </div>
      </div>
      <div
          v-else
          :class="{
      'flex justify-center items-center': phoneNumber || email,
      'flex justify-center': !(phoneNumber && email),
    }"
          class="space-x-64"
      >
        <!-- Affichage du téléphone -->
        <div v-if="phoneNumber" class="flex items-center space-x-2">
          <i class="mdi mdi-phone-outline text-2xl"></i>
          <span>{{ phoneNumber }}</span>
        </div>
        <!-- Affichage de l'email -->
        <div v-if="email" class="flex items-center space-x-2">
          <i class="mdi mdi-email-outline text-2xl"></i>
          <a
              :href="`mailto:${email}`"
              class="no-underline text-current"
          >
            {{ email }}
          </a>
        </div>

      </div>
    </div>



  </div>


  
  
</template>

<script setup>
import {ref, onMounted, computed} from "vue";
import {useBrandingStore} from "@/stores/brandingStore.js";
import {useAuthStore} from "@/stores/authStore.js";

const phoneNumber = ref("+1 (555) 123-4567"); // Remplacez par le numéro de téléphone
const email = ref("contact@exemple.com"); // Remplacez par l'email

const brandingStore = useBrandingStore();
const isEditMode = ref(false);
const isLoggedIn = true;

const authStore = useAuthStore();
const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value);

// Image de fallback pour l'éditeur
const fallbackImage = "https://via.placeholder.com/300?text=Image+non+disponible";

// Données JSON directement dans le fichier
const demoData = {
  mainTitle: "Votre référence d'Arma Reforger",
  mainImageUrl: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
  mainImageText: "Je suis la référence incontournable sur le jeu Arma Reforger grâce à ma maîtrise approfondie de ses mécanismes et à ma passion pour son univers. Mon expertise repose sur des heures d’exploration, de stratégie et de collaboration avec une communauté active. Je partage des astuces exclusives, des guides détaillés et des analyses poussées pour aider les joueurs à exceller. Mon site propose un contenu unique, des mises à jour en temps réel et des ressources complètes pour tous les niveaux. En tant que passionné, je suis déterminé à offrir le meilleur contenu pour faire de chaque visite une expérience enrichissante et inspirante.",
  mainvideoUrl: "https://www.youtube.com/embed/byx2t6TqM2Y?si=GRy_Sn3Mm7nJvUGH",
  mainVideoText: "Youpidou. Mon expertise repose sur des heures d’exploration, de stratégie et de collaboration avec une communauté active. Je partage des astuces exclusives, des guides détaillés et des analyses poussées pour aider les joueurs à exceller. Mon site propose un contenu unique, des mises à jour en temps réel et des ressources complètes pour tous les niveaux. En tant que passionné, je suis déterminé à offrir le meilleur contenu pour faire de chaque visite une expérience enrichissante et inspirante.",
  imagesSubtitle2: "Participez à Mes Sessions de Jeu en Direct",
  image1Url: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
  image2Url: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
  image3Url: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
  image4Url: "https://hutopyblob.blob.core.windows.net/creators/3d501c38-fe3e-42e6-b5dd-1bca159b9a14/contents/01935f9d-ee62-7559-8b94-a50105a5096f/boarding.jpg",
  imagesText: "Me supporter et regarder mes sessions de jeu en direct, c'est bien plus qu'un simple divertissement. En tant que joueur passionné, je partage des stratégies, des astuces et une approche unique qui enrichissent l’expérience de la communauté. Votre soutien me permet de créer du contenu de qualité, d’améliorer mes équipements et d’explorer de nouvelles façons de vous divertir. En rejoignant mes sessions, vous participez à une aventure interactive où vos idées et commentaires influencent le déroulement. Ensemble, nous bâtissons une communauté dynamique et inspirante, où chaque spectateur joue un rôle clé dans cette expérience immersive.",
  videoSubtitle: "Exemple d'une Séance de Jeu Typique",
  videoSubtitleMain: "Main video",
 
  videoUrlMain: "https://www.youtube.com/embed/8l8CRkZkt30?si=8w2lHQ2mwoHTpf9-",
  videoUrl: "https://www.youtube.com/embed/byx2t6TqM2Y?si=GRy_Sn3Mm7nJvUGH",

  videoText: "Supporter cette page, c’est permettre de créer un contenu de qualité, basé sur des recherches approfondies et une expérimentation continue. Votre soutien aide à transformer cette passion en métier, tout en garantissant des vidéos, guides et sessions enrichissants. Le créateur, motivé par l’envie de fournir un contenu toujours meilleur, apprécie chaque geste qui rend cette aventure possible."
};

// Variables réactives pour les données
const editablePhoneNumber = ref("");
const editableEmail = ref("");
const mainTitle = ref("");
const mainImageUrl = ref("");
const mainImageText = ref("");
const mainVideoText = ref("");
const imagesSubtitle = ref("");
const image1Url = ref("");
const image2Url = ref("");
const image3Url = ref("");
const image4Url = ref("");
const imagesText = ref("");
const videoSubtitle = ref("");
const videoSubtitleMain = ref("");
const videoUrlMain = ref("");
const videoUrl = ref("");
const videoText = ref("");

// Editable fields
const editableMainTitle = ref("");
const editableMainImageText = ref("");
const editableMainVideoText = ref("");
const editableImagesSubtitle = ref("");
const editableImagesText = ref("");
const editableVideoSubtitle = ref("");
const editableVideoSubtitleMain = ref("");
const editableVideoText = ref("");
const editableVideoUrlMain = ref("");
const editableVideoUrl = ref("");

// Activer/désactiver le mode édition
function toggleEditMode() {
  if (isEditMode.value) {
    mainTitle.value = editableMainTitle.value;
    mainImageText.value = editableMainImageText.value;
    mainVideoText.value = editableMainVideoText.value;
    imagesSubtitle.value = editableImagesSubtitle.value;
    imagesText.value = editableImagesText.value;
    videoSubtitle.value = editableVideoSubtitle.value;
    videoSubtitleMain.value = editableVideoSubtitleMain.value;
    videoText.value = editableVideoText.value;
    videoUrlMain.value = editableVideoUrlMain.value;
    videoUrl.value = editableVideoUrl.value;
    phoneNumber.value = editablePhoneNumber.value;
    email.value = editableEmail.value;
  } else {
    editableMainTitle.value = mainTitle.value;
    editableMainImageText.value = mainImageText.value;
    editableMainVideoText.value = mainVideoText.value;
    editableImagesSubtitle.value = imagesSubtitle.value;
    editableImagesText.value = imagesText.value;
    editableVideoSubtitle.value = videoSubtitle.value;
    editableVideoSubtitleMain.value = videoSubtitleMain.value;
    editableVideoText.value = videoText.value;
    editableVideoUrlMain.value = videoUrlMain.value;
    editableVideoUrl.value = videoUrl.value;
    editablePhoneNumber.value = phoneNumber.value;
    editableEmail.value = email.value;
  }
  isEditMode.value = !isEditMode.value;
}

// Supprimer une image
function deleteImage(field) {
  if (field === "mainImageUrl") mainImageUrl.value = null;
  else if (field === "image1Url") image1Url.value = null;
  else if (field === "image2Url") image2Url.value = null;
  else if (field === "image3Url") image3Url.value = null;
  else if (field === "image4Url") image4Url.value = null;
}

// Mettre à jour une image
function updateImage(field, event) {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = () => {
      if (field === "mainImageUrl") mainImageUrl.value = reader.result;
      else if (field === "image1Url") image1Url.value = reader.result;
      else if (field === "image2Url") image2Url.value = reader.result;
      else if (field === "image3Url") image3Url.value = reader.result; // Correction ici
      else if (field === "image4Url") image4Url.value = reader.result;
    };
    reader.readAsDataURL(file);
  }
}

// Charger les données au montage
onMounted(() => {
  mainTitle.value = demoData.mainTitle;
  mainImageUrl.value = demoData.mainImageUrl;
  mainImageText.value = demoData.mainImageText;
  mainVideoText.value = demoData.mainVideoText;
  imagesSubtitle.value = demoData.imagesSubtitle;
  image1Url.value = demoData.image1Url;
  image2Url.value = demoData.image2Url;
  image3Url.value = demoData.image3Url;
  image4Url.value = demoData.image4Url;
  imagesText.value = demoData.imagesText;
  videoSubtitle.value = demoData.videoSubtitle;
  videoSubtitleMain.value = demoData.videoSubtitleMain;
  videoUrl.value = demoData.videoUrl;
  videoUrlMain.value = demoData.videoUrlMain;
  videoText.value = demoData.videoText;
});
</script>

<style scoped>
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Ratio 16:9 (9/16 = 0.5625) */
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0.5rem; /* Pour les bords arrondis */
}

</style>
