/* ==========================================================================
   Gasto Hogar - Landing Page JavaScript (Valores en Bs enteros sin decimales)
   ========================================================================== */

const CONFIG = {
  whatsappNumber: "584120000000",
  whatsappMessage: "¡Hola! Vi la página de Gasto Hogar y quiero solicitar mi prueba gratuita de 3 días para organizar mis compras.",
  subscriptionUrl: "https://tu-pagina-de-suscripcion.com/gasto-hogar-3eur"
};

let simulatorState = {
  listName: "Compra semanal",
  budget: 10.0,
  budgetCurrency: "USD",
  displayCurrency: "USD_BCV",
  rateBCV: 45.5,
  rateParalelo: 52.0,
  rateEuro: 49.5,
  items: [
    { name: "Aceite vegetal (x1)", price: 5.0, rateType: "USD_BCV", category: "🛒 Despensa" }
  ]
};

document.addEventListener("DOMContentLoaded", () => {
  initWhatsAppLinks();
  initSubscriptionLinks();
  initSimulator();
});

function initWhatsAppLinks() {
  const whatsappBtns = document.querySelectorAll(".js-whatsapp-link");
  const waUrl = `https://wa.me/${CONFIG.whatsappNumber}?text=${encodeURIComponent(CONFIG.whatsappMessage)}`;
  whatsappBtns.forEach(btn => {
    btn.setAttribute("href", waUrl);
    btn.setAttribute("target", "_blank");
    btn.setAttribute("rel", "noopener noreferrer");
  });
}

function initSubscriptionLinks() {
  const subBtns = document.querySelectorAll(".js-subscription-link");
  subBtns.forEach(btn => {
    btn.setAttribute("href", CONFIG.subscriptionUrl);
    btn.setAttribute("target", "_blank");
    btn.setAttribute("rel", "noopener noreferrer");
  });
}

function initSimulator() {
  const budgetInput = document.getElementById("sim-budget");
  const displayCurrencySelect = document.getElementById("sim-display-currency");
  const rateBcvInput = document.getElementById("sim-rate-bcv");
  const rateParaleloInput = document.getElementById("sim-rate-paralelo");
  const rateEuroInput = document.getElementById("sim-rate-euro");

  const itemNameInput = document.getElementById("sim-item-name");
  const itemPriceInput = document.getElementById("sim-item-price");
  const itemRateSelect = document.getElementById("sim-item-rate");
  const itemCategorySelect = document.getElementById("sim-item-category");
  const addItemBtn = document.getElementById("sim-add-item");

  if (!budgetInput) return;

  budgetInput.addEventListener("input", (e) => {
    simulatorState.budget = parseFloat(e.target.value) || 0;
    renderSimulator();
  });

  if (displayCurrencySelect) {
    displayCurrencySelect.addEventListener("change", (e) => {
      simulatorState.displayCurrency = e.target.value;
      renderSimulator();
    });
  }

  rateBcvInput.addEventListener("input", (e) => {
    simulatorState.rateBCV = parseFloat(e.target.value) || 1;
    renderSimulator();
  });

  rateParaleloInput.addEventListener("input", (e) => {
    simulatorState.rateParalelo = parseFloat(e.target.value) || 1;
    renderSimulator();
  });

  if (rateEuroInput) {
    rateEuroInput.addEventListener("input", (e) => {
      simulatorState.rateEuro = parseFloat(e.target.value) || 1;
      renderSimulator();
    });
  }

  if (addItemBtn) {
    addItemBtn.addEventListener("click", () => {
      const name = itemNameInput.value.trim() || "Producto sin nombre";
      const price = parseFloat(itemPriceInput.value) || 0;
      const rateType = itemRateSelect.value;
      const category = itemCategorySelect ? itemCategorySelect.value : "🛒 Despensa";

      if (price > 0) {
        simulatorState.items.push({ name, price, rateType, category });
        itemNameInput.value = "";
        itemPriceInput.value = "";
        renderSimulator();
      }
    });
  }

  renderSimulator();
}

/**
 * Formateador de moneda:
 * - En Bs: Valores enteros sin decimales (ej. 4250 Bs, 45000 Bs).
 * - En USD/EUR: Conserva decimales (ej. 4.5, 4.30).
 */
function formatCurrency(val, currencyType) {
  if (currencyType === "BS") {
    // Bolívares sin decimales
    return `${Math.round(val).toLocaleString("es-VE")} Bs`;
  } else {
    // USD o EUR con decimales
    const sym = currencyType === "EUR" ? "€" : "$";
    return `${sym}${val.toFixed(2)}`;
  }
}

