<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Listes de Courses</title>
    <style>
        /* Styles généraux */
body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(45deg, #6a11cb, #2575fc);
    color: #333;
    text-align: center;
    padding: 50px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: backgroundAnimation 10s ease infinite;
    margin: 0;
}
.hidden {
  display: none;
}

/* Animation du fond */
@keyframes backgroundAnimation {
    0% {
        background: linear-gradient(45deg, #6a11cb, #2575fc);
    }
    50% {
        background: linear-gradient(45deg, #ff6a00, #d84c6f);
    }
    100% {
        background: linear-gradient(45deg, #6a11cb, #2575fc);
    }
}

/* Titre principal */
h1 {
    font-size: 3rem;
    letter-spacing: 2px;
    color: #f0f0f0;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    margin-bottom: 40px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Style des éléments de liste */
.list-item {
    margin: 15px 0;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.list-item:hover {
    background-color: rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

.list-item span {
    flex-grow: 1;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

/* Modale masquée par défaut */
#addListModal {
    display: none; /* Cela la cache initialement */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
#addListModal {
    display: none;
}

/* Boutons */
.button-container button {
    font-size: 1.2rem;
    padding: 15px 25px;
    margin: 10px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    background-color: #2575fc;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.button-container button:hover {
    background-color: #6a11cb;
    transform: translateY(-5px);
}

.button-container button:active {
    transform: scale(0.95);
}

/* Style de la modale - masquée au départ */
#modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* S'assurer que la modale soit au premier plan */
}

.modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 400px;
}

.modal-content h3 {
    margin-bottom: 20px;
    color: #333;
}

.modal-content input {
    padding: 10px;
    font-size: 1rem;
    border: 2px solid #ddd;
    border-radius: 5px;
    width: calc(100% - 20px);
    margin-bottom: 20px;
}

.modal-content button {
    background-color: #2575fc;
    color: white;
    padding: 12px 20px;
    font-size: 1.2rem;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.modal-content button:hover {
    background-color: #6a11cb;
}

/* Ajout d'un bouton pour fermer la modale */
#closeModalButton {
    background-color: #ff4c4c;
    color: white;
    padding: 8px 15px;
    font-size: 1rem;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

#closeModalButton:hover {
    background-color: #d00000;
}

/* Formulaire d'ajout de liste */
.form-input {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

/* Boutons de suppression */
.delete-button {
    font-size: 1.5rem;
    color: #ff4c4c;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.delete-button:hover {
    color: #d00000;
}

/* Media Queries pour responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 2.2rem;
        margin-bottom: 30px;
    }

    .list-item {
        font-size: 1rem;
        padding: 12px;
    }

    .button-container button {
        font-size: 1rem;
        padding: 12px 20px;
    }

    .modal-content {
        padding: 15px;
    }

    .modal-content input {
        font-size: 0.9rem;
    }

    .modal-content button {
        font-size: 1rem;
        padding: 10px 15px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 20px;
    }

    h1 {
        font-size: 1.8rem;
        margin-bottom: 25px;
    }

    .list-item {
        font-size: 0.9rem;
        padding: 10px;
    }

    .button-container button {
        font-size: 1rem;
        padding: 10px 15px;
    }

    .modal-content {
        padding: 10px;
    }

    .modal-content input {
        font-size: 0.9rem;
    }

    .modal-content button {
        font-size: 1rem;
        padding: 10px;
    }
}

    </style>
</head>
<body>
    <h1>Vos Listes de Courses</h1>
    <div id="shoppingListsContainer"></div>

    <div class="button-container">
        <button id="addListButton">Créer une Liste</button>
        <button id="logoutButton">Se Déconnecter</button>
    </div>

    <!-- Modal pour ajouter une nouvelle liste -->
    <div class="modal" id="addListModal">
        <div class="modal-content">
            <h3>Nom de la nouvelle liste</h3>
            <input type="text" id="newListName" placeholder="Nom de la liste" />
            <button id="submitNewList">Ajouter</button>
            <button id="closeModal">Fermer</button>
        </div>
    </div>
    <script type="module">
      import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
      import { getFirestore, collection, getDocs, addDoc, deleteDoc, doc } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-firestore.js";
      import { getAuth, signOut } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
  
      const firebaseConfig = {
          apiKey: "AIzaSyAnoTZXPZGF1e6OABQNaiTm2azaEwr4nwA",
          authDomain: "courses-35750.firebaseapp.com",
          projectId: "courses-35750",
          storageBucket: "courses-35750.appspot.com",
          messagingSenderId: "579827180001",
          appId: "1:579827180001:web:929b09f8ff002a96b632a0"
      };
  
      const app = initializeApp(firebaseConfig);
      const db = getFirestore(app);
      const auth = getAuth(app);
      
  
      const shoppingListsContainer = document.getElementById('shoppingListsContainer');
      const addListButton = document.getElementById('addListButton');
      const logoutButton = document.getElementById('logoutButton');
      const addListModal = document.getElementById('addListModal');
      const closeModal = document.getElementById('closeModal');
      const submitNewList = document.getElementById('submitNewList');
      const newListName = document.getElementById('newListName');
      const currentUser = localStorage.getItem('userName');
  
      // Fonction pour charger les listes de courses
      const loadShoppingLists = async () => {
          shoppingListsContainer.innerHTML = ''; 
          const querySnapshot = await getDocs(collection(db, "shoppingLists"));
          querySnapshot.forEach(doc => {
              const listData = doc.data();
              const listItem = document.createElement('div');
              listItem.classList.add('list-item');
              listItem.innerHTML = ` 
                  <span>${listData.name}</span>
                  <button class="deleteListButton" data-id="${doc.id}">-</button>
              `;
              listItem.onclick = () => {
                  window.location.href = `ingredients.html?listId=${doc.id}`;
              };
              shoppingListsContainer.appendChild(listItem);
          });
  
          // Ajouter la fonctionnalité de suppression
          const deleteButtons = document.querySelectorAll('.deleteListButton');
          deleteButtons.forEach(button => {
              button.addEventListener("click", async (event) => {
                  event.stopPropagation();  // Empêche de déclencher le onclick de la liste
                  const listId = button.getAttribute('data-id');
                  if (confirm('Êtes-vous sûr de vouloir supprimer cette liste ?')) {
                      await deleteDoc(doc(db, "shoppingLists", listId));
                      loadShoppingLists();  // Recharger les listes après suppression
                  }
              });
          });
      };
  
      // Ouvrir la modale pour ajouter une nouvelle liste
      addListButton.addEventListener("click", () => {
          addListModal.style.display = 'flex';  // Afficher la modale
      });
  
      // Fermer la modale
      closeModal.addEventListener("click", () => {
          addListModal.style.display = 'none';  // Cacher la modale
      });
  
      // Ajouter une nouvelle liste
      submitNewList.addEventListener("click", async () => {
          const newList = {
              name: newListName.value.trim(),
              ingredients: []  // Liste vide d'ingrédients
          };
          if (newList.name) {
              await addDoc(collection(db, "shoppingLists"), newList);
              loadShoppingLists();  // Recharger la liste après ajout
              newListName.value = ''; // Réinitialiser le champ
              addListModal.style.display = 'none'; // Fermer la modale
          } else {
              alert("Le nom de la liste ne peut pas être vide");
          }
      });
  
      // Déconnexion
      logoutButton.addEventListener("click", async () => {
          await signOut(auth);
          localStorage.removeItem('userName');
          window.location.href = 'login.html';  // Rediriger vers la page de connexion
      });
  
      loadShoppingLists();  // Charger les listes au démarrage
  </script>  
</body>
</html>