<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={@page_title}
  current_path={@url_path}
  project_title={@project_title}
  current_locale={@current_locale}
>
  <div class="h-screen flex flex-col">
    <%!-- Header --%>
    <div class="border-b border-base-300 bg-base-100">
      <div class="container mx-auto px-4 py-4">
        <div class="flex items-center justify-between">
          <%!-- Left: Back button and filename --%>
          <div class="flex items-center gap-4">
            <button
              type="button"
              class="btn btn-ghost btn-sm"
              phx-click="attempt_cancel"
              id="back-button"
            >
              <PhoenixKitWeb.Components.Core.Icons.icon_arrow_left class="w-4 h-4" /> Back
            </button>
            <div>
              <h1 class="text-xl font-bold">{Path.basename(@file_path || "")}</h1>
              <%= if @has_changes do %>
                <p class="text-sm text-warning">Unsaved changes</p>
              <% else %>
                <p class="text-sm text-base-content/60">All changes saved</p>
              <% end %>
            </div>
          </div>

          <%!-- Right: Action buttons --%>
          <div class="flex gap-2">
            <%!-- Status Dropdown --%>
            <div class="dropdown dropdown-end">
              <label tabindex="0" class="btn btn-sm gap-2">
                <.page_status_badge status={@current_status} />
                <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="M19 9l-7 7-7-7"
                  />
                </svg>
              </label>
              <ul
                tabindex="0"
                class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52 mt-2"
              >
                <li>
                  <a phx-click="change_status" phx-value-status="draft">
                    <.page_status_badge status="draft" /> Draft
                  </a>
                </li>
                <li>
                  <a phx-click="change_status" phx-value-status="published">
                    <.page_status_badge status="published" /> Published
                  </a>
                </li>
                <li>
                  <a phx-click="change_status" phx-value-status="archived">
                    <.page_status_badge status="archived" /> Archived
                  </a>
                </li>
              </ul>
            </div>

            <button
              type="button"
              class="btn btn-ghost"
              phx-click="attempt_cancel"
              id="cancel-button"
            >
              Cancel
            </button>
            <button
              type="button"
              class="btn btn-primary"
              phx-click="save"
              disabled={!@has_changes}
            >
              <PhoenixKitWeb.Components.Core.Icons.icon_check class="w-4 h-4" /> Save
            </button>
          </div>
        </div>
      </div>
    </div>

    <%!-- Editor Area --%>
    <div class="flex-1 overflow-hidden">
      <form phx-change="update_content" class="h-full">
        <textarea
          name="value"
          class="w-full h-full p-6 font-mono text-sm resize-none focus:outline-none bg-base-100"
          phx-debounce="300"
          placeholder="Start writing..."
        >{@file_content}</textarea>
      </form>
    </div>
  </div>

  <script>
    // Initialize the editor unsaved changes protection
    if (!window.editorUnsavedChanges) {
      window.editorUnsavedChanges = {
        hasChanges: false,
        isNavigating: false
      };

      // Handle browser navigation (back button, closing tab, URL changes)
      window.addEventListener('beforeunload', function(e) {
        if (window.editorUnsavedChanges.hasChanges && !window.editorUnsavedChanges.isNavigating) {
          // Modern browsers require exactly this format
          e.preventDefault();
          // Chrome requires returnValue to be set
          e.returnValue = '';
          // Some browsers show the return value, others show a default message
          return '';
        }
      });

      // Intercept LiveView navigation links
      document.addEventListener('click', function(e) {
        if (!window.editorUnsavedChanges.hasChanges || window.editorUnsavedChanges.isNavigating) return;

        // Check if the clicked element or any parent is a link
        let target = e.target;
        while (target && target !== document) {
          // Check for Phoenix LiveView links (nav menu, etc.)
          if (target.hasAttribute && (
              target.hasAttribute('data-phx-link') ||
              target.hasAttribute('data-phx-link-state') ||
              (target.tagName === 'A' && target.hasAttribute('href'))
          )) {
            // Found a navigation link, check if it's trying to leave the editor
            const href = target.getAttribute('href') || target.getAttribute('data-phx-link');

            // If the link is navigating away from the current page
            if (href && !href.includes(window.location.pathname)) {
              e.preventDefault();
              e.stopPropagation();
              e.stopImmediatePropagation();

              if (confirm('You have unsaved changes. Are you sure you want to leave without saving?')) {
                // User confirmed, allow navigation by triggering a new click
                window.editorUnsavedChanges.isNavigating = true;
                window.editorUnsavedChanges.hasChanges = false;
                target.click(); // Re-trigger the click
              }
              return false;
            }
          }
          target = target.parentElement;
        }
      }, true); // Use capture phase to intercept before LiveView
    }

    // Reset state when editor mounts
    window.editorUnsavedChanges.hasChanges = false;
    window.editorUnsavedChanges.isNavigating = false;
  </script>

  <script>
    // Listen for changes status from LiveView
    window.addEventListener('phx:changes-status', function(event) {
      window.editorUnsavedChanges.hasChanges = event.detail.has_changes;
    });

    // Listen for confirmation request from LiveView
    window.addEventListener('phx:confirm-navigation', function(event) {
      console.log("Confirm navigation event received:", event.detail);
      const message = event.detail.message;
      if (confirm(message)) {
        console.log("User confirmed, navigating...");
        // User confirmed, mark as navigating and trigger cancel event
        window.editorUnsavedChanges.isNavigating = true;
        window.editorUnsavedChanges.hasChanges = false;

        // Trigger the hidden button to navigate
        const hiddenCancelButton = document.getElementById('confirmed-cancel-button');
        if (hiddenCancelButton) {
          hiddenCancelButton.click();
        }
      } else {
        console.log("User cancelled navigation");
      }
    });
  </script>

  <%!-- Hidden button for confirmed cancellation --%>
  <button
    id="confirmed-cancel-button"
    phx-click="cancel"
    style="display: none;"
    aria-hidden="true"
  >
  </button>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