function renderSimulator() {
  const itemsContainer = document.getElementById("sim-items-list");
  const totalSummaryEl = document.getElementById("sim-total-summary");
  const remainingStatusEl = document.getElementById("sim-remaining-status");

  if (!itemsContainer) return;

  const rateBCV = simulatorState.rateBCV > 0 ? simulatorState.rateBCV : 1;
  const rateParalelo = simulatorState.rateParalelo > 0 ? simulatorState.rateParalelo : 1;
  const rateEuro = simulatorState.rateEuro > 0 ? simulatorState.rateEuro : 1;

  let totalBs = 0;
  itemsContainer.innerHTML = "";

  const categoriesMap = {};

  simulatorState.items.forEach((item, index) => {
    let itemBs = 0;
    let priceDisplay = "";

    if (item.rateType === "BS") {
      itemBs = item.price;
      priceDisplay = `Bs ${Math.round(item.price).toLocaleString("es-VE")}`;
    } else if (item.rateType === "USD_BCV") {
      itemBs = item.price * rateBCV;
      priceDisplay = `$ BCV ${item.price.toFixed(2)}`;
    } else if (item.rateType === "USD_PARALELO") {
      itemBs = item.price * rateParalelo;
      priceDisplay = `$ Paralelo ${item.price.toFixed(2)}`;
    } else if (item.rateType === "EUR") {
      itemBs = item.price * rateEuro;
      priceDisplay = `EUR ${item.price.toFixed(2)}`;
    }

    totalBs += itemBs;

    const cat = item.category || "🛒 Despensa";
    if (!categoriesMap[cat]) categoriesMap[cat] = [];
    categoriesMap[cat].push({ ...item, itemBs, priceDisplay, index });
  });

  // Renderizar ítems por rubro
  if (Object.keys(categoriesMap).length === 0) {
    itemsContainer.innerHTML = `<p style="font-size:0.85rem; color:var(--text-muted); text-align:center; padding:12px;">Aún no hay productos en la lista.</p>`;
  } else {
    for (const [catName, catItems] of Object.entries(categoriesMap)) {
      const catHeader = document.createElement("div");
      catHeader.style.fontWeight = "700";
      catHeader.style.fontSize = "0.85rem";
      catHeader.style.color = "var(--primary-hover)";
      catHeader.style.margin = "8px 0 4px 0";
      catHeader.textContent = catName;
      itemsContainer.appendChild(catHeader);

      catItems.forEach(item => {
        const itemRow = document.createElement("div");
        itemRow.className = "item-row";
        itemRow.innerHTML = `
          <div class="item-info">
            <span class="item-name">${escapeHtml(item.name)} x1</span>
          </div>
          <div style="display:flex; align-items:center; gap:8px;">
            <span style="font-size:0.78rem; background:#ecfdf5; color:#047857; font-weight:700; padding:2px 6px; border-radius:4px;">
              ${item.priceDisplay}
            </span>
            <button onclick="removeSimItem(${item.index})" style="background:none; border:none; color:#ef4444; cursor:pointer;" title="Eliminar">
              <i class="fas fa-times"></i>
            </button>
          </div>
        `;
        itemsContainer.appendChild(itemRow);
      });
    }
  }

  // Selección de tasa base para mostrar
  let displayRate = rateBCV;
  let currencySym = "$";

  if (simulatorState.displayCurrency === "USD_PARALELO") {
    displayRate = rateParalelo;
    currencySym = "$";
  } else if (simulatorState.displayCurrency === "EUR") {
    displayRate = rateEuro;
    currencySym = "€";
  } else if (simulatorState.displayCurrency === "BS") {
    displayRate = 1;
    currencySym = "Bs ";
  }

  const totalInDisplay = simulatorState.displayCurrency === "BS" ? totalBs : (totalBs / displayRate);
  const budgetBs = simulatorState.budget * rateBCV; 
  const differenceBs = budgetBs - totalBs;
  const differenceInDisplay = simulatorState.displayCurrency === "BS" ? differenceBs : (differenceBs / displayRate);

  // Formato exacto: Bolívares SIN decimales (ej. Bs 4.250 o Bs 45000), Dólares CON decimales (ej. $5.00)
  if (totalSummaryEl) {
    const bsFormatted = Math.round(totalBs).toLocaleString("es-VE");
    if (simulatorState.displayCurrency === "BS") {
      totalSummaryEl.textContent = `Total: Bs ${bsFormatted}`;
    } else {
      totalSummaryEl.textContent = `Total: ${currencySym}${totalInDisplay.toFixed(2)} - Bs ${bsFormatted}`;
    }
  }

  // Sobrante / Deficit
  if (remainingStatusEl) {
    if (differenceBs >= 0) {
      remainingStatusEl.style.color = "#34d399";
      const remainingText = simulatorState.displayCurrency === "BS"
        ? `Bs ${Math.round(differenceBs).toLocaleString("es-VE")}`
        : `${currencySym}${differenceInDisplay.toFixed(2)}`;
      remainingStatusEl.innerHTML = `<i class="fas fa-check-circle"></i> Te quedan <strong>${remainingText}</strong>`;
    } else {
      remainingStatusEl.style.color = "#f87171";
      const overText = simulatorState.displayCurrency === "BS"
        ? `Bs ${Math.round(Math.abs(differenceBs)).toLocaleString("es-VE")}`
        : `${currencySym}${Math.abs(differenceInDisplay).toFixed(2)}`;
      remainingStatusEl.innerHTML = `<i class="fas fa-exclamation-triangle"></i> Te pasaste por <strong>${overText}</strong>`;
    }
  }
}

window.removeSimItem = function(index) {
  simulatorState.items.splice(index, 1);
  renderSimulator();
};

function escapeHtml(str) {
  return str.replace(/[&<>'"]/g, 
    tag => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      "'": '&#39;',
      '"': '&quot;'
    }[tag] || tag)
  );
}