document.addEventListener("DOMContentLoaded", () => {
  const form = document.getElementById("invoiceForm");
  const invoiceItems = document.getElementById("invoiceItems");
  const addItemButton = document.getElementById("addItemButton");

  // Initialiser avec une ligne de facturation par défaut
  addInvoiceItem();

  // Ajouter une ligne de facturation lorsqu'on clique sur le bouton
  addItemButton.addEventListener("click", addInvoiceItem);

  // Fonction pour créer une nouvelle ligne de facturation
  function addInvoiceItem(description = "", amount = "") {
    const itemId = Date.now(); // ID unique pour l'élément
    const itemDiv = document.createElement("div");
    itemDiv.className = "invoice-item grid grid-cols-5 gap-2";
    itemDiv.dataset.id = itemId;

    itemDiv.innerHTML = `
      <div class="col-span-3">
        <input type="text" name="item_description_${itemId}" placeholder="Description" value="${description}" 
               class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
      </div>
      <div class="col-span-1">
        <input type="number" step="0.01" name="item_amount_${itemId}" placeholder="Montant" value="${amount}" 
               class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
      </div>
      <div class="col-span-1">
        <button type="button" class="delete-item text-red-500 hover:text-red-700" data-id="${itemId}">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    `;

    // Ajouter un gestionnaire d'événements pour supprimer la ligne
    const deleteButton = itemDiv.querySelector(".delete-item");
    deleteButton.addEventListener("click", function () {
      const id = this.getAttribute("data-id");
      deleteInvoiceItem(id);
    });

    invoiceItems.appendChild(itemDiv);
  }

  // Fonction pour supprimer une ligne de facturation
  function deleteInvoiceItem(id) {
    const item = document.querySelector(`.invoice-item[data-id="${id}"]`);
    if (item) {
      item.remove();
    }

    // S'assurer qu'il reste au moins une ligne
    if (invoiceItems.children.length === 0) {
      addInvoiceItem();
    }
  }

  // Fonction pour collecter toutes les lignes de facturation
  function collectInvoiceItems() {
    const items = [];
    document.querySelectorAll(".invoice-item").forEach((item) => {
      const id = item.dataset.id;
      const description = item.querySelector(
        `[name="item_description_${id}"]`
      ).value;
      const amount = item.querySelector(`[name="item_amount_${id}"]`).value;

      if (description && amount) {
        items.push({ description, amount });
      }
    });
    return items;
  }

  // Fonction pour valider le formulaire
  function validateForm() {
    const requiredFields = [
      form.invoice_number,
      form.amount,
      form.recipient_name,
      form.recipient_address,
      form.recipient_postal_code,
      form.recipient_town,
      form.recipient_country,
    ];

    for (const field of requiredFields) {
      if (!field.value) {
        showMessage(`Le champ ${field.name} est requis`, "error");
        field.focus();
        return false;
      }
    }

    const items = collectInvoiceItems();
    if (items.length === 0) {
      showMessage("Ajoutez au moins une ligne de facturation", "error");
      return false;
    }

    return true;
  }

  // Fonction pour afficher les messages
  function showMessage(message, type = "success") {
    const messageDiv = document.createElement("div");
    messageDiv.className = `${type}-message fixed top-4 right-4 p-4 rounded-md shadow-lg ${
      type === "success" ? "bg-green-500" : "bg-red-500"
    } text-white`;
    messageDiv.textContent = message;
    document.body.appendChild(messageDiv);

    // Afficher le message
    setTimeout(() => messageDiv.classList.add("opacity-100"), 100);

    // Supprimer le message après 3 secondes
    setTimeout(() => {
      messageDiv.classList.remove("opacity-100");
      setTimeout(() => messageDiv.remove(), 300);
    }, 3000);
  }

  // Gestionnaire de soumission du formulaire
  form.addEventListener("submit", function (e) {
    e.preventDefault();

    if (!validateForm()) {
      return;
    }

    // Récupérer les données du formulaire
    const formData = {
      language: form.language.value,
      invoice_number: form.invoice_number.value,
      amount: form.amount.value, // Montant total
      currency: form.currency.value,
      recipient_name: form.recipient_name.value,
      recipient_address: form.recipient_address.value,
      recipient_postal_code: form.recipient_postal_code.value,
      recipient_town: form.recipient_town.value,
      recipient_country: form.recipient_country.value,
      recipient_vat_number: form.recipient_vat_number.value || null,
      items: collectInvoiceItems(), // Ajouter les lignes de facturation
    };

    // Rediriger vers la page de prévisualisation avec les données
    const queryString = encodeURIComponent(JSON.stringify(formData));
    window.location.href = `/preview?data=${queryString}`;
  });
});