<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={@page_title}
  current_path={@current_path}
  project_title={@project_title}
  current_locale={@current_locale}
>
  <div class="container flex flex-col mx-auto px-4 py-6">
    <%!-- Header Section --%>
    <.admin_page_header
      back={PhoenixKit.Utils.Routes.path("/admin")}
      title={gettext("Publishing Settings")}
      subtitle={
        gettext(
          "Create dedicated publishing groups your team can publish to. Each group appears as its own tab in the publishing workspace."
        )
      }
    />

    <div class="max-w-2xl mx-auto space-y-6">
      <%!-- Language Configuration Information --%>
      <div class="border-l-4 border-primary bg-base-200 p-4 rounded-r-lg">
        <div class="flex gap-3">
          <.icon name="hero-information-circle" class="w-5 h-5 shrink-0 text-primary" />
          <div class="text-sm">
            <p class="font-semibold mb-1">{gettext("Primary Language")}</p>
            <p>
              {gettext("The")}
              <.link
                navigate={PhoenixKit.Utils.Routes.path("/admin/settings")}
                class="link link-primary font-medium underline"
              >
                {gettext("Content Language")}
              </.link>
              {gettext(
                "setting determines the primary language for all content. This is the base language used for versioning—translations in other languages follow the primary's version history."
              )}
              <%= if @languages_enabled do %>
                {gettext("Additional languages are configured in the")}
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/settings/languages")}
                  class="link link-primary font-medium underline"
                >
                  {gettext("Languages Module")}
                </.link>.
              <% else %>
                {gettext("To enable multi-language support, activate the")}
                <.link
                  navigate={PhoenixKit.Utils.Routes.path("/admin/modules")}
                  class="link link-primary font-medium underline"
                >
                  {gettext("Languages Module")}
                </.link>.
              <% end %>
            </p>
          </div>
        </div>
      </div>

      <%!-- Publishing Groups Section --%>
      <div class="card bg-base-100 shadow-xl border border-base-200">
        <div class="card-body space-y-6">
          <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
              <h2 class="text-2xl font-semibold text-base-content">
                {gettext("Publishing Groups")}
              </h2>
              <p class="text-sm text-base-content/70">
                {gettext(
                  "Create dedicated publishing groups like Product Updates, Release Notes, or Company News. Each group stores its content in the database."
                )}
              </p>
            </div>
            <%= if @publishing == [] do %>
              <.link
                href={Routes.path("/admin/settings/publishing/new")}
                class="btn btn-primary btn-sm whitespace-nowrap"
              >
                <.icon name="hero-plus" class="w-4 h-4 mr-1" /> {gettext(
                  "Create Publishing Group"
                )}
              </.link>
            <% end %>
          </div>

          <%= if @publishing == [] do %>
            <div class="alert alert-info">
              <.icon name="hero-information-circle" class="w-5 h-5" />
              <div>
                <h3 class="font-bold">{gettext("No publishing groups yet")}</h3>
                <p class="text-sm">
                  {gettext("Create your first publishing group to start publishing content.")}
                </p>
              </div>
            </div>
          <% else %>
            <div class="space-y-4">
              <%= for group <- @publishing do %>
                <div class="border border-base-200 rounded-lg p-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                  <div class="space-y-1">
                    <p class="flex items-center gap-2 text-base font-semibold text-base-content">
                      <.link
                        navigate={Routes.path("/admin/publishing/#{group["slug"]}")}
                        class="hover:text-primary transition-colors"
                      >
                        {group["name"]}
                      </.link>
                      <span class="badge badge-ghost badge-lg text-xs px-4 py-3 whitespace-nowrap">
                        <%= if group["mode"] == "slug" do %>
                          {gettext("Slug-based")}
                        <% else %>
                          {gettext("Timestamp-based")}
                        <% end %>
                      </span>
                    </p>
                    <p class="text-xs text-base-content/60">
                      {gettext("Slug")}: <code class="font-mono break-all">{group["slug"]}</code>
                    </p>
                  </div>
                  <div class="flex items-center gap-2">
                    <%= if group["needs_primary_lang_migration"] do %>
                      <% status = group["primary_language_status"] %>
                      <button
                        type="button"
                        aria-label={gettext("Update Primary Language")}
                        phx-click="migrate_primary_language"
                        phx-value-slug={group["slug"]}
                        class="btn btn-warning btn-sm"
                        title={
                          gettext(
                            "Update posts to use current primary language: %{lang}",
                            lang: @global_primary_language
                          )
                        }
                        data-confirm={
                          gettext(
                            "Update all posts in this group to use '%{lang}' as their primary language? This ensures posts work correctly with the current language setting. %{count} post(s) will be updated.",
                            lang: @global_primary_language,
                            count: status.needs_backfill + status.needs_migration
                          )
                        }
                      >
                        <.icon name="hero-language" class="w-4 h-4 mr-1" />
                        {gettext("Update Language")}
                        <span class="badge badge-sm ml-1">
                          {status.needs_backfill + status.needs_migration}
                        </span>
                      </button>
                    <% end %>
                    <.link
                      aria-label={gettext("Open Admin")}
                      navigate={Routes.path("/admin/publishing/#{group["slug"]}")}
                      class="btn btn-outline btn-sm btn-square"
                    >
                      <.icon name="hero-arrow-right" class="w-4 h-4" />
                    </.link>
                    <.link
                      aria-label={gettext("Edit")}
                      navigate={Routes.path("/admin/settings/publishing/#{group["slug"]}/edit")}
                      class="btn btn-outline btn-sm btn-square"
                    >
                      <.icon name="hero-pencil-square" class="w-4 h-4" />
                    </.link>
                    <button
                      type="button"
                      aria-label={gettext("Delete")}
                      phx-click="remove_group"
                      phx-value-slug={group["slug"]}
                      class="btn btn-sm btn-square btn-outline text-error hover:bg-error hover:text-error-content"
                      data-confirm={
                        gettext("Move this group to trash? It will be renamed with a timestamp.")
                      }
                    >
                      <.icon name="hero-trash" class="w-4 h-4" />
                    </button>
                  </div>
                </div>
              <% end %>
            </div>
          <% end %>
        </div>
      </div>

      <%!-- Cache Management Section --%>
      <div class="card bg-base-100 shadow-xl border border-base-200">
        <div class="card-body space-y-6">
          <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
              <h2 class="text-2xl font-semibold text-base-content">
                <.icon name="hero-bolt" class="w-6 h-6 inline-block mr-2" />
                {gettext("Listing Cache")}
              </h2>
              <p class="text-sm text-base-content/70">
                {gettext(
                  "Cached listing data speeds up listing pages. Cache is automatically updated when posts change."
                )}
              </p>
            </div>
            <% any_listing_cache = @memory_cache_enabled %>
            <%= if @cache_groups != [] and any_listing_cache do %>
              <button
                type="button"
                phx-click="regenerate_all_caches"
                class="btn btn-primary btn-sm whitespace-nowrap"
              >
                <.icon name="hero-arrow-path" class="w-4 h-4 mr-1" />
                {gettext("Regenerate All")}
              </button>
            <% end %>
          </div>

          <%!-- Cache Settings Toggles --%>
          <div class="grid grid-cols-1 gap-4">
            <%!-- Memory Cache Toggle --%>
            <div class="flex items-center justify-between p-4 bg-base-200 rounded-lg">
              <div class="flex items-center gap-3">
                <.icon name="hero-cpu-chip" class="w-5 h-5 text-base-content/70" />
                <div>
                  <p class="font-medium">{gettext("Memory Cache")}</p>
                  <p class="text-xs text-base-content/60">
                    {gettext("Store in :persistent_term for sub-microsecond reads")}
                  </p>
                </div>
              </div>
              <input
                type="checkbox"
                class="toggle toggle-primary"
                checked={@memory_cache_enabled}
                phx-click="toggle_memory_cache"
              />
            </div>
          </div>

          <%= if not @memory_cache_enabled do %>
            <div class="alert alert-warning">
              <.icon name="hero-exclamation-triangle" class="w-5 h-5" />
              <span>
                {gettext(
                  "Memory cache is disabled. Listing pages will query the database on every request."
                )}
              </span>
            </div>
          <% end %>

          <%= if @cache_groups == [] do %>
            <div class="alert">
              <.icon name="hero-information-circle" class="w-5 h-5" />
              <span>{gettext("Create a publishing group to manage its cache.")}</span>
            </div>
          <% else %>
            <% any_cache_enabled = @memory_cache_enabled %>
            <%= if any_cache_enabled do %>
              <div class="overflow-x-auto">
                <table class="table table-zebra">
                  <thead>
                    <tr>
                      <th>{gettext("Group")}</th>
                      <th class="text-center">{gettext("Posts")}</th>
                      <%= if @memory_cache_enabled do %>
                        <th class="text-center">
                          <span class="flex items-center justify-center gap-1">
                            <.icon name="hero-cpu-chip" class="w-4 h-4" />
                            {gettext("Memory")}
                          </span>
                        </th>
                      <% end %>
                      <th class="text-right">{gettext("Actions")}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <%= for group <- @cache_groups do %>
                      <% cache = @cache_status[group["slug"]] %>
                      <tr>
                        <td class="font-medium">{group["name"]}</td>
                        <td class="text-center">
                          <%= if cache.post_count do %>
                            <span class="font-mono text-sm">{cache.post_count}</span>
                          <% else %>
                            <span class="text-base-content/50">—</span>
                          <% end %>
                        </td>
                        <%= if @memory_cache_enabled do %>
                          <td class="text-center">
                            <%= if cache.in_memory do %>
                              <.icon name="hero-check-circle" class="w-5 h-5 text-success" />
                            <% else %>
                              <.icon name="hero-x-circle" class="w-5 h-5 text-base-content/30" />
                            <% end %>
                          </td>
                        <% end %>
                        <td class="text-right">
                          <div class="flex justify-end gap-2">
                            <%= if cache.exists or cache.in_memory do %>
                              <button
                                type="button"
                                phx-click="invalidate_cache"
                                phx-value-slug={group["slug"]}
                                class="btn btn-outline btn-xs text-error tooltip tooltip-bottom"
                                data-tip={gettext("Clear cache")}
                              >
                                <.icon name="hero-trash" class="w-4 h-4 hidden sm:inline" />
                                <span class="sm:hidden whitespace-nowrap">
                                  {gettext("Clear cache")}
                                </span>
                              </button>
                            <% end %>
                            <button
                              type="button"
                              phx-click="regenerate_cache"
                              phx-value-slug={group["slug"]}
                              class="btn btn-outline btn-xs tooltip tooltip-bottom"
                              data-tip={gettext("Regenerate cache")}
                            >
                              <.icon name="hero-arrow-path" class="w-4 h-4 hidden sm:inline" />
                              <span class="sm:hidden whitespace-nowrap">
                                {gettext("Regenerate cache")}
                              </span>
                            </button>
                          </div>
                        </td>
                      </tr>
                    <% end %>
                  </tbody>
                </table>
              </div>

              <div class="text-xs text-base-content/50 space-y-1">
                <p>
                  <.icon name="hero-information-circle" class="w-3 h-3 inline" />
                  {gettext(
                    "\"In Memory\" means the cache is loaded into :persistent_term for sub-microsecond reads."
                  )}
                </p>
                <p>
                  <.icon name="hero-arrow-path" class="w-3 h-3 inline" />
                  {gettext("Regenerate scans all posts and rebuilds the cache.")}
                </p>
              </div>
            <% end %>
          <% end %>
        </div>
      </div>

      <%!-- Render Cache Section --%>
      <div class="card bg-base-100 shadow-xl border border-base-200">
        <div class="card-body space-y-4">
          <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
              <h2 class="text-2xl font-semibold text-base-content">
                <.icon name="hero-document-text" class="w-6 h-6 inline-block mr-2" />
                {gettext("Render Cache")}
              </h2>
              <p class="text-sm text-base-content/70">
                {gettext(
                  "Cached rendered HTML for published posts. Uses content-hash keys so edits auto-invalidate."
                )}
              </p>
            </div>
            <%= if @render_cache_enabled do %>
              <button
                type="button"
                phx-click="clear_render_cache"
                class="btn btn-outline btn-error btn-sm whitespace-nowrap"
                data-confirm={
                  gettext(
                    "Clear all cached rendered posts? They will be re-rendered on next view."
                  )
                }
              >
                <.icon name="hero-trash" class="w-4 h-4 mr-1" />
                {gettext("Clear All")}
              </button>
            <% end %>
          </div>

          <%!-- Global Render Cache Toggle --%>
          <div class="flex items-center justify-between p-4 bg-base-200 rounded-lg">
            <div class="flex items-center gap-3">
              <.icon name="hero-bolt" class="w-5 h-5 text-base-content/70" />
              <div>
                <p class="font-medium">{gettext("Render Cache")}</p>
                <p class="text-xs text-base-content/60">
                  {gettext("Cache rendered HTML for published posts (6-hour TTL)")}
                </p>
              </div>
            </div>
            <input
              type="checkbox"
              class="toggle toggle-primary"
              checked={@render_cache_enabled}
              phx-click="toggle_render_cache"
            />
          </div>

          <%= if not @render_cache_enabled do %>
            <div class="alert alert-warning">
              <.icon name="hero-exclamation-triangle" class="w-5 h-5" />
              <span>
                {gettext("Render cache is disabled. Posts will be rendered on every request.")}
              </span>
            </div>
          <% else %>
            <%!-- Stats Display --%>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div class="stat bg-base-200 rounded-lg p-4">
                <div class="stat-title text-xs">{gettext("Cache Hits")}</div>
                <div class="stat-value text-lg font-mono">{@render_cache_stats[:hits] || 0}</div>
              </div>
              <div class="stat bg-base-200 rounded-lg p-4">
                <div class="stat-title text-xs">{gettext("Cache Misses")}</div>
                <div class="stat-value text-lg font-mono">
                  {@render_cache_stats[:misses] || 0}
                </div>
              </div>
              <div class="stat bg-base-200 rounded-lg p-4">
                <div class="stat-title text-xs">{gettext("Entries Cached")}</div>
                <div class="stat-value text-lg font-mono">{@render_cache_stats[:puts] || 0}</div>
              </div>
              <div class="stat bg-base-200 rounded-lg p-4">
                <div class="stat-title text-xs">{gettext("Hit Rate")}</div>
                <div class="stat-value text-lg font-mono">
                  <%= if @render_cache_stats[:hit_rate] do %>
                    {Float.round(@render_cache_stats[:hit_rate] * 100, 1)}%
                  <% else %>
                    0%
                  <% end %>
                </div>
              </div>
            </div>

            <%!-- Per-Group Render Cache Table --%>
            <%= if @cache_groups != [] do %>
              <div class="overflow-x-auto">
                <table class="table table-zebra">
                  <thead>
                    <tr>
                      <th>{gettext("Group")}</th>
                      <th class="text-center">{gettext("Enabled")}</th>
                      <th class="text-right">{gettext("Actions")}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <%= for group <- @cache_groups do %>
                      <% slug = group["slug"] %>
                      <% enabled = @render_cache_per_group[slug] %>
                      <tr>
                        <td class="font-medium">{group["name"]}</td>
                        <td class="text-center">
                          <input
                            type="checkbox"
                            class="toggle toggle-primary toggle-sm"
                            checked={enabled}
                            phx-click="toggle_group_render_cache"
                            phx-value-slug={slug}
                          />
                        </td>
                        <td class="text-right">
                          <%= if enabled do %>
                            <button
                              type="button"
                              phx-click="clear_group_render_cache"
                              phx-value-slug={slug}
                              class="btn btn-outline btn-xs text-error tooltip tooltip-bottom"
                              data-tip={gettext("Clear cache for this group")}
                            >
                              <.icon name="hero-trash" class="w-4 h-4 hidden sm:inline" />
                              <span class="sm:hidden whitespace-nowrap">
                                {gettext("Clear cache for this group")}
                              </span>
                            </button>
                          <% end %>
                        </td>
                      </tr>
                    <% end %>
                  </tbody>
                </table>
              </div>
            <% end %>
          <% end %>

          <div class="text-xs text-base-content/50">
            <p>
              <.icon name="hero-information-circle" class="w-3 h-3 inline" />
              {gettext(
                "Render cache stores pre-rendered HTML for published posts. Cache keys include content hashes, so edits automatically use fresh renders. TTL: 6 hours."
              )}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
