{# ── CSV Import JS (reusable partial) ──
   Include with: {% include '_csv_import_js.html' %}
   Must be inside a <script> tag or its own script block.
   Depends on: showGrowl(), getCsrf(), fmt() being available.
#}

// ── CSV Import ──
(function() {
  function fmt(n) { return Number(n).toLocaleString(); }
  var banner = document.getElementById('csv-import-banner');
  var bannerIcon = document.getElementById('csv-banner-icon');
  var dismissBtn = document.getElementById('csv-dismiss');
  var stateIdle = document.getElementById('csv-state-idle');
  var stateProcessing = document.getElementById('csv-state-processing');
  var stateComplete = document.getElementById('csv-state-complete');
  var stateError = document.getElementById('csv-state-error');
  var fileInput = document.getElementById('csv-file-input');
  var btnImport = document.getElementById('btn-import-csv');
  var rowPreview = document.getElementById('csv-row-preview');
  var progressBar = document.getElementById('csv-progress-bar');
  var progressText = document.getElementById('csv-progress-text');
  var progressPct = document.getElementById('csv-progress-pct');
  var phaseText = document.getElementById('csv-phase-text');
  var cntNew = document.getElementById('csv-cnt-new');
  var cntUpdated = document.getElementById('csv-cnt-updated');
  var cntSkipped = document.getElementById('csv-cnt-skipped');
  var cntUnchanged = document.getElementById('csv-cnt-unchanged');

  if (!banner) return;

  var totalRows = 0;
  var pollInterval = null;
  var lastPhase = '';
  var csrf = getCsrf();

  // Expand button: show full banner (button lives in the page header)
  var expandBtn = document.getElementById('csv-expand-btn');
  if (expandBtn) {
    expandBtn.addEventListener('click', function() {
      banner.classList.remove('hidden');
      expandBtn.classList.add('hidden');
    });
  }

  // Auto-expand if stale
  if (banner.dataset.stale === '1' && expandBtn) {
    expandBtn.classList.add('hidden');
    banner.classList.remove('hidden');
  }

  function setBannerState(state) {
    stateIdle.classList.toggle('hidden', state !== 'idle');
    stateProcessing.classList.toggle('hidden', state !== 'processing');
    stateComplete.classList.toggle('hidden', state !== 'complete');
    stateError.classList.toggle('hidden', state !== 'error');
    dismissBtn.classList.toggle('hidden', state === 'processing');

    banner.classList.remove('bg-amber-50', 'border-amber-200', 'bg-green-50', 'border-green-200', 'bg-red-50', 'border-red-200',
                            'dark:bg-amber-500/10', 'dark:border-amber-700', 'dark:bg-green-500/10', 'dark:border-green-700', 'dark:bg-red-500/10', 'dark:border-red-700');
    bannerIcon.classList.remove('text-amber-500', 'text-green-500', 'text-red-500');
    if (state === 'complete') {
      banner.classList.add('bg-green-50', 'border-green-200', 'dark:bg-green-500/10', 'dark:border-green-700');
      bannerIcon.classList.add('text-green-500');
      bannerIcon.textContent = 'check_circle';
    } else if (state === 'error') {
      banner.classList.add('bg-red-50', 'border-red-200', 'dark:bg-red-500/10', 'dark:border-red-700');
      bannerIcon.classList.add('text-red-500');
      bannerIcon.textContent = 'error';
    } else {
      banner.classList.add('bg-amber-50', 'border-amber-200', 'dark:bg-amber-500/10', 'dark:border-amber-700');
      bannerIcon.classList.add('text-amber-500');
      bannerIcon.textContent = 'upload_file';
    }
  }

  var dropZone = document.getElementById('csv-drop-zone');
  var fileReady = document.getElementById('csv-file-ready');
  var fileName = document.getElementById('csv-file-name');
  var removeFileBtn = document.getElementById('csv-remove-file');

  function resetToIdle() {
    setBannerState('idle');
    fileInput.value = '';
    btnImport.disabled = true;
    btnImport.querySelector('span:last-child').textContent = 'Import';
    rowPreview.textContent = '';
    dropZone.classList.remove('hidden');
    fileReady.classList.add('hidden');
    totalRows = 0;
    window._dbWriteStart = null;
  }

  function previewFile(file) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var lines = e.target.result.split('\n').filter(function(l) { return l.trim().length > 0; });
      totalRows = Math.max(0, lines.length - 1);
      btnImport.disabled = false;
      btnImport.querySelector('span:last-child').textContent = 'Import ' + fmt(totalRows) + ' rows';
      fileName.textContent = file.name;
      rowPreview.textContent = fmt(totalRows) + ' rows detected';
      dropZone.classList.add('hidden');
      fileReady.classList.remove('hidden');
    };
    reader.readAsText(file);
  }

  if (dismissBtn) {
    dismissBtn.addEventListener('click', function() {
      banner.classList.add('hidden');
      if (expandBtn) expandBtn.classList.remove('hidden');
    });
  }

  if (dropZone) {
    dropZone.addEventListener('click', function() { fileInput.click(); });
    dropZone.addEventListener('dragover', function(e) {
      e.preventDefault();
      dropZone.classList.add('border-amber-500', 'bg-amber-100', 'dark:bg-amber-500/10');
    });
    dropZone.addEventListener('dragleave', function(e) {
      e.preventDefault();
      dropZone.classList.remove('border-amber-500', 'bg-amber-100', 'dark:bg-amber-500/10');
    });
    dropZone.addEventListener('drop', function(e) {
      e.preventDefault();
      dropZone.classList.remove('border-amber-500', 'bg-amber-100', 'dark:bg-amber-500/10');
      var files = e.dataTransfer.files;
      if (files.length && files[0].name.toLowerCase().endsWith('.csv')) {
        var dt = new DataTransfer();
        dt.items.add(files[0]);
        fileInput.files = dt.files;
        previewFile(files[0]);
      } else {
        showGrowl({ type: 'warning', title: 'Invalid file', detail: 'Please drop a .csv file', timeout: 3000 });
      }
    });
  }

  if (removeFileBtn) {
    removeFileBtn.addEventListener('click', function() {
      fileInput.value = '';
      btnImport.disabled = true;
      dropZone.classList.remove('hidden');
      fileReady.classList.add('hidden');
      totalRows = 0;
    });
  }

  if (fileInput) {
    fileInput.addEventListener('change', function() {
      if (!fileInput.files.length) { btnImport.disabled = true; return; }
      previewFile(fileInput.files[0]);
    });
  }

  if (btnImport) {
    btnImport.addEventListener('click', function() {
      if (!fileInput.files.length) return;

      var taskId = 'csv_' + Date.now() + '_' + Math.random().toString(36).substr(2, 6);
      setBannerState('processing');
      progressBar.style.width = '2%';
      progressText.textContent = 'Uploading file...';
      progressPct.textContent = '0%';
      cntNew.textContent = '0';
      cntUpdated.textContent = '0';
      cntSkipped.textContent = '0';

      var formData = new FormData();
      formData.append('file', fileInput.files[0]);
      formData.append('task_id', taskId);
      formData.append('total_rows', totalRows);

      lastPhase = '';
      window._dbWriteStart = null;
      pollInterval = setInterval(function() {
        fetch('/api/orders/import-csv/progress/' + taskId)
          .then(function(r) { return r.json(); })
          .then(function(p) {
            if (p.done) {
              clearInterval(pollInterval);
              if (p.error) {
                setBannerState('error');
                document.getElementById('csv-error-detail').textContent = p.error;
                showGrowl({ type: 'error', title: 'CSV import failed', detail: p.error, timeout: 0 });
              } else {
                progressBar.style.width = '100%';
                progressPct.textContent = '100%';
                setBannerState('complete');
                document.getElementById('csv-final-new').textContent = fmt(p.new || 0);
                document.getElementById('csv-final-updated').textContent = fmt(p.updated || 0);
                document.getElementById('csv-final-unchanged').textContent = fmt(p.unchanged || 0);
                document.getElementById('csv-final-skipped').textContent = fmt(p.skipped || 0);
                document.getElementById('csv-final-profiles').textContent = fmt(p.customers_updated || 0);
                if (!(p.unchanged > 0)) document.getElementById('csv-final-unchanged-card').classList.add('hidden');
                showGrowl({
                  type: 'success', title: 'CSV import complete',
                  detail: '<span class="font-semibold">' + fmt(p.new || 0) + '</span> new &middot; <span class="font-semibold">' + fmt(p.updated || 0) + '</span> updated &middot; <span class="font-semibold">' + fmt(p.skipped || 0) + '</span> skipped',
                  timeout: 8000,
                });
              }
              return;
            }

            var processed = p.processed || 0;
            var total = p.total || totalRows || 1;
            var pct;

            if (p.phase && p.phase !== lastPhase) {
              if (p.phase === 'processing' && lastPhase === '') {
                showGrowl({type: 'info', title: 'Processing CSV', detail: 'Parsing and importing rows...', timeout: 4000});
              } else if (p.phase === 'db_write') {
                showGrowl({type: 'info', title: 'Writing to database', detail: p.db_write_detail || 'Committing order records...', timeout: 4000});
                window._dbWriteStart = Date.now();
                window._dbWriteEstSec = Math.max(3, 2 + (p.row_count || 500) * 0.0003);
              } else if (p.phase === 'rebuilding') {
                showGrowl({type: 'info', title: 'Rebuilding profiles', detail: 'Updating customer profiles from order data...', timeout: 4000});
              }
              lastPhase = p.phase;
            }
            if (p.phase === 'db_write' && p.db_write_detail && p.db_write_detail !== window._lastDbDetail) {
              if (window._lastDbDetail) {
                showGrowl({type: 'info', title: 'Writing to database', detail: p.db_write_detail, timeout: 4000});
              }
              window._lastDbDetail = p.db_write_detail;
            }

            if (p.phase === 'rebuilding') {
              var rCur = p.rebuild_current || 0;
              var rTot = p.rebuild_total || 1;
              pct = Math.min(95, 55 + Math.round((rCur / Math.max(rTot, 1)) * 40));
              phaseText.textContent = p.rebuild_detail || 'Rebuilding customer profiles...';
              progressText.textContent = rTot > 0 ? (fmt(rCur) + ' of ' + fmt(rTot) + ' profiles') : 'Preparing...';
            } else if (p.phase === 'db_write') {
              var dCur = p.dedup_current || 0;
              var dTot = p.dedup_total || 0;
              if (dTot > 0) {
                pct = Math.min(54, 45 + Math.round((dCur / dTot) * 9));
              } else {
                if (!window._dbWriteStart) window._dbWriteStart = Date.now();
                var elapsed = (Date.now() - window._dbWriteStart) / 1000;
                var estSec = window._dbWriteEstSec || 5;
                var progress01 = 1 - Math.exp(-elapsed / (estSec * 0.6));
                pct = Math.min(54, 40 + Math.round(progress01 * 14));
              }
              phaseText.textContent = p.db_write_detail || 'Committing orders to database...';
              progressText.textContent = p.db_write_detail || 'Writing to database...';
            } else {
              var srvTotal = p.total || total;
              pct = Math.min(40, Math.round((processed / srvTotal) * 38) + 2);
              phaseText.textContent = 'Processing rows... ' + fmt(processed) + ' / ' + fmt(srvTotal);
              progressText.textContent = fmt(processed) + ' of ' + fmt(srvTotal) + ' rows';
            }
            progressBar.style.width = pct + '%';
            progressPct.textContent = pct + '%';
            cntNew.textContent = fmt(p.new || 0);
            cntUpdated.textContent = fmt(p.updated || 0);
            cntSkipped.textContent = fmt(p.skipped || 0);
            cntUnchanged.textContent = fmt(p.unchanged || 0);
          })
          .catch(function() {});
      }, 1000);

      fetch('/api/orders/import-csv', {
        method: 'POST',
        headers: {'X-CSRFToken': csrf},
        body: formData,
      })
      .then(function(r) { return r.json(); })
      .then(function(data) {
        if (!data.success && !data.task_id) {
          clearInterval(pollInterval);
          setBannerState('error');
          document.getElementById('csv-error-detail').textContent = data.message || 'Unknown error';
        }
      })
      .catch(function(err) {
        clearInterval(pollInterval);
        setBannerState('error');
        document.getElementById('csv-error-detail').textContent = String(err);
      });
    });
  }

  var btnAnother = document.getElementById('csv-import-another');
  var btnRetry = document.getElementById('csv-retry');
  if (btnAnother) btnAnother.addEventListener('click', resetToIdle);
  if (btnRetry) btnRetry.addEventListener('click', resetToIdle);
})();