{% extends "pos/base.html" %}
{% load static %}
{% block title %}FIFO Replay & Audit{% endblock %}
{% block heading %}FIFO Replay & Audit{% endblock %}

{% block content %}
<style>
  .fifo-card { border: none; border-radius: 8px; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
  .summary-box { background: #f8f9fc; border-radius: 8px; padding: 14px 18px; text-align: center; }
  .summary-box .val { font-size: 1.25rem; font-weight: 700; }
  .summary-box .lbl { font-size: .75rem; color: #666; margin-top: 2px; }
  .diff-pos { color: #d63031; font-weight: 600; }
  .diff-neg { color: #d63031; font-weight: 600; }
  .diff-ok  { color: #00b894; font-weight: 600; }
  .tbl-fifo th { font-size: .78rem; background: #f1f3f8; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
  .tbl-fifo td { font-size: .82rem; vertical-align: middle; white-space: nowrap; }
  .tbl-fifo tr.row-mismatch { background: #fff5f5; }
  .btn-fix { padding: 2px 10px; font-size: .75rem; }
  .progress-bar-anim { transition: width .3s ease; }
  #tblWrap { max-height: 65vh; overflow-y: auto; }
  .spinner-sm { width: 14px; height: 14px; border-width: 2px; }
  .step-info { font-size: .72rem; color: #888; }
</style>

<div class="container-fluid">

  <!-- ── Top Controls ── -->
  <div class="d-flex flex-wrap align-items-center justify-content-between mb-3 gap-2">
    <div class="d-flex align-items-center gap-2" style="gap:8px;">
      <input type="text" id="txtSearch" class="form-control form-control-sm"
             placeholder="Search product..." style="width:200px;">
      <label class="mb-0 ml-2" style="font-size:.82rem;">
        <input type="checkbox" id="chkOnlyDiff"> Only mismatches
      </label>
    </div>
    <div class="d-flex align-items-center gap-2" style="gap:8px;">
      <button id="btnLoad" class="btn btn-sm btn-primary">
        <i class="fa fa-sync-alt mr-1"></i> Load / Refresh
      </button>
      <button id="btnFixAll" class="btn btn-sm btn-danger" disabled>
        <i class="fa fa-bolt mr-1"></i> Fix ALL Products
      </button>
    </div>
  </div>

  <!-- ── Info ── -->
  <div class="alert alert-light py-2 mb-3 step-info" style="border:1px solid #e0e0e0;">
    <b>Fix</b> runs 4 steps per product:
    <b>①</b> FIFO replay (fix p_rates) →
    <b>②</b> Reconcile (clean layers, match present_stock) →
    <b>③</b> Adjust difference (zero out value gap) →
    <b>④</b> Backfill closing_value (recalculate on all rows)
  </div>

  <!-- ── Summary Cards ── -->
  <div class="row mb-3" id="summaryRow" style="display:none;">
    <div class="col-md-3 col-6 mb-2">
      <div class="summary-box">
        <div class="val" id="sumProducts">-</div>
        <div class="lbl">Products</div>
      </div>
    </div>
    <div class="col-md-3 col-6 mb-2">
      <div class="summary-box">
        <div class="val" id="sumFifo">-</div>
        <div class="lbl">FIFO Investment (Layers)</div>
      </div>
    </div>
    <div class="col-md-3 col-6 mb-2">
      <div class="summary-box">
        <div class="val" id="sumSH">-</div>
        <div class="lbl">Stock History Investment</div>
      </div>
    </div>
    <div class="col-md-3 col-6 mb-2">
      <div class="summary-box">
        <div class="val" id="sumDiff">-</div>
        <div class="lbl">Difference</div>
      </div>
    </div>
  </div>

  <!-- ── Progress Bar ── -->
  <div id="progressWrap" class="mb-3" style="display:none;">
    <div class="d-flex justify-content-between align-items-center mb-1">
      <small id="progressLabel" class="text-muted">Processing...</small>
      <small id="progressCount" class="text-muted">0 / 0</small>
    </div>
    <div class="progress" style="height:18px;">
      <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated progress-bar-anim bg-info"
           role="progressbar" style="width:0%;">0%</div>
    </div>
    <div id="progressResult" class="mt-2" style="display:none;"></div>
  </div>

  <!-- ── Table ── -->
  <div class="card fifo-card">
    <div class="card-body p-0">
      <div id="tblWrap">
        <table class="table table-sm table-hover mb-0 tbl-fifo" id="fifoTable">
          <thead>
            <tr>
              <th>#</th>
              <th>Code</th>
              <th>Product</th>
              <th class="text-right">Stock</th>
              <th class="text-right">FIFO Layers</th>
              <th class="text-right">FIFO Investment</th>
              <th class="text-right">SH Rows</th>
              <th class="text-right">SH Investment</th>
              <th class="text-right">Difference</th>
              <th class="text-center" style="width:100px;">Action</th>
            </tr>
          </thead>
          <tbody id="tblBody">
            <tr>
              <td colspan="10" class="text-center text-muted p-4">
                Click <b>Load / Refresh</b> to fetch data
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>

<!-- ── Confirm Modal ── -->
<div class="modal fade" id="confirmModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title" id="confirmTitle">Confirm</h6>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body py-3" id="confirmBody"></div>
      <div class="modal-footer py-2">
        <button class="btn btn-light btn-sm" data-dismiss="modal">Cancel</button>
        <button class="btn btn-danger btn-sm" id="confirmOk">Yes, Fix</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block javascripts %}
<script>
(function(){
  const FMT = (n) => {
    if(n==null) return '-';
    return Number(n).toLocaleString('en-US', {minimumFractionDigits:0, maximumFractionDigits:2});
  };
  const CSRF = '{{ csrf_token }}';
  let ITEMS = [];

  function loadData(){
    const search = document.getElementById('txtSearch').value.trim();
    const onlyDiff = document.getElementById('chkOnlyDiff').checked ? '1' : '0';
    const tbody = document.getElementById('tblBody');
    tbody.innerHTML = '<tr><td colspan="10" class="text-center p-4"><div class="spinner-border spinner-border-sm text-primary"></div> Loading...</td></tr>';

    fetch(`{% url 'reports:fifo_replay_list' %}?search=${encodeURIComponent(search)}&only_diff=${onlyDiff}`)
      .then(r=>r.json())
      .then(j=>{
        if(!j.ok){ tbody.innerHTML='<tr><td colspan="10" class="text-center text-danger">Error</td></tr>'; return; }
        ITEMS = j.items;
        renderTable(j.items);
        renderSummary(j.totals);
        document.getElementById('btnFixAll').disabled = false;
      })
      .catch(()=>{
        tbody.innerHTML='<tr><td colspan="10" class="text-center text-danger">Network error</td></tr>';
      });
  }

  function renderTable(items){
    const tbody = document.getElementById('tblBody');
    if(!items.length){
      tbody.innerHTML='<tr><td colspan="10" class="text-center text-muted p-4">No products found</td></tr>';
      return;
    }
    let html = '';
    items.forEach((it, idx)=>{
      const mis = Math.abs(it.diff) >= 0.5;
      const cls = mis ? 'row-mismatch' : '';
      const diffCls = Math.abs(it.diff) < 0.5 ? 'diff-ok' : 'diff-pos';
      html += `
        <tr class="${cls}" data-pid="${it.prod_id}">
          <td>${idx+1}</td>
          <td>${it.code}</td>
          <td>${it.name}</td>
          <td class="text-right">${FMT(it.present_stock)}</td>
          <td class="text-right">${it.fifo_layers}</td>
          <td class="text-right">${FMT(it.fifo_val)}</td>
          <td class="text-right">${it.sh_rows}</td>
          <td class="text-right">${FMT(it.sh_val)}</td>
          <td class="text-right ${diffCls}">${FMT(it.diff)}</td>
          <td class="text-center">
            <button class="btn btn-outline-primary btn-fix btn-single-fix" data-pid="${it.prod_id}" data-name="${it.name}">
              Fix
            </button>
          </td>
        </tr>`;
    });
    tbody.innerHTML = html;
  }

  function renderSummary(totals){
    document.getElementById('summaryRow').style.display = '';
    document.getElementById('sumProducts').textContent = totals.count;
    document.getElementById('sumFifo').textContent = FMT(totals.fifo_val);
    document.getElementById('sumSH').textContent = FMT(totals.sh_val);
    const d = document.getElementById('sumDiff');
    d.textContent = FMT(totals.diff);
    d.className = 'val ' + (Math.abs(totals.diff) < 0.5 ? 'diff-ok' : 'diff-pos');
  }

  let pendingPid = null;
  let pendingMode = 'single';

  document.getElementById('fifoTable').addEventListener('click', function(e){
    const btn = e.target.closest('.btn-single-fix');
    if(!btn) return;
    pendingPid = btn.dataset.pid;
    pendingMode = 'single';
    document.getElementById('confirmTitle').textContent = 'Fix Product';
    document.getElementById('confirmBody').innerHTML =
      `Fix FIFO for <b>${btn.dataset.name}</b>?<br>
       <small class="text-muted">Replay → Reconcile → Adjust → Backfill closing_value</small>`;
    $('#confirmModal').modal('show');
  });

  document.getElementById('btnFixAll').addEventListener('click', function(){
    pendingMode = 'all';
    document.getElementById('confirmTitle').textContent = 'Fix ALL Products';
    document.getElementById('confirmBody').innerHTML =
      `Fix FIFO for <b>ALL ${ITEMS.length} products</b>?<br>
       <small class="text-muted">All 4 steps for every product. This may take a while.</small>`;
    $('#confirmModal').modal('show');
  });

  document.getElementById('confirmOk').addEventListener('click', function(){
    $('#confirmModal').modal('hide');
    if(pendingMode === 'single') doSingleFix(pendingPid);
    else doFixAll();
  });

  function doSingleFix(pid){
    const btn = document.querySelector(`button[data-pid="${pid}"]`);
    if(btn){ btn.disabled=true; btn.innerHTML='<span class="spinner-border spinner-sm"></span>'; }

    fetch(`{% url 'reports:fifo_replay_single' %}`, {
      method:'POST',
      headers:{'Content-Type':'application/json','X-CSRFToken':CSRF},
      body: JSON.stringify({ prod_id: parseInt(pid), adjust_diff: true })
    })
    .then(r=>r.json())
    .then(j=>{
      if(!j.ok){
        alert(j.error||'Fix failed');
        if(btn){ btn.disabled=false; btn.innerHTML='Fix'; }
        return;
      }
      const tr = document.querySelector(`tr[data-pid="${pid}"]`);
      if(tr){
        const tds = tr.querySelectorAll('td');
        const a = j.after;
        const diffCls = Math.abs(a.diff) < 0.5 ? 'diff-ok' : 'diff-pos';
        tds[5].textContent = FMT(a.fifo_val);
        tds[7].textContent = FMT(a.sh_val);
        tds[8].textContent = FMT(a.diff);
        tds[8].className = 'text-right ' + diffCls;
        tr.className = Math.abs(a.diff) >= 0.5 ? 'row-mismatch' : '';
      }
      if(btn){
        btn.disabled=false;
        btn.innerHTML = '<span class="text-success">✓ Fixed</span>';
        setTimeout(()=>{ btn.innerHTML='Fix'; }, 4000);
      }
    })
    .catch(()=>{
      alert('Network error');
      if(btn){ btn.disabled=false; btn.innerHTML='Fix'; }
    });
  }

  function doFixAll(){
    const wrap = document.getElementById('progressWrap');
    const bar = document.getElementById('progressBar');
    const label = document.getElementById('progressLabel');
    const countEl = document.getElementById('progressCount');
    const resultEl = document.getElementById('progressResult');

    wrap.style.display = '';
    resultEl.style.display = 'none';
    bar.style.width = '0%';
    bar.textContent = '0%';
    bar.className = 'progress-bar progress-bar-striped progress-bar-animated progress-bar-anim bg-info';
    label.textContent = 'Starting...';
    document.getElementById('btnFixAll').disabled = true;

    fetch(`{% url 'reports:fifo_replay_all' %}`, {
      method:'POST',
      headers:{'Content-Type':'application/json','X-CSRFToken':CSRF},
      body: JSON.stringify({ adjust_diff: true })
    })
    .then(r=>r.json())
    .then(j=>{
      if(!j.ok){ label.textContent='Failed'; return; }
      const taskId = j.task_id;
      const total = j.total;

      const poll = setInterval(()=>{
        fetch(`{% url 'reports:fifo_replay_progress' %}?task_id=${taskId}`)
          .then(r=>r.json())
          .then(p=>{
            if(!p.ok){ clearInterval(poll); return; }
            const pct = total > 0 ? Math.round((p.done/total)*100) : 0;
            bar.style.width = pct+'%';
            bar.textContent = pct+'%';
            countEl.textContent = `${p.done} / ${total}`;
            label.textContent = `${p.rates_fixed} rates · ${p.reconciled} reconciled · ${p.adjustments} adjusted · ${p.closing_values} cv rows`;

            if(p.status === 'done'){
              clearInterval(poll);
              bar.classList.remove('progress-bar-animated','bg-info');
              bar.classList.add('bg-success');
              label.textContent = 'Complete!';
              resultEl.style.display = '';
              resultEl.innerHTML = `
                <div class="alert alert-success py-2 mb-0">
                  <b>Done!</b> ${p.done} products ·
                  ${p.rates_fixed} rates fixed ·
                  ${p.reconciled} reconciled ·
                  ${p.adjustments} adjustments ·
                  ${p.closing_values} closing_value rows ·
                  ${p.errors} errors
                  <button class="btn btn-sm btn-outline-primary ml-3" onclick="document.getElementById('btnLoad').click()">
                    Refresh Table
                  </button>
                </div>`;
              document.getElementById('btnFixAll').disabled = false;
            }
          });
      }, 1000);
    })
    .catch(()=>{
      label.textContent = 'Network error';
      document.getElementById('btnFixAll').disabled = false;
    });
  }

  document.getElementById('btnLoad').addEventListener('click', loadData);
  document.getElementById('txtSearch').addEventListener('keydown', function(e){ if(e.key==='Enter') loadData(); });
  document.getElementById('chkOnlyDiff').addEventListener('change', function(){ if(ITEMS.length) loadData(); });
})();
</script>
{% endblock %}