document.addEventListener("DOMContentLoaded", () => {
    const baseUrl = "https://www.wicomm.com.br/clientes/dashboard/api.php";
  
    const showLoading = () => {
      document.getElementById("loading").style.display = "block";
    };
  
    const hideLoading = () => {
      document.getElementById("loading").style.display = "none";
    };
  
    const loadAccountData = (accountData) => {
      const container = document.getElementById("dashboard-container");
  
      // Cria uma seção para a conta
      const section = document.createElement("div");
      section.classList.add("account-section");
  
      section.innerHTML = `
        <h2>${accountData.account}</h2>
        <p><strong>Total de Transações:</strong> ${accountData.totalTransactions}</p>
        <p><strong>Faturamento Total:</strong> R$ ${parseFloat(accountData.totalRevenue).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</p>
        <p><strong>Meio de Pagamento Mais Utilizado:</strong> ${accountData.mostUsedPayment}</p>
        <canvas id="chart-${accountData.account}"></canvas>
        <h3>Campanhas</h3>
        <table>
          <thead>
            <tr>
              <th>Promoção</th>
              <th>Quantidade</th>
            </tr>
          </thead>
          <tbody>
            ${accountData.campaigns
              .map(
                (campaign) =>
                  `<tr><td>${campaign.promotion}</td><td>${campaign.count}</td></tr>`
              )
              .join("")}
          </tbody>
        </table>
      `;
  
      container.appendChild(section);
  
      // Renderiza o gráfico
      const ctx = section.querySelector(`#chart-${accountData.account}`).getContext("2d");
      new Chart(ctx, {
        type: "bar",
        data: {
          labels: accountData.chartData.labels,
          datasets: [
            {
              label: "Valor",
              data: accountData.chartData.values,
              borderWidth: 1,
            },
          ],
        },
        options: {
          responsive: true,
          scales: {
            y: { beginAtZero: true },
          },
        },
      });
    };
  
    const updateDashboard = (filters) => {
      showLoading(); // Mostra o loading
  
      fetch(
        `${baseUrl}?action=getData&filters=${encodeURIComponent(
          JSON.stringify(filters)
        )}`
      )
        .then((response) => response.json())
        .then((data) => {
          const container = document.getElementById("dashboard-container");
          container.innerHTML = ""; // Limpa o conteúdo existente
          data.forEach(loadAccountData);
        })
        .catch((err) => console.error("Erro ao carregar os dados:", err))
        .finally(() => {
          hideLoading(); // Esconde o loading
        });
    };
  
    document.querySelectorAll(".filters button").forEach((button) => {
      button.addEventListener("click", () => {
        const range = button.getAttribute("data-range");
        const filters = { range: parseInt(range) };
        updateDashboard(filters);
      });
    });
  
    document.getElementById("applyFilters").addEventListener("click", () => {
      const startDate = document.getElementById("startDate").value;
      const endDate = document.getElementById("endDate").value;
      const paymentMethod = document.getElementById("paymentFilter").value;
      const filters = { startDate, endDate, paymentMethod };
      updateDashboard(filters);
    });
  });