<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="min-h-screen bg-base-100">
    <%!-- Preview Banner --%>
    <div class="bg-warning text-warning-content py-2 px-4 sticky top-0 z-50 shadow-lg">
      <div class="container mx-auto flex items-center justify-between">
        <div class="flex items-center gap-3">
          <.icon name="hero-eye" class="w-5 h-5" />
          <span class="font-semibold text-sm">{gettext("Preview Mode")}</span>
          <span class="text-xs opacity-80">
            — {gettext("This is how the post will appear to visitors")}
          </span>
        </div>
        <div class="flex gap-2">
          <button type="button" class="btn btn-sm btn-ghost" phx-click="back_to_editor">
            <.icon name="hero-pencil-square" class="w-4 h-4 mr-1" />
            {gettext("Back to Editor")}
          </button>
        </div>
      </div>
    </div>

    <%!-- Content --%>
    <%= if @error do %>
      <div class="container mx-auto px-4 py-12">
        <div class="alert alert-error">
          <.icon name="hero-exclamation-triangle" class="w-6 h-6" />
          <div>
            <h3 class="font-bold">{gettext("Preview Error")}</h3>
            <p class="text-sm">{@error}</p>
          </div>
        </div>
      </div>
    <% else %>
      <%= if @post && @html_content do %>
        <%!-- Public post interface --%>
        <article class="post-container max-w-4xl mx-auto px-6 py-8">
          <%!-- Breadcrumb Navigation (non-interactive in preview) --%>
          <div class="breadcrumbs text-sm mb-6">
            <ul>
              <%= for breadcrumb <- @breadcrumbs do %>
                <li>{breadcrumb.label}</li>
              <% end %>
            </ul>
          </div>

          <%!-- Post Header --%>
          <header class="mb-8 border-b pb-6">
            <%= if has_publication_date?(@post) do %>
              <div class="flex items-center gap-2 text-sm text-base-content/70">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                  />
                </svg>
                <time datetime={@post.metadata.published_at || ""}>
                  {format_post_date(@post, @group_slug)}
                </time>
              </div>
            <% end %>
            <div class="flex flex-wrap items-center gap-4 mt-4">
              <%!-- Language Switcher (links to preview URLs) --%>
              <%= if length(@translations) > 1 do %>
                <.publishing_language_switcher
                  languages={build_preview_translations(@translations, @post, @group_slug)}
                  current_language={@current_language}
                  show_status={false}
                  size={:sm}
                />
              <% end %>
              <%!-- Version History Dropdown --%>
              <%= if @version_dropdown do %>
                <div class="dropdown dropdown-end">
                  <div tabindex="0" role="button" class="btn btn-ghost btn-sm gap-1">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                      />
                    </svg>
                    v{@version_dropdown.current_version}
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M19 9l-7 7-7-7"
                      />
                    </svg>
                  </div>
                  <ul
                    tabindex="0"
                    class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-40 border border-base-200"
                  >
                    <%= for v <- @version_dropdown.versions do %>
                      <li>
                        <span class={"flex items-center justify-between #{if v.is_current, do: "active"}"}>
                          <span>v{v.version}</span>
                          <%= if v.is_live do %>
                            <span class="badge badge-success badge-xs h-auto">live</span>
                          <% end %>
                        </span>
                      </li>
                    <% end %>
                  </ul>
                </div>
              <% end %>
            </div>
            <h1 class="text-3xl font-bold mt-4">
              {@post.metadata.title || PhoenixKit.Modules.Publishing.Constants.default_title()}
            </h1>
          </header>

          <%!-- Post Content --%>
          <div class="prose prose-lg max-w-none">
            {raw(@html_content)}
          </div>

          <%!-- Post Footer --%>
          <footer class="mt-12 pt-6 border-t">
            <span class="btn btn-ghost btn-sm opacity-60 cursor-not-allowed">
              <.icon name="hero-arrow-left" class="w-4 h-4 mr-2" /> {gettext("Back to %{group}",
                group: String.capitalize(@group_slug)
              )}
            </span>
          </footer>
        </article>
      <% else %>
        <div class="container mx-auto px-4 py-12">
          <div class="flex items-center justify-center">
            <span class="loading loading-spinner loading-lg"></span>
          </div>
        </div>
      <% end %>
    <% end %>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
