<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-col mx-auto px-4 py-6">
    <%!-- Header Section --%>
    <header class="w-full relative mb-6">
      <%!-- Back Button (Left aligned) --%>
      <.link
        navigate={Routes.path("/admin/publishing")}
        class="btn btn-outline btn-primary btn-sm absolute left-0 top-0 -mb-12"
      >
        <.icon name="hero-arrow-left" class="w-4 h-4 mr-2" /> Back to Publishing
      </.link>

      <%!-- Title Section --%>
      <div class="text-center">
        <h1 class="text-4xl font-bold text-base-content mb-3">
          {(@current_blog && @current_blog["name"]) || @blog_slug || gettext("Blog")}
        </h1>
        <% blog_slug = (@current_blog && @current_blog["slug"]) || @blog_slug || "your-blog" %>
        <% url_prefix =
          PhoenixKit.Config.get_url_prefix()
          |> case do
            "/" -> ""
            prefix -> prefix
          end %>
        <% files_hint = @group_files_root <> blog_slug <> "/…" %>
        <%!-- Use primary language for public URL preview --%>
        <% public_url =
          if length(@enabled_languages) == 1 do
            @endpoint_url <> url_prefix <> "/" <> blog_slug
          else
            @endpoint_url <> url_prefix <> "/#{@primary_language}/" <> blog_slug
          end %>
        <div class="text-sm text-base-content/60 space-y-1">
          <p>
            <span class="font-medium text-base-content">{gettext("Files")}: </span>
            <code class="font-mono break-all">{files_hint}</code>
          </p>
          <p>
            <span class="font-medium text-base-content">{gettext("Public URL")}: </span>
            <a
              href={public_url}
              target="_blank"
              class="link link-hover font-mono break-all text-xs"
            >
              {public_url}
            </a>
          </p>
        </div>
      </div>
    </header>

    <%!-- Cache Status Section (Collapsible) --%>
    <%= if @cache_info do %>
      <div class="collapse collapse-arrow bg-base-100 shadow-sm border border-base-200 mb-6">
        <input type="checkbox" class="peer" />
        <%!-- Collapse Title - Always visible --%>
        <div class="collapse-title p-4 min-h-0 flex items-center">
          <div class="flex items-center justify-between w-full">
            <div class="flex items-center gap-2">
              <.icon name="hero-archive-box" class="w-5 h-5" />
              <span class="font-semibold">{gettext("Caching")}</span>
            </div>
            <%= if @cache_info.file_enabled || @cache_info.memory_enabled do %>
              <span class="badge badge-success badge-sm gap-1 mr-6">
                <.icon name="hero-check" class="w-3 h-3" />
                {gettext("ON")}
              </span>
            <% else %>
              <span class="badge badge-ghost badge-sm mr-6">
                {gettext("OFF")}
              </span>
            <% end %>
          </div>
        </div>

        <%!-- Collapse Content - Expandable details --%>
        <div class="collapse-content !p-0">
          <div class="px-4 pb-4">
            <%!-- Only check staleness when file cache is enabled - if file is off, memory is authoritative --%>
            <% memory_is_stale =
              @cache_info.memory_enabled && @cache_info.in_memory &&
                @cache_info.file_enabled &&
                @cache_info.memory_file_generated_at &&
                @cache_info.generated_at &&
                @cache_info.memory_file_generated_at != @cache_info.generated_at %>

            <div class="space-y-3">
              <%!-- File Cache Row --%>
              <div>
                <div class="flex items-center justify-between p-2 bg-base-200 rounded-lg">
                  <div class="flex items-center gap-2">
                    <.icon name="hero-document" class="w-4 h-4 text-base-content/70" />
                    <span class="text-sm font-medium">{gettext("File")}</span>
                    <%= if @cache_info.file_enabled do %>
                      <%= if @cache_info.exists do %>
                        <span class="badge badge-success badge-xs">{gettext("cached")}</span>
                        <%= if @cache_info.generated_at do %>
                          <span class="text-xs text-base-content/50">
                            {format_cache_time(@cache_info.generated_at)}
                          </span>
                        <% end %>
                      <% else %>
                        <span class="badge badge-ghost badge-xs">{gettext("empty")}</span>
                      <% end %>
                    <% else %>
                      <span class="badge badge-ghost badge-xs">{gettext("off")}</span>
                    <% end %>
                  </div>
                  <div class="flex items-center gap-1">
                    <%= if @cache_info.file_enabled do %>
                      <%= if @cache_info.exists do %>
                        <button
                          type="button"
                          phx-click="invalidate_file_cache"
                          class="btn btn-ghost btn-xs text-error"
                          title={gettext("Clear file cache")}
                        >
                          <.icon name="hero-trash" class="w-3 h-3" />
                        </button>
                      <% end %>
                      <button
                        type="button"
                        phx-click="regenerate_file_cache"
                        class="btn btn-ghost btn-xs"
                        title={gettext("Regenerate file cache")}
                      >
                        <.icon name="hero-arrow-path" class="w-3 h-3" />
                      </button>
                    <% end %>
                    <input
                      type="checkbox"
                      class="toggle toggle-primary toggle-xs"
                      checked={@cache_info.file_enabled}
                      phx-click="toggle_file_cache"
                    />
                  </div>
                </div>
                <p class="text-xs text-base-content/50 mt-1 ml-1">
                  <%= if @cache_info.file_enabled do %>
                    {gettext("Persists listing metadata to disk for fast startup.")}
                  <% else %>
                    {gettext("Disabled. Listing will scan filesystem on startup.")}
                  <% end %>
                </p>
              </div>

              <%!-- Memory Cache Row --%>
              <div>
                <div class={[
                  "flex items-center justify-between p-2 rounded-lg",
                  if(memory_is_stale, do: "bg-error/10", else: "bg-base-200")
                ]}>
                  <div class="flex items-center gap-2">
                    <.icon name="hero-cpu-chip" class="w-4 h-4 text-base-content/70" />
                    <span class="text-sm font-medium">{gettext("Memory")}</span>
                    <%= if @cache_info.memory_enabled do %>
                      <%= if @cache_info.in_memory do %>
                        <%= if memory_is_stale do %>
                          <span class="badge badge-warning badge-xs">{gettext("stale")}</span>
                        <% else %>
                          <span class="badge badge-success badge-xs">{gettext("loaded")}</span>
                        <% end %>
                        <%= if @cache_info.memory_file_generated_at do %>
                          <span class="text-xs text-base-content/50">
                            <%= if @cache_info.file_enabled do %>
                              {gettext("from file %{time}",
                                time: format_cache_time(@cache_info.memory_file_generated_at)
                              )}
                            <% else %>
                              {gettext("scanned %{time}",
                                time: format_cache_time(@cache_info.memory_file_generated_at)
                              )}
                            <% end %>
                          </span>
                        <% end %>
                      <% else %>
                        <span class="badge badge-ghost badge-xs">{gettext("empty")}</span>
                      <% end %>
                    <% else %>
                      <span class="badge badge-ghost badge-xs">{gettext("off")}</span>
                    <% end %>
                  </div>
                  <div class="flex items-center gap-1">
                    <%= if @cache_info.memory_enabled do %>
                      <%= if @cache_info.in_memory do %>
                        <button
                          type="button"
                          phx-click="invalidate_memory_cache"
                          class="btn btn-ghost btn-xs text-error"
                          title={gettext("Clear memory cache")}
                        >
                          <.icon name="hero-trash" class="w-3 h-3" />
                        </button>
                      <% end %>
                      <button
                        type="button"
                        phx-click="load_memory_cache"
                        class="btn btn-ghost btn-xs"
                        title={gettext("Load into memory")}
                      >
                        <.icon name="hero-arrow-path" class="w-3 h-3" />
                      </button>
                    <% end %>
                    <input
                      type="checkbox"
                      class="toggle toggle-primary toggle-xs"
                      checked={@cache_info.memory_enabled}
                      phx-click="toggle_memory_cache"
                    />
                  </div>
                </div>
                <p class="text-xs text-base-content/50 mt-1 ml-1">
                  <%= cond do %>
                    <% memory_is_stale -> %>
                      <span class="text-amber-700 dark:text-amber-400">
                        {gettext("Stale data loaded. Reload or clear to serve fresh content.")}
                      </span>
                    <% @cache_info.memory_enabled && @cache_info.in_memory -> %>
                      <span class="text-success">
                        {gettext("Listing requests served in sub-milliseconds.")}
                      </span>
                    <% @cache_info.memory_enabled && !@cache_info.in_memory && !@cache_info.file_enabled -> %>
                      {gettext("Not loaded. Click reload to manually scan posts into memory.")}
                    <% @cache_info.memory_enabled && !@cache_info.in_memory -> %>
                      {gettext("Not loaded yet. Will load from file on first request.")}
                    <% true -> %>
                      {gettext("Disabled. Listing reads from file on each request.")}
                  <% end %>
                </p>
              </div>

              <%!-- Post Render Cache Row --%>
              <div>
                <div class="flex items-center justify-between p-2 bg-base-200 rounded-lg">
                  <div class="flex items-center gap-2">
                    <.icon name="hero-document-text" class="w-4 h-4 text-base-content/70" />
                    <span class="text-sm font-medium">{gettext("Posts")}</span>
                    <%= if @cache_info.render_enabled && @cache_info.render_global_enabled do %>
                      <span class="badge badge-success badge-xs">{gettext("on")}</span>
                    <% else %>
                      <%= if !@cache_info.render_global_enabled do %>
                        <span class="badge badge-ghost badge-xs">{gettext("global off")}</span>
                      <% else %>
                        <span class="badge badge-ghost badge-xs">{gettext("off")}</span>
                      <% end %>
                    <% end %>
                  </div>
                  <div class="flex items-center gap-1">
                    <%= if @cache_info.render_enabled && @cache_info.render_global_enabled do %>
                      <button
                        type="button"
                        phx-click="clear_render_cache"
                        class="btn btn-ghost btn-xs text-error"
                        title={gettext("Clear cached post HTML for this group")}
                      >
                        <.icon name="hero-trash" class="w-3 h-3" />
                      </button>
                    <% end %>
                    <input
                      type="checkbox"
                      class="toggle toggle-primary toggle-xs"
                      checked={@cache_info.render_enabled}
                      phx-click="toggle_render_cache"
                      disabled={!@cache_info.render_global_enabled}
                      title={
                        if !@cache_info.render_global_enabled,
                          do: gettext("Enable global render cache first in Publishing Settings"),
                          else: nil
                      }
                    />
                  </div>
                </div>
                <p class="text-xs text-base-content/50 mt-1 ml-1">
                  <%= if @cache_info.render_enabled && @cache_info.render_global_enabled do %>
                    {gettext(
                      "Rendered HTML cached in ETS. Auto-invalidates when content changes."
                    )}
                  <% else %>
                    {gettext("Disabled. Markdown rendered fresh on each view.")}
                  <% end %>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    <% end %>

    <%!-- Version Structure Migration Progress Banner --%>
    <%= if @version_migration_in_progress do %>
      <div class="flex items-center gap-3 px-4 py-3 rounded-lg bg-gradient-to-r from-info/10 to-sky-500/10 border border-info/30 mb-6">
        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br from-info to-sky-500 text-white shadow-sm">
          <span class="loading loading-spinner loading-sm"></span>
        </div>
        <div class="flex-1">
          <span class="text-sm font-medium text-info">
            {gettext("Migrating to versioned structure...")}
          </span>
          <%= if @version_migration_progress do %>
            <div class="flex items-center gap-2 mt-1">
              <progress
                class="progress progress-info w-48"
                value={@version_migration_progress.current}
                max={@version_migration_progress.total}
              >
              </progress>
              <span class="text-xs text-base-content/60">
                {@version_migration_progress.current} / {@version_migration_progress.total}
              </span>
            </div>
          <% end %>
        </div>
      </div>
    <% end %>

    <%!-- Version Structure Migration Banner --%>
    <%= if not @version_migration_in_progress and @legacy_structure_status && @legacy_structure_status.legacy > 0 do %>
      <div class="flex items-center gap-3 px-4 py-3 rounded-lg bg-gradient-to-r from-info/10 to-sky-500/10 border border-info/30 mb-6">
        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br from-info to-sky-500 text-white shadow-sm">
          <.icon name="hero-arrow-up-circle" class="w-5 h-5" />
        </div>
        <div class="flex-1">
          <span class="text-sm font-medium text-info">
            {ngettext(
              "%{count} post needs version migration",
              "%{count} posts need version migration",
              @legacy_structure_status.legacy,
              count: @legacy_structure_status.legacy
            )}
          </span>
          <p class="text-xs text-base-content/60">
            {gettext(
              "Migrate to versioned structure to enable version history and safe editing of published content."
            )}
          </p>
        </div>
        <button
          type="button"
          class="btn btn-info btn-sm"
          phx-click="show_version_migration_modal"
        >
          <.icon name="hero-arrow-up-circle" class="w-4 h-4" />
          {gettext("Migrate All")}
        </button>
      </div>
    <% end %>

    <%!-- Primary Language Migration Progress Banner --%>
    <%= if @migration_in_progress do %>
      <div class="flex items-center gap-3 px-4 py-3 rounded-lg bg-gradient-to-r from-info/10 to-primary/10 border border-info/30 mb-6">
        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br from-info to-primary text-white shadow-sm">
          <span class="loading loading-spinner loading-sm"></span>
        </div>
        <div class="flex-1">
          <span class="text-sm font-medium text-info">
            {gettext("Migration in progress...")}
          </span>
          <%= if @migration_progress do %>
            <div class="flex items-center gap-2 mt-1">
              <progress
                class="progress progress-info w-48"
                value={@migration_progress.current}
                max={@migration_progress.total}
              >
              </progress>
              <span class="text-xs text-base-content/60">
                {@migration_progress.current} / {@migration_progress.total}
              </span>
            </div>
          <% end %>
        </div>
      </div>
    <% end %>

    <%!-- Primary Language Migration Banner --%>
    <%= if not @migration_in_progress and @primary_language_status && (@primary_language_status.needs_backfill > 0 or @primary_language_status.needs_migration > 0) do %>
      <% total_needing =
        @primary_language_status.needs_backfill + @primary_language_status.needs_migration %>
      <div class="flex items-center gap-3 px-4 py-3 rounded-lg bg-gradient-to-r from-warning/10 to-amber-500/10 border border-warning/30 mb-6">
        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br from-warning to-amber-500 text-white shadow-sm">
          <.icon name="hero-exclamation-triangle" class="w-5 h-5" />
        </div>
        <div class="flex-1">
          <span class="text-sm font-medium text-warning">
            {ngettext(
              "1 post needs primary language update",
              "%{count} posts need primary language update",
              total_needing,
              count: total_needing
            )}
          </span>
          <p class="text-xs text-base-content/60">
            {gettext(
              "Save the current language setting (%{lang}) to these posts to ensure they remain accessible if the global setting changes.",
              lang: @primary_language_name
            )}
          </p>
        </div>
        <button
          type="button"
          class="btn btn-warning btn-sm"
          phx-click="show_migration_modal"
        >
          <.icon name="hero-arrow-down-tray" class="w-4 h-4" />
          {gettext("Update All")}
        </button>
      </div>
    <% end %>

    <div class="space-y-6">
      <div class="flex-1">
        <div class="flex flex-col md:flex-row gap-3 md:items-center md:justify-between mb-4">
          <span class="text-sm text-base-content/70">
            {gettext("Showing %{count} posts", count: length(@posts))}
          </span>
          <div class="flex gap-2">
            <button type="button" class="btn btn-outline btn-sm shadow-none" phx-click="refresh">
              <.icon name="hero-arrow-path" class="w-4 h-4 mr-1" /> {gettext("Refresh")}
            </button>
            <button type="button" class="btn btn-primary btn-sm" phx-click="create_post">
              <.icon name="hero-plus" class="w-4 h-4 mr-1" /> {gettext("Create Post")}
            </button>
          </div>
        </div>

        <%= if @loading do %>
          <div class="flex justify-center items-center py-12">
            <span class="loading loading-spinner loading-lg text-primary"></span>
          </div>
        <% else %>
          <%= if @posts == [] do %>
            <div class="card bg-base-100 shadow-sm border border-base-200">
              <div class="card-body">
                <h3 class="text-lg font-semibold text-base-content">{gettext("No posts yet")}</h3>
                <p class="text-sm text-base-content/70">
                  {gettext("Create your first post to start sharing content.")}
                </p>
              </div>
            </div>
          <% else %>
            <div class="grid gap-4">
              <%= for post <- @posts do %>
                <% blog_slug =
                  post.group || (@current_blog && @current_blog["slug"]) || @blog_slug ||
                    "blog" %>
                <%!-- Use post's stored primary language, falling back to global only if not stored --%>
                <% post_primary_lang = post[:primary_language] || @primary_language %>
                <% default_lang_path =
                  Path.join([
                    Path.dirname(post.path),
                    "#{post_primary_lang}.phk"
                  ]) %>
                <% files_path = @group_files_root <> post.path %>
                <%!-- Use post's primary language for the public URL --%>
                <% public_url =
                  PublishingHTML.build_post_url(blog_slug, post, post_primary_lang) %>
                <% full_public_url = @endpoint_url <> public_url %>
                <%!-- Version info (only for slug-mode posts) --%>
                <% version_count = length(Map.get(post, :available_versions) || []) %>
                <% is_versioned =
                  post.mode == :slug and not Map.get(post, :is_legacy_structure, true) %>
                <div class="card bg-base-100 shadow-sm border border-base-200 overflow-hidden">
                  <div class="card-body p-4 md:p-5 min-w-0">
                    <%!-- Post info section --%>
                    <div class="flex-1 min-w-0">
                      <div class="flex items-center gap-2 text-xs uppercase tracking-wide text-base-content/60">
                        <span>
                          {format_datetime(post, @phoenix_kit_current_user, @date_time_settings)}
                        </span>
                        <%!-- Version info (show published version and count) --%>
                        <%= if is_versioned do %>
                          <% {display_version, display_status, _label} = get_display_version(post) %>
                          <span class={[
                            "badge badge-xs gap-1",
                            display_status == "published" && "badge-success",
                            display_status != "published" && "badge-ghost"
                          ]}>
                            <%= if version_count > 1 do %>
                              {ngettext("%{count} version", "%{count} versions", version_count,
                                count: version_count
                              )}
                              <span class="opacity-50">|</span>
                            <% end %>
                            {gettext("showing")} v{display_version}
                          </span>
                        <% end %>
                      </div>
                      <h3 class="text-xl font-semibold text-base-content mt-1 truncate">
                        <a
                          href={
                            PhoenixKit.Utils.Routes.path(
                              "/admin/publishing/#{blog_slug}/edit?path=#{URI.encode(default_lang_path)}"
                            )
                          }
                          class="hover:text-primary transition-colors"
                        >
                          {post.metadata.title || gettext("Untitled post")}
                        </a>
                      </h3>
                      <p class="text-xs text-base-content/50 mt-1">
                        <span class="font-medium text-base-content">{gettext("Files")}: </span>
                        <code class="font-mono break-all">{files_path}</code>
                      </p>
                      <p class="text-xs text-base-content/50">
                        <span class="font-medium text-base-content">
                          {gettext("Public URL")}:
                        </span>
                        <a
                          href={full_public_url}
                          target="_blank"
                          class="link link-hover font-mono break-all text-xs"
                        >
                          {full_public_url}
                        </a>
                      </p>
                    </div>
                    <%!-- Languages section --%>
                    <div class="border-t border-base-200 pt-3 mt-3 space-y-2">
                      <%!-- Build all languages and separate primary from others --%>
                      <% all_languages =
                        build_post_languages(
                          post,
                          @blog_slug,
                          @enabled_languages,
                          @current_locale
                        ) %>
                      <% primary_lang = Enum.find(all_languages, & &1.is_primary) %>
                      <% other_languages = Enum.reject(all_languages, & &1.is_primary) %>

                      <%!-- Primary language (clickable, prominent) --%>
                      <%= if primary_lang do %>
                        <button
                          type="button"
                          phx-click="language_action"
                          phx-value-language={primary_lang.code}
                          phx-value-path={primary_lang.path}
                          phx-value-post_path={primary_lang.post_path}
                          phx-value-status={primary_lang.status}
                          class="inline-flex items-center gap-2 px-2.5 py-1.5 rounded-lg bg-primary/10 hover:bg-primary/20 border border-primary/20 cursor-pointer transition-colors"
                          title={primary_lang.name}
                        >
                          <span class="text-xs text-primary/70 font-medium">
                            {gettext("Primary")}
                          </span>
                          <span class={[
                            "rounded-full inline-block w-2.5 h-2.5",
                            cond do
                              not primary_lang.exists -> "bg-base-content/20"
                              primary_lang.status == "published" -> "bg-success"
                              primary_lang.status == "draft" -> "bg-warning"
                              primary_lang.status == "archived" -> "bg-base-content/40"
                              true -> "bg-base-content/20"
                            end
                          ]}>
                          </span>
                          <span class={[
                            "text-sm font-bold uppercase",
                            cond do
                              not primary_lang.exists -> "text-base-content/20"
                              primary_lang.status == "published" -> "text-success"
                              primary_lang.status == "draft" -> "text-warning"
                              primary_lang.status == "archived" -> "text-base-content/40"
                              true -> "text-base-content/20"
                            end
                          ]}>
                            {String.upcase(primary_lang.display_code)}
                          </span>
                        </button>
                      <% end %>

                      <%!-- Other translations (excluding primary) --%>
                      <.publishing_language_switcher
                        languages={other_languages}
                        show_status={true}
                        show_add={true}
                        on_click="language_action"
                        size={:sm}
                      />
                    </div>
                    <%!-- Translation Progress Bar --%>
                    <%= if translation_status = Map.get(@translating_posts, post.slug) do %>
                      <div class="border-t border-base-200 pt-3 mt-3">
                        <%= if translation_status.status == :in_progress do %>
                          <div class="flex items-center justify-between text-xs mb-1">
                            <span class="text-base-content/70 flex items-center gap-1">
                              <span class="loading loading-spinner loading-xs"></span>
                              {gettext("Translating...")}
                            </span>
                            <span class="font-medium">
                              {translation_status.completed} / {translation_status.total}
                            </span>
                          </div>
                          <progress
                            class="progress progress-primary w-full h-2"
                            value={translation_status.completed}
                            max={translation_status.total}
                          >
                          </progress>
                        <% else %>
                          <div class="flex items-center gap-2 text-xs text-success">
                            <.icon name="hero-check-circle" class="w-4 h-4" />
                            {ngettext(
                              "Translation complete - %{count} language",
                              "Translation complete - %{count} languages",
                              translation_status.success_count,
                              count: translation_status.success_count
                            )}
                          </div>
                        <% end %>
                      </div>
                    <% end %>
                  </div>
                </div>
              <% end %>
            </div>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>

  <%!-- Version Structure Migration Confirmation Modal --%>
  <%= if @show_version_migration_modal do %>
    <div class="modal modal-open">
      <div class="modal-box" phx-click-away="close_version_migration_modal">
        <h3 class="font-bold text-lg mb-4 flex items-center gap-2">
          <.icon name="hero-arrow-up-circle" class="w-5 h-5 text-info" />
          {gettext("Migrate to Versioned Structure")}
        </h3>

        <div class="space-y-4">
          <p class="text-base-content/80">
            {gettext(
              "This will migrate %{count} posts in this publishing group to the versioned structure.",
              count: @legacy_structure_status.legacy
            )}
          </p>

          <div class="bg-base-200 rounded-lg p-4 space-y-2">
            <div class="flex justify-between text-sm">
              <span class="text-base-content/70">{gettext("Posts to Migrate")}</span>
              <span class="font-medium">{@legacy_structure_status.legacy}</span>
            </div>
          </div>

          <div class="text-sm text-base-content/70 space-y-2">
            <p>
              <strong>{gettext("What this does:")}</strong>
            </p>
            <ul class="list-disc list-inside space-y-1 pl-2">
              <li>{gettext("Creates a v1/ directory for each post")}</li>
              <li>{gettext("Moves post files into the v1/ directory")}</li>
              <li>{gettext("Enables version history and safe editing of published content")}</li>
              <li>{gettext("Does not modify post content")}</li>
            </ul>
          </div>

          <%= if @legacy_structure_status.legacy > 20 do %>
            <div class="flex items-start gap-2 p-3 rounded-lg bg-info/10 border border-info/20">
              <.icon name="hero-information-circle" class="w-4 h-4 text-info shrink-0 mt-0.5" />
              <p class="text-xs text-info">
                {gettext(
                  "This migration will run in the background. You can continue working while posts are migrated."
                )}
              </p>
            </div>
          <% end %>
        </div>

        <div class="modal-action">
          <button type="button" class="btn" phx-click="close_version_migration_modal">
            {gettext("Cancel")}
          </button>
          <button
            type="button"
            class="btn btn-info"
            phx-click="confirm_migrate_to_versioned"
            phx-disable-with={gettext("Migrating...")}
          >
            <.icon name="hero-arrow-up-circle" class="w-4 h-4" />
            {gettext("Migrate %{count} Posts", count: @legacy_structure_status.legacy)}
          </button>
        </div>
      </div>
    </div>
  <% end %>

  <%!-- Primary Language Migration Confirmation Modal --%>
  <%= if @show_migration_modal do %>
    <% total_needing =
      @primary_language_status.needs_backfill + @primary_language_status.needs_migration %>
    <div class="modal modal-open">
      <div class="modal-box" phx-click-away="close_migration_modal">
        <h3 class="font-bold text-lg mb-4 flex items-center gap-2">
          <.icon name="hero-language" class="w-5 h-5 text-warning" />
          {gettext("Update Primary Language")}
        </h3>

        <div class="space-y-4">
          <p class="text-base-content/80">
            {ngettext(
              "This will update the primary language setting for %{count} post in this publishing group.",
              "This will update the primary language setting for %{count} posts in this publishing group.",
              total_needing
            )}
          </p>

          <div class="bg-base-200 rounded-lg p-4 space-y-2">
            <div class="flex justify-between text-sm">
              <span class="text-base-content/70">{gettext("New Primary Language")}</span>
              <span class="font-medium">{@primary_language_name}</span>
            </div>
            <div class="flex justify-between text-sm">
              <span class="text-base-content/70">{gettext("Posts to Update")}</span>
              <span class="font-medium">{total_needing}</span>
            </div>
          </div>

          <div class="text-sm text-base-content/70 space-y-2">
            <p>
              <strong>{gettext("What this does:")}</strong>
            </p>
            <ul class="list-disc list-inside space-y-1 pl-2">
              <li>{gettext("Saves the current primary language to each post's metadata")}</li>
              <li>{gettext("Keeps posts accessible if the global language changes")}</li>
              <li>{gettext("Does not modify post content or translations")}</li>
            </ul>
          </div>

          <%= if total_needing > 20 do %>
            <div class="flex items-start gap-2 p-3 rounded-lg bg-info/10 border border-info/20">
              <.icon name="hero-information-circle" class="w-4 h-4 text-info shrink-0 mt-0.5" />
              <p class="text-xs text-info">
                {gettext(
                  "This migration will run in the background. You can continue working while posts are updated."
                )}
              </p>
            </div>
          <% end %>
        </div>

        <div class="modal-action">
          <button type="button" class="btn" phx-click="close_migration_modal">
            {gettext("Cancel")}
          </button>
          <button
            type="button"
            class="btn btn-warning"
            phx-click="confirm_migrate_primary_language"
            phx-disable-with={gettext("Updating...")}
          >
            <.icon name="hero-arrow-path" class="w-4 h-4" />
            {ngettext("Update %{count} Post", "Update %{count} Posts", total_needing)}
          </button>
        </div>
      </div>
    </div>
  <% end %>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
