<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="Storage Settings"
  current_path={@current_path}
  current_locale={@current_locale}
  project_title={@project_title}
>
  <div class="container mx-auto px-4 py-8 max-w-6xl">
    <.admin_page_header
      back={PhoenixKit.Utils.Routes.path("/admin/modules")}
      title={gettext("Storage Settings")}
      subtitle={
        gettext("Configure storage buckets and file processing settings for your application")
      }
    />

    <%!-- Module Status Alert --%>
    <div class="alert alert-info mb-6">
      <.icon name="hero-information-circle" class="w-5 h-5" />
      <div>
        <h3 class="font-bold">{gettext("Core System Module")}</h3>
        <p class="text-sm">
          {gettext(
            "Storage is a core system module that is always enabled and cannot be disabled."
          )}
          {gettext("It provides essential file management functionality across PhoenixKit.")}
        </p>
      </div>
    </div>

    <%!-- Repair Storage Module Section --%>
    <div class="alert alert-warning mb-6">
      <.icon name="hero-wrench-screwdriver" class="w-5 h-5" />
      <div class="flex-1">
        <h3 class="font-bold">{gettext("Storage Module Repair")}</h3>
        <p class="text-sm">
          {gettext(
            "If your storage module isn't working correctly, use this to reset configuration to defaults."
          )}
          {gettext("This will NOT delete any uploaded files.")}
        </p>
      </div>
      <button
        phx-click="repair_storage_module"
        data-confirm={
          gettext(
            "This will reset dimensions and settings to defaults, and create a local bucket if none exist. Your uploaded files will NOT be deleted. Continue?"
          )
        }
        class="btn btn-warning btn-sm"
      >
        <.icon name="hero-wrench-screwdriver" class="w-4 h-4 mr-1" /> {gettext(
          "Repair Storage Module"
        )}
      </button>
    </div>

    <%!-- System Dependencies Check --%>
    <%= if match?({:error, :not_installed}, @imagemagick_status) do %>
      <div class="alert alert-error mb-6">
        <.icon name="hero-exclamation-circle" class="w-5 h-5" />
        <div>
          <h3 class="font-bold">{gettext("ImageMagick Not Installed")}</h3>
          <p class="text-sm">
            {gettext("ImageMagick is required for image processing and variant generation.")}
            {gettext("Without it, image resizing, cropping, and format conversion will not work.")}
          </p>
          <p class="text-sm mt-2">
            <strong>{gettext("Installation:")}</strong>
            <br />macOS:
            <code class="bg-base-200 px-2 py-1 rounded text-xs">brew install imagemagick</code>
            <br />Ubuntu/Debian:
            <code class="bg-base-200 px-2 py-1 rounded text-xs">
              sudo apt-get install imagemagick
            </code>
            <br />CentOS/RHEL:
            <code class="bg-base-200 px-2 py-1 rounded text-xs">
              sudo yum install ImageMagick
            </code>
          </p>
        </div>
      </div>
    <% end %>

    <%= if match?({:error, :not_installed}, @ffmpeg_status) do %>
      <div class="alert alert-warning mb-6">
        <.icon name="hero-exclamation-triangle" class="w-5 h-5" />
        <div>
          <h3 class="font-bold">{gettext("FFmpeg Not Installed")}</h3>
          <p class="text-sm">
            {gettext(
              "FFmpeg is required for video processing, transcoding, and thumbnail generation."
            )}
            {gettext("Without it, video file processing will not work.")}
          </p>
          <p class="text-sm mt-2">
            <strong>{gettext("Installation:")}</strong>
            <br />macOS:
            <code class="bg-base-200 px-2 py-1 rounded text-xs">brew install ffmpeg</code>
            <br />Ubuntu/Debian:
            <code class="bg-base-200 px-2 py-1 rounded text-xs">sudo apt-get install ffmpeg</code>
            <br />CentOS/RHEL:
            <code class="bg-base-200 px-2 py-1 rounded text-xs">sudo yum install ffmpeg</code>
          </p>
        </div>
      </div>
    <% end %>

    <%!-- Storage Buckets --%>
    <div class="card bg-base-100 shadow-xl mb-6">
      <div class="card-body">
        <div class="flex justify-between items-center mb-4">
          <h2 class="card-title text-2xl">
            <.icon name="hero-inbox-stack" class="w-6 h-6 mr-2" /> {gettext("Storage Buckets")}
          </h2>
          <.link
            navigate={PhoenixKit.Utils.Routes.path("/admin/settings/media/buckets/new")}
            class="btn btn-primary"
          >
            <.icon name="hero-plus" class="w-4 h-4 mr-1" /> {gettext("Add Bucket")}
          </.link>
        </div>

        <%= if Enum.empty?(@buckets) do %>
          <div class="alert alert-warning">
            <.icon name="hero-exclamation-triangle" class="w-5 h-5" />
            <div>
              <h3 class="font-bold">{gettext("No Storage Buckets Configured")}</h3>
              <p class="text-sm">
                {gettext(
                  "You need to create at least one storage bucket before files can be uploaded."
                )}
                {gettext(
                  "Buckets can be local directories or cloud storage providers (AWS S3, Backblaze B2, Cloudflare R2)."
                )}
              </p>
              <div class="mt-3">
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/settings/media/buckets/new")}
                  class="btn btn-warning btn-sm"
                >
                  <.icon name="hero-plus" class="w-4 h-4 mr-1" /> {gettext(
                    "Create Your First Bucket"
                  )}
                </.link>
              </div>
            </div>
          </div>
        <% else %>
          <div class="overflow-x-auto">
            <table class="table table-zebra">
              <thead>
                <tr>
                  <th>{gettext("Name")}</th>
                  <th>{gettext("Provider")}</th>
                  <th>{gettext("Priority")}</th>
                  <th>{gettext("Files")}</th>
                  <th>{gettext("Status")}</th>
                  <th class="text-right">{gettext("Actions")}</th>
                </tr>
              </thead>
              <tbody>
                <%= for bucket <- @buckets do %>
                  <tr>
                    <%!-- Name --%>
                    <td>
                      <div class="flex items-center gap-2">
                        <%= case bucket.provider do %>
                          <% "local" -> %>
                            <.icon name="hero-folder" class="w-5 h-5 text-primary" />
                          <% "s3" -> %>
                            <.icon name="hero-cloud" class="w-5 h-5 text-warning" />
                          <% "b2" -> %>
                            <.icon name="hero-cube" class="w-5 h-5 text-info" />
                          <% "r2" -> %>
                            <.icon name="hero-cloud-arrow-up" class="w-5 h-5 text-accent" />
                          <% _ -> %>
                            <.icon name="hero-server" class="w-5 h-5 text-base-content/50" />
                        <% end %>
                        <div>
                          <div class="font-bold">{bucket.name}</div>
                          <div class="text-xs text-base-content/60 font-mono">
                            {get_bucket_full_path(bucket)}
                          </div>
                        </div>
                      </div>
                    </td>

                    <%!-- Provider --%>
                    <td>
                      <span class="badge badge-ghost badge-sm h-auto">
                        {String.upcase(bucket.provider)}
                      </span>
                    </td>

                    <%!-- Priority --%>
                    <td>
                      <%= if bucket.priority == 0 do %>
                        <span class="text-xs text-base-content/60">{gettext("Random")} (0)</span>
                      <% else %>
                        <span class="font-semibold">{bucket.priority}</span>
                      <% end %>
                    </td>

                    <%!-- Files Count --%>
                    <td>
                      <span class="text-sm font-semibold">
                        {Map.get(@bucket_file_counts, bucket.uuid, 0)} {gettext("files")}
                      </span>
                    </td>

                    <%!-- Status --%>
                    <td>
                      <%= if bucket.enabled do %>
                        <span class="badge badge-success badge-sm h-auto">
                          {gettext("Enabled")}
                        </span>
                      <% else %>
                        <span class="badge badge-error badge-sm h-auto">
                          {gettext("Disabled")}
                        </span>
                      <% end %>
                    </td>

                    <%!-- Actions --%>
                    <td>
                      <div class="flex justify-end gap-1">
                        <%!-- Edit Button --%>
                        <.link
                          navigate={
                            PhoenixKit.Utils.Routes.path(
                              "/admin/settings/media/buckets/#{bucket.uuid}/edit"
                            )
                          }
                          class="btn btn-xs btn-outline btn-info tooltip tooltip-bottom"
                          data-tip={gettext("Edit bucket")}
                        >
                          <.icon name="hero-pencil" class="w-4 h-4 hidden sm:inline" />
                          <span class="sm:hidden whitespace-nowrap">
                            {gettext("Edit bucket")}
                          </span>
                        </.link>

                        <%!-- Toggle Enable/Disable --%>
                        <button
                          phx-click="toggle_bucket"
                          phx-value-id={bucket.uuid}
                          class="btn btn-xs btn-outline btn-info tooltip tooltip-bottom"
                          data-tip={
                            if bucket.enabled, do: gettext("Disable"), else: gettext("Enable")
                          }
                        >
                          <%= if bucket.enabled do %>
                            <.icon name="hero-eye-slash" class="w-4 h-4 hidden sm:inline" />
                          <% else %>
                            <.icon name="hero-eye" class="w-4 h-4 hidden sm:inline" />
                          <% end %>
                          <span class="sm:hidden whitespace-nowrap">
                            {if bucket.enabled, do: gettext("Disable"), else: gettext("Enable")}
                          </span>
                        </button>

                        <%!-- Delete Button --%>
                        <button
                          phx-click="delete_bucket"
                          phx-value-id={bucket.uuid}
                          data-confirm={
                            gettext(
                              "Are you sure you want to delete this bucket? This will remove all location records."
                            )
                          }
                          class="btn btn-xs btn-outline btn-error tooltip tooltip-bottom"
                          data-tip={gettext("Delete bucket")}
                        >
                          <.icon name="hero-trash" class="w-4 h-4 hidden sm:inline" />
                          <span class="sm:hidden whitespace-nowrap">
                            {gettext("Delete bucket")}
                          </span>
                        </button>
                      </div>
                    </td>
                  </tr>
                <% end %>
              </tbody>
            </table>
          </div>

          <div class="stats stats-vertical lg:stats-horizontal shadow mt-6">
            <div class="stat">
              <div class="stat-title">{gettext("Total Buckets")}</div>
              <div class="stat-value text-2xl">{length(@buckets)}</div>
              <div class="stat-desc">{gettext("Configured storage locations")}</div>
            </div>

            <div class="stat">
              <div class="stat-title">{gettext("Active Buckets")}</div>
              <div class="stat-value text-2xl text-success">
                {Enum.count(@buckets, & &1.enabled)}
              </div>
              <div class="stat-desc">{gettext("Currently in use")}</div>
            </div>

            <div class="stat">
              <div class="stat-title">{gettext("Default Bucket")}</div>
              <div class="stat-value text-2xl">
                <%= if @default_bucket_uuid do %>
                  <span class="text-success">{gettext("Set")}</span>
                <% else %>
                  <span class="text-warning">{gettext("None")}</span>
                <% end %>
              </div>
              <div class="stat-desc">{gettext("Primary storage location")}</div>
            </div>
          </div>
        <% end %>
      </div>
    </div>

    <%!-- Storage Configuration --%>
    <div class="card bg-base-100 shadow-xl mb-6">
      <div class="card-body">
        <h2 class="card-title text-2xl mb-4">
          <.icon name="hero-cog-6-tooth" class="w-6 h-6 mr-2" /> {gettext("Storage Configuration")}
        </h2>

        <.form
          for={%{"form_redundancy" => @form_redundancy}}
          phx-change="update_storage_form"
          class="grid grid-cols-1 md:grid-cols-2 gap-6"
        >
          <%!-- Redundancy Settings --%>
          <div class="form-control">
            <div class="mb-2">
              <span class="label-text font-semibold">{gettext("Redundancy Copies")}</span>
              <span class="block text-xs text-base-content/60">
                {gettext("Number of copies to store")}
              </span>
            </div>
            <%= if @active_buckets_count == 0 do %>
              <div class="alert alert-warning">
                <.icon name="hero-exclamation-triangle" class="w-4 h-4" />
                <span class="text-sm">
                  {gettext("No active buckets available. Enable buckets to configure redundancy.")}
                </span>
              </div>
            <% else %>
              <%= if @form_redundancy > @max_redundancy do %>
                <div class="alert alert-warning">
                  <.icon name="hero-exclamation-triangle" class="w-4 h-4" />
                  <span class="text-sm">
                    Current setting (#{@form_redundancy} copies) exceeds available buckets (#{@max_redundancy}). {gettext(
                      "Reduce redundancy or enable more buckets."
                    )}
                  </span>
                </div>
              <% end %>
              <input
                type="number"
                name="form_redundancy"
                value={@form_redundancy}
                min="1"
                max={@max_redundancy}
                class={"input input-bordered #{if @form_redundancy > @max_redundancy, do: "input-warning", else: ""}"}
              />
              <p class="text-xs text-base-content/70 mt-1">
                {gettext("Enter number of copies")} (1-{@max_redundancy}).
                <%= if @max_redundancy == 1 do %>
                  {gettext(
                    "Only 1 active bucket available. Add more buckets to enable redundancy."
                  )}
                <% else %>
                  {gettext("Maximum %{count} copies based on %{buckets} active bucket(s).",
                    count: @max_redundancy,
                    buckets: @active_buckets_count
                  )}
                <% end %>
              </p>
            <% end %>
          </div>

          <%!-- Auto-Variant Generation --%>
          <div class="form-control">
            <label class="flex items-start gap-3 cursor-pointer py-2">
              <input
                type="checkbox"
                name="form_auto_generate_variants"
                checked={@form_auto_generate_variants}
                phx-click="toggle_form_variants"
                value="true"
                class="checkbox checkbox-primary mt-0.5 flex-shrink-0"
              />
              <span>
                <span class="font-semibold text-sm">{gettext("Auto-Generate Variants")}</span>
                <span class="block text-xs text-base-content/70 mt-0.5">
                  {gettext("Automatically resize images and videos to configured dimensions")}
                </span>
              </span>
            </label>
          </div>
        </.form>

        <%!-- Apply Button --%>
        <div class="form-control mt-4">
          <button
            type="button"
            phx-click="apply_storage_settings"
            disabled={
              @form_redundancy == @redundancy_copies and
                @form_auto_generate_variants == @auto_generate_variants
            }
            phx-disable-with={gettext("Applying...")}
            class="btn btn-primary"
          >
            <.icon name="hero-check" class="w-4 h-4 mr-2" /> {gettext("Apply Changes")}
          </button>
          <span class="label-text-alt text-xs ml-2">
            <%= if @form_redundancy == @redundancy_copies and @form_auto_generate_variants == @auto_generate_variants do %>
              {gettext("No changes to apply")}
            <% else %>
              {gettext("Changes will be saved immediately")}
            <% end %>
          </span>
        </div>

        <%!-- Quick Actions --%>
        <div class="divider">{gettext("Quick Actions")}</div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <.link
            navigate={PhoenixKit.Utils.Routes.path("/admin/settings/media/dimensions")}
            class="btn btn-outline"
          >
            <.icon name="hero-photo" class="w-4 h-4 mr-2" /> {gettext("Manage Dimensions")}
          </.link>

          <button class="btn btn-outline" disabled>
            <.icon name="hero-chart-bar" class="w-4 h-4 mr-2" /> {gettext("Storage Stats")}
            <span class="badge badge-xs ml-1">{gettext("Soon")}</span>
          </button>

          <button class="btn btn-outline" disabled>
            <.icon name="hero-arrow-path" class="w-4 h-4 mr-2" /> {gettext("Sync Files")}
            <span class="badge badge-xs ml-1">{gettext("Soon")}</span>
          </button>
        </div>
      </div>
    </div>

    <%!-- Coming Soon Features --%>
    <div class="card bg-base-100 shadow-xl border-2 border-dashed border-base-300">
      <div class="card-body">
        <h2 class="card-title text-2xl mb-4">
          <.icon name="hero-rocket-launch" class="w-6 h-6 mr-2" /> {gettext(
            "Advanced Features Coming Soon"
          )}
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <%!-- Multi-Location Storage --%>
          <div class="border border-base-300 rounded-lg p-4">
            <div class="flex items-start gap-3">
              <div class="text-3xl">🗂️</div>
              <div>
                <h3 class="font-bold mb-1">{gettext("Multi-Location Storage")}</h3>
                <p class="text-sm text-base-content/70">
                  {gettext("Store files across 1-5 redundant locations with automatic failover")}
                </p>
              </div>
            </div>
          </div>

          <%!-- S3 Integration --%>
          <div class="border border-base-300 rounded-lg p-4">
            <div class="flex items-start gap-3">
              <div class="text-3xl">☁️</div>
              <div>
                <h3 class="font-bold mb-1">{gettext("AWS S3 Integration")}</h3>
                <p class="text-sm text-base-content/70">
                  {gettext("Store files in Amazon S3 buckets for cloud redundancy")}
                </p>
              </div>
            </div>
          </div>

          <%!-- Remote Servers --%>
          <div class="border border-base-300 rounded-lg p-4">
            <div class="flex items-start gap-3">
              <div class="text-3xl">🖥️</div>
              <div>
                <h3 class="font-bold mb-1">{gettext("Remote Servers")}</h3>
                <p class="text-sm text-base-content/70">
                  {gettext("Distribute files across multiple remote servers and datacenters")}
                </p>
              </div>
            </div>
          </div>

          <%!-- Admin Dashboard --%>
          <div class="border border-base-300 rounded-lg p-4">
            <div class="flex items-start gap-3">
              <div class="text-3xl">📊</div>
              <div>
                <h3 class="font-bold mb-1">{gettext("Admin Dashboard")}</h3>
                <p class="text-sm text-base-content/70">
                  {gettext("Monitor storage health, locations, and file distribution")}
                </p>
              </div>
            </div>
          </div>

          <%!-- File Tracking --%>
          <div class="border border-base-300 rounded-lg p-4">
            <div class="flex items-start gap-3">
              <div class="text-3xl">📋</div>
              <div>
                <h3 class="font-bold mb-1">{gettext("File Tracking")}</h3>
                <p class="text-sm text-base-content/70">
                  {gettext("PostgreSQL-based file registry with location tracking")}
                </p>
              </div>
            </div>
          </div>

          <%!-- Automatic Failover --%>
          <div class="border border-base-300 rounded-lg p-4">
            <div class="flex items-start gap-3">
              <div class="text-3xl">🔄</div>
              <div>
                <h3 class="font-bold mb-1">{gettext("Automatic Failover")}</h3>
                <p class="text-sm text-base-content/70">
                  {gettext("Seamless file retrieval even when storage locations fail")}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <%!-- Upload Test Section --%>

    <%!-- Help Section --%>
    <div class="alert mt-6">
      <.icon name="hero-light-bulb" class="w-5 h-5" />
      <div>
        <h3 class="font-bold">{gettext("Storage System Architecture")}</h3>
        <p class="text-sm">
          {gettext(
            "The storage system is designed for distributed file management with automatic redundancy."
          )}
          {gettext(
            "Files are tracked in PostgreSQL with support for multiple storage locations (local, S3, remote servers)."
          )}
          {gettext(
            "When a file is requested, the system automatically tries each location until it successfully retrieves the file."
          )}
        </p>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>

<%!-- Add CSS for drag and drop --%>
<style>
  #upload-dropzone.dragover {
    @apply border-primary bg-primary/5;
  }
</style>

<script>
  // Simple drag and drop styling
  document.addEventListener('DOMContentLoaded', function() {
    const dropzone = document.getElementById('upload-dropzone');
    const fileInput = document.getElementById('file-upload');

    if (dropzone && fileInput) {
      dropzone.addEventListener('dragover', function(e) {
        e.preventDefault();
        dropzone.classList.add('dragover');
      });

      dropzone.addEventListener('dragleave', function(e) {
        e.preventDefault();
        dropzone.classList.remove('dragover');
      });

      dropzone.addEventListener('drop', function(e) {
        e.preventDefault();
        dropzone.classList.remove('dragover');
      });
    }
  });
</script>
