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

{% block contentTitle %}{{ 'daily-reservations'|trans }}{% endblock %}

{% block content %}

<style type="text/css">
  .btn-xlarge {
    padding: 18px 28px;
    font-size: 30px;
    line-height: normal;
    border-radius: 8px;
  }

  #daily-content {
    max-width: 1400px;
    margin: 0 auto;
  }

  #sidePanel { width: 100%; }
  #viewer { width: 100%; }

  .qty-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
  }

  .qty-value {
    min-width: 90px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
  }

  .picked-count {
    color: #666;
    font-size: 12px;
    line-height: 1.2;
    min-width: 52px;
    text-align: center;
  }

  .qty-btn {
    min-width: 70px;
    min-height: 56px;
    font-size: 28px;
    font-weight: bold;
  }

  .product-card {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 16px;
  }

  .product-row {
    display: flex;
    gap: 14px;
    align-items: center;
  }

  .product-image img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
  }

  .product-info {
    flex: 1;
  }

  .product-status {
    font-size: 14px;
    margin-top: 6px;
    opacity: .8;
  }

  .all-actions {
    margin-bottom: 18px;
  }

  .validate-actions {
    margin: 18px 0;
  }

  .order-keypad {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 12px;
    position: sticky;
    top: 80px;
  }

  .order-keypad button {
    min-height: 58px;
    font-size: 20px;
    font-weight: bold;
  }

  .order-keypad-title {
    font-size: 16px;
    font-weight: bold;
    grid-column: 1 / -1;
    margin: 0;
    text-align: center;
  }

  @media (max-width: 1199.98px) {
    .order-keypad {
      gap: 6px;
      padding: 8px;
      top: 70px;
    }

    .order-keypad button {
      font-size: 18px;
      min-height: 48px;
      padding-left: 6px;
      padding-right: 6px;
    }

    .order-keypad-title {
      font-size: 14px;
    }
  }
</style>

<div class="container-fluid" id="daily-content">
  <div class="row justify-content-center">
    <div class="col-12">

      <div class="row pb-3">
        <div class="col-md-7">
          <input
            type="text"
            id="urlInput"
            placeholder="Escanea un QR, escribe una URL o introduce el número de pedido..."
            autocomplete="off"
            class="form-control"
          />
        </div>
        <div class="col-md-2">
          <button class="form-control btn btn-primary" id="loadBtn">
            Cargar pedido
          </button>
        </div>
        <div class="col-md-3">
          <a class="form-control btn btn-info" href="{{ path_for(constant('GestionComedor\\Configuration\\Routers\\ReservationRouters::RESERVATION_SPECIAL_PRODUCTS')) }}">
            Ver productos pendientes
          </a>
        </div>
      </div>

      <div class="row justify-content-center">
        <div class="col-12 col-md-9">
          <div id="sidePanel" class="p-3" style="border:1px solid #ddd;">
            <div id="orderMeta" class="w-100"></div>
            <div id="orderLines" class="w-100"></div>
          </div>
        </div>

        <div class="col-12 col-md-3 mt-3 mt-md-0">
          <div class="order-keypad" id="orderKeypad">
            <p class="order-keypad-title">Número de pedido</p>
            <button type="button" class="btn btn-light order-key" data-value="1">1</button>
            <button type="button" class="btn btn-light order-key" data-value="2">2</button>
            <button type="button" class="btn btn-light order-key" data-value="3">3</button>
            <button type="button" class="btn btn-light order-key" data-value="4">4</button>
            <button type="button" class="btn btn-light order-key" data-value="5">5</button>
            <button type="button" class="btn btn-light order-key" data-value="6">6</button>
            <button type="button" class="btn btn-light order-key" data-value="7">7</button>
            <button type="button" class="btn btn-light order-key" data-value="8">8</button>
            <button type="button" class="btn btn-light order-key" data-value="9">9</button>
            <button type="button" class="btn btn-warning order-key-backspace"><i class="fa fa-angle-double-left"></i></button>
            <button type="button" class="btn btn-light order-key" data-value="0">0</button>
            <button type="button" class="btn btn-danger order-key-clear">X</button>
          </div>
        </div>

        <div id="viewer" class="d-none"></div>
      </div>

    </div>
  </div>
