<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={@page_title}
  current_path={
    PhoenixKit.Utils.Routes.path("/admin/blogging/#{@blog_slug}/edit", locale: @current_locale)
  }
  project_title={@project_title}
  current_locale={@current_locale}
>
  <% nonce = assigns[:script_csp_nonce] || assigns[:csp_nonce] || "" %>
  <%!-- Wrapper div to prevent LiveView from re-rendering the warning --%>
  <div phx-update="ignore" id="js-warning-wrapper">
    <div
      id="editor-js-warning"
      class="alert alert-warning mb-4 flex items-start gap-3"
      role="alert"
    >
      <.icon name="hero-exclamation-triangle" class="w-5 h-5 shrink-0" />
      <div>
        <p class="font-semibold text-base-content">
          {gettext("Interactive editor features need JavaScript")}
        </p>
        <p class="text-sm text-base-content/80" data-js-warning-message>
          {gettext(
            "If you cannot insert components or see unsaved-change prompts, enable JavaScript or allow inline scripts for this page."
          )}
        </p>
      </div>
    </div>
  </div>

  <noscript>
    <div class="alert alert-warning mb-4 flex items-start gap-3" role="alert">
      <.icon name="hero-exclamation-triangle" class="w-5 h-5 shrink-0" />
      <div>
        <p class="font-semibold text-base-content">{gettext("JavaScript is disabled")}</p>
        <p class="text-sm text-base-content/80">
          {gettext(
            "Turn on JavaScript to insert components and receive autosave protection in this editor."
          )}
        </p>
      </div>
    </div>
  </noscript>

  <script nonce={nonce}>
    (function() {
      const warningEl = document.getElementById("editor-js-warning");
      if (warningEl) {
        warningEl.classList.add("hidden");
      }
    })();
  </script>
  <script nonce={nonce}>
    (function() {
      let warningEl = null;

      function getWarningEl() {
        if (!warningEl || !document.body.contains(warningEl)) {
          warningEl = document.getElementById("editor-js-warning");
        }
        return warningEl;
      }

      let initAttempts = 0;

      function hideWarning() {
        const el = getWarningEl();
        if (el && !el.classList.contains("hidden")) {
          el.classList.add("hidden");
        }
      }

      function showWarning(message) {
        const el = getWarningEl();
        if (!el) return;
        el.classList.remove("hidden");
        if (message) {
          const msgEl = el.querySelector("[data-js-warning-message]");
          if (msgEl) {
            msgEl.textContent = message;
          }
        }
      }

      // At this point JS is running, so keep the warning hidden
      hideWarning();

      let textarea = null;
      let lastCursorPosition = 0;

      // Initialize when DOM is ready
      function initContentEditor() {
        textarea = document.getElementById("content-textarea");

        if (!textarea) {
          initAttempts += 1;
          if (initAttempts > 20) {
            showWarning("Editor failed to initialize. Please check if inline JavaScript is allowed.");
          }
          setTimeout(initContentEditor, 100);
          return;
        }

        initAttempts = 0;
        hideWarning();

        // Track cursor position on blur
        textarea.addEventListener("blur", () => {
          lastCursorPosition = textarea.selectionStart;
        });

        // Track cursor position on selection change
        textarea.addEventListener("select", () => {
          lastCursorPosition = textarea.selectionStart;
        });

        // Track cursor position on click
        textarea.addEventListener("click", () => {
          lastCursorPosition = textarea.selectionStart;
        });

        // Track cursor position on keyup
        textarea.addEventListener("keyup", () => {
          lastCursorPosition = textarea.selectionStart;
        });

      }

      function insertAtCursor(text) {
        if (!textarea) {
          return;
        }

        // Use last known cursor position
        const start = lastCursorPosition || 0;
        const end = start;
        const currentValue = textarea.value;

        // Insert text at cursor position
        const newValue = currentValue.substring(0, start) + text + currentValue.substring(end);
        textarea.value = newValue;

        // Move cursor to end of inserted text
        const newCursorPos = start + text.length;
        textarea.selectionStart = textarea.selectionEnd = newCursorPos;
        lastCursorPosition = newCursorPos;

        // Focus the textarea
        textarea.focus();

        // Trigger change event to update LiveView
        textarea.dispatchEvent(new Event("input", { bubbles: true }));
      }

      // Listen for custom window events from LiveView
      window.addEventListener("phx:insert-at-cursor", (e) => {
        insertAtCursor(e.detail.text);
      });

      window.addEventListener("phx:prompt-and-insert", (e) => {
        const { prompt, placeholder } = e.detail;
        const url = window.prompt(prompt, placeholder);

        if (url && url.trim()) {
          // Send back to LiveView via pushEvent
          const liveSocket = window.liveSocket;
          if (liveSocket) {
            const view = liveSocket.getViewByEl(textarea);
            if (view) {
              view.pushEvent("insert_video_component", { url: url.trim() });
            }
          }
        }
      });

      // Global function for inserting components (called from onclick)
      window.insertComponent = function(text) {
        insertAtCursor(text);
      };

      // Global function for prompting and inserting video
      window.promptAndInsertVideo = function() {
        const url = window.prompt("Enter YouTube URL:", "https://youtu.be/dQw4w9WgXcQ");
        if (url && url.trim()) {
          const template = "\n<Video url=\"" + url.trim() + "\">\n  Optional caption text\n</Video>\n";
          insertAtCursor(template);
        }
      };

      // Global function for inserting image as markdown (called after media selection)
      window.insertImageMarkdown = function(imageUrl) {
        const template = "\n![Image description](" + imageUrl + ")\n";
        insertAtCursor(template);
      };

      // Legacy function for backwards compatibility
      window.insertImageComponent = window.insertImageMarkdown;

      // Listen for exec-js events from LiveView
      window.addEventListener("phx:exec-js", (e) => {
        try {
          eval(e.detail.js);
        } catch (err) {
          console.error("[ContentEditor] Error executing JS:", err);
        }
      });

      // Initialize on DOMContentLoaded
      if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", initContentEditor);
      } else {
        initContentEditor();
      }

      // Re-initialize after LiveView updates
      document.addEventListener("phx:page-loading-stop", () => {
        warningEl = null;
        initContentEditor();
        hideWarning();
      });

      const warningObserver = new MutationObserver(() => {
        const el = getWarningEl();
        if (el && !el.classList.contains("hidden")) {
          el.classList.add("hidden");
        }
      });

      warningObserver.observe(document.documentElement, { childList: true, subtree: true });

      // Track unsaved changes state
      window.editorUnsavedChanges = false;

      // Browser exit protection
      window.addEventListener("beforeunload", function(e) {
        if (window.editorUnsavedChanges) {
          e.preventDefault();
          e.returnValue = "";
          return "";
        }
      });

      // Intercept navigation links
      document.addEventListener("click", function(e) {
        if (window.editorUnsavedChanges) {
          const link = e.target.closest("a[href], a[data-phx-link]");
          if (link && !link.hasAttribute("data-confirm")) {
            const href = link.getAttribute("href") || link.getAttribute("data-phx-link");
            // Don't block external links or hash links
            if (href && !href.startsWith("http") && !href.startsWith("#")) {
              e.preventDefault();
              e.stopPropagation();
              document.getElementById("confirm-cancel-btn").click();
            }
          }
        }
      }, true);

      // Listen for changes status from LiveView
      window.addEventListener("phx:changes-status", function(e) {
        window.editorUnsavedChanges = e.detail.has_changes;
      });

      // Listen for confirm navigation event
      window.addEventListener("phx:confirm-navigation", function(_e) {
        if (confirm("You have unsaved changes. Are you sure you want to leave?")) {
          document.getElementById("confirm-cancel-btn").click();
        }
      });

      // Listen for slug update event from LiveView
      window.addEventListener("phx:update-slug", function(e) {
        const slugInput = document.getElementById("slug-input");
        if (slugInput && e.detail.slug) {
          slugInput.value = e.detail.slug;
        }
      });
    })();
  </script>
  <%!-- Hidden confirmation button for JavaScript --%>
  <button
    id="confirm-cancel-btn"
    type="button"
    phx-click="cancel"
    class="hidden"
    aria-hidden="true"
  >
  </button>

  <div class="container mx-auto px-4 py-6 space-y-6">
    <div class="flex items-center justify-between">
      <button type="button" class="btn btn-outline btn-sm shadow-none" phx-click="back_to_list">
        <.icon name="hero-arrow-left" class="w-4 h-4 mr-1" /> {gettext("Back to %{blog}",
          blog: @blog_name || gettext("Blog")
        )}
      </button>
      <div class="flex items-center gap-3">
        <%!-- Language Switcher --%>
        <%= if length(@all_enabled_languages) > 1 do %>
          <div class="flex items-center gap-2" id="language-switcher">
            <span class="text-sm text-base-content/70">{gettext("Language")}:</span>
            <div class="join">
              <%= for lang_code <- @all_enabled_languages do %>
                <% lang_info = PhoenixKitWeb.Live.Modules.Blogging.get_language_info(lang_code)
                flag = if lang_info, do: lang_info.flag, else: ""
                is_current = @current_language == lang_code
                file_exists = lang_code in @available_languages %>
                <button
                  type="button"
                  class={[
                    "join-item btn btn-sm shadow-none",
                    cond do
                      is_current -> "btn-primary"
                      file_exists -> "btn-outline"
                      true -> "btn-success btn-outline"
                    end
                  ]}
                  phx-click="switch_language"
                  phx-value-language={lang_code}
                  title={
                    cond do
                      is_current && lang_info -> "Editing #{lang_info.name}"
                      file_exists && lang_info -> "Switch to #{lang_info.name}"
                      lang_info -> "Create #{lang_info.name} translation"
                      true -> lang_code
                    end
                  }
                >
                  <%= cond do %>
                    <% is_current -> %>
                      <.icon name="hero-check" class="w-4 h-4" />
                    <% not file_exists -> %>
                      <.icon name="hero-plus" class="w-3 h-3" />
                    <% true -> %>
                  <% end %>
                  <span class="text-lg phx-click-loading:opacity-50">{flag}</span>
                  <span class="phx-click-loading:hidden">
                    {lang_code
                    |> PhoenixKit.Modules.Languages.DialectMapper.extract_base()
                    |> String.upcase()}
                  </span>
                  <span class="hidden phx-click-loading:inline-block loading loading-spinner loading-xs">
                  </span>
                </button>
              <% end %>
            </div>
          </div>
        <% end %>
        <button
          type="button"
          class="btn btn-outline btn-sm shadow-none"
          phx-click="preview"
        >
          <.icon name="hero-eye" class="w-4 h-4 mr-1" /> {gettext("Preview")}
        </button>
        <%= if @form["status"] == "published" && @public_url do %>
          <a
            href={if @has_pending_changes, do: "#", else: @public_url}
            target="_blank"
            class={[
              "btn btn-outline btn-sm shadow-none",
              !@has_pending_changes && "btn-success",
              @has_pending_changes && "btn-disabled pointer-events-none opacity-60"
            ]}
            aria-disabled={@has_pending_changes}
            tabindex={if @has_pending_changes, do: "-1", else: "0"}
            title={
              if(@has_pending_changes,
                do: "Save the post before viewing the public page",
                else: "View this post on the public site"
              )
            }
          >
            <.icon name="hero-globe-alt" class="w-4 h-4 mr-1" /> View Public
          </a>
        <% end %>
      </div>
    </div>

    <div class="card bg-base-100 shadow-xl border border-base-200">
      <div class="card-body space-y-6">
        <div class="flex flex-col lg:flex-row gap-6">
          <div class="lg:w-80 space-y-4">
            <.form for={@form} id="blogging-meta" phx-change="update_meta" phx-submit="noop">
              <div class="space-y-4">
                <%!-- Title is extracted from markdown content (first # Heading) --%>
                <%= if @blog_mode == "slug" do %>
                  <div>
                    <label class="label">
                      <span class="label-text text-sm font-semibold text-base-content">
                        {gettext("Slug")}
                      </span>
                    </label>
                    <input
                      type="text"
                      name="slug"
                      id="slug-input"
                      value={@form["slug"]}
                      pattern="[a-z0-9]+(-[a-z0-9]+)*"
                      class="input input-bordered w-full lowercase"
                      placeholder={gettext("auto-generated from first heading")}
                      title={
                        gettext(
                          "Use lowercase letters, numbers, and hyphens only. No spaces or special characters."
                        )
                      }
                    />
                    <p class="text-xs text-base-content/60 mt-1">
                      {gettext("Use lowercase letters, numbers, and hyphens only.")}
                    </p>
                  </div>
                <% end %>

                <div>
                  <label class="label">
                    <span class="label-text text-sm font-semibold text-base-content">
                      {gettext("Featured Image")}
                    </span>
                  </label>

                  <%= if preview_url = featured_image_preview_url(@form["featured_image_id"]) do %>
                    <%!-- Image Preview with Actions --%>
                    <div class="space-y-3">
                      <div class="relative group">
                        <img
                          src={preview_url}
                          alt={
                            Map.get(@post.metadata, :title) ||
                              Map.get(@post.metadata, "title") ||
                              gettext("Featured image")
                          }
                          class="w-full rounded-lg border-2 border-base-300 object-cover max-h-56"
                          loading="lazy"
                        />
                        <%!-- Desktop: Hover overlay --%>
                        <div class="hidden md:flex absolute inset-0 bg-base-content/0 group-hover:bg-base-content/60 transition-all rounded-lg items-center justify-center gap-3 opacity-0 group-hover:opacity-100">
                          <button
                            type="button"
                            phx-click="open_media_selector"
                            class="btn btn-primary btn-sm shadow-lg"
                          >
                            <.icon name="hero-arrow-path" class="w-4 h-4 mr-1" />
                            {gettext("Change")}
                          </button>
                          <button
                            type="button"
                            phx-click="clear_featured_image"
                            class="btn btn-error btn-sm shadow-lg"
                          >
                            <.icon name="hero-trash" class="w-4 h-4 mr-1" />
                            {gettext("Remove")}
                          </button>
                        </div>
                      </div>
                      <%!-- Mobile: Always visible buttons --%>
                      <div class="flex md:hidden gap-2">
                        <button
                          type="button"
                          phx-click="open_media_selector"
                          class="btn btn-primary btn-sm flex-1"
                        >
                          <.icon name="hero-arrow-path" class="w-4 h-4 mr-1" />
                          {gettext("Change")}
                        </button>
                        <button
                          type="button"
                          phx-click="clear_featured_image"
                          class="btn btn-error btn-sm flex-1"
                        >
                          <.icon name="hero-trash" class="w-4 h-4 mr-1" />
                          {gettext("Remove")}
                        </button>
                      </div>
                    </div>
                  <% else %>
                    <%!-- No Image Selected - Show Upload Area --%>
                    <button
                      type="button"
                      phx-click="open_media_selector"
                      class="w-full border-2 border-dashed border-base-300 rounded-lg p-8 hover:border-primary hover:bg-primary/5 transition-all group"
                    >
                      <div class="flex flex-col items-center gap-3 text-base-content/60 group-hover:text-primary transition-colors">
                        <.icon name="hero-photo" class="w-12 h-12" />
                        <div class="text-center">
                          <p class="font-semibold text-sm">
                            {gettext("Select Featured Image")}
                          </p>
                          <p class="text-xs mt-1">
                            {gettext("Click to choose from media library")}
                          </p>
                        </div>
                      </div>
                    </button>
                  <% end %>

                  <%!-- Advanced: Manual ID Entry (Collapsed by default) --%>
                  <details
                    class="bg-base-200/50 mt-3 rounded-lg border border-base-300"
                    open={false}
                  >
                    <summary class="cursor-pointer select-none px-3 py-2 rounded-lg hover:bg-base-300/50 transition-colors list-none [&::-webkit-details-marker]:hidden">
                      <div class="flex items-center gap-2">
                        <.icon
                          name="hero-chevron-right"
                          class="w-3 h-3 transition-transform [[open]>&]:rotate-90"
                        />
                        <span class="text-xs font-medium text-base-content/70">
                          {gettext("Advanced: Manual File ID")}
                        </span>
                      </div>
                    </summary>
                    <div class="px-3 pb-3 pt-2">
                      <input
                        type="text"
                        name="featured_image_id"
                        value={@form["featured_image_id"]}
                        class="input input-bordered input-sm w-full font-mono text-xs"
                        placeholder="018e3c4a-9f6b-7890-abcd-ef1234567890"
                      />
                      <p class="text-xs text-base-content/60 mt-2">
                        {gettext("Paste a Phoenix Kit Media ID if you know it.")}
                      </p>
                    </div>
                  </details>
                </div>

                <div>
                  <label class="label">
                    <span class="label-text text-sm font-semibold text-base-content">
                      {gettext("Status")}
                    </span>
                  </label>
                  <select
                    class="select select-bordered w-full"
                    name="status"
                  >
                    <option value="draft" selected={@form["status"] == "draft"}>
                      {gettext("Draft")}
                    </option>
                    <option value="published" selected={@form["status"] == "published"}>
                      {gettext("Published")}
                    </option>
                    <option value="archived" selected={@form["status"] == "archived"}>
                      {gettext("Archived")}
                    </option>
                  </select>
                </div>

                <div>
                  <label class="label">
                    <span class="label-text text-sm font-semibold text-base-content">
                      {gettext("Publication Date & Time (UTC)")}
                    </span>
                  </label>
                  <input
                    type="datetime-local"
                    name="published_at"
                    value={datetime_local_value(@form["published_at"])}
                    class="input input-bordered w-full"
                  />
                  <p class="text-xs text-base-content/60 mt-1">
                    {gettext(
                      "Updating the publication time moves the file to the matching folder."
                    )}
                  </p>
                </div>
              </div>
            </.form>
          </div>

          <div class="flex-1 space-y-4">
            <div class="flex flex-wrap items-center justify-between gap-3">
              <h2 class="text-xl font-semibold text-base-content">{gettext("Content")}</h2>
              <div class="flex items-center gap-2">
                <%= cond do %>
                  <% @is_autosaving -> %>
                    <span class="badge badge-info badge-sm gap-1">
                      <span class="loading loading-spinner loading-xs"></span>
                      {gettext("Saving...")}
                    </span>
                  <% @has_pending_changes -> %>
                    <span class="badge badge-warning badge-sm">{gettext("Unsaved changes")}</span>
                  <% true -> %>
                    <span class="badge badge-success badge-sm gap-1">
                      <.icon name="hero-check" class="w-3 h-3" />
                      {gettext("Saved")}
                    </span>
                <% end %>
                <button
                  type="button"
                  phx-click="save"
                  class={[
                    "btn btn-primary btn-xs shadow-none gap-1",
                    (@is_autosaving || !@has_pending_changes) &&
                      "btn-disabled pointer-events-none opacity-60"
                  ]}
                  disabled={@is_autosaving || !@has_pending_changes}
                >
                  <span class="hidden phx-click-loading:inline-flex items-center gap-1">
                    <span class="loading loading-spinner loading-2xs"></span>
                    {gettext("Saving...")}
                  </span>
                  <span class="inline-flex items-center gap-1 phx-click-loading:hidden">
                    <.icon name="hero-arrow-down-tray" class="w-3 h-3" /> {gettext("Save now")}
                  </span>
                </button>
              </div>
            </div>

            <%!-- Component Toolbar --%>
            <div
              class="card bg-base-200 border border-base-300"
              onmousedown="event.preventDefault()"
            >
              <div class="card-body p-3">
                <div class="flex flex-wrap items-center gap-2">
                  <span class="text-xs font-semibold text-base-content/70 mr-2">
                    {gettext("Insert Component:")}
                  </span>
                  <button
                    type="button"
                    phx-click="open_image_component_selector"
                    class="btn btn-xs btn-outline gap-1"
                    title={gettext("Insert Image")}
                    onmousedown="event.preventDefault()"
                  >
                    <.icon name="hero-photo" class="w-3 h-3" />
                    {gettext("Image")}
                  </button>
                  <button
                    type="button"
                    onclick="window.promptAndInsertVideo()"
                    class="btn btn-xs btn-outline gap-1"
                    title={gettext("Insert Video")}
                    onmousedown="event.preventDefault()"
                  >
                    <.icon name="hero-video-camera" class="w-3 h-3" />
                    {gettext("Video")}
                  </button>
                </div>
              </div>
            </div>

            <.form for={%{}} id="blogging-content" phx-change="update_content" phx-submit="noop">
              <textarea
                id="content-textarea"
                name="content"
                phx-debounce="400"
                class="textarea textarea-bordered w-full h-[480px] font-mono text-sm leading-6"
              >{@content}</textarea>
            </.form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <%!-- Media Selector Modal --%>
  <.live_component
    module={PhoenixKitWeb.Live.Components.MediaSelectorModal}
    id="media-selector-modal"
    show={@show_media_selector}
    mode={@media_selection_mode}
    selected_ids={@media_selected_ids}
    phoenix_kit_current_user={assigns[:phoenix_kit_current_user]}
  />
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
