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

{% block title %}Server Sync Dashboard{% endblock %}

{% block content %}
<style>
.sync-wrap { max-width: 960px; margin: 24px auto; padding: 0 16px; }
.sync-card { background:#fff; border:1px solid #dee2e6; border-radius:10px; margin-bottom:20px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.sync-card-header { padding:13px 20px; border-bottom:1px solid #dee2e6; border-radius:10px 10px 0 0; background:#f8f9fa; display:flex; align-items:center; gap:8px; }
.sync-card-header h5 { margin:0; font-weight:600; font-size:15px; }
.sync-card-body { padding:20px; }

.prog-wrap { display:none; margin-top:16px; }
.prog-wrap.show { display:block; }
.progress { height:22px; border-radius:6px; background:#e9ecef; }
.progress-bar { transition:width .35s ease; font-size:12px; line-height:22px; font-weight:600; border-radius:6px; }
.prog-label { font-size:12px; color:#6c757d; margin-bottom:5px; display:flex; justify-content:space-between; }

.log-box { background:#f8f9fa; border:1px solid #dee2e6; border-radius:6px; max-height:180px; overflow-y:auto; padding:10px 12px; margin-top:10px; font-size:12px; font-family:'Courier New',monospace; color:#343a40; }
.log-line  { margin-bottom:3px; }
.log-ok    { color:#198754; }
.log-err   { color:#dc3545; }
.log-info  { color:#0d6efd; }
.log-warn  { color:#fd7e14; }

.table-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:8px; margin-bottom:16px; }
.table-check label { display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; user-select:none; padding:4px 6px; border-radius:4px; }
.table-check label:hover { background:#f0f4ff; }

.status-dot { width:10px; height:10px; border-radius:50%; display:inline-block; background:#adb5bd; }
.status-dot.ok   { background:#198754; }
.status-dot.fail { background:#dc3545; }
.status-dot.spin { animation:blink 1s infinite; background:#fd7e14; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.3} }

.stat-num { font-size:28px; font-weight:700; line-height:1; }
.stat-label { font-size:11px; color:#6c757d; margin-top:2px; }
</style>

<div class="sync-wrap">

  <!-- Header -->
  <div class="d-flex align-items-center mb-3 gap-3">
    <div>
      <h4 class="mb-0 fw-bold"><i class="fa fa-rotate me-2 text-primary"></i>Server Sync</h4>
      <small class="text-muted">Push local invoices → remote &nbsp;|&nbsp; Pull master data ← remote</small>
    </div>
    <div class="ms-auto d-flex align-items-center gap-2">
      <span class="status-dot" id="conn-dot"></span>
      <span id="conn-label" class="text-muted" style="font-size:13px">Not tested</span>
    </div>
  </div>

  <!-- ══ 1. Credentials ══ -->
  <div class="sync-card">
    <div class="sync-card-header">
      <i class="fa fa-server text-secondary"></i>
      <h5>Remote Server Credentials</h5>
      <span class="ms-auto badge bg-secondary" id="creds-source" style="font-size:10px"></span>
    </div>
    <div class="sync-card-body">
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label fw-semibold" style="font-size:13px">Remote Server URL</label>
          <input type="url" id="remote-url" class="form-control form-control-sm" value="{{ default_remote_url }}">
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold" style="font-size:13px">Tenant ID (pos_business_id)</label>
          <input type="number" id="tenant-id" class="form-control form-control-sm" value="{{ db_tenant_id }}" placeholder="e.g. 127">
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold" style="font-size:13px">Username</label>
          <input type="text" id="sync-user" class="form-control form-control-sm" value="{{ db_username }}" autocomplete="off">
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold" style="font-size:13px">Password</label>
          <div class="input-group input-group-sm">
            <input type="password" id="sync-pass" class="form-control" value="{{ db_password }}" autocomplete="off">
            <button class="btn btn-outline-secondary" type="button" onclick="togglePass()">
              <i class="fa fa-eye" id="eye-icon"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="d-flex align-items-center gap-2 mt-3 flex-wrap">
        <button class="btn btn-outline-secondary btn-sm" onclick="testConnection()" id="btn-test">
          <i class="fa fa-plug me-1"></i>Test Connection
        </button>
        <button class="btn btn-outline-primary btn-sm" onclick="saveCreds()">
          <i class="fa fa-save me-1"></i>Save to Browser
        </button>
        <span id="conn-msg" class="ms-1" style="font-size:12px"></span>
      </div>
    </div>
  </div>

  <!-- ══ 2. Pull Static Tables ══ -->
  <div class="sync-card">
    <div class="sync-card-header">
      <i class="fa fa-cloud-download-alt text-info"></i>
      <h5>Pull Static Tables <small class="fw-normal text-muted">(remote → local, full replace)</small></h5>
    </div>
    <div class="sync-card-body">
      <p class="text-muted mb-3" style="font-size:13px">
        Downloads selected tables from the remote server.
        <strong>All existing local data for each table is wiped first</strong>, then fresh data is inserted.
        Products use safe update-or-create. RBAC syncs roles &amp; permissions for your tenant's users.
      </p>
      <div class="table-grid" id="tbl-grid"></div>
      <div class="d-flex align-items-center gap-2 flex-wrap mb-2">
        <button class="btn btn-info btn-sm text-white" id="btn-pull" onclick="startPull()">
          <i class="fa fa-arrow-down me-1"></i>Start Pull
        </button>
        <button class="btn btn-outline-secondary btn-sm" onclick="checkAllTbls(true)">All</button>
        <button class="btn btn-outline-secondary btn-sm" onclick="checkAllTbls(false)">None</button>
      </div>
      <div class="prog-wrap" id="pull-prog-wrap">
        <div class="prog-label">
          <span id="pull-prog-text">Waiting…</span>
          <span id="pull-prog-pct">0%</span>
        </div>
        <div class="progress mb-2">
          <div class="progress-bar bg-info" id="pull-bar" role="progressbar" style="width:0%">0%</div>
        </div>
        <div class="log-box" id="pull-log"></div>
      </div>
    </div>
  </div>

  <!-- ══ 3. Push Invoices ══ -->
  <div class="sync-card">
    <div class="sync-card-header">
      <i class="fa fa-cloud-upload-alt text-success"></i>
      <h5>Push Invoices <small class="fw-normal text-muted">(local → remote)</small></h5>
    </div>
    <div class="sync-card-body">
      <div class="d-flex align-items-center gap-4 mb-3 flex-wrap">
        <div class="text-center">
          <div class="stat-num text-primary" id="pending-badge">{{ pending_invoice_count }}</div>
          <div class="stat-label">Unsynced Invoices</div>
        </div>
        <div class="text-center">
          <div class="stat-num text-warning" id="batch-count-badge">
            {% if pending_invoice_count %}{{ pending_invoice_count|divisibleby:batch_size }}{% else %}0{% endif %}
          </div>
          <div class="stat-label">Batches of {{ batch_size }}</div>
        </div>
        <div class="ms-auto d-flex gap-2 flex-wrap">
          <button class="btn btn-outline-secondary btn-sm" onclick="refreshPending()">
            <i class="fa fa-sync me-1"></i>Refresh
          </button>
          <button class="btn btn-success btn-sm" style="min-width:130px" id="btn-push" onclick="startPush()">
            <i class="fa fa-arrow-up me-1"></i>Start Push
          </button>
        </div>
      </div>
      <p class="text-muted mb-2" style="font-size:13px">
        Invoices upload in batches of <strong>{{ batch_size }}</strong>.
        If a batch fails (network or server error), <strong>local records are kept and retried on next push</strong>.
        Customer / vendor / bank / stock balances are recalculated on remote after each successful batch.
      </p>
      <div class="prog-wrap" id="push-prog-wrap">
        <div class="prog-label">
          <span id="push-prog-text">Preparing…</span>
          <span id="push-prog-pct">0%</span>
        </div>
        <div class="progress mb-2">
          <div class="progress-bar bg-success" id="push-bar" role="progressbar" style="width:0%">0%</div>
        </div>
        <div class="log-box" id="push-log"></div>
      </div>
    </div>
  </div>

</div>

<script>
// ── Tables list ──────────────────────────────────────────────
const TABLES = [
  { key:"categories",          label:"Categories",          icon:"fa-tag" },
  { key:"companies",           label:"Companies",           icon:"fa-building" },
  { key:"vendors",             label:"Vendors",             icon:"fa-truck" },
  { key:"customers",           label:"Customers",           icon:"fa-users" },
  { key:"products",            label:"Products",            icon:"fa-box" },
  { key:"bank_accounts",       label:"Bank Accounts",       icon:"fa-university" },
  { key:"order_bookers",       label:"Order Bookers",       icon:"fa-user-tie" },
  { key:"sale_areas",          label:"Sale Areas",          icon:"fa-map-marker-alt" },
  { key:"test_configurations", label:"Configurations",      icon:"fa-cog" },
  { key:"rbac",                label:"Roles & Permissions", icon:"fa-shield-alt" },
];
(function(){
  const g = document.getElementById("tbl-grid");
  TABLES.forEach(t => {
    g.innerHTML += `<div class="table-check"><label>
      <input type="checkbox" class="form-check-input tbl-chk" value="${t.key}" checked>
      <i class="fa ${t.icon} text-secondary" style="font-size:11px;width:14px"></i>${t.label}
    </label></div>`;
  });
})();
function checkAllTbls(v){ document.querySelectorAll(".tbl-chk").forEach(c=>c.checked=v); }

// ── Credentials ──────────────────────────────────────────────
const CRED_KEY = "sync_creds_v2";

function initCreds(){
  const hasUser = document.getElementById("sync-user").value.trim();
  const hasTid  = document.getElementById("tenant-id").value.trim();
  if(hasUser && hasTid){
    document.getElementById("creds-source").textContent = "from configurations";
  } else {
    try{
      const c = JSON.parse(localStorage.getItem(CRED_KEY)||"{}");
      if(c.url    && !document.getElementById("remote-url").value) document.getElementById("remote-url").value = c.url;
      if(c.tenant && !hasTid)  document.getElementById("tenant-id").value = c.tenant;
      if(c.user   && !hasUser) document.getElementById("sync-user").value  = c.user;
      if(c.pass)               document.getElementById("sync-pass").value  = c.pass;
      document.getElementById("creds-source").textContent = "from browser";
    }catch(e){}
  }
}

function saveCreds(){
  localStorage.setItem(CRED_KEY, JSON.stringify({
    url:    document.getElementById("remote-url").value.trim(),
    tenant: document.getElementById("tenant-id").value.trim(),
    user:   document.getElementById("sync-user").value.trim(),
    pass:   document.getElementById("sync-pass").value,
  }));
  document.getElementById("conn-msg").innerHTML='<span class="text-success">✓ Saved</span>';
  setTimeout(()=>document.getElementById("conn-msg").textContent="",2000);
}

function getCreds(){
  return {
    remote_url: document.getElementById("remote-url").value.trim(),
    tenant_id:  parseInt(document.getElementById("tenant-id").value)||0,
    username:   document.getElementById("sync-user").value.trim(),
    password:   document.getElementById("sync-pass").value,
  };
}

function validateCreds(){
  const c = getCreds();
  if(!c.remote_url){ alert("Remote Server URL required"); return false; }
  if(!c.tenant_id) { alert("Tenant ID required");        return false; }
  if(!c.username)  { alert("Username required");          return false; }
  if(!c.password)  { alert("Password required");          return false; }
  return true;
}

function togglePass(){
  const i=document.getElementById("sync-pass");
  const e=document.getElementById("eye-icon");
  i.type=i.type==="password"?"text":"password";
  e.className=i.type==="password"?"fa fa-eye":"fa fa-eye-slash";
}

document.addEventListener("DOMContentLoaded", initCreds);

// ── Test connection (proxied — no CORS) ──────────────────────
async function testConnection(){
  if(!validateCreds()) return;
  const dot=document.getElementById("conn-dot");
  const lbl=document.getElementById("conn-label");
  const msg=document.getElementById("conn-msg");
  const btn=document.getElementById("btn-test");
  dot.className="status-dot spin"; lbl.textContent="Testing…"; msg.textContent=""; btn.disabled=true;
  try{
    const r=await fetch("{% url 'offline_pos:sync_test_conn' %}",{
      method:"POST", headers:{"Content-Type":"application/json","X-CSRFToken":csrf()},
      body:JSON.stringify(getCreds()),
    });
    const d=await r.json();
    if(d.ok){ dot.className="status-dot ok"; lbl.textContent="Connected"; msg.innerHTML='<span class="text-success">✓ Auth successful</span>'; }
    else throw new Error(d.error||"Auth failed");
  }catch(e){ dot.className="status-dot fail"; lbl.textContent="Failed"; msg.innerHTML=`<span class="text-danger">✗ ${e.message}</span>`; }
  finally{ btn.disabled=false; }
}

// ── Progress helpers ─────────────────────────────────────────
function setProgress(barId,textId,pctId,done,total,label){
  const pct=total>0?Math.round(done/total*100):0;
  const bar=document.getElementById(barId);
  bar.style.width=pct+"%"; bar.textContent=pct+"%";
  document.getElementById(textId).textContent=label;
  document.getElementById(pctId).textContent=pct+"%";
}
function addLog(id,msg,cls=""){
  const box=document.getElementById(id);
  const ln=document.createElement("div");
  ln.className="log-line "+cls;
  ln.textContent="["+new Date().toLocaleTimeString()+"] "+msg;
  box.appendChild(ln); box.scrollTop=box.scrollHeight;
}
function clearLog(id){ document.getElementById(id).innerHTML=""; }
function showProg(id){ document.getElementById(id).classList.add("show"); }
function setBtn(id,dis,html){ const b=document.getElementById(id); b.disabled=dis; if(html)b.innerHTML=html; }
function sleep(ms){ return new Promise(r=>setTimeout(r,ms)); }
function csrf(){ return document.cookie.split(";").map(c=>c.trim()).filter(c=>c.startsWith("csrftoken=")).map(c=>c.split("=")[1])[0]||""; }

// ── PULL ─────────────────────────────────────────────────────
async function startPull(){
  if(!validateCreds()) return;
  const selected=[...document.querySelectorAll(".tbl-chk:checked")].map(c=>c.value);
  if(!selected.length) return alert("Select at least one table.");

  const creds=getCreds(); const total=selected.length; let done=0;
  showProg("pull-prog-wrap"); clearLog("pull-log");
  setBtn("btn-pull",true,'<i class="fa fa-spinner fa-spin me-1"></i>Pulling…');
  setProgress("pull-bar","pull-prog-text","pull-prog-pct",0,total,"Starting…");

  for(const tbl of selected){
    addLog("pull-log",`↓ Pulling: ${tbl}…`,"log-info");
    let since_id=0, page=0, rowsTotal=0, ok=true;

    while(true){
      try{
        const resp=await fetch("{% url 'offline_pos:sync_pull_table' %}",{
          method:"POST",
          headers:{"Content-Type":"application/json","X-CSRFToken":csrf()},
          body:JSON.stringify({...creds, table:tbl, is_first_page:(page===0), since_id, limit:1000}),
        });
        const data=await resp.json();
        if(!data.ok){ addLog("pull-log",`✗ ${tbl}: ${data.error||data.message}`,"log-err"); ok=false; break; }
        rowsTotal+=data.received||0;
        since_id=rowsTotal;
        page++;
        if(!data.has_more){ addLog("pull-log",`✓ ${tbl}: ${rowsTotal} rows`,"log-ok"); break; }
        else addLog("pull-log",`  ${tbl}: page ${page} — ${rowsTotal} rows so far…`,"log-info");
      }catch(e){ addLog("pull-log",`✗ ${tbl}: ${e.message}`,"log-err"); ok=false; break; }
    }
    done++;
    setProgress("pull-bar","pull-prog-text","pull-prog-pct",done,total,`${done}/${total} — ${tbl} ${ok?"✓":"✗"}`);
  }

  const bar=document.getElementById("pull-bar");
  bar.classList.remove("bg-info"); bar.classList.add("bg-success");
  setProgress("pull-bar","pull-prog-text","pull-prog-pct",total,total,"Pull complete ✓");
  addLog("pull-log","═══ All done ═══","log-ok");
  setBtn("btn-pull",false,'<i class="fa fa-arrow-down me-1"></i>Start Pull');
}

// ── PUSH ─────────────────────────────────────────────────────
async function refreshPending(){
  try{
    const r=await fetch("{% url 'offline_pos:sync_pending' %}",{headers:{"X-CSRFToken":csrf()}});
    const d=await r.json();
    if(d.ok){
      document.getElementById("pending-badge").textContent=d.total;
      document.getElementById("batch-count-badge").textContent=d.total>0?Math.ceil(d.total/d.batch_size):0;
    }
  }catch(e){}
}

async function startPush(){
  if(!validateCreds()) return;
  const creds=getCreds();

  let pendingInfo;
  try{
    const r=await fetch("{% url 'offline_pos:sync_pending' %}",{headers:{"X-CSRFToken":csrf()}});
    pendingInfo=await r.json();
  }catch(e){ return alert("Cannot read pending count: "+e.message); }
  if(!pendingInfo.ok) return alert("Error: "+pendingInfo.error);
  if(pendingInfo.total===0) return alert("No unsynced invoices — all clean!");

  const totalBatches=pendingInfo.total_batches;
  showProg("push-prog-wrap"); clearLog("push-log");
  setBtn("btn-push",true,'<i class="fa fa-spinner fa-spin me-1"></i>Pushing…');
  setProgress("push-bar","push-prog-text","push-prog-pct",0,totalBatches,`0/${totalBatches} batches`);
  addLog("push-log",`Starting: ${pendingInfo.total} invoices → ${totalBatches} batches`,"log-info");

  let ok=0, fail=0;

  for(let i=0;i<totalBatches;i++){
    let data;
    try{
      const resp=await fetch("{% url 'offline_pos:sync_push_batch' %}",{
        method:"POST",
        headers:{"Content-Type":"application/json","X-CSRFToken":csrf()},
        body:JSON.stringify({...creds, batch_no:0}),
      });
      data=await resp.json();
    }catch(e){
      fail++;
      addLog("push-log",`✗ Batch ${i+1}/${totalBatches}: network error — ${e.message}`,"log-err");
      addLog("push-log",`  ↳ Local records kept — will retry on next push`,"log-warn");
      setProgress("push-bar","push-prog-text","push-prog-pct",i+1,totalBatches,`${i+1}/${totalBatches} — ${fail} failed`);
      await sleep(300); continue;
    }

    if(!data.ok){
      fail++;
      addLog("push-log",`✗ Batch ${i+1}/${totalBatches}: ${data.error||data.message}`,"log-err");
      addLog("push-log",`  ↳ Local records kept — will retry on next push`,"log-warn");
    } else if(data.processed===0){
      addLog("push-log","✓ No more invoices","log-ok");
      setProgress("push-bar","push-prog-text","push-prog-pct",totalBatches,totalBatches,"Complete ✓");
      break;
    } else {
      ok++;
      addLog("push-log",`✓ Batch ${i+1}/${totalBatches}: ${data.processed} invoices uploaded & deleted locally`,"log-ok");
    }
    setProgress("push-bar","push-prog-text","push-prog-pct",i+1,totalBatches,`${i+1}/${totalBatches} — ${fail>0?fail+" failed":"all ok"}`);
    await sleep(200);
  }

  const pushBar=document.getElementById("push-bar");
  if(fail===0){
    pushBar.classList.add("bg-success");
    addLog("push-log",`═══ Done: ${ok} batches pushed successfully ═══`,"log-ok");
  } else {
    pushBar.classList.add("bg-warning");
    addLog("push-log",`═══ Done with ${fail} failure(s) — failed batches remain locally for retry ═══`,"log-warn");
  }
  await refreshPending();
  setBtn("btn-push",false,'<i class="fa fa-arrow-up me-1"></i>Start Push');
}
</script>

{% endblock %}