{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-wrap items-start justify-between gap-3">
    <div>
      <p class="text-xs font-semibold uppercase tracking-[0.16em] text-emerald-700">Sales & Income · Phase 15</p>
      <h1 class="mt-1 text-2xl font-semibold text-slate-900">Customer & Sales Ledger Intelligence</h1>
      <p class="mt-1 max-w-4xl text-sm text-slate-500">Learn how each client historically treats customers and Sales/Income ledgers. Purchase historical evidence remains in its existing store; this page keeps Sales evidence separate.</p>
    </div>
    <a href="/tools/accounting/sales-income{% if selected_client %}?client_id={{ selected_client.id }}{% endif %}" class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold">Sales & Income Register</a>
  </div>

  {% if message %}<div class="rounded-xl border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-800">{{ message }}</div>{% endif %}
  {% if error %}<div class="rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-800">{{ error }}</div>{% endif %}

  <section class="rounded-2xl bg-white p-5 shadow-soft">
    <form method="get" class="grid gap-4 md:grid-cols-[1fr_auto]">
      <label class="text-sm font-semibold">ERP Client
        <select name="client_id" required class="mt-1 w-full rounded-xl border border-slate-300 bg-white px-3 py-2">
          <option value="">Select client</option>
          {% for c in clients %}<option value="{{ c.id }}" {% if selected_client and selected_client.id==c.id %}selected{% endif %}>{{ c.client_name }}</option>{% endfor %}
        </select>
      </label>
      <div class="flex items-end"><button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white">Open Intelligence</button></div>
    </form>
  </section>

  {% if selected_client %}
  <section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    {% for label,value in [('Customer mappings',summary.mapping_count),('Historical Sales pairs',summary.historical_rows),('Reviewed mappings',summary.review_confirmed),('High confidence',summary.high_confidence)] %}
    <div class="rounded-2xl bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">{{ label }}</div><div class="mt-2 text-2xl font-semibold">{{ value }}</div></div>
    {% endfor %}
  </section>

  {% if latest_run %}
  <section id="historicalRunProgress"
           data-status-url="/tools/accounting/sales-learning/run/{{ latest_run.id }}/status"
           data-run-status="{{ latest_run.status }}"
           class="rounded-2xl border border-blue-200 bg-white p-5 shadow-soft">
    <div class="flex flex-wrap items-center justify-between gap-3">
      <div>
        <div class="text-xs font-semibold uppercase tracking-[0.14em] text-blue-700">Latest Historical Sales Run</div>
        <div id="runProgressLabel" class="mt-1 text-lg font-semibold text-slate-900">{{ latest_run.status|replace('_',' ')|title }}</div>
        <div id="runProgressDetail" class="mt-1 text-sm text-slate-500">{{ latest_run.company_name or latest_run.tally_guid }}</div>
      </div>
      <div id="runProgressMeta" class="text-right text-xs text-slate-500">Run #{{ latest_run.id }}</div>
    </div>
    <div class="mt-4 h-2 overflow-hidden rounded-full bg-slate-200">
      <div id="runProgressBar" class="h-full w-1/3 rounded-full bg-blue-600 transition-all duration-500"></div>
    </div>
    <div id="runProgressError" class="mt-3 hidden rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-800"></div>
  </section>
  {% endif %}

  <section class="rounded-2xl bg-white p-5 shadow-soft">
    <h2 class="font-semibold">Collect Historical Sales Evidence from Tally</h2>
    <p class="mt-1 text-sm text-slate-500">Read-only. The selected workstation refreshes Sales vouchers from the currently open mapped Tally company for the chosen period, then stores neutral historical evidence. It does not create or alter Tally vouchers.</p>
    {% if not workstations %}
    <div class="mt-4 rounded-xl border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800">No recent ERP Local Agent workstation with Tally connected is advertising a company for this branch. Update/start the Local Agent, open the mapped company in TallyPrime, and refresh this page.</div>
    {% endif %}
    <form method="post" action="/tools/accounting/sales-learning/collect" class="mt-4 grid gap-3 md:grid-cols-5">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input type="hidden" name="client_id" value="{{ selected_client.id }}">
      <label class="text-xs font-semibold md:col-span-3">Workstation / Currently Open Tally Company
        <select id="salesWsCompany" required class="mt-1 w-full rounded-lg border border-slate-300 px-2 py-2">
          <option value="">Select workstation and company</option>
          {% for ws in workstations %}
            {% for company in workstation_companies.get(ws.id, []) %}
            <option value="{{ ws.id }}|{{ company.get('guid','') }}">{{ ws.machine_name }} · {{ company.get('name','') }}</option>
            {% endfor %}
          {% endfor %}
        </select>
      </label>
      <input type="hidden" name="workstation_id" id="salesWorkstationId">
      <input type="hidden" name="tally_guid" id="salesTallyGuid">
      <label class="text-xs font-semibold">From
        <input type="date" name="date_from" class="mt-1 w-full rounded-lg border border-slate-300 px-2 py-2">
      </label>
      <label class="text-xs font-semibold">To
        <input type="date" name="date_to" class="mt-1 w-full rounded-lg border border-slate-300 px-2 py-2">
      </label>
      <button class="rounded-lg bg-slate-900 px-3 py-2 text-sm font-semibold text-white md:col-span-5">Collect Sales History</button>
    </form>
  </section>

  <section class="rounded-2xl bg-white shadow-soft">
    <div class="border-b border-slate-200 px-5 py-4"><h2 class="font-semibold">Learned Customer Mappings</h2><p class="text-sm text-slate-500">Reviewer confirmations take priority over historical evidence.</p></div>
    <div class="overflow-x-auto">
      <table class="min-w-full text-sm">
        <thead><tr class="border-b bg-slate-50 text-left text-xs uppercase text-slate-500"><th class="px-3 py-3">Customer</th><th class="px-3 py-3">GSTIN</th><th class="px-3 py-3">Tally Customer</th><th class="px-3 py-3">Sales Ledger</th><th class="px-3 py-3">Evidence</th><th class="px-3 py-3">Confidence</th></tr></thead>
        <tbody>
        {% for m in mappings %}
          <tr class="border-b border-slate-100"><td class="px-3 py-3 font-semibold">{{ m.customer_name }}</td><td class="px-3 py-3">{{ m.customer_gstin or '—' }}</td><td class="px-3 py-3">{{ m.tally_customer_ledger_name or '—' }}</td><td class="px-3 py-3">{{ m.sales_ledger_name or '—' }}</td><td class="px-3 py-3">{{ m.evidence_count }} · {{ m.source }}</td><td class="px-3 py-3">{{ m.confidence_percent }}%</td></tr>
        {% else %}<tr><td colspan="6" class="px-4 py-8 text-center text-slate-500">Mappings will appear as Sales & Income rows are reviewed.</td></tr>{% endfor %}
        </tbody>
      </table>
    </div>
  </section>

  <section class="rounded-2xl bg-white shadow-soft">
    <div class="border-b border-slate-200 px-5 py-4"><h2 class="font-semibold">Historical Tally Sales Evidence</h2></div>
    <div class="overflow-x-auto">
      <table class="min-w-full text-sm">
        <thead><tr class="border-b bg-slate-50 text-left text-xs uppercase text-slate-500"><th class="px-3 py-3">Customer ledger</th><th class="px-3 py-3">Counter / Sales ledger</th><th class="px-3 py-3">Voucher</th><th class="px-3 py-3">Count</th><th class="px-3 py-3">Amount</th><th class="px-3 py-3">Last used</th></tr></thead>
        <tbody>
        {% for e in evidence %}
          <tr class="border-b border-slate-100"><td class="px-3 py-3 font-semibold">{{ e.party_ledger_name }}</td><td class="px-3 py-3">{{ e.counter_ledger_name }}</td><td class="px-3 py-3">{{ e.voucher_type_name }}</td><td class="px-3 py-3">{{ e.voucher_count }}</td><td class="px-3 py-3">₹{{ '%.2f'|format(e.absolute_amount_total) }}</td><td class="px-3 py-3">{{ e.last_voucher_date or '—' }}</td></tr>
        {% else %}<tr><td colspan="6" class="px-4 py-8 text-center text-slate-500">No historical Sales evidence collected yet.</td></tr>{% endfor %}
        </tbody>
      </table>
    </div>
  </section>
  {% endif %}
</div>
<script>
(function () {
  const combined = document.getElementById("salesWsCompany");
  const ws = document.getElementById("salesWorkstationId");
  const guid = document.getElementById("salesTallyGuid");
  if (!combined || !ws || !guid) return;
  function syncSelection() {
    const parts = (combined.value || "").split("|");
    ws.value = parts[0] || "";
    guid.value = parts[1] || "";
  }
  combined.addEventListener("change", syncSelection);
  const form = combined.closest("form");
  if (form) form.addEventListener("submit", syncSelection);
  syncSelection();
})();
</script>

<script>
(function () {
  const box = document.getElementById("historicalRunProgress");
  if (!box) return;
  const url = box.dataset.statusUrl;
  const label = document.getElementById("runProgressLabel");
  const detail = document.getElementById("runProgressDetail");
  const meta = document.getElementById("runProgressMeta");
  const bar = document.getElementById("runProgressBar");
  const errorBox = document.getElementById("runProgressError");
  let completedReloaded = false;

  function humanSeconds(seconds) {
    seconds = Number(seconds || 0);
    if (seconds < 60) return seconds + " sec";
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return mins + " min " + secs + " sec";
  }

  function paint(data) {
    label.textContent = data.label || data.status || "Working";
    detail.textContent = [
      data.workstation,
      data.company_name,
      data.date_from && data.date_to ? (data.date_from + " → " + data.date_to) : ""
    ].filter(Boolean).join(" · ");
    meta.textContent =
      "Run #" + data.run_id +
      " · attempt " + (data.attempts || 0) + "/" + (data.max_attempts || 0) +
      " · elapsed " + humanSeconds(data.elapsed_seconds);

    if (data.stage === "queued") {
      bar.className = "h-full w-1/4 rounded-full bg-blue-500 animate-pulse transition-all duration-500";
    } else if (data.stage === "processing") {
      bar.className = "h-full w-2/3 rounded-full bg-blue-600 animate-pulse transition-all duration-500";
    } else if (data.stage === "ingesting") {
      bar.className = "h-full w-5/6 rounded-full bg-indigo-600 animate-pulse transition-all duration-500";
    } else if (data.stage === "completed") {
      bar.className = "h-full w-full rounded-full bg-emerald-600 transition-all duration-500";
      label.textContent = "Completed · " + (data.evidence_rows || 0) + " evidence row(s)";
    } else if (data.stage === "failed") {
      bar.className = "h-full w-full rounded-full bg-red-600 transition-all duration-500";
    }

    if (data.error) {
      errorBox.textContent = data.error;
      errorBox.classList.remove("hidden");
    } else {
      errorBox.classList.add("hidden");
    }

    if (data.terminal && !completedReloaded) {
      completedReloaded = true;
      window.setTimeout(function () { window.location.reload(); }, 1200);
    }
  }

  async function poll() {
    try {
      const response = await fetch(url, {headers: {"Accept": "application/json"}, cache: "no-store"});
      if (response.ok) {
        const data = await response.json();
        if (data.ok) paint(data);
      }
    } catch (e) {
      // Keep the last visible state; next poll will retry.
    }
    if (!completedReloaded) window.setTimeout(poll, 3000);
  }

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

{% endblock %}