<div class="max-w-7xl mx-auto px-4 py-8" data-controller="media-library">
  <div class="flex items-center justify-between mb-6">
    <div>
      <h1 class="text-2xl font-bold text-gray-900">Media Library</h1>
      <p class="text-gray-600 mt-1">Manage your images and files</p>
    </div>
    <div class="flex items-center gap-3">
      <!-- Upload Button -->
      <label class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 cursor-pointer">
        <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
        </svg>
        Upload Files
        <%= form_tag site_admin_media_library_index_path, method: :post, multipart: true, id: "upload-form", class: "hidden" do %>
          <input type="file" name="files[]" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx" 
                 onchange="this.form.submit()" class="hidden">
          <input type="hidden" name="folder_id" value="<%= @current_folder&.id %>">
        <% end %>
      </label>
      
      <!-- New Folder Button -->
      <button type="button" onclick="document.getElementById('new-folder-modal').classList.remove('hidden')"
              class="px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200">
        <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"></path>
        </svg>
        New Folder
      </button>
    </div>
  </div>

  <!-- Stats Bar -->
  <div class="grid grid-cols-4 gap-4 mb-6">
    <div class="bg-white rounded-lg border border-gray-200 p-4">
      <p class="text-2xl font-bold text-gray-900"><%= @stats[:total_files] %></p>
      <p class="text-sm text-gray-600">Total Files</p>
    </div>
    <div class="bg-white rounded-lg border border-gray-200 p-4">
      <p class="text-2xl font-bold text-blue-600"><%= @stats[:total_images] %></p>
      <p class="text-sm text-gray-600">Images</p>
    </div>
    <div class="bg-white rounded-lg border border-gray-200 p-4">
      <p class="text-2xl font-bold text-green-600"><%= @stats[:total_documents] %></p>
      <p class="text-sm text-gray-600">Documents</p>
    </div>
    <div class="bg-white rounded-lg border border-gray-200 p-4">
      <p class="text-2xl font-bold text-purple-600"><%= number_to_human_size(@stats[:storage_used]) %></p>
      <p class="text-sm text-gray-600">Storage Used</p>
    </div>
  </div>

  <div class="flex gap-6">
    <!-- Sidebar: Folders -->
    <div class="w-64 flex-shrink-0">
      <div class="bg-white rounded-lg border border-gray-200 p-4">
        <h3 class="font-medium text-gray-900 mb-3">Folders</h3>
        <ul class="space-y-1">
          <li>
            <%= link_to site_admin_media_library_index_path, 
                class: "flex items-center px-3 py-2 rounded-lg #{@current_folder.nil? ? 'bg-blue-50 text-blue-700' : 'hover:bg-gray-100 text-gray-700'}" do %>
              <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path>
              </svg>
              All Files
            <% end %>
          </li>
          <% @folders.each do |folder| %>
            <li>
              <%= link_to site_admin_media_library_index_path(folder: folder.id), 
                  class: "flex items-center justify-between px-3 py-2 rounded-lg #{@current_folder&.id == folder.id ? 'bg-blue-50 text-blue-700' : 'hover:bg-gray-100 text-gray-700'}" do %>
                <span class="flex items-center">
                  <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path>
                  </svg>
                  <%= folder.name %>
                </span>
                <span class="text-xs text-gray-500"><%= folder.media.count %></span>
              <% end %>
            </li>
          <% end %>
        </ul>
      </div>
    </div>

    <!-- Main Content: Media Grid -->
    <div class="flex-1">
      <!-- Search and filters -->
      <div class="bg-white rounded-lg border border-gray-200 p-4 mb-4">
        <%= form_tag site_admin_media_library_index_path, method: :get, class: "flex items-center gap-4" do %>
          <% if @current_folder %>
            <input type="hidden" name="folder" value="<%= @current_folder.id %>">
          <% end %>
          <div class="flex-1 relative">
            <input type="text" name="q" value="<%= params[:q] %>" placeholder="Search files..." 
                   class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
            <svg class="w-5 h-5 text-gray-400 absolute left-3 top-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
          </div>
          <button type="submit" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
            Search
          </button>
        <% end %>
      </div>

      <!-- Current folder breadcrumb -->
      <% if @current_folder %>
        <div class="flex items-center gap-2 mb-4 text-sm">
          <%= link_to "All Files", site_admin_media_library_index_path, class: "text-blue-600 hover:underline" %>
          <span class="text-gray-400">/</span>
          <span class="text-gray-700"><%= @current_folder.name %></span>
        </div>
      <% end %>

      <!-- Media Grid -->
      <% if @media.any? %>
        <div class="grid grid-cols-4 gap-4">
          <% @media.each do |media| %>
            <div class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-md transition-shadow group">
              <!-- Thumbnail -->
              <div class="aspect-square bg-gray-100 relative">
                <% thumb_url = media.image? && media.file.attached? ? media.variant_url(:thumb) : nil %>
                <% if thumb_url.present? %>
                  <%= image_tag thumb_url,
                      alt: media.alt_text || media.filename,
                      class: "w-full h-full object-cover" %>
                <% else %>
                  <div class="w-full h-full flex items-center justify-center">
                    <svg class="w-12 h-12 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"></path>
                    </svg>
                  </div>
                <% end %>
                
                <!-- Hover overlay with actions -->
                <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
                  <%= link_to edit_site_admin_media_library_path(media), 
                      class: "p-2 bg-white rounded-full hover:bg-gray-100" do %>
                    <svg class="w-4 h-4 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                    </svg>
                  <% end %>
                  <%= link_to site_admin_media_library_path(media), method: :delete, 
                      data: { confirm: "Delete this file?" },
                      class: "p-2 bg-white rounded-full hover:bg-red-100" do %>
                    <svg class="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                    </svg>
                  <% end %>
                </div>
              </div>
              
              <!-- File info -->
              <div class="p-3">
                <p class="text-sm font-medium text-gray-900 truncate" title="<%= media.filename %>">
                  <%= media.display_name %>
                </p>
                <p class="text-xs text-gray-500 mt-1">
                  <%= media.human_file_size %>
                  <% if media.dimensions %> &middot; <%= media.dimensions %><% end %>
                </p>
              </div>
            </div>
          <% end %>
        </div>

        <!-- Pagination -->
        <% if @pagy.pages > 1 %>
          <div class="mt-6 flex justify-center">
            <%== pagy_nav(@pagy) %>
          </div>
        <% end %>
      <% else %>
        <!-- Empty state -->
        <div class="bg-white rounded-lg border border-gray-200 p-12 text-center">
          <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
          </svg>
          <h3 class="text-lg font-medium text-gray-900 mb-2">No files yet</h3>
          <p class="text-gray-600 mb-4">
            <% if @current_folder %>
              This folder is empty. Upload files to get started.
            <% else %>
              Upload images and documents to build your media library.
            <% end %>
          </p>
          <label class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 cursor-pointer">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
            </svg>
            Upload Files
            <input type="file" name="files[]" multiple form="upload-form" 
                   onchange="document.getElementById('upload-form').submit()" class="hidden">
          </label>
        </div>
      <% end %>
    </div>
  </div>
</div>

<!-- New Folder Modal -->
<div id="new-folder-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
  <div class="flex items-center justify-center min-h-screen px-4">
    <div class="fixed inset-0 bg-black bg-opacity-50" onclick="document.getElementById('new-folder-modal').classList.add('hidden')"></div>
    <div class="relative bg-white rounded-lg shadow-xl max-w-md w-full p-6">
      <h3 class="text-lg font-semibold text-gray-900 mb-4">Create New Folder</h3>
      <%= form_tag create_folder_site_admin_media_library_index_path, method: :post do %>
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-1">Folder Name</label>
          <input type="text" name="folder[name]" required
                 class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
        </div>
        <% if @current_folder %>
          <input type="hidden" name="folder[parent_id]" value="<%= @current_folder.id %>">
        <% end %>
        <div class="flex justify-end gap-3">
          <button type="button" onclick="document.getElementById('new-folder-modal').classList.add('hidden')"
                  class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">
            Cancel
          </button>
          <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
            Create Folder
          </button>
        </div>
      <% end %>
    </div>
  </div>
</div>
