{% extends "common/auth_page.twig" %}

{% block contentTitle %}Productos pendientes de recoger{% endblock %}

{% block content %}

<style type="text/css">
  .special-products-screen {
    max-width: 1500px;
    margin: 0 auto;
  }

  .special-products-toolbar {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(180px, 220px) minmax(180px, 260px) auto minmax(180px, 1fr);
    margin-bottom: 18px;
  }

  .special-products-summary {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    margin-bottom: 18px;
  }

  .summary-box {
    background: #fff;
    border: 1px solid #d8dde3;
    border-radius: 6px;
    padding: 14px;
  }

  .summary-label {
    color: #56616f;
    font-size: 13px;
    margin: 0 0 4px;
  }

  .summary-value {
    color: #17202a;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
  }

  .status-line {
    color: #56616f;
    font-size: 13px;
    text-align: right;
  }

  .products-table-wrap {
    background: #fff;
    border: 1px solid #d8dde3;
    border-radius: 6px;
    overflow: hidden;
  }

  .products-table {
    margin-bottom: 0;
  }

  .products-table th {
    background: #f6f8fa;
    border-top: 0;
    color: #17202a;
    font-size: 13px;
    white-space: nowrap;
  }

  .product-cell {
    align-items: center;
    display: flex;
    gap: 12px;
    min-width: 260px;
  }

  .product-image {
    background: #eef1f4;
    border-radius: 6px;
    flex: 0 0 48px;
    height: 48px;
    overflow: hidden;
    width: 48px;
  }

  .product-image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .product-name {
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
  }

  .product-meta {
    color: #687586;
    font-size: 12px;
    margin-top: 3px;
  }

  .qty-number {
    font-size: 20px;
    font-weight: 700;
  }

  .qty-pending {
    color: #b02a37;
  }

  .qty-picked {
    color: #1f7a3f;
  }

  .qty-purchased {
    color: #17202a;
  }

  .empty-state,
  .error-state {
    padding: 32px;
    text-align: center;
  }

  .error-state {
    color: #b02a37;
  }

  @media (max-width: 900px) {
    .special-products-toolbar,
    .special-products-summary {
      grid-template-columns: 1fr;
    }

    .status-line {
      text-align: left;
    }
  }
</style>

<div class="special-products-screen">
  <div class="special-products-toolbar">
    <div>
      <label for="dateFrom" class="font-weight-bold">Desde</label>
      <input type="date" class="form-control" id="dateFrom" value="{{ dateFrom }}">
    </div>

    <div>
      <label for="categoryFilter" class="font-weight-bold">Categoría</label>
      <select class="form-control" id="categoryFilter">
        <option value="">Todas</option>
      </select>
    </div>

    <button type="button" class="btn btn-primary" id="refreshButton">
      <i class="fa fa-refresh" aria-hidden="true"></i> Actualizar
    </button>

    <div class="status-line" id="statusLine">Preparando datos...</div>
  </div>

  <div class="special-products-summary">
    <div class="summary-box">
      <p class="summary-label">Recogidos</p>
      <p class="summary-value qty-picked" id="pickedTotal">0</p>
    </div>
    <div class="summary-box">
      <p class="summary-label">Pendientes</p>
      <p class="summary-value qty-pending" id="pendingTotal">0</p>
    </div>
  </div>

  <div class="products-table-wrap">
    <table class="table table-striped products-table">
      <thead>
        <tr>
          <th>Producto</th>
          <th class="text-right">Comprados</th>
          <th class="text-right">Recogidos</th>
          <th class="text-right">Pendientes</th>
        </tr>
      </thead>
      <tbody id="productsBody">
        <tr>
          <td colspan="4" class="empty-state">Cargando...</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script>
