import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
import { getFirestore, doc, getDoc, updateDoc } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-firestore.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 urlParams = new URLSearchParams(window.location.search);
const listId = urlParams.get("listId");

const categoriesContainer = document.getElementById('categoriesContainer');
const addIngredientButton = document.getElementById('addIngredientButton');
const addIngredientModal = document.getElementById('addIngredientModal');
const submitIngredientButton = document.getElementById('submitIngredientButton');
const ingredientName = document.getElementById('ingredientName');
const ingredientQuantity = document.getElementById('ingredientQuantity');
const ingredientUnit = document.getElementById('ingredientUnit');
const ingredientCategory = document.getElementById('ingredientCategory');

const modalOverlay = document.getElementById('modalOverlay');
const closeModalButton = document.getElementById('closeModalButton');

addIngredientButton.addEventListener('click', () => {
    addIngredientModal.style.display = 'block';
    modalOverlay.style.display = 'block';
});

closeModalButton.addEventListener('click', () => {
    addIngredientModal.style.display = 'none';
    modalOverlay.style.display = 'none';
});

modalOverlay.addEventListener('click', () => {
    addIngredientModal.style.display = 'none';
    modalOverlay.style.display = 'none';
});

const loadCategories = async () => {
    const listRef = doc(db, "shoppingLists", listId);
    const listDoc = await getDoc(listRef);
    const listData = listDoc.data();

    categoriesContainer.innerHTML = '';

    const categories = [
        "Viandes et Poissons",
        "Fruits et Légumes",
        "Épicerie",
        "Produits Frais",
        "Surgelés",
        "Hygiène et Beauté",
        "Boulangerie et Pâtisserie",
        "Boissons",
        "Autres"
    ];

    categories.forEach(category => {
        const categoryDiv = document.createElement('div');
        categoryDiv.classList.add('category');

        // Vérifie si la catégorie contient des ingrédients
        const hasItems = listData.ingredients.some(ingredient => ingredient.category === category);

        // Ajoute une classe si la catégorie a des éléments
        if (hasItems) {
            categoryDiv.classList.add('has-items');
        }

        const categoryHeader = document.createElement('h3');
        categoryHeader.innerHTML = `
            ${category} 
            <span class="category-badge">${hasItems ? '●' : ''}</span>
            <span class="toggle-arrow">▼</span>
        `;
        categoryDiv.appendChild(categoryHeader);

        const ingredientsList = document.createElement('div');
        ingredientsList.classList.add('ingredients-list');

        listData.ingredients.forEach(ingredient => {
            if (ingredient.category === category) {
                const ingredientItem = document.createElement('div');
                ingredientItem.classList.add('ingredient-item');
                const quantityUnit = ingredient.quantity
                    ? `${ingredient.quantity}${ingredient.unit || ''}`
                    : '';
                ingredientItem.innerHTML = `
                    <input type="checkbox" ${ingredient.valid ? 'checked' : ''} onchange="toggleValid('${ingredient.id}')">
                    <span>${ingredient.name} ${quantityUnit}</span>
                    <button onclick="deleteIngredient('${ingredient.id}')">Supprimer</button>
                `;
                ingredientsList.appendChild(ingredientItem);
            }
        });

        categoryDiv.appendChild(ingredientsList);
        categoriesContainer.appendChild(categoryDiv);

        categoryHeader.addEventListener('click', () => {
            ingredientsList.classList.toggle('open');
        });
    });
};

window.toggleValid = async (ingredientId) => {
    const listRef = doc(db, "shoppingLists", listId);
    const listDoc = await getDoc(listRef);
    const listData = listDoc.data();

    const updatedIngredients = listData.ingredients.map(ingredient => {
        if (ingredient.id === ingredientId) {
            ingredient.valid = !ingredient.valid;
        }
        return ingredient;
    });

    await updateDoc(listRef, { ingredients: updatedIngredients });
    loadCategories();
};

window.deleteIngredient = async (ingredientId) => {
    const listRef = doc(db, "shoppingLists", listId);
    const listDoc = await getDoc(listRef);
    const listData = listDoc.data();

    const updatedIngredients = listData.ingredients.filter(ingredient => ingredient.id !== ingredientId);
    await updateDoc(listRef, { ingredients: updatedIngredients });
    loadCategories();
};

submitIngredientButton.addEventListener("click", async () => {
    const newIngredient = {
        name: ingredientName.value,
        quantity: ingredientQuantity.value,
        unit: ingredientUnit.value,
        category: ingredientCategory.value,
        valid: false,
        id: Date.now().toString()
    };

    const listRef = doc(db, "shoppingLists", listId);
    const listDoc = await getDoc(listRef);
    const listData = listDoc.data();

    listData.ingredients.push(newIngredient);
    await updateDoc(listRef, { ingredients: listData.ingredients });

    ingredientName.value = '';
    ingredientQuantity.value = '';
    ingredientUnit.value = '';
    loadCategories();
    addIngredientModal.style.display = 'none';
});

addIngredientButton.addEventListener("click", () => {
    addIngredientModal.style.display = 'block';
});

// Charger les catégories et les ingrédients au chargement de la page
loadCategories();