<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/blogging", locale: @current_locale)}
        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" /> Back to Content Overview
      </.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
            nil -> ""
            "/" -> ""
            prefix -> prefix
          end %>
        <% files_hint = "priv/static/blogging/" <> blog_slug <> "/…" %>
        <% public_hint = url_prefix <> "/:locale/" <> blog_slug <> "/…" %>
        <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>
            <code class="font-mono break-all">{public_hint}</code>
          </p>
        </div>
      </div>
    </header>

    <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 @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 %>
              <div class="card bg-base-100 shadow-sm border border-base-200">
                <div class="card-body p-4 md:p-5 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                  <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)}</span>
                    </div>
                    <h3 class="text-xl font-semibold text-base-content mt-1 truncate">
                      {post.metadata.title || gettext("Untitled post")}
                    </h3>
                    <% blog_slug =
                      post.blog || (@current_blog && @current_blog["slug"]) || @blog_slug ||
                        "blog" %>
                    <% files_path = "priv/static/blogging/" <> post.path %>
                    <% public_url =
                      BlogHTML.build_post_url(blog_slug, post, post.language || @current_locale) %>
                    <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>
                      <code class="font-mono break-all">{public_url}</code>
                    </p>
                  </div>
                  <div class="flex gap-2 flex-wrap">
                    <%!-- Show buttons for all languages (enabled and disabled) in consistent order --%>
                    <% all_languages =
                      (post.available_languages ++ @enabled_languages)
                      |> Enum.uniq()
                      |> Enum.sort()

                    # Only hide flags if: single language enabled AND post has only 1 language file
                    hide_flags = length(@enabled_languages) == 1 and length(post.available_languages) == 1 %>
                    <%= for lang_code <- all_languages do %>
                      <% lang_path =
                        Path.join([
                          Path.dirname(post.path),
                          "#{lang_code}.phk"
                        ])

                      lang_info =
                        PhoenixKitWeb.Live.Modules.Blogging.get_language_info(lang_code)

                      flag = if lang_info, do: lang_info.flag, else: ""
                      file_exists = lang_code in post.available_languages
                      is_enabled = lang_code in @enabled_languages

                      # Read language-specific metadata for status
                      lang_metadata =
                        if file_exists do
                          case PhoenixKitWeb.Live.Modules.Blogging.read_post(
                                 @blog_slug,
                                 lang_path
                               ) do
                            {:ok, lang_post} -> lang_post.metadata
                            _ -> nil
                          end
                        else
                          nil
                        end %>
                      <%= if file_exists do %>
                        <%!-- Language card with status, edit, and view buttons --%>
                        <div class="flex flex-col gap-1 justify-between">
                          <div class="flex gap-1 items-center">
                            <%!-- Status badge --%>
                            <%= if lang_metadata do %>
                              <button
                                type="button"
                                phx-click="toggle_status"
                                phx-value-path={lang_path}
                                phx-value-current-status={lang_metadata.status}
                                class={[
                                  "badge badge-sm cursor-pointer hover:brightness-90 transition-all",
                                  case lang_metadata.status do
                                    "published" -> "badge-success"
                                    "archived" -> "badge-neutral"
                                    _ -> "badge-warning"
                                  end
                                ]}
                                title={gettext("Click to change status")}
                              >
                                {lang_metadata.status}
                              </button>
                              <%!-- View button for published posts --%>
                              <%= if lang_metadata.status == "published" do %>
                                <a
                                  href={
                                    BlogHTML.build_post_url(
                                      @blog_slug,
                                      post,
                                      lang_code
                                    )
                                  }
                                  target="_blank"
                                  class="badge badge-sm badge-ghost cursor-pointer hover:badge-primary"
                                  title={gettext("View on public site")}
                                >
                                  <.icon name="hero-arrow-top-right-on-square" class="w-3 h-3" />
                                </a>
                              <% end %>
                            <% end %>
                          </div>
                          <%!-- Edit button --%>
                          <.link
                            navigate={
                              PhoenixKit.Utils.Routes.path(
                                "/admin/blogging/#{post.blog}/edit?path=#{URI.encode(lang_path)}",
                                locale: @current_locale
                              )
                            }
                            class={[
                              "btn btn-sm shadow-none",
                              if(is_enabled,
                                do: "btn-outline",
                                else: "bg-base-200 text-base-content/60 border-base-300"
                              )
                            ]}
                            title={
                              if lang_info,
                                do: "Edit #{lang_info.name}",
                                else: "Edit #{lang_code}"
                            }
                          >
                            <.icon name="hero-pencil-square" class="w-4 h-4 mr-1" />
                            <%= if hide_flags do %>
                              {gettext("Edit")}
                            <% else %>
                              <span class="text-lg">{flag}</span> {String.upcase(lang_code)}
                            <% end %>
                          </.link>
                        </div>
                      <% else %>
                        <%!-- Add button for missing files (only if language is enabled) --%>
                        <%= if is_enabled do %>
                          <div class="flex flex-col gap-1">
                            <%!-- Empty space for alignment --%>
                            <div class="h-5"></div>
                            <%!-- Add button --%>
                            <button
                              type="button"
                              phx-click="add_language"
                              phx-value-path={post.path}
                              phx-value-language={lang_code}
                              class="btn btn-success btn-sm bg-green-50 hover:bg-green-100 text-success shadow-none"
                              title={
                                if lang_info,
                                  do: "Add #{lang_info.name}",
                                  else: "Add #{lang_code}"
                              }
                            >
                              <.icon name="hero-plus" class="w-4 h-4 mr-1" />
                              <span class="text-lg">{flag}</span> {String.upcase(lang_code)}
                            </button>
                          </div>
                        <% end %>
                      <% end %>
                    <% end %>
                  </div>
                </div>
              </div>
            <% end %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