</div>

<script>
(() => {
  let currentOrder = null;
  const input = document.getElementById("urlInput");
  const loadBtn = document.getElementById("loadBtn");

  const orderMetaEl = document.getElementById("orderMeta");
  const orderLinesEl = document.getElementById("orderLines");

  function normalizarURL(value) {
    value = (value || "").trim();
    if (!value) return "";
    if (!/^https?:\/\//i.test(value)) value = "https://" + value;
    return value;
  }

  function getOrderId(urlString) {
    try {
      const u = new URL(urlString);
      return u.searchParams.get("order_id");
    } catch {
      return null;
    }
  }

  function getOrderIdFromInput(value) {
    const raw = (value || "").trim();
    if (!raw) return null;

    if (/^\d+$/.test(raw)) return raw;

    return getOrderId(normalizarURL(raw));
  }

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

  function formatEUR(v) {
    const n = Number(v);
    if (Number.isFinite(n)) {
      return n.toLocaleString("es-ES", { style: "currency", currency: "EUR" });
    }
    return escapeHtml(v);
  }

  function setLoading(message) {
    orderMetaEl.innerHTML = `<p>${escapeHtml(message)}</p>`;
    orderLinesEl.innerHTML = "";
  }

  function setError(message) {
    orderMetaEl.innerHTML = `<p style="color:#b00020;">${escapeHtml(message)}</p>`;
    orderLinesEl.innerHTML = "";
  }

  async function fetchOrderFromSlim(orderId) {
    const url = `/reservation/special/order/${encodeURIComponent(orderId)}/`;
    const r = await fetch(url, {
      method: "GET",
      headers: { "Accept": "application/json" }
    });

    if (!r.ok) {
      let body = "";
      try { body = await r.text(); } catch {}
      throw new Error(`API ${r.status} ${body}`);
    }
    return r.json();
  }

  function postJSON(payload) {
    const url = `/reservation/special/order/${encodeURIComponent(payload.order_id)}/`;
    return fetch(url, {
      method: "POST",
      headers: { "Content-Type": "application/json", "Accept": "application/json" },
      body: JSON.stringify(payload)
    }).then(async (r) => {
      const text = await r.text();
      let data = null;
      try { data = text ? JSON.parse(text) : null; } catch {}
      if (!r.ok) throw new Error(`HTTP ${r.status}: ${text}`);
      return data;
    });
  }

  function getPickedQty(item) {
    return Math.max(0, parseInt(item.selected_qty, 10) || 0);
  }

  function getPendingQty(item) {
    return Math.max(0, parseInt(item.pending_qty, 10) || 0);
  }

  function getRemainingQty(item) {
    const qty = Math.max(0, parseInt(item.quantity, 10) || 0);
    return Math.max(0, qty - getPickedQty(item));
  }

  function getPendingTotal(items) {
    return items.reduce((total, item) => total + getPendingQty(item), 0);
  }

  function buildUnitButtons(orderId, itemId, quantity, pickedQty, pendingQty) {
    const remainingQty = Math.max(0, quantity - pickedQty);
    const minusDisabled = pendingQty <= 0 ? "disabled" : "";
    const plusDisabled = pendingQty >= remainingQty ? "disabled" : "";

    return `
      <div class="qty-box">
        <button
          class="btn btn-danger qty-btn decrease"
          data-orderid="${escapeHtml(orderId)}"
          data-itemid="${escapeHtml(itemId)}"
          data-quantity="${escapeHtml(quantity)}"
          ${minusDisabled}
        >−</button>

        <div class="qty-value">${escapeHtml(pendingQty)} / ${escapeHtml(remainingQty)}</div>

        <button
          class="btn btn-success qty-btn increase"
          data-orderid="${escapeHtml(orderId)}"
          data-itemid="${escapeHtml(itemId)}"
          data-quantity="${escapeHtml(quantity)}"
          ${plusDisabled}
        >+</button>
      </div>
    `;
  }

  function renderOrder(order) {
    currentOrder = order;
    const number = order.number ?? order.id ?? "";
    const total = order.total ?? "";
    const date = order.date_created ?? "";
    const items = Array.isArray(order.line_items) ? order.line_items : [];
    const pendingTotal = getPendingTotal(items);

    orderMetaEl.innerHTML = `
      <h4 style="margin:0 0 8px 0;">Pedido #${escapeHtml(number)}</h4>
      <div><b>Total:</b> ${formatEUR(total)}</div>
      <div style="margin-bottom:10px;"><b>Fecha:</b> ${escapeHtml(date)}</div>
      <hr/>
    `;

    if (!items.length) {
      orderLinesEl.innerHTML = "<p>No hay productos en este pedido.</p>";
      return;
    }

    const hasRemaining = items.some(it => getRemainingQty(it) > 0);
    const allPending = hasRemaining && items.every(it => getPendingQty(it) >= getRemainingQty(it));

    const allActions = `
      <div class="all-actions">
        ${
          allPending
            ? `<button class="btn btn-danger w-100 pt-3 pb-3 clearPending" data-orderid="${escapeHtml(number)}">Quitar selección</button>`
            : `<button class="btn btn-success w-100 pt-3 pb-3 chooseAll" data-orderid="${escapeHtml(number)}" ${hasRemaining ? "" : "disabled"}>Recoger todo lo pendiente</button>`
        }
      </div>
    `;

    const products = items.map(it => {
        const qty = Math.max(0, parseInt(it.quantity, 10) || 0);
        const pickedQty = Math.min(qty, getPickedQty(it));
        const pendingQty = Math.min(getPendingQty(it), Math.max(0, qty - pickedQty));
        it.pending_qty = pendingQty;
      const img = it.image?.src || it.image || null;
      const finalQty = pickedQty + pendingQty;

      let statusText = "Sin recoger";
      let statusClass = "text-danger";

      if (pendingQty > 0) {
        statusText = "Pendiente de validar";
        statusClass = "text-primary";
      } else if (finalQty > 0 && finalQty < qty) {
        statusText = "Recogida parcial";
        statusClass = "text-warning";
      } else if (finalQty >= qty && qty > 0) {
        statusText = "Recogido completo";
        statusClass = "text-success";
      }

      return `
        <div class="product-card">
          <div class="product-row">
            <div class="picked-count">Recogido<br><b>${escapeHtml(pickedQty)}</b></div>

            <div class="product-image">
              ${img ? `<img src="${escapeHtml(img)}" alt="">` : ""}
            </div>

            <div class="product-info">
              <div><b>${escapeHtml(it.name ?? "")}</b></div>
              <div class="product-status ${statusClass}">
                ${escapeHtml(statusText)}
              </div>
              ${buildUnitButtons(number, it.id, qty, pickedQty, pendingQty)}
            </div>
          </div>
        </div>
      `;
    }).join("");

    const validateActions = `
      <div class="validate-actions">
        <button class="btn btn-primary btn-xlarge w-100 validatePickup" data-orderid="${escapeHtml(number)}" ${pendingTotal > 0 ? "" : "disabled"}>
          Validar recogida${pendingTotal > 0 ? ` (${escapeHtml(pendingTotal)})` : ""}
        </button>
      </div>
    `;

    orderLinesEl.innerHTML = allActions + products + validateActions;
  }

  async function refreshOrder(orderId) {
    const order = await fetchOrderFromSlim(orderId);
    renderOrder(order);
  }

  function findCurrentItem(itemId) {
    const items = Array.isArray(currentOrder?.line_items) ? currentOrder.line_items : [];
    return items.find(it => (parseInt(it.id, 10) || 0) === itemId);
  }

  function buildValidatePayload(orderId) {
    const items = Array.isArray(currentOrder?.line_items) ? currentOrder.line_items : [];
    return {
      order_id: orderId,
      action: "validate",
      items: items.map(it => {
        const quantity = Math.max(0, parseInt(it.quantity, 10) || 0);
        const pickedQty = Math.min(quantity, getPickedQty(it));
        const pendingQty = Math.min(getPendingQty(it), Math.max(0, quantity - pickedQty));

        return {
          item_id: parseInt(it.id, 10) || 0,
          quantity: quantity,
          selected_qty: pickedQty + pendingQty
        };
      })
    };
  }

  document.addEventListener("click", async (e) => {
    const btn = e.target.closest(".chooseAll, .clearPending, .increase, .decrease, .validatePickup");
    if (!btn) return;

    const orderId = btn.dataset.orderid;
    const itemId = btn.dataset.itemid ? parseInt(btn.dataset.itemid, 10) : null;

    if (!orderId) return;

    if (btn.classList.contains("chooseAll")) {
      (currentOrder.line_items || []).forEach(it => {
        it.pending_qty = getRemainingQty(it);
      });
      renderOrder(currentOrder);
      return;
    }

    if (btn.classList.contains("clearPending")) {
      (currentOrder.line_items || []).forEach(it => {
        it.pending_qty = 0;
      });
      renderOrder(currentOrder);
      return;
    }

    if (btn.classList.contains("increase") || btn.classList.contains("decrease")) {
      const item = findCurrentItem(itemId);
      if (!item) return;

      const pendingQty = getPendingQty(item);
      const remainingQty = getRemainingQty(item);
      item.pending_qty = btn.classList.contains("increase")
        ? Math.min(remainingQty, pendingQty + 1)
        : Math.max(0, pendingQty - 1);

      renderOrder(currentOrder);
      return;
    }

    try {
      if (!btn.classList.contains("validatePickup")) return;
      if (btn.dataset.loading === "true") return;

      btn.dataset.loading = "true";
      btn.disabled = true;
      await postJSON(buildValidatePayload(orderId));
      (currentOrder.line_items || []).forEach(it => {
        const quantity = Math.max(0, parseInt(it.quantity, 10) || 0);
        const pickedQty = Math.min(quantity, getPickedQty(it));
        const pendingQty = Math.min(getPendingQty(it), Math.max(0, quantity - pickedQty));

        it.selected_qty = pickedQty + pendingQty;
        it.pending_qty = 0;
      });
      renderOrder(currentOrder);

    } catch (err) {
      console.error(err);
      alert("Error en la llamada al servidor.");
    } finally {
      btn.dataset.loading = "false";
      btn.disabled = false;
    }
  });

  async function handleInputLoad() {
    const raw = input.value.trim();
    if (!raw) return;

    const orderId = getOrderIdFromInput(raw);
    if (!orderId) {
      setError("Introduce un número de pedido o una URL con order_id.");
      input.value = "";
      return;
    }

    setLoading(`Cargando pedido #${orderId}…`);

    try {
      const order = await fetchOrderFromSlim(orderId);
      renderOrder(order);
    } catch (e) {
      console.error(e);
      setError(`Error cargando el pedido #${orderId}.`);
    }

    input.value = "";
    input.focus();
  }

  document.getElementById("orderKeypad").addEventListener("click", (event) => {
    const numberBtn = event.target.closest(".order-key");
    const backspaceBtn = event.target.closest(".order-key-backspace");
    const clearBtn = event.target.closest(".order-key-clear");

    if (numberBtn) {
      input.value += numberBtn.dataset.value;
    } else if (backspaceBtn) {
      input.value = input.value.slice(0, -1);
    } else if (clearBtn) {
      input.value = "";
    } else {
      return;
    }

    input.focus();
  });

  loadBtn.addEventListener("click", (e) => {
    e.preventDefault();
    handleInputLoad();
  });

  input.addEventListener("keydown", (event) => {
    if (event.key === "Enter") {
      event.preventDefault();
      handleInputLoad();
    }
  });

  let lastInputTime = 0;
  const autoLoadDelay = 180;

  input.addEventListener("input", () => {
    lastInputTime = Date.now();

    setTimeout(() => {
      const elapsed = Date.now() - lastInputTime;
      const raw = input.value.trim();
      if (elapsed >= autoLoadDelay && raw !== "" && /order_id=/i.test(raw)) {
        handleInputLoad();
      }
    }, autoLoadDelay + 500);
  });

  window.addEventListener("load", () => input.focus());
})();
</script>

{% endblock %}