{# ── CSV Import (reusable partial) ──
   TWO parts:
   1. _csv_import_btn.html — inline button for the header (include manually in the header row)
   2. This file — the expandable banner (include after the header)
   Requires context var: csv_import_stale (bool)
#}

{# Full expandable banner — hidden by default, JS auto-expands if stale #}
<div id="csv-import-banner" data-stale="{{ '1' if csv_import_stale else '0' }}"
     class="hidden mb-5 rounded-xl p-4 relative border bg-amber-50 dark:bg-amber-500/10 border-amber-200 dark:border-amber-700 transition-colors">
  <button type="button" id="csv-dismiss" class="absolute top-2 right-2 text-amber-400 hover:text-amber-600 dark:hover:text-amber-300 text-lg leading-none">&times;</button>
  <div class="flex items-start gap-3">
    <span id="csv-banner-icon" class="material-symbols-outlined text-amber-500 mt-0.5">upload_file</span>
    <div class="flex-1">
      {# ── Idle state ── #}
      <div id="csv-state-idle">
        <p class="text-sm font-medium text-amber-800 dark:text-amber-400 mb-1">Import Addons CSV for customer names &amp; historical orders</p>
        {% if csv_last_import %}
        <p class="text-xs text-amber-700 dark:text-amber-300 mb-2">
          Last import: <strong>{{ csv_last_import.strftime('%b %d, %Y') }}</strong>
          <span class="text-amber-500 dark:text-amber-400">({{ csv_last_import | timesince }})</span>.
          We recommend uploading the latest CSV for up-to-date customer names and order data.
        </p>
        {% else %}
        <p class="text-xs text-amber-700 dark:text-amber-300 mb-2">
          No CSV imported yet. Upload the Addons CSV to enrich orders with customer names, websites, and historical data not available via API.
        </p>
        {% endif %}
        <p class="text-xs text-amber-600 dark:text-amber-400 mb-3">
          Export from
          <a href="https://addons.prestashop.com/en/mymodules/sales/statistics" target="_blank" rel="noopener"
             class="underline font-medium">Addons &rarr; Statistics</a>
          (semicolon-delimited CSV).
        </p>
        {# Drop zone #}
        <div id="csv-drop-zone"
             class="border-2 border-dashed border-amber-300 dark:border-amber-600 rounded-xl p-5 text-center cursor-pointer hover:border-amber-400 dark:hover:border-amber-500 hover:bg-amber-100/50 dark:hover:bg-amber-500/5 transition-colors">
          <span class="material-symbols-outlined text-3xl text-amber-400 dark:text-amber-500 mb-1">cloud_upload</span>
          <p class="text-sm font-medium text-amber-700 dark:text-amber-400">Drop your CSV file here</p>
          <p class="text-xs text-amber-500 dark:text-amber-500 mt-0.5">or <span class="underline">click to browse</span></p>
          <input type="file" id="csv-file-input" accept=".csv" class="hidden">
        </div>
        {# File selected preview #}
        <div id="csv-file-ready" class="hidden mt-3 flex items-center justify-between bg-white dark:bg-gray-800 border border-amber-200 dark:border-amber-700 rounded-lg px-4 py-2.5">
          <div class="flex items-center gap-2.5">
            <span class="material-symbols-outlined text-lg text-amber-500">description</span>
            <div>
              <p id="csv-file-name" class="text-sm font-medium text-gray-800 dark:text-gray-200"></p>
              <p id="csv-row-preview" class="text-xs text-gray-500 dark:text-gray-400"></p>
            </div>
          </div>
          <div class="flex items-center gap-2">
            <button type="button" id="csv-remove-file" class="text-xs text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors" title="Remove file">
              <span class="material-symbols-outlined text-lg">close</span>
            </button>
            <button type="button" id="btn-import-csv" disabled
                    class="inline-flex items-center gap-1.5 px-4 py-1.5 text-sm font-medium text-white bg-amber-600 rounded-lg hover:bg-amber-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
              <span class="material-symbols-outlined text-base">cloud_upload</span>
              <span>Import</span>
            </button>
          </div>
        </div>
      </div>

      {# ── Processing state ── #}
      <div id="csv-state-processing" class="hidden">
        <p id="csv-phase-text" class="text-sm font-medium text-amber-800 dark:text-amber-400 mb-2">Importing CSV...</p>
        <div class="w-full bg-amber-100 dark:bg-amber-500/10 rounded-full h-2.5 mb-2">
          <div id="csv-progress-bar" class="bg-amber-500 h-2.5 rounded-full transition-all duration-300" style="width:0%"></div>
        </div>
        <div class="flex items-center justify-between">
          <p id="csv-progress-text" class="text-xs text-amber-600 dark:text-amber-400">Preparing...</p>
          <p id="csv-progress-pct" class="text-xs font-medium text-amber-700 dark:text-amber-400">0%</p>
        </div>
        <div id="csv-running-counts" class="flex items-center gap-4 mt-2 text-xs text-amber-700 dark:text-amber-400">
          <span>New: <strong id="csv-cnt-new">0</strong></span>
          <span>Updated: <strong id="csv-cnt-updated">0</strong></span>
          <span>Skipped: <strong id="csv-cnt-skipped">0</strong></span>
          <span>Unchanged: <strong id="csv-cnt-unchanged">0</strong></span>
        </div>
      </div>

      {# ── Complete state ── #}
      <div id="csv-state-complete" class="hidden">
        <p class="text-sm font-medium text-green-800 dark:text-green-400 mb-3">CSV import complete</p>
        <div class="flex items-center gap-3 flex-wrap">
          <div class="bg-white dark:bg-gray-800 border border-green-200 dark:border-green-700 rounded-lg px-3 py-2 text-center min-w-[80px]">
            <p id="csv-final-new" class="text-lg font-bold text-green-700 dark:text-green-400">0</p>
            <p class="text-xs text-green-600 dark:text-green-400">new</p>
          </div>
          <div class="bg-white dark:bg-gray-800 border border-green-200 dark:border-green-700 rounded-lg px-3 py-2 text-center min-w-[80px]">
            <p id="csv-final-updated" class="text-lg font-bold text-blue-700 dark:text-blue-400">0</p>
            <p class="text-xs text-blue-600 dark:text-blue-400">updated</p>
          </div>
          <div id="csv-final-unchanged-card" class="bg-white dark:bg-gray-800 border border-green-200 dark:border-green-700 rounded-lg px-3 py-2 text-center min-w-[80px]">
            <p id="csv-final-unchanged" class="text-lg font-bold text-gray-400 dark:text-gray-500">0</p>
            <p class="text-xs text-gray-400 dark:text-gray-500">unchanged</p>
          </div>
          <div class="bg-white dark:bg-gray-800 border border-green-200 dark:border-green-700 rounded-lg px-3 py-2 text-center min-w-[80px]">
            <p id="csv-final-skipped" class="text-lg font-bold text-gray-500 dark:text-gray-400">0</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">skipped</p>
          </div>
          <div class="bg-white dark:bg-gray-800 border border-green-200 dark:border-green-700 rounded-lg px-3 py-2 text-center min-w-[80px]">
            <p id="csv-final-profiles" class="text-lg font-bold text-purple-700 dark:text-purple-400">0</p>
            <p class="text-xs text-purple-600 dark:text-purple-400">profiles</p>
          </div>
        </div>
        <button type="button" id="csv-import-another" class="mt-3 text-xs text-green-700 dark:text-green-400 underline hover:text-green-900 dark:hover:text-green-100">Import another file</button>
      </div>

      {# ── Error state ── #}
      <div id="csv-state-error" class="hidden">
        <p class="text-sm font-medium text-red-800 dark:text-red-400 mb-1">CSV import failed</p>
        <p id="csv-error-detail" class="text-xs text-red-600 dark:text-red-400 mb-3"></p>
        <button type="button" id="csv-retry" class="text-xs text-red-700 dark:text-red-400 underline hover:text-red-900 dark:hover:text-red-100">Try again</button>
      </div>
    </div>
  </div>
</div>