<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_base)}
        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 Blogging
      </.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 = "priv/blogging/" <> blog_slug <> "/…" %>
        <%!-- 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 <> "/" <> blog_slug
          else
            @endpoint_url <> url_prefix <> "/#{default_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>

    <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 %>
              <% blog_slug =
                post.blog || (@current_blog && @current_blog["slug"]) || @blog_slug ||
                  "blog" %>
              <% default_lang = List.first(post.available_languages) || @current_locale_base %>
              <% default_lang_path =
                Path.join([
                  Path.dirname(post.path),
                  "#{default_lang}.phk"
                ]) %>
              <% files_path = "priv/blogging/" <> post.path %>
              <%!-- Use post's actual language, falling back to first available language for this post --%>
              <% public_url =
                BlogHTML.build_post_url(blog_slug, post, post.language || default_lang) %>
              <% full_public_url = @endpoint_url <> public_url %>
              <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>
                    </div>
                    <h3 class="text-xl font-semibold text-base-content mt-1 truncate">
                      <a
                        href={
                          PhoenixKit.Utils.Routes.path(
                            "/admin/blogging/#{blog_slug}/edit?path=#{URI.encode(default_lang_path)}",
                            locale: @current_locale_base
                          )
                        }
                        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">
                    <.blog_language_switcher
                      languages={
                        build_post_languages(
                          post,
                          @blog_slug,
                          @enabled_languages,
                          @current_locale
                        )
                      }
                      show_status={true}
                      show_add={true}
                      on_click="language_action"
                      size={:sm}
                    />
                  </div>
                </div>
              </div>
            <% end %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
