<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="Media"
  current_path={@url_path}
  project_title={@project_title}
  current_locale={@current_locale}
>
  <div class="p-6">
    <div class="mb-8">
      <h1 class="text-3xl font-bold text-base-content">Media</h1>
      <p class="text-base-content/70 mt-1">Manage user media and uploads</p>
    </div>

    <%!-- Upload Section (Hidden by default) --%>
    <%= if @show_upload do %>
      <div class="card bg-base-100 shadow-xl mb-8 animate-in fade-in duration-200">
        <div class="card-body">
          <h2 class="card-title text-xl mb-4">Upload Media</h2>
          <p class="text-sm text-base-content/70 mb-4">
            Upload images, videos, or PDFs. Files are automatically processed and optimized.
          </p>

          <.file_upload
            upload={@uploads.media_files}
            label="Upload Media Files"
            icon="hero-cloud-arrow-up"
            accept_description="JPG, PNG, WebP, MP4, WebM, PDF"
            max_size_description="100MB per file"
          />
        </div>
      </div>
    <% end %>

    <%!-- Uploaded Files --%>
    <%= if @total_count > 0 do %>
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <div class="flex justify-between items-center mb-4">
            <div class="flex items-center gap-3">
              <h2 class="card-title text-xl">Uploaded Files ({@total_count})</h2>
              <button
                phx-click="toggle_upload"
                class={["btn btn-sm gap-2", (@show_upload && "btn-error") || "btn-primary"]}
              >
                <%= if @show_upload do %>
                  <.icon name="hero-x-mark" class="w-4 h-4" /> Cancel
                <% else %>
                  <.icon name="hero-plus" class="w-4 h-4" /> Add Media
                <% end %>
              </button>
            </div>
            <.pagination_info
              page={@current_page}
              per_page={@per_page}
              total_count={@total_count}
            />
          </div>

          <div class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-6 gap-3">
            <%= for file <- @uploaded_files do %>
              <.link
                navigate={PhoenixKit.Utils.Routes.path("/admin/users/media/#{file.file_id}")}
                class="group relative aspect-square bg-base-300 rounded-lg overflow-hidden cursor-pointer hover:shadow-lg transition-shadow"
              >
                <% image_url = file.urls["medium"] || file.urls["original"] %>
                <%= if image_url do %>
                  <img
                    src={image_url}
                    alt={file.filename}
                    class="w-full h-full object-cover pointer-events-none group-hover:opacity-75 transition-opacity"
                    onerror="this.parentElement.querySelector('.image-error-placeholder').style.display='grid';"
                  />
                  <div class="image-error-placeholder hidden absolute inset-0 bg-base-300 grid place-items-center text-base-content/50">
                    <div class="flex flex-col items-center justify-center">
                      <.icon name="hero-photo" class="w-12 h-12 mb-2 text-error" />
                      <p class="text-xs font-semibold">Image Missing</p>
                    </div>
                  </div>
                <% else %>
                  <div class="flex flex-col items-center justify-center w-full h-full text-base-content/50 group-hover:bg-base-200 transition-colors">
                    <.icon name={file_icon(file.file_type)} class="w-12 h-12 mb-2" />
                    <p class="text-sm font-semibold">{String.upcase(file.file_type)}</p>
                  </div>
                <% end %>

                <%!-- File size in corner --%>
                <div class="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded pointer-events-none">
                  {format_file_size(file.size)}
                </div>
              </.link>
            <% end %>
          </div>

          <%!-- Pagination Controls --%>
          <%= if @total_count > @per_page do %>
            <.pagination
              current_page={@current_page}
              total_pages={@total_pages}
              base_path={@url_path}
            />
          <% end %>
        </div>
      </div>
    <% else %>
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <div class="flex items-center gap-3 mb-4">
            <h2 class="card-title text-xl">Uploaded Files</h2>
            <button
              phx-click="toggle_upload"
              class={["btn btn-sm gap-2", (@show_upload && "btn-error") || "btn-primary"]}
            >
              <%= if @show_upload do %>
                <.icon name="hero-x-mark" class="w-4 h-4" /> Cancel
              <% else %>
                <.icon name="hero-plus" class="w-4 h-4" /> Add Media
              <% end %>
            </button>
          </div>
          <div class="bg-base-200 rounded-lg p-8 text-center">
            <p class="text-base-content/70">
              No media uploaded yet. Upload your first file above!
            </p>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
