{% extends "pos/base.html" %}
{% load static %}

{% block title %}FIFO Batch Reconcile{% endblock %}

{% block stylesheets %}
<style>
  /* ── Layout ── */
  .fifo-card {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    background: #fff;
  }

  /* ── Controls row ── */
  .controls-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
  }
  .controls-row label { font-weight: 600; margin: 0; }
  .batch-input {
    width: 90px;
    text-align: center;
  }

  /* ── Progress ── */
  .progress { height: 22px; border-radius: 4px; background: #e9ecef; }
  .progress-bar {
    transition: width .3s ease;
    font-size: .8rem;
    font-weight: 600;
    line-height: 22px;
  }
  #progress-label {
    font-size: .85rem;
    color: #495057;
    margin-top: .35rem;
  }

  /* ── Stats pills ── */
  .stat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
  }
  .stat-pill {
    padding: .3rem .8rem;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    background: #f1f3f5;
    color: #343a40;
  }
  .stat-pill.changed  { background: #d4edda; color: #155724; }
  .stat-pill.error    { background: #f8d7da; color: #721c24; }
  .stat-pill.cleaned  { background: #fff3cd; color: #856404; }
  .stat-pill.noop     { background: #e2e3e5; color: #383d41; }

  /* ── Log table ── */
  #log-wrapper {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
  }
  #log-table { margin: 0; font-size: .82rem; }
  #log-table thead th { position: sticky; top: 0; background: #f8f9fa; z-index: 1; }
  .row-changed  { background: #f0fff4; }
  .row-error    { background: #fff5f5; }
  .row-noop     { }

  /* ── Badges ── */
  .badge-action {
    font-size: .72rem;
    padding: .25em .6em;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
  }
  .ba-noop                 { background:#e2e3e5; color:#383d41; }
  .ba-created_deficit_layer{ background:#cce5ff; color:#004085; }
  .ba-trimmed_surplus      { background:#fff3cd; color:#856404; }
  .ba-cleared_all_zero_stock{ background:#f8d7da; color:#721c24; }
  .ba-error                { background:#f8d7da; color:#721c24; }

  /* ── Buttons ── */
  #btn-start  { min-width: 110px; }
  #btn-stop   { min-width: 90px;  }
  #btn-reset  { min-width: 90px;  }
</style>
{% endblock %}

{% block heading %}FIFO Batch Reconcile{% endblock %}

{% block content %}

<!-- ── Controls Card ── -->
<div class="fifo-card">
  <div class="controls-row">
    <label for="batch-size">Batch Size:</label>
    <input type="number" id="batch-size"
           class="form-control form-control-sm batch-input"
           value="50" min="1" max="500">

    <button id="btn-start" class="btn btn-primary btn-sm">
      ▶ Start
    </button>
    <button id="btn-stop" class="btn btn-warning btn-sm" disabled>
      ⏹ Stop
    </button>
    <button id="btn-reset" class="btn btn-secondary btn-sm" disabled>
      ↺ Reset
    </button>

    <span id="status-badge" class="badge badge-secondary ml-auto">Idle</span>
  </div>

  <!-- Progress -->
  <div class="mt-3">
    <div class="progress">
      <div id="prog-bar"
           class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
           role="progressbar"
           style="width:0%">0%</div>
    </div>
    <div id="progress-label">Ready. Press Start to begin.</div>
  </div>

  <!-- Stat pills -->
  <div class="stat-pills">
    <div class="stat-pill">Total: <span id="s-total">—</span></div>
    <div class="stat-pill">Done: <span id="s-done">0</span></div>
    <div class="stat-pill changed">Changed: <span id="s-changed">0</span></div>
    <div class="stat-pill noop">No-change: <span id="s-noop">0</span></div>
    <div class="stat-pill error">Errors: <span id="s-errors">0</span></div>
    <div class="stat-pill cleaned">Zero-layers cleaned: <span id="s-cleaned">0</span></div>
    <div class="stat-pill">Batches: <span id="s-batches">0</span></div>
  </div>
</div>

<!-- ── Log Card ── -->
<div class="fifo-card">
  <div class="d-flex justify-content-between align-items-center mb-2">
    <strong>Per-Product Log</strong>
    <button id="btn-clear-log" class="btn btn-sm btn-outline-secondary">Clear Log</button>
  </div>
  <div id="log-wrapper">
    <table id="log-table" class="table table-sm table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>Product Code</th>
          <th>Present Stock</th>
          <th>Layers After</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody id="log-body">
        <tr id="log-empty-row">
          <td colspan="5" class="text-center text-muted py-3">
            No records yet. Start the reconcile to see results here.
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

{% endblock %}

{% block javascripts %}
<script>
(function () {
  "use strict";

  /* ── DOM refs ── */
  const batchInput  = document.getElementById("batch-size");
  const btnStart    = document.getElementById("btn-start");
  const btnStop     = document.getElementById("btn-stop");
  const btnReset    = document.getElementById("btn-reset");
  const btnClearLog = document.getElementById("btn-clear-log");
  const progBar     = document.getElementById("prog-bar");
  const progLabel   = document.getElementById("progress-label");
  const statusBadge = document.getElementById("status-badge");
  const logBody     = document.getElementById("log-body");
  const emptyRow    = document.getElementById("log-empty-row");

  /* ── Stat spans ── */
  const sTotal   = document.getElementById("s-total");
  const sDone    = document.getElementById("s-done");
  const sChanged = document.getElementById("s-changed");
  const sNoop    = document.getElementById("s-noop");
  const sErrors  = document.getElementById("s-errors");
  const sCleaned = document.getElementById("s-cleaned");
  const sBatches = document.getElementById("s-batches");

  /* ── State ── */
  let totalProducts = 0;
  let offset        = 0;
  let running       = false;
  let rowIndex      = 0;
  const accum = { changed:0, noop:0, errors:0, cleaned:0, batches:0 };

  /* ── URLS (Django reverse via data-attrs could replace these) ── */
  const URL_TOTAL = "{% url 'pos:fifo_reconcile_total' %}";
  const URL_BATCH = "{% url 'pos:fifo_reconcile_batch' %}";

  /* ═══════════════════════════════════════════════════════════ */
  /* Helpers                                                     */
  /* ═══════════════════════════════════════════════════════════ */

  function setStatus(text, cls) {
    statusBadge.textContent = text;
    statusBadge.className = "badge ml-auto badge-" + cls;
  }

  function updateProgress() {
    const pct = totalProducts > 0
      ? Math.min(100, Math.round((offset / totalProducts) * 100))
      : 0;
    progBar.style.width = pct + "%";
    progBar.textContent = pct + "%";
    progLabel.textContent =
      `Processed ${offset} / ${totalProducts} products  |  Batch #${accum.batches}`;
    sDone.textContent    = offset;
    sChanged.textContent = accum.changed;
    sNoop.textContent    = accum.noop;
    sErrors.textContent  = accum.errors;
    sCleaned.textContent = accum.cleaned;
    sBatches.textContent = accum.batches;
  }

  function actionBadge(action) {
    const cls = "ba-" + action.replace(/ /g, "_");
    return `<span class="badge-action ${cls}">${action}</span>`;
  }

  function appendRows(items) {
    if (emptyRow) emptyRow.remove();

    items.forEach(function (item) {
      rowIndex++;
      const tr = document.createElement("tr");

      if (item.fifo_action === "error") {
        tr.className = "row-error";
        tr.innerHTML = `
          <td>${rowIndex}</td>
          <td>${item.product_code}</td>
          <td colspan="3" class="text-danger">
            ⚠ ${item.error || "Unknown error"}
          </td>`;
      } else {
        tr.className = item.changed ? "row-changed" : "row-noop";
        tr.innerHTML = `
          <td>${rowIndex}</td>
          <td><code>${item.product_code}</code></td>
          <td>${item.present_stock !== undefined ? item.present_stock : "—"}</td>
          <td>${item.layers_after !== undefined ? item.layers_after : "—"}</td>
          <td>${actionBadge(item.fifo_action)}</td>`;
      }

      logBody.appendChild(tr);
    });

    /* Auto-scroll to bottom */
    const wrapper = document.getElementById("log-wrapper");
    wrapper.scrollTop = wrapper.scrollHeight;
  }

  /* ═══════════════════════════════════════════════════════════ */
  /* Core AJAX loop                                             */
  /* ═══════════════════════════════════════════════════════════ */

  async function fetchBatch() {
    const limit = Math.max(1, Math.min(500, parseInt(batchInput.value) || 50));
    const url   = `${URL_BATCH}?offset=${offset}&limit=${limit}`;

    const resp = await fetch(url, {
      headers: { "X-Requested-With": "XMLHttpRequest" }
    });

    if (!resp.ok) {
      throw new Error(`HTTP ${resp.status}`);
    }
    return resp.json();
  }

  async function runLoop() {
    running = true;
    btnStart.disabled = true;
    btnStop.disabled  = false;
    btnReset.disabled = true;
    batchInput.disabled = true;
    progBar.classList.add("progress-bar-animated");
    setStatus("Running…", "primary");

    try {
      while (running) {
        if (offset >= totalProducts) break;

        const data = await fetchBatch();

        if (!data.ok) {
          setStatus("Error", "danger");
          alert("Server error: " + (data.error || "Unknown"));
          break;
        }

        /* Accumulate counters */
        accum.batches++;
        accum.changed  += data.changed  || 0;
        accum.noop     += data.no_change || 0;
        accum.errors   += data.errors   || 0;
        accum.cleaned  += data.zero_layers_cleaned || 0;

        offset += data.processed || 0;

        /* Render rows */
        if (data.items && data.items.length) {
          appendRows(data.items);
        }

        updateProgress();

        /* Check done */
        if (!data.processed || offset >= totalProducts) {
          break;
        }

        /* Small yield so the browser can paint */
        await new Promise(r => setTimeout(r, 10));
      }
    } catch (err) {
      setStatus("Error", "danger");
      alert("Fetch error: " + err.message);
    }

    /* ── Finish ── */
    running = false;
    btnStop.disabled  = true;
    btnReset.disabled = false;
    batchInput.disabled = false;
    progBar.classList.remove("progress-bar-animated");

    if (offset >= totalProducts) {
      progBar.classList.remove("bg-primary");
      progBar.classList.add("bg-success");
      progBar.style.width = "100%";
      progBar.textContent = "100%";
      progLabel.textContent =
        `✔ Completed — ${totalProducts} products in ${accum.batches} batch(es).`;
      setStatus("Done", "success");
      btnStart.disabled = true;
    } else {
      setStatus("Stopped", "warning");
      btnStart.disabled = false;
    }
  }

  /* ═══════════════════════════════════════════════════════════ */
  /* Button handlers                                            */
  /* ═══════════════════════════════════════════════════════════ */

  btnStart.addEventListener("click", async function () {
    if (running) return;

    /* If fresh start (offset == 0), fetch total first */
    if (offset === 0) {
      try {
        setStatus("Loading…", "info");
        const res  = await fetch(URL_TOTAL);
        const data = await res.json();
        if (!data.ok) { alert("Could not fetch total: " + data.error); return; }
        totalProducts = data.total;
        sTotal.textContent = totalProducts;
        if (totalProducts === 0) {
          alert("No products found.");
          setStatus("Idle", "secondary");
          return;
        }
      } catch (e) {
        alert("Network error: " + e.message);
        setStatus("Idle", "secondary");
        return;
      }
    }

    runLoop();
  });

  btnStop.addEventListener("click", function () {
    running = false;
  });

  btnReset.addEventListener("click", function () {
    if (running) return;
    /* Reset state */
    offset = 0;
    totalProducts = 0;
    accum.changed = accum.noop = accum.errors = accum.cleaned = accum.batches = 0;
    rowIndex = 0;

    /* Reset UI */
    progBar.style.width = "0%";
    progBar.textContent = "0%";
    progBar.classList.remove("bg-success");
    progBar.classList.add("bg-primary");
    progLabel.textContent = "Ready. Press Start to begin.";
    setStatus("Idle", "secondary");
    sTotal.textContent   = "—";
    sDone.textContent    = "0";
    sChanged.textContent = "0";
    sNoop.textContent    = "0";
    sErrors.textContent  = "0";
    sCleaned.textContent = "0";
    sBatches.textContent = "0";

    /* Clear log */
    logBody.innerHTML = `<tr id="log-empty-row">
      <td colspan="5" class="text-center text-muted py-3">
        No records yet. Start the reconcile to see results here.
      </td>
    </tr>`;

    btnStart.disabled = false;
    btnReset.disabled = true;
  });

  btnClearLog.addEventListener("click", function () {
    logBody.innerHTML = `<tr id="log-empty-row">
      <td colspan="5" class="text-center text-muted py-3">
        Log cleared.
      </td>
    </tr>`;
    rowIndex = 0;
  });

})();
</script>
{% endblock %}