<div class="post-editor ui-editor-shell flex h-full min-h-0 flex-col" data-testid="post-editor">
  <div class="editor-header ui-editor-header flex shrink-0 items-start justify-between gap-3">
    <div class="flex min-w-0 flex-1 overflow-hidden">
      <div class={["ui-tab ui-tab-active ui-editor-tab-current inline-flex max-w-full items-center gap-2 overflow-hidden px-3 py-2", if(@post_editor.dirty?, do: "dirty")]}> 
        <span class="truncate" data-testid="editor-title"><%= @post_editor.display_title %></span>
        <%= if @post_editor.dirty? do %>
          <span class="editor-tab-dirty" title={dgettext("ui", "Unsaved")}>●</span>
        <% end %>
      </div>
    </div>

    <div class="ui-editor-actions flex flex-wrap items-center justify-end gap-2">
      <span class={["status-badge", "ui-badge", "status-#{@post_editor.status}"]} data-testid="post-status-badge">
        <%= post_status_label(@post_editor.status) %>
      </span>
      <%= if @post_editor.save_state in [:saving] do %>
        <span class="auto-save-indicator"><%= post_editor_save_state_label(@post_editor.save_state) %></span>
      <% end %>

      <div class="quick-actions-wrapper relative">
        <button
          class="secondary quick-actions-btn ui-button ui-button-secondary inline-flex items-center gap-2"
          type="button"
          phx-click="toggle_post_editor_quick_actions"
          phx-target={@myself}
        >
          <span class="quick-actions-btn-icon">⚡</span>
          <span class="quick-actions-btn-label"><%= dgettext("ui", "Quick Actions") %></span>
        </button>

        <%= if @post_editor.quick_actions_open? do %>
          <div class="quick-actions-menu ui-dropdown-menu absolute right-0 top-full z-10 mt-2 flex min-w-72 flex-col">
            <button
              class="quick-action-item ui-dropdown-item flex items-start gap-3 text-left"
              data-testid="editor-toolbar-overlay-button"
              type="button"
              phx-click="open_overlay"
              phx-value-kind="ai_suggestions"
              disabled={not @post_editor.detect_language_enabled?}
            >
              <span class="quick-action-icon">🤖</span>
              <span class="quick-action-text flex min-w-0 flex-1 flex-col">
                <strong><%= dgettext("ui", "AI Suggestions") %></strong>
                <small><%= dgettext("ui", "Review title, excerpt, and content suggestions") %></small>
              </span>
            </button>

            <div class="quick-actions-divider"></div>

            <button
              class="quick-action-item ui-dropdown-item flex items-start gap-3 text-left"
              data-testid="editor-toolbar-overlay-button"
              type="button"
              phx-click="open_overlay"
              phx-value-kind="language_picker"
              disabled={not @post_editor.can_translate?}
            >
              <span class="quick-action-icon">🌍</span>
              <span class="quick-action-text flex min-w-0 flex-1 flex-col">
                <strong><%= dgettext("ui", "Translate") %></strong>
                <small><%= dgettext("ui", "Select a target language for this post") %></small>
              </span>
            </button>
          </div>
        <% end %>
      </div>

      <%= if @post_editor.can_publish? do %>
        <button class="success ui-button ui-button-primary" data-testid="post-publish-button" type="button" phx-click="publish_post_editor" phx-target={@myself}>
          <%= dgettext("ui", "Publish") %>
        </button>
      <% end %>
      <%= if @post_editor.can_publish? do %>
        <button class="secondary danger ui-button ui-button-secondary ui-button-danger" data-testid="post-discard-button" type="button" phx-click="discard_post_editor" phx-target={@myself} title={@post_editor.discard_title}>
          <%= @post_editor.discard_label %>
        </button>
      <% end %>
      <%= if @post_editor.can_delete? do %>
        <button class="secondary danger ui-button ui-button-secondary ui-button-danger" data-testid="post-delete-button" type="button" phx-click="delete_post_editor" phx-target={@myself}>
          <%= dgettext("ui", "Delete") %>
        </button>
      <% end %>
    </div>
  </div>

  <form class="post-editor-form editor-content flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-4" data-testid="post-editor-form" phx-change="change_post_editor" phx-target={@myself}>
    <div class="metadata-toggle-header flex items-center justify-between gap-3">
      <button class={["metadata-toggle", if(@post_editor.metadata_expanded, do: "expanded")]} type="button" phx-click="toggle_post_metadata" phx-target={@myself}>
        <span class="metadata-toggle-chevron"><%= if @post_editor.metadata_expanded, do: "▼", else: "▶" %></span>
        <span><%= dgettext("ui", "Metadata") %></span>
      </button>

      <div class="editor-translations-flags flex flex-wrap items-center gap-2" aria-label={dgettext("ui", "Translations")}>
        <%= for flag <- @post_editor.translation_flags do %>
          <button
            class={[
              "editor-translation-flag",
              "status-#{flag.status}",
              if(flag.active, do: "active")
            ]}
            type="button"
            phx-click="select_post_editor_language"
            phx-value-language={flag.language}
            phx-target={@myself}
            title={flag.label}
            aria-label={flag.label}
          >
            <%= flag.flag %>
          </button>
        <% end %>
      </div>
    </div>

    <div class={["editor-header-row grid gap-4 xl:grid-cols-[minmax(0,2fr)_minmax(280px,1fr)]", if(not @post_editor.metadata_expanded, do: "is-collapsed")]}> 
        <div class="editor-meta flex min-w-0 flex-col gap-4">
          <div class="editor-field ui-field-stack flex flex-col gap-1.5">
            <label><%= dgettext("ui", "Title") %></label>
            <input class="post-editor-input ui-input" type="text" name="post_editor[title]" value={@post_editor.form["title"]} />
          </div>

          <div class="editor-field ui-field-stack flex flex-col gap-1.5">
            <label><%= dgettext("ui", "Tags") %></label>
            <div class="tag-input-container relative"> 
              <input type="hidden" name="post_editor[tags]" value={@post_editor.form["tags"]} />
              <div class="tag-input-wrapper flex flex-wrap items-center gap-2">
                <%= for tag <- @post_editor.tag_chips do %>
                  <span class={["tag-chip", if(tag.color, do: "has-color")]} style={tag_chip_style(tag.color)}>
                    <span><%= tag.name %></span>
                    <button class="tag-chip-remove" type="button" phx-click="remove_post_editor_tag" phx-value-tag={tag.name} phx-target={@myself} aria-label={dgettext("ui", "Remove tag")}>×</button>
                  </span>
                <% end %>

                <input
                  class="tag-input-field"
                  type="text"
                  name="post_editor[tag_query]"
                  value={@post_editor.tag_query}
                  placeholder={dgettext("ui", "Add tag")}
                  autocomplete="off"
                />
              </div>

              <%= if String.trim(@post_editor.tag_query || "") != "" and (Enum.any?(@post_editor.tag_suggestions) or @post_editor.tag_query_addable?) do %>
                <div class="tag-suggestions mt-2 flex flex-col">
                  <%= for tag <- @post_editor.tag_suggestions do %>
                    <button class="tag-suggestion" type="button" phx-click="add_post_editor_tag" phx-value-tag={tag.name} phx-target={@myself}>
                      <%= if tag.color do %>
                        <span class="tag-suggestion-color" style={"background-color: #{tag.color}"}></span>
                      <% end %>
                      <span class="tag-suggestion-name"><%= tag.name %></span>
                    </button>
                  <% end %>

                  <%= if @post_editor.tag_query_addable? do %>
                    <button class="tag-suggestion create-new" type="button" phx-click="add_post_editor_tag" phx-value-tag={@post_editor.tag_query} phx-target={@myself}>
                      <span class="tag-suggestion-icon">+</span>
                      <span><%= dgettext("ui", "Create tag") %>: <strong><%= @post_editor.tag_query %></strong></span>
                    </button>
                  <% end %>
                </div>
              <% end %>
            </div>
          </div>

          <div class="editor-field ui-field-stack flex flex-col gap-1.5">
            <label><%= dgettext("ui", "Author") %></label>
            <input class="post-editor-input ui-input" type="text" name="post_editor[author]" value={@post_editor.form["author"]} />
          </div>

          <div class="editor-field ui-field-stack flex flex-col gap-1.5">
            <label><%= dgettext("ui", "Language") %></label>
            <div class="editor-language-row flex items-center gap-2">
              <select class="post-editor-input ui-input" name="post_editor[language]">
                <%= for language <- @post_editor.languages do %>
                  <option value={language} selected={language == @post_editor.form["language"]}><%= String.upcase(language) %></option>
                <% end %>
              </select>

              <button
                class="secondary compact ui-button ui-button-secondary ui-button-compact"
                data-testid="post-detect-language-button"
                type="button"
                phx-click="detect_post_editor_language"
                phx-target={@myself}
                disabled={not @post_editor.detect_language_enabled?}
              >
                <%= dgettext("ui", "Detect") %>
              </button>
            </div>
          </div>

          <div class="editor-field ui-field-stack flex flex-col gap-1.5">
            <label class="editor-checkbox-label">
              <input type="hidden" name="post_editor[do_not_translate]" value="false" />
              <input type="checkbox" name="post_editor[do_not_translate]" value="true" checked={@post_editor.form["do_not_translate"]} />
              <span><%= dgettext("ui", "Do Not Translate") %></span>
            </label>
          </div>

          <div class="editor-field-row ui-field-grid-2 grid gap-4 md:grid-cols-2">
            <div class="editor-field ui-field-stack flex flex-col gap-1.5">
              <label><%= dgettext("ui", "Slug") %></label>
              <input class="post-editor-input ui-input is-readonly ui-input-readonly" type="text" readonly value={@post_editor.slug} />
            </div>

            <div class="editor-field ui-field-stack flex flex-col gap-1.5">
              <label><%= dgettext("ui", "Categories") %></label>
              <div class="tag-input-container relative"> 
                <input type="hidden" name="post_editor[categories]" value={@post_editor.form["categories"]} />
                <div class="tag-input-wrapper flex flex-wrap items-center gap-2">
                  <%= for category <- @post_editor.category_values do %>
                    <span class="tag-chip">
                      <span><%= category %></span>
                      <button class="tag-chip-remove" type="button" phx-click="remove_post_editor_category" phx-value-category={category} phx-target={@myself} aria-label={dgettext("ui", "Remove category")}>×</button>
                    </span>
                  <% end %>

                  <input
                    class="tag-input-field"
                    type="text"
                    name="post_editor[category_query]"
                    value={@post_editor.category_query}
                    placeholder={dgettext("ui", "Add category")}
                    autocomplete="off"
                  />
                </div>

                <%= if String.trim(@post_editor.category_query || "") != "" and (Enum.any?(@post_editor.category_suggestions) or @post_editor.category_query_addable?) do %>
                  <div class="tag-suggestions mt-2 flex flex-col">
                    <%= for category <- @post_editor.category_suggestions do %>
                      <button class="tag-suggestion" type="button" phx-click="add_post_editor_category" phx-value-category={category} phx-target={@myself}>
                        <span class="tag-suggestion-name"><%= category %></span>
                      </button>
                    <% end %>

                    <%= if @post_editor.category_query_addable? do %>
                      <button class="tag-suggestion create-new" type="button" phx-click="add_post_editor_category" phx-value-category={@post_editor.category_query} phx-target={@myself}>
                        <span class="tag-suggestion-icon">+</span>
                        <span><%= dgettext("ui", "Create category") %>: <strong><%= @post_editor.category_query %></strong></span>
                      </button>
                    <% end %>
                  </div>
                <% end %>
              </div>
            </div>
          </div>

          <%= if @post_editor.show_template_selector? do %>
            <div class="editor-field ui-field-stack flex flex-col gap-1.5">
              <label><%= dgettext("ui", "Template") %></label>
              <select class="post-editor-input ui-input" name="post_editor[template_slug]">
                <option value=""><%= dgettext("ui", "Default") %></option>
                <%= for template <- @post_editor.template_options do %>
                  <option value={template.slug} selected={template.slug == @post_editor.form["template_slug"]}><%= template.title %></option>
                <% end %>
              </select>
            </div>
          <% end %>

          <div class="post-editor-links-panel flex flex-col gap-3">
            <strong><%= dgettext("ui", "Post Links") %></strong>
            <div class="post-editor-links-columns grid gap-4 md:grid-cols-2">
              <div>
                <span class="post-editor-links-label"><%= dgettext("ui", "Backlinks") %></span>
                <%= if Enum.any?(@post_editor.post_links.backlinks) do %>
                  <ul class="editor-list compact">
                    <%= for item <- @post_editor.post_links.backlinks do %>
                      <li><%= item.title %></li>
                    <% end %>
                  </ul>
                <% else %>
                  <span class="post-editor-empty"><%= dgettext("ui", "No items") %></span>
                <% end %>
              </div>
              <div>
                <span class="post-editor-links-label"><%= dgettext("ui", "Links To") %></span>
                <%= if Enum.any?(@post_editor.post_links.outlinks) do %>
                  <ul class="editor-list compact">
                    <%= for item <- @post_editor.post_links.outlinks do %>
                      <li><%= item.title %></li>
                    <% end %>
                  </ul>
                <% else %>
                  <span class="post-editor-empty"><%= dgettext("ui", "No items") %></span>
                <% end %>
              </div>
            </div>
          </div>
        </div>

        <aside class="editor-media-panel post-editor-side-panel flex flex-col gap-3">
          <div class="post-editor-side-panel-header">
            <strong><%= dgettext("ui", "Linked Media") %></strong>
          </div>

          <%= if Enum.any?(@post_editor.linked_media) do %>
            <ul class="post-editor-media-list flex flex-col gap-2">
              <%= for item <- @post_editor.linked_media do %>
                <li class="post-editor-media-item flex flex-col gap-1">
                  <span class="post-editor-media-title"><%= item.name %></span>
                  <span class="post-editor-media-meta"><%= dgettext("ui", "Order") %>: <%= item.sort_order %></span>
                </li>
              <% end %>
            </ul>
          <% else %>
            <div class="post-editor-empty"><%= dgettext("ui", "No linked media") %></div>
          <% end %>
        </aside>
      </div>

    <button class={["metadata-toggle", if(@post_editor.excerpt_expanded, do: "expanded")]} type="button" phx-click="toggle_post_excerpt" phx-target={@myself}>
      <span class="metadata-toggle-chevron"><%= if @post_editor.excerpt_expanded, do: "▼", else: "▶" %></span>
      <span><%= dgettext("ui", "Excerpt") %></span>
    </button>

    <div class={["editor-excerpt-panel", if(not @post_editor.excerpt_expanded, do: "is-collapsed")]}> 
      <div class="editor-field flex flex-col gap-1.5">
        <label><%= dgettext("ui", "Excerpt") %></label>
        <textarea class="post-editor-textarea post-editor-excerpt ui-textarea" name="post_editor[excerpt]" rows="4"><%= @post_editor.form["excerpt"] %></textarea>
      </div>
    </div>

    <div class="editor-body flex min-h-0 flex-1 flex-col overflow-hidden">
      <div class="editor-toolbar ui-toolbar flex items-center gap-3">
        <div class="editor-toolbar-left ui-toolbar-group flex items-center gap-2">
          <label><%= dgettext("ui", "Content") %></label>
        </div>

        <div class="editor-toolbar-center ui-toolbar-group flex flex-1 justify-center">
          <div class="editor-mode-toggle">
            <%= for mode <- [:markdown, :preview] do %>
              <button
                class={if(@post_editor.mode == mode, do: "active")}
                type="button"
                phx-click="set_post_editor_mode"
                phx-value-mode={mode}
                phx-target={@myself}
              >
                <%= post_editor_mode_label(mode) %>
              </button>
            <% end %>
          </div>
        </div>

        <div class="editor-toolbar-right ui-toolbar-group flex items-center gap-2">
          <%= if @post_editor.mode == :markdown do %>
            <button
              class="insert-post-link-button"
              data-testid="editor-toolbar-overlay-button"
              type="button"
              phx-click="open_overlay"
              phx-value-kind="insert_link"
            >
              <%= dgettext("ui", "Insert Link") %>
            </button>
            <button
              class="insert-media-button"
              data-testid="editor-toolbar-overlay-button"
              type="button"
              phx-click="open_overlay"
              phx-value-kind="insert_media"
            >
              <%= dgettext("ui", "Insert Media") %>
            </button>
          <% end %>

          <%= if @post_editor.gallery_count > 0 do %>
            <button
              class="gallery-button"
              data-testid="editor-toolbar-overlay-button"
              type="button"
              phx-click="open_overlay"
              phx-value-kind="gallery"
            >
              <%= dgettext("ui", "Gallery") %> (<%= @post_editor.gallery_count %>)
            </button>
          <% end %>
        </div>
      </div>

      <%= if @post_editor.mode == :preview do %>
        <div class="editor-preview post-editor-preview flex min-h-0 flex-1" data-testid="post-editor-preview">
          <%= if @post_editor.preview_url do %>
            <iframe class="editor-preview-frame" src={@post_editor.preview_url}></iframe>
          <% else %>
            <div class="post-editor-empty"><%= dgettext("ui", "Preview unavailable") %></div>
          <% end %>
        </div>
      <% else %>
        <div
          id={"post-editor-markdown-surface-#{@post_editor.id}"}
          class="post-editor-markdown-surface monaco-editor-shell"
          data-testid="post-editor-markdown-surface"
          phx-hook="MonacoEditor"
          data-monaco-editor-id={@post_editor.id}
          data-monaco-input-id={"post-editor-content-#{@post_editor.id}"}
          data-monaco-language="markdown-with-macros"
          data-monaco-word-wrap="on"
          data-monaco-insert-event="post-editor-insert-content"
        >
          <div id={"post-editor-monaco-#{@post_editor.id}"} class="monaco-editor-instance min-h-0 flex-1" phx-update="ignore"></div>
          <textarea id={"post-editor-content-#{@post_editor.id}"} class="monaco-editor-input post-editor-content" data-testid="post-editor-content" data-post-editor-id={@post_editor.id} name="post_editor[content]" rows="18" spellcheck="false"><%= @post_editor.form["content"] %></textarea>
        </div>
      <% end %>
    </div>
  </form>

  <div class="editor-footer flex shrink-0 flex-wrap gap-4">
    <span><strong><%= dgettext("ui", "Created") %>:</strong> <%= @post_editor.footer.created_at %></span>
    <span><strong><%= dgettext("ui", "Updated") %>:</strong> <%= @post_editor.footer.updated_at %></span>
    <%= if @post_editor.footer.published_at do %>
      <span><strong><%= dgettext("ui", "Published") %>:</strong> <%= @post_editor.footer.published_at %></span>
    <% end %>
  </div>
</div>
