{% extends "base.html" %}
{% block title %}وارد کردن گروهی مشتری از اکسل — {{ APP_NAME }}{% endblock %}
{% block content %}
<div class="page-header">
  <a class="btn btn-ghost back-btn" href="{{ url_for('customer_account.new') }}">‹ بازگشت</a>
  <h1 class="title">وارد کردن گروهی مشتری از اکسل</h1>
</div>

<div class="glass-panel" style="max-width:640px; padding:24px 26px; display:flex; flex-direction:column; gap:16px;">
  <div>
    <p class="field-value" style="margin:0 0 6px;">مرحله ۱: قالب اکسل رو دانلود کنید</p>
    <p class="muted" style="margin:0 0 10px;">ردیف اول ستون‌هاست، ردیف دوم یه مثاله — می‌تونید پاکش کنید و دیتای خودتون رو جایگزین کنید. فقط «نام» و «نام خانوادگی» الزامی هستن.</p>
    <a class="btn btn-ghost" href="{{ url_for('customer_account.import_template') }}">📥 دانلود قالب اکسل</a>
  </div>

  <hr class="divider">

  <div>
    <p class="field-value" style="margin:0 0 10px;">مرحله ۲: فایل پرشده رو آپلود کنید</p>
    <input type="file" id="importFileInput" accept=".xlsx">
    <button type="button" id="importStartBtn" class="btn btn-gold" style="margin-top:12px;" disabled>▲ شروع وارد کردن</button>
  </div>

  <div id="importConflictBox" style="display:none;">
    <p class="field-value" style="color:var(--warning);">⚠ چند ردیف با مشتری‌های موجود، شماره تلفن یکسان دارند</p>
    <p class="muted" style="margin:4px 0 10px;">هر ردیفی که تیک بخورید، با وجود تکراری بودن شماره، اضافه می‌شود. بقیه رد می‌شوند.</p>
    <div id="importConflictList" style="max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:6px;"></div>
    <div style="display:flex; gap:10px; margin-top:14px;">
      <button type="button" id="importConfirmBtn" class="btn btn-gold">✓ ادامه وارد کردن</button>
      <button type="button" id="importCancelBtn" class="btn btn-ghost">✕ انصراف</button>
    </div>
  </div>

  <div id="importProgressBox" style="display:none;">
    <div class="import-progress-track">
      <div class="import-progress-fill" id="importProgressFill" style="width:0%;"></div>
    </div>
    <p class="muted" id="importProgressText" style="margin-top:8px;">در حال آماده‌سازی...</p>
  </div>

  <div id="importReportBox" style="display:none;"></div>
</div>

