<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 Header --%>
    <div class="bg-info text-info-content py-3 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">{gettext("Preview Mode")}</span>
          <span class="text-sm opacity-80">— {gettext("Showing saved content")}</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>

    <%!-- Preview 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 @rendered_content do %>
        <div class="container mx-auto px-4 py-8 max-w-4xl">
          <style>
            .publishing-markdown h1 {
              font-size: 2.25rem;
              line-height: 2.5rem;
              font-weight: 700;
              margin-top: 2.5rem;
              margin-bottom: 1.5rem;
            }

            .publishing-markdown h2 {
              font-size: 1.875rem;
              line-height: 2.25rem;
              font-weight: 700;
              margin-top: 2rem;
              margin-bottom: 1rem;
            }

            .publishing-markdown h3 {
              font-size: 1.5rem;
              line-height: 2rem;
              font-weight: 600;
              margin-top: 1.75rem;
              margin-bottom: 0.75rem;
            }

            .publishing-markdown h4 {
              font-size: 1.25rem;
              line-height: 1.75rem;
              font-weight: 600;
              margin-top: 1.5rem;
              margin-bottom: 0.5rem;
            }

            .publishing-markdown p {
              margin-top: 1rem;
              margin-bottom: 1rem;
              line-height: 1.8;
            }

            .publishing-markdown ul,
            .publishing-markdown ol {
              margin-top: 1rem;
              margin-bottom: 1rem;
              padding-left: 1.5rem;
            }

            .publishing-markdown li {
              margin-top: 0.5rem;
              margin-bottom: 0.5rem;
            }

            .publishing-markdown code {
              background-color: rgba(15, 23, 42, 0.08);
              color: inherit;
              padding: 0.2rem 0.4rem;
              border-radius: 0.375rem;
              font-size: 0.95em;
            }

            .publishing-markdown pre {
              background-color: rgba(15, 23, 42, 0.08);
              padding: 1rem;
              border-radius: 0.75rem;
              overflow-x: auto;
              margin-top: 1.5rem;
              margin-bottom: 1.5rem;
            }

            .publishing-markdown blockquote {
              border-left: 4px solid rgba(15, 23, 42, 0.15);
              padding-left: 1rem;
              margin-top: 1.5rem;
              margin-bottom: 1.5rem;
              font-style: italic;
              color: rgba(15, 23, 42, 0.8);
            }

            .publishing-markdown table {
              width: 100%;
              border-collapse: collapse;
              margin-top: 1.5rem;
              margin-bottom: 1.5rem;
            }

            .publishing-markdown th,
            .publishing-markdown td {
              border: 1px solid rgba(15, 23, 42, 0.15);
              padding: 0.75rem;
              text-align: left;
            }

            .publishing-markdown th {
              background-color: rgba(15, 23, 42, 0.08);
              font-weight: 600;
            }

            .publishing-markdown hr {
              border: none;
              border-top: 1px solid rgba(15, 23, 42, 0.15);
              margin-top: 2rem;
              margin-bottom: 2rem;
            }

            [data-theme="dark"] .publishing-markdown code {
              background-color: rgba(255, 255, 255, 0.12);
            }

            [data-theme="dark"] .publishing-markdown pre {
              background-color: rgba(255, 255, 255, 0.1);
            }

            [data-theme="dark"] .publishing-markdown blockquote {
              border-left-color: rgba(255, 255, 255, 0.25);
              color: rgba(255, 255, 255, 0.8);
            }

            [data-theme="dark"] .publishing-markdown th,
            [data-theme="dark"] .publishing-markdown td {
              border-color: rgba(255, 255, 255, 0.2);
            }

            [data-theme="dark"] .publishing-markdown th {
              background-color: rgba(255, 255, 255, 0.12);
            }
          </style>
          <div class="publishing-markdown prose prose-lg max-w-none">
            {@rendered_content}
          </div>
        </div>
      <% 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>
