<div class="media-editor ui-editor-shell flex h-full min-h-0 flex-col" data-testid="media-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(@media_editor.dirty?, do: "dirty")
      ]}>
        <span class="truncate" data-testid="editor-title"><%= @media_editor.display_title %></span>
        <%= if @media_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">
      <%= if @media_editor.save_state in [:dirty, :saved] do %>
        <span class="auto-save-indicator"><%= media_editor_save_state_label(@media_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_media_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 @media_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">
            <%= if @media_editor.is_image do %>
              <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"
              >
                <span class="quick-action-text flex min-w-0 flex-1 flex-col">
                  <strong><%= dgettext("ui", "AI Suggestions") %></strong>
                  <small><%= dgettext("ui", "Review title, alt text, and caption suggestions") %></small>
                </span>
                <span class="quick-action-icon">🤖</span>
              </button>

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

            <button
              class="quick-action-item ui-dropdown-item flex items-start gap-3 text-left"
              type="button"
              phx-click="detect_media_editor_language"
              phx-target={@myself}
              disabled={not @media_editor.can_detect_language?}
            >
              <span class="quick-action-text flex min-w-0 flex-1 flex-col">
                <strong><%= dgettext("ui", "Detect Language") %></strong>
                <small><%= dgettext("ui", "Persist the detected language for this media item") %></small>
              </span>
              <span class="quick-action-icon">🔍</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 @media_editor.can_translate?}
            >
              <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 media item") %></small>
              </span>
              <span class="quick-action-icon">🌍</span>
            </button>
          </div>
        <% end %>
      </div>

      <button class="secondary ui-button ui-button-secondary" type="button" phx-click="replace_media_editor_file" phx-target={@myself}>
        <%= dgettext("ui", "Replace File") %>
      </button>
      <button class="ui-button ui-button-primary" data-testid="media-save-button" type="button" phx-click="save_media_editor" phx-target={@myself}>
        <%= dgettext("ui", "Save") %>
      </button>
      <button
        class="secondary danger ui-button ui-button-secondary ui-button-danger"
        data-testid="media-delete-button"
        type="button"
        phx-click="open_overlay"
        phx-value-kind="confirm_delete"
      >
        <%= dgettext("ui", "Delete") %>
      </button>
    </div>
  </div>

  <div class="editor-content media-editor grid min-h-0 flex-1 gap-4 overflow-auto p-4 xl:grid-cols-[minmax(320px,1fr)_minmax(0,1.2fr)]">
    <div class="media-preview flex min-h-[16rem] items-center justify-center">
      <%= if @media_editor.is_image and @media_editor.preview_url do %>
        <div class="media-preview-image">
          <img src={@media_editor.preview_url} alt={@media_editor.form["alt"] || @media_editor.original_name} />
        </div>
      <% else %>
        <div class="media-preview-placeholder flex h-full w-full flex-col items-center justify-center gap-3">
          <svg width="64" height="64" viewBox="0 0 24 24" fill="currentColor" opacity="0.3">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"></path>
          </svg>
          <span><%= @media_editor.original_name %></span>
        </div>
      <% end %>
    </div>

    <div class="media-details min-w-0">
      <form class="media-editor-details-form flex flex-col gap-4" data-testid="media-editor-form" phx-change="change_media_editor" phx-target={@myself}>
        <div class="editor-field ui-field-stack flex flex-col gap-1.5">
          <label><%= dgettext("ui", "File Name") %></label>
          <input class="post-editor-input ui-input disabled ui-input-disabled" type="text" value={@media_editor.original_name} disabled />
        </div>

        <div class="editor-field ui-field-stack flex flex-col gap-1.5">
          <label><%= dgettext("ui", "MIME Type") %></label>
          <input class="post-editor-input ui-input disabled ui-input-disabled" type="text" value={@media_editor.mime_type} disabled />
        </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", "Size") %></label>
            <input class="post-editor-input ui-input disabled ui-input-disabled" type="text" value={@media_editor.file_size} disabled />
          </div>

          <%= if @media_editor.dimensions do %>
            <div class="editor-field ui-field-stack flex flex-col gap-1.5">
              <label><%= dgettext("ui", "Dimensions") %></label>
              <input class="post-editor-input ui-input disabled ui-input-disabled" type="text" value={@media_editor.dimensions} disabled />
            </div>
          <% end %>
        </div>

        <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="media_editor[title]" value={@media_editor.form["title"]} />
        </div>

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

        <div class="editor-field ui-field-stack flex flex-col gap-1.5">
          <label><%= dgettext("ui", "Caption") %></label>
          <textarea class="post-editor-textarea ui-textarea" name="media_editor[caption]" rows="3"><%= @media_editor.form["caption"] %></textarea>
        </div>

        <div class="editor-field ui-field-stack flex flex-col gap-1.5">
          <label><%= dgettext("ui", "Tags") %></label>
          <input class="post-editor-input ui-input" type="text" name="media_editor[tags]" value={@media_editor.form["tags"]} />
        </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="media_editor[author]" value={@media_editor.form["author"]} />
        </div>

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

      <%= if @media_editor.form["language"] not in [nil, ""] do %>
        <div class="editor-field media-translations-section flex flex-col gap-2">
          <label><%= dgettext("ui", "Translations") %></label>

          <%= if Enum.empty?(@media_editor.translations) do %>
            <div class="no-linked-posts"><%= dgettext("ui", "No translations") %></div>
          <% else %>
            <div class="linked-posts-list flex flex-col gap-2">
              <%= for translation <- @media_editor.translations do %>
                <div class="linked-post-item flex items-center justify-between gap-2">
                  <button
                    class="linked-post-title linked-post-link"
                    type="button"
                    phx-click="edit_media_translation"
                    phx-target={@myself}
                    phx-value-language={translation.language}
                  >
                    <%= translation.flag %> <%= language_label(translation.language) %><%= if translation.title, do: " — #{translation.title}" %>
                  </button>
                  <button class="secondary compact ui-button ui-button-secondary ui-button-compact" type="button" phx-click="refresh_media_translation" phx-target={@myself} phx-value-language={translation.language}>
                    <%= dgettext("ui", "Refresh") %>
                  </button>
                  <button class="unlink-btn" type="button" phx-click="delete_media_translation" phx-target={@myself} phx-value-language={translation.language}>×</button>
                </div>
              <% end %>
            </div>
          <% end %>
        </div>
      <% end %>

      <div class="editor-field linked-posts-section flex flex-col gap-2">
        <label>
          <%= dgettext("ui", "Linked Posts") %>
          <button class="add-link-btn" type="button" phx-click="toggle_media_post_picker" phx-target={@myself}>
            <%= dgettext("ui", "Link to Post") %>
          </button>
        </label>

        <%= if @media_editor.post_picker_open? do %>
          <div class="post-picker flex flex-col gap-3">
            <div class="post-picker-search">
              <input
                type="text"
                name="media_post_picker[query]"
                value={@media_editor.post_picker_query}
                placeholder={dgettext("ui", "Search posts")}
                phx-change="change_media_post_picker"
                phx-target={@myself}
              />
            </div>

            <%= if Enum.empty?(@media_editor.post_picker_results) do %>
              <div class="no-posts"><%= dgettext("ui", "No posts to link") %></div>
            <% else %>
              <div class="post-picker-list flex flex-col gap-2">
                <%= for result <- @media_editor.post_picker_results do %>
                  <button class="post-picker-item" type="button" phx-click="link_media_to_post" phx-target={@myself} phx-value-post-id={result.post_id}>
                    <%= result.title %>
                  </button>
                <% end %>
                <%= if @media_editor.post_picker_overflow_count > 0 do %>
                  <div class="post-picker-more"><%= dgettext("ui", "and %{count} more", count: @media_editor.post_picker_overflow_count) %></div>
                <% end %>
              </div>
            <% end %>
          </div>
        <% end %>

        <%= if Enum.empty?(@media_editor.linked_posts) do %>
          <div class="no-linked-posts"><%= dgettext("ui", "Not linked to any posts") %></div>
        <% else %>
          <div class="linked-posts-list flex flex-col gap-2">
            <%= for linked_post <- @media_editor.linked_posts do %>
              <div class="linked-post-item flex items-center justify-between gap-2">
                <button
                  class="linked-post-title linked-post-link"
                  type="button"
                  phx-click="pin_sidebar_item"
                  phx-value-route="post"
                  phx-value-id={linked_post.post_id}
                  phx-value-title={linked_post.title}
                  phx-value-subtitle="linked post"
                >
                  📄 <%= linked_post.title %>
                </button>
                <button class="unlink-btn" type="button" phx-click="unlink_media_from_post" phx-target={@myself} phx-value-post-id={linked_post.post_id}>×</button>
              </div>
            <% end %>
          </div>
        <% end %>
      </div>
    </div>
  </div>

  <%= if @media_editor.editing_translation do %>
    <div class="translation-modal-backdrop">
      <div class="translation-modal flex max-h-[80vh] w-full max-w-2xl flex-col overflow-hidden">
        <div class="translation-modal-header flex items-center justify-between gap-3">
          <h2><%= dgettext("ui", "Edit Translation") %></h2>
          <button class="translation-modal-close" type="button" phx-click="close_media_translation_editor" phx-target={@myself}>×</button>
        </div>
        <form class="translation-modal-body flex flex-col gap-4 overflow-auto" phx-change="change_media_translation" phx-target={@myself}>
          <input type="hidden" name="media_translation[language]" value={@media_editor.editing_translation["language"]} />
          <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="media_translation[title]" value={@media_editor.editing_translation["title"]} />
          </div>
          <div class="editor-field ui-field-stack flex flex-col gap-1.5">
            <label><%= dgettext("ui", "Alt Text") %></label>
            <input class="post-editor-input ui-input" type="text" name="media_translation[alt]" value={@media_editor.editing_translation["alt"]} />
          </div>
          <div class="editor-field ui-field-stack flex flex-col gap-1.5">
            <label><%= dgettext("ui", "Caption") %></label>
            <textarea class="post-editor-textarea ui-textarea" name="media_translation[caption]" rows="3"><%= @media_editor.editing_translation["caption"] %></textarea>
          </div>
        </form>
        <div class="translation-modal-footer flex items-center justify-end gap-2">
          <button class="secondary ui-button ui-button-secondary" type="button" phx-click="close_media_translation_editor" phx-target={@myself}><%= dgettext("ui", "Cancel") %></button>
          <button class="ui-button ui-button-primary" type="button" phx-click="save_media_translation" phx-target={@myself}><%= dgettext("ui", "Save") %></button>
        </div>
      </div>
    </div>
  <% end %>
</div>
