<div class="bg-white shadow-sm rounded-lg mb-6">
  <div class="px-6 py-4">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-lg font-medium text-gray-900">Import Progress</h2>
      <%# Reuse the status_badge helper - need to define it here since it's a partial %>
      <% def status_badge(status) %>
        <% case status %>
        <% when 'pending' %>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
            <%= status.capitalize %>
          </span>
        <% when 'processing' %>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
            <%= status.capitalize %>
          </span>
        <% when 'completed' %>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
            <%= status.capitalize %>
          </span>
        <% when 'failed' %>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
            <%= status.capitalize %>
          </span>
        <% else %>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
            <%= status.capitalize %>
          </span>
        <% end %>
      <% end %>
      <%= status_badge(@data_import.status) %>
    </div>

    <!-- Progress Bar -->
    <div class="mb-4">
      <div class="flex items-center justify-between text-sm text-gray-600 mb-1">
        <span><%= number_with_delimiter(@data_import.processed_records) %> of <%= number_with_delimiter(@data_import.total_records) %> records</span>
        <span><%= @data_import.progress_percentage %>%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2">
        <div class="bg-blue-600 h-2 rounded-full transition-all duration-300"
             style="width: <%= @data_import.progress_percentage %>%"></div>
      </div>
    </div>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
      <div class="bg-gray-50 rounded-lg p-4">
        <div class="text-2xl font-semibold text-gray-900">
          <%= number_with_delimiter(@data_import.total_records) %>
        </div>
        <div class="text-sm text-gray-600">Total Records</div>
      </div>
      <div class="bg-green-50 rounded-lg p-4">
        <div class="text-2xl font-semibold text-green-900">
          <%= number_with_delimiter(@data_import.processed_records) %>
        </div>
        <div class="text-sm text-green-600">Processed</div>
      </div>
      <div class="bg-red-50 rounded-lg p-4">
        <div class="text-2xl font-semibold text-red-900">
          <%= number_with_delimiter(@data_import.failed_records) %>
        </div>
        <div class="text-sm text-red-600">Failed</div>
      </div>
      <div class="bg-blue-50 rounded-lg p-4">
        <div class="text-2xl font-semibold text-blue-900">
          <%= number_with_delimiter(@data_import.records_per_second) %>
        </div>
        <div class="text-sm text-blue-600">Records/Sec</div>
      </div>
    </div>
  </div>
</div>

<%# Auto-refresh logic for completed/failed imports %>
<% if @data_import.completed? || @data_import.failed? %>
  <script>
    setTimeout(() => window.location.reload(), 2000);
  </script>
<% end %>