<div class="max-w-4xl mx-auto">
  <div class="mb-6">
    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Storage Statistics</h1>
    <p class="mt-2 text-sm text-gray-600">
      ActiveStorage blob and attachment statistics
    </p>
  </div>

  <!-- Overview Stats -->
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
    <div class="bg-white rounded-lg shadow p-4">
      <p class="text-sm font-medium text-gray-600">Total Blobs</p>
      <p class="text-2xl font-bold text-gray-900 mt-1"><%= @stats[:total_blobs] %></p>
      <p class="text-xs text-gray-500 mt-1"><%= number_to_human_size(@stats[:total_size]) %></p>
    </div>

    <div class="bg-white rounded-lg shadow p-4">
      <p class="text-sm font-medium text-gray-600">Attachments</p>
      <p class="text-2xl font-bold text-gray-900 mt-1"><%= @stats[:total_attachments] %></p>
    </div>

    <div class="bg-white rounded-lg shadow p-4 <%= @stats[:orphan_count] > 0 ? 'border-l-4 border-yellow-400' : '' %>">
      <p class="text-sm font-medium text-gray-600">Orphaned Blobs</p>
      <p class="text-2xl font-bold <%= @stats[:orphan_count] > 0 ? 'text-yellow-600' : 'text-green-600' %> mt-1">
        <%= @stats[:orphan_count] %>
      </p>
      <p class="text-xs text-gray-500 mt-1"><%= number_to_human_size(@stats[:orphan_size]) %></p>
    </div>
  </div>

  <!-- Orphan Details -->
  <% if @stats[:orphan_count] > 0 %>
    <div class="bg-white rounded-lg shadow p-6 mb-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">Orphaned Blob Details</h2>

      <div class="space-y-3">
        <div class="flex justify-between items-center py-2 border-b border-gray-100">
          <div>
            <p class="font-medium text-gray-700">Recent orphans (&lt; 24 hours)</p>
            <p class="text-sm text-gray-500">May be in-progress uploads - will be kept</p>
          </div>
          <span class="text-lg font-semibold text-gray-600"><%= @stats[:recent_orphans] %></span>
        </div>

        <div class="flex justify-between items-center py-2 border-b border-gray-100">
          <div>
            <p class="font-medium text-gray-700">Old orphans (&gt; 24 hours)</p>
            <p class="text-sm text-gray-500">Eligible for cleanup</p>
          </div>
          <span class="text-lg font-semibold <%= @stats[:old_orphans] > 0 ? 'text-yellow-600' : 'text-gray-600' %>">
            <%= @stats[:old_orphans] %>
          </span>
        </div>
      </div>

      <% if @stats[:old_orphans] > 0 %>
        <div class="mt-6">
          <%= button_to "Run Cleanup Now", cleanup_site_admin_storage_stats_path,
              method: :post,
              class: "bg-yellow-500 hover:bg-yellow-600 text-white font-medium py-2 px-4 rounded",
              data: { confirm: "This will queue a job to purge #{@stats[:old_orphans]} orphaned blobs. Continue?" } %>
          <p class="text-sm text-gray-500 mt-2">
            Note: Cleanup runs automatically every day at 3am
          </p>
        </div>
      <% end %>
    </div>
  <% else %>
    <div class="bg-green-50 border border-green-200 rounded-lg p-6 mb-6">
      <div class="flex items-center">
        <svg class="w-6 h-6 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
        <p class="text-green-700 font-medium">No orphaned blobs found!</p>
      </div>
      <p class="text-sm text-green-600 mt-2 ml-9">
        All storage blobs are properly attached to records.
      </p>
    </div>
  <% end %>

  <!-- Info Box -->
  <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
    <h3 class="text-sm font-semibold text-blue-800 mb-2">About Orphaned Blobs</h3>
    <p class="text-sm text-blue-700">
      Orphaned blobs are files that were uploaded but are no longer attached to any record.
      This can happen when records are deleted or uploads fail. The system automatically
      cleans up orphaned blobs older than 24 hours every day at 3am.
    </p>
  </div>
</div>
