<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 --%>
    <.admin_page_header
      back={Routes.path("/admin")}
      title={gettext("Publishing")}
      subtitle={
        gettext(
          "Monitor publishing activity, jump into group workspaces, and guide your team toward new content opportunities."
        )
      }
    >
      <:actions>
        <.link
          navigate={Routes.path("/admin/settings/publishing/new")}
          class="btn btn-primary btn-sm"
        >
          <.icon name="hero-plus" class="w-4 h-4 mr-1" /> {gettext("Create Group")}
        </.link>
      </:actions>
    </.admin_page_header>

    <div class="space-y-8">
      <%= if @empty_state? do %>
        <div class="card bg-base-100 border border-dashed border-base-300 shadow-sm">
          <div class="card-body items-center text-center space-y-4">
            <div class="rounded-full bg-base-200 p-3 text-primary">
              <.icon name="hero-document-text" class="w-8 h-8" />
            </div>
            <h2 class="text-2xl font-semibold text-base-content">
              {gettext("No publishing groups yet")}
            </h2>
            <p class="text-base text-base-content/70 max-w-xl">
              {gettext("Create your first publishing group to start drafting posts.")}
            </p>
            <div class="flex flex-wrap justify-center gap-3">
              <.link
                href={Routes.path("/admin/settings/publishing/new")}
                class="btn btn-primary btn-sm"
              >
                <.icon name="hero-plus" class="w-4 h-4 mr-1" /> {gettext(
                  "Create Publishing Group"
                )}
              </.link>
            </div>
          </div>
        </div>
      <% else %>
        <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
          <div class="stat bg-base-100 shadow-sm rounded-lg border border-base-200">
            <div class="stat-title text-sm text-base-content/70">
              {gettext("Publishing Groups")}
            </div>
            <div class="stat-value text-3xl text-base-content">
              {@dashboard_summary.total_groups}
            </div>
          </div>
          <div class="stat bg-base-100 shadow-sm rounded-lg border border-base-200">
            <div class="stat-title text-sm text-base-content/70">{gettext("Total Posts")}</div>
            <div class="stat-value text-3xl text-base-content">
              {@dashboard_summary.total_posts}
            </div>
          </div>
          <div class="stat bg-base-100 shadow-sm rounded-lg border border-base-200">
            <div class="stat-title text-sm text-base-content/70">{gettext("Published")}</div>
            <div class="stat-value text-3xl text-base-content">
              {@dashboard_summary.published_posts}
            </div>
          </div>
          <div class="stat bg-base-100 shadow-sm rounded-lg border border-base-200">
            <div class="stat-title text-sm text-base-content/70">{gettext("Drafts")}</div>
            <div class="stat-value text-3xl text-base-content">
              {@dashboard_summary.draft_posts}
            </div>
          </div>
          <div class="stat bg-base-100 shadow-sm rounded-lg border border-base-200">
            <div class="stat-title text-sm text-base-content/70">{gettext("Archived Posts")}</div>
            <div class="stat-value text-3xl text-base-content">
              {@dashboard_summary.archived_posts}
            </div>
          </div>
        </div>

        <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
          <%= for insight <- @dashboard_insights do %>
            <div class="card bg-base-100 shadow-sm border border-base-200 hover:border-primary/60 transition h-full">
              <div class="card-body space-y-4 h-full flex flex-col">
                <div class="flex items-start justify-between gap-3">
                  <div class="space-y-2">
                    <h3 class="text-xl font-semibold text-base-content">
                      <.link
                        navigate={Routes.path("/admin/publishing/#{insight.slug}")}
                        class="hover:text-primary transition-colors"
                      >
                        {insight.name}
                      </.link>
                    </h3>
                    <p class="text-xs text-base-content/60">
                      {gettext("Slug")}: <code class="font-mono">{insight.slug}</code>
                    </p>
                    <p class="text-xs text-base-content/60">
                      <span class="whitespace-nowrap">{gettext("Last published")}: </span>
                      <%= if insight.last_published_at_text do %>
                        <span class="whitespace-nowrap">{insight.last_published_at_text}</span>
                      <% else %>
                        {gettext("No published posts yet")}
                      <% end %>
                    </p>
                  </div>
                  <span class="badge badge-ghost badge-lg text-xs px-4 py-3 whitespace-nowrap">
                    <%= if insight.mode == "slug" do %>
                      {gettext("Slug-based")}
                    <% else %>
                      {gettext("Timestamp-based")}
                    <% end %>
                  </span>
                </div>

                <div class="grid grid-cols-3 gap-3">
                  <div class="rounded-lg bg-base-200/60 px-3 py-2 text-center">
                    <p class="text-xs uppercase tracking-wide text-base-content/60 min-h-[1.25rem] flex items-center justify-center">
                      {gettext("Posts")}
                    </p>
                    <p class="font-semibold text-base-content">{insight.posts_count}</p>
                  </div>
                  <div class="rounded-lg bg-success/10 px-3 py-2 text-center">
                    <p class="text-xs uppercase tracking-wide text-success min-h-[1.25rem] flex items-center justify-center">
                      {gettext("Published")}
                    </p>
                    <p class="font-semibold text-success">{insight.published_count}</p>
                  </div>
                  <div class="rounded-lg bg-warning/10 px-3 py-2 text-center">
                    <p class="text-xs uppercase tracking-wide text-warning min-h-[1.25rem] flex items-center justify-center">
                      {gettext("Drafts")}
                    </p>
                    <p class="font-semibold text-warning">{insight.draft_count}</p>
                  </div>
                </div>

                <div class="min-h-[2rem]">
                  <%= if insight.languages != [] do %>
                    <div class="flex flex-wrap gap-2">
                      <span class="text-xs font-medium uppercase text-base-content/60">
                        {gettext("Languages")}:
                      </span>
                      <%= for language <- insight.languages do %>
                        <span class="badge badge-ghost badge-sm px-2 py-1">
                          {language
                          |> PhoenixKit.Modules.Languages.DialectMapper.extract_base()
                          |> String.upcase()}
                        </span>
                      <% end %>
                    </div>
                  <% else %>
                    <p class="text-xs text-base-content/60">
                      {gettext("Languages")}:
                      <span class="badge badge-ghost badge-sm px-2 py-1 uppercase">
                        {gettext("N/A")}
                      </span>
                    </p>
                  <% end %>
                </div>

                <%!-- Primary Language Migration Progress/Warning --%>
                <% migration_progress = Map.get(@migrations_in_progress, insight.slug) %>
                <%= if migration_progress do %>
                  <div class="flex items-center gap-2 px-3 py-2 rounded-lg bg-info/10 border border-info/20">
                    <span class="loading loading-spinner loading-xs text-info"></span>
                    <div class="flex-1">
                      <span class="text-xs text-info">{gettext("Updating...")}</span>
                      <progress
                        class="progress progress-info w-full h-1 mt-1"
                        value={migration_progress.current}
                        max={migration_progress.total}
                      >
                      </progress>
                    </div>
                  </div>
                <% else %>
                  <%= if insight.needs_primary_language_migration do %>
                    <div class="flex items-center gap-2 px-3 py-2 rounded-lg bg-warning/10 border border-warning/20">
                      <.icon name="hero-language" class="w-4 h-4 text-warning shrink-0" />
                      <span class="text-xs text-warning flex-1">
                        {ngettext(
                          "%{count} post needs primary language update",
                          "%{count} posts need primary language update",
                          insight.needs_migration_count,
                          count: insight.needs_migration_count
                        )}
                      </span>
                      <button
                        type="button"
                        class="btn btn-warning btn-xs"
                        phx-click="show_migration_modal"
                        phx-value-slug={insight.slug}
                        phx-value-name={insight.name}
                        phx-value-count={insight.needs_migration_count}
                      >
                        {gettext("Update")}
                      </button>
                    </div>
                  <% end %>
                <% end %>

                <div class="flex flex-wrap gap-2 mt-auto">
                  <.link
                    navigate={Routes.path("/admin/publishing/#{insight.slug}")}
                    class="btn btn-outline btn-sm"
                  >
                    <.icon name="hero-arrow-right" class="w-4 h-4 mr-1" />
                    {gettext("Open")}
                  </.link>
                  <.link
                    navigate={Routes.path("/admin/settings/publishing/#{insight.slug}/edit")}
                    class="btn btn-outline btn-sm"
                  >
                    <.icon name="hero-cog-6-tooth" class="w-4 h-4 mr-1" />
                    {gettext("Settings")}
                  </.link>
                  <% group_slug = insight.slug %>
                  <% url_prefix =
                    PhoenixKit.Config.get_url_prefix()
                    |> case do
                      "/" -> ""
                      prefix -> prefix
                    end %>
                  <%!-- Use first enabled language (default) for public URL, not UI locale --%>
                  <% default_language = List.first(@enabled_languages) %>
                  <% public_url =
                    if length(@enabled_languages) == 1 do
                      @endpoint_url <> url_prefix <> "/" <> group_slug
                    else
                      @endpoint_url <> url_prefix <> "/#{default_language}/" <> group_slug
                    end %>
                  <a
                    href={public_url}
                    target="_blank"
                    rel="noopener"
                    class="btn btn-outline btn-sm"
                    aria-label={gettext("View public site")}
                  >
                    <.icon name="hero-eye" class="w-4 h-4 mr-1" />
                    {gettext("View")}
                  </a>
                </div>
              </div>
            </div>
          <% end %>
        </div>
      <% end %>
    </div>
  </div>

  <%!-- Primary Language Migration Confirmation Modal --%>
  <%= if @show_migration_modal do %>
    <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 \"%{name}\".",
              "This will update the primary language setting for %{count} posts in \"%{name}\".",
              @migration_modal_count,
              name: @migration_modal_name
            )}
          </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("Publishing Group")}</span>
              <span class="font-medium">{@migration_modal_name}</span>
            </div>
            <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">{@migration_modal_count}</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 @migration_modal_count > 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", @migration_modal_count)}
          </button>
        </div>
      </div>
    </div>
  <% end %>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
