<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">
    <.admin_page_header
      back={PhoenixKit.Utils.Routes.path("/admin")}
      title="Media"
      subtitle="Manage user media and uploads"
    />

    <%!-- 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">
          <div class="flex items-center gap-3 mb-4">
            <h2 class="card-title text-xl">Upload Media</h2>
            <button
              phx-click="toggle_upload"
              class="btn btn-sm btn-error gap-2"
            >
              <.icon name="hero-x-mark" class="w-4 h-4" /> Cancel
            </button>
          </div>
          <%= if @has_buckets do %>
            <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"
            />
          <% else %>
            <div class="alert alert-warning">
              <.icon name="hero-exclamation-triangle" class="stroke-current shrink-0 h-6 w-6" />
              <div>
                <h3 class="font-bold">No Storage Buckets Configured</h3>
                <div class="text-sm mt-1">
                  You need to configure at least one storage bucket before you can upload files.
                  <.link
                    navigate={PhoenixKit.Utils.Routes.path("/admin/settings/media")}
                    class="link link-primary font-semibold"
                  >
                    Configure Storage Buckets
                  </.link>
                </div>
              </div>
            </div>
          <% end %>
        </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 flex-wrap">
              <h2 class="card-title text-xl">
                <%= if @filter_orphaned do %>
                  Orphaned Files ({@total_count})
                <% else %>
                  Uploaded Files ({@total_count})
                <% end %>
              </h2>
              <%= unless @show_upload do %>
                <button
                  phx-click="toggle_upload"
                  class="btn btn-sm btn-primary gap-2"
                >
                  <.icon name="hero-plus" class="w-4 h-4" /> Add Media
                </button>
              <% end %>
              <button
                phx-click="toggle_orphan_filter"
                class={[
                  "btn btn-sm gap-2",
                  if(@filter_orphaned, do: "btn-warning", else: "btn-ghost")
                ]}
              >
                <.icon name="hero-funnel" class="w-4 h-4" />
                <%= if @filter_orphaned do %>
                  Showing orphaned ({@orphaned_count})
                <% else %>
                  Find orphaned ({@orphaned_count})
                <% end %>
              </button>
              <%= if @filter_orphaned && @total_count > 0 do %>
                <button
                  phx-click="delete_all_orphaned"
                  data-confirm={"Delete all #{@total_count} orphaned files?"}
                  class="btn btn-sm btn-error gap-2"
                >
                  <.icon name="hero-trash" class="w-4 h-4" /> Delete all orphaned
                </button>
              <% end %>
            </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/media/#{file.file_uuid}")}
                class="group relative aspect-square bg-base-300 rounded-lg overflow-hidden cursor-pointer hover:shadow-lg transition-shadow"
              >
                <.thumbnail_url :let={url} file={file} size={:medium}>
                  <%= if url do %>
                    <img
                      src={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 %>
                </.thumbnail_url>

                <%!-- Video indicator icon --%>
                <%= if file.file_type == "video" do %>
                  <div class="absolute top-2 left-2 bg-black/60 text-white p-1.5 rounded pointer-events-none flex items-center justify-center">
                    <.icon name="hero-play-solid" class="w-4 h-4" />
                  </div>
                <% end %>

                <%!-- PDF indicator badge --%>
                <%= if file.mime_type == "application/pdf" do %>
                  <div class="absolute top-2 left-2 bg-error/80 text-white px-2 py-0.5 rounded text-xs font-bold pointer-events-none">
                    PDF
                  </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>