(() => {
  const refreshMs = 7000;
  const dateFromInput = document.getElementById("dateFrom");
  const categoryFilter = document.getElementById("categoryFilter");
  const refreshButton = document.getElementById("refreshButton");
  const statusLine = document.getElementById("statusLine");
  const productsBody = document.getElementById("productsBody");
  const totals = {
    picked: document.getElementById("pickedTotal"),
    pending: document.getElementById("pendingTotal")
  };

  let loading = false;
  let timer = null;

  function escapeHtml(str) {
    return String(str ?? "")
      .replaceAll("&", "&amp;")
      .replaceAll("<", "&lt;")
      .replaceAll(">", "&gt;")
      .replaceAll('"', "&quot;")
      .replaceAll("'", "&#039;");
  }

  function formatNumber(value) {
    const n = Number(value);
    return Number.isFinite(n) ? n.toLocaleString("es-ES") : "0";
  }

  function setStatus(text) {
    statusLine.textContent = text;
  }

  function renderSummary(summary) {
    const data = summary || {};
    const totalData = data.totals || {};
    totals.picked.textContent = formatNumber(totalData.picked);
    totals.pending.textContent = formatNumber(totalData.pending);
  }

  function renderCategories(categories, selectedCategory) {
    const selected = selectedCategory || categoryFilter.value || "";
    const rows = Array.isArray(categories) ? categories : [];
    const options = [`<option value="">Todas</option>`].concat(rows.map(category => {
      const value = escapeHtml(category.key);
      const label = escapeHtml(category.name);
      const isSelected = category.key === selected ? "selected" : "";
      return `<option value="${value}" ${isSelected}>${label}</option>`;
    }));

    categoryFilter.innerHTML = options.join("");

    if (selected && rows.some(category => category.key === selected)) {
      categoryFilter.value = selected;
    } else {
      categoryFilter.value = "";
    }
  }

  function renderProducts(products) {
    const rows = Array.isArray(products) ? products : [];

    if (!rows.length) {
      productsBody.innerHTML = `<tr><td colspan="4" class="empty-state">No hay unidades en este rango.</td></tr>`;
      return;
    }

    productsBody.innerHTML = rows.map(product => {
      const image = product.image
        ? `<img src="${escapeHtml(product.image)}" alt="">`
        : "";
      const sku = product.sku ? `SKU ${escapeHtml(product.sku)}` : "";
      const categories = Array.isArray(product.categories) && product.categories.length
        ? ` · ${escapeHtml(product.categories.join(", "))}`
        : "";

      return `
        <tr>
          <td>
            <div class="product-cell">
              <div class="product-image">${image}</div>
              <div>
                <p class="product-name">${escapeHtml(product.name)}</p>
                <div class="product-meta">${sku}${categories}</div>
              </div>
            </div>
          </td>
          <td class="text-right qty-number qty-purchased">${formatNumber(product.purchased)}</td>
          <td class="text-right qty-number qty-picked">${formatNumber(product.picked)}</td>
          <td class="text-right qty-number qty-pending">${formatNumber(product.pending)}</td>
        </tr>
      `;
    }).join("");
  }

  async function loadProducts() {
    if (loading) return;

    loading = true;
    refreshButton.disabled = true;
    setStatus("Actualizando...");

    try {
      const params = new URLSearchParams({
        dateFrom: dateFromInput.value,
        category: categoryFilter.value
      });
      const response = await fetch(`/reservation/special/products/ajax/?${params.toString()}`, {
        method: "GET",
        headers: { "Accept": "application/json" }
      });

      const payload = await response.json();
      if (!response.ok || payload.error) {
        throw new Error(payload.message || `HTTP ${response.status}`);
      }

      renderSummary(payload.data);
      renderCategories(payload.data.categories, payload.data.selectedCategory);
      renderProducts(payload.data.products);
      setStatus(`Actualizado ${payload.data.updatedAt}. Rango ${payload.data.dateFrom} a ${payload.data.dateTo}.`);
    } catch (error) {
      console.error(error);
      productsBody.innerHTML = `<tr><td colspan="4" class="error-state">No se pudo cargar el resumen.</td></tr>`;
      setStatus("Error al actualizar.");
    } finally {
      loading = false;
      refreshButton.disabled = false;
      scheduleNextLoad();
    }
  }

  function scheduleNextLoad() {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(loadProducts, refreshMs);
  }

  refreshButton.addEventListener("click", () => {
    if (timer) {
      clearTimeout(timer);
    }
    loadProducts();
  });

  dateFromInput.addEventListener("change", () => {
    if (timer) {
      clearTimeout(timer);
    }
    loadProducts();
  });

  categoryFilter.addEventListener("change", () => {
    if (timer) {
      clearTimeout(timer);
    }
    loadProducts();
  });

  loadProducts();
})();
</script>

{% endblock %}