<script>
(function () {
  const fileInput = document.getElementById("importFileInput");
  const startBtn = document.getElementById("importStartBtn");
  const conflictBox = document.getElementById("importConflictBox");
  const conflictList = document.getElementById("importConflictList");
  const confirmBtn = document.getElementById("importConfirmBtn");
  const cancelBtn = document.getElementById("importCancelBtn");
  const progressBox = document.getElementById("importProgressBox");
  const progressFill = document.getElementById("importProgressFill");
  const progressText = document.getElementById("importProgressText");
  const reportBox = document.getElementById("importReportBox");
  let pendingToken = null;

  fileInput.addEventListener("change", function () {
    startBtn.disabled = !fileInput.files.length;
  });

  function resetToIdle() {
    conflictBox.style.display = "none";
    startBtn.disabled = !fileInput.files.length;
    fileInput.disabled = false;
    pendingToken = null;
  }

  function runImport(token, skipRows) {
    progressBox.style.display = "block";
    progressText.textContent = "در حال آماده‌سازی...";
    fetch("{{ url_for('customer_account.import_start') }}", {
      method: "POST",
      headers: { "Content-Type": "application/json", "X-CSRFToken": "{{ csrf_token() }}" },
      body: JSON.stringify({ token: token, skip_rows: skipRows }),
    })
      .then(function (res) { return res.json(); })
      .then(function (data) {
        if (data.error) {
          progressBox.style.display = "none";
          reportBox.style.display = "block";
          reportBox.innerHTML = '<p style="color:var(--danger);">' + data.error + "</p>";
          resetToIdle();
          return;
        }
        poll(data.job_id);
      });
  }

  cancelBtn.addEventListener("click", resetToIdle);

  confirmBtn.addEventListener("click", function () {
    const checked = Array.from(conflictList.querySelectorAll('input[type=checkbox]:checked')).map(function (el) {
      return parseInt(el.dataset.row, 10);
    });
    const allRows = Array.from(conflictList.querySelectorAll('input[type=checkbox]')).map(function (el) {
      return parseInt(el.dataset.row, 10);
    });
    const skipRows = allRows.filter(function (r) { return checked.indexOf(r) === -1; });
    conflictBox.style.display = "none";
    runImport(pendingToken, skipRows);
  });

  function poll(jobId) {
    fetch("/customers/import/status/" + jobId)
      .then(function (res) { return res.json(); })
      .then(function (data) {
        if (data.status === "error") {
          progressBox.style.display = "none";
          reportBox.style.display = "block";
          reportBox.innerHTML = '<p style="color:var(--danger);">خطا: ' + data.error_message + "</p>";
          return;
        }
        const total = data.total || 1;
        const pct = Math.round((data.processed / total) * 100);
        progressFill.style.width = pct + "%";
        progressText.textContent = "پردازش شده: " + data.processed + " از " + total + " (" + pct + "٪) — ثبت‌شده: " + data.created + " — رد‌شده: " + data.skipped;

        if (data.status === "done") {
          progressText.textContent = "تمام شد — " + data.created + " مشتری ثبت شد از " + total + " ردیف";
          reportBox.style.display = "block";
          let html = '<p class="field-value" style="color:var(--success);">✓ ' + data.created + " مشتری با موفقیت اضافه شد</p>";
          if (data.errors && data.errors.length) {
            html += '<p class="field-value" style="margin-top:10px;">جزئیات (' + data.errors.length + " مورد):</p>";
            html += '<div style="max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; margin-top:6px;">';
            data.errors.forEach(function (e) {
              const color = e.type === "skipped" ? "var(--danger)" : "var(--warning)";
              html += '<div class="muted" style="color:' + color + ';">ردیف ' + e.row + ": " + e.reason + "</div>";
            });
            html += "</div>";
          }
          html += '<a class="btn btn-gold" style="margin-top:14px;" href="' + "{{ url_for('dashboard.index') }}" + '">مشاهده لیست مشتریان</a>';
          reportBox.innerHTML = html;
          return;
        }
        setTimeout(function () { poll(jobId); }, 600);
      });
  }

  startBtn.addEventListener("click", function () {
    if (!fileInput.files.length) return;
    startBtn.disabled = true;
    fileInput.disabled = true;
    reportBox.style.display = "none";
    conflictBox.style.display = "none";

    const formData = new FormData();
    formData.append("file", fileInput.files[0]);
    formData.append("csrf_token", "{{ csrf_token() }}");

    fetch("{{ url_for('customer_account.import_check') }}", { method: "POST", body: formData })
      .then(function (res) { return res.json(); })
      .then(function (data) {
        if (data.error) {
          reportBox.style.display = "block";
          reportBox.innerHTML = '<p style="color:var(--danger);">' + data.error + "</p>";
          resetToIdle();
          return;
        }
        pendingToken = data.token;
        if (data.conflicts && data.conflicts.length) {
          conflictList.innerHTML = "";
          data.conflicts.forEach(function (c) {
            const row = document.createElement("label");
            row.className = "glass-card";
            row.style.cssText = "display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer;";
            row.innerHTML = '<input type="checkbox" data-row="' + c.row + '">' +
              '<span style="flex:1;">ردیف ' + c.row + ': «' + c.new_name + '» با شماره ' + c.phone +
              ' — از قبل با نام «' + c.existing_name + '» ثبت شده</span>';
            conflictList.appendChild(row);
          });
          conflictBox.style.display = "block";
        } else {
          runImport(pendingToken, []);
        }
      });
  });
})();
</script>
{% endblock %}