<div id={"chat-editor-#{@chat_editor.id}"} class="chat-panel ui-editor-shell flex h-full min-h-0 flex-col" data-testid="chat-editor" phx-hook="ChatSurface">
  <div class="chat-panel-header flex shrink-0 items-center justify-between gap-3 px-4 py-3">
    <div class="chat-panel-title flex min-w-0 flex-1 items-center justify-between gap-3">
      <span class="chat-panel-title-main">
        <%= if @chat_editor.needs_api_key? do %>
          <%= dgettext("ui", "AI Chat Setup") %>
        <% else %>
          <%= @chat_editor.title %>
        <% end %>
      </span>

      <%= unless @chat_editor.needs_api_key? do %>
        <span class="chat-model-selector-wrap relative shrink-0">
          <button
            class="chat-model-selector-button chat-model-selector-inline ui-button ui-button-secondary inline-flex items-center gap-2"
            type="button"
            phx-click="toggle_chat_model_selector"
            phx-target={@myself}
            data-testid="chat-model-selector-button"
          >
            <span><%= @chat_editor.effective_model || dgettext("ui", "No model") %></span>
            <span class="chat-model-selector-caret">▾</span>
          </button>

          <%= if @chat_editor.model_selector_open? and @chat_editor.available_models != [] do %>
            <div class="chat-model-selector-menu ui-dropdown-menu absolute right-0 top-full z-10 mt-2 flex min-w-56 flex-col">
              <%= for group <- @chat_editor.available_model_groups do %>
                <section class="chat-model-provider-group" data-testid="chat-model-provider-group" data-provider={group.provider}>
                  <%= if length(@chat_editor.available_model_groups) > 1 do %>
                    <div class="chat-model-provider-header"><%= group.label %></div>
                  <% end %>

                  <%= for model <- group.models do %>
                    <button
                      class={[
                        "chat-model-selector-option ui-dropdown-item flex items-center justify-between gap-2 text-left",
                        if(model.id == @chat_editor.effective_model, do: "active")
                      ]}
                      type="button"
                      phx-click="select_chat_model"
                      phx-target={@myself}
                      phx-value-model={model.id}
                      data-testid="chat-model-selector-option"
                      data-provider={group.provider}
                    >
                      <span class="chat-model-selector-option-name"><%= model.name || model.id %></span>
                    </button>
                  <% end %>
                </section>
              <% end %>
            </div>
          <% end %>
        </span>
      <% end %>
    </div>
  </div>

  <div class="chat-messages chat-surface-scroll min-h-0 flex-1 overflow-auto">
    <%= if @chat_editor.needs_api_key? do %>
      <div class="chat-welcome chat-api-key-state ui-section-card flex flex-col items-start gap-3 p-4" data-testid="chat-api-key-required">
        <div class="chat-welcome-icon">🔑</div>
        <h2><%= dgettext("ui", "API Key Required") %></h2>
        <p><%= dgettext("ui", "Configure an API key in Settings to enable AI chat.") %></p>
        <div class="api-key-form">
          <button class="api-key-submit ui-button ui-button-primary" type="button" phx-click="open_chat_settings" phx-target={@myself}><%= dgettext("ui", "Open Settings") %></button>
        </div>
      </div>
    <% else %>
    <%= if Enum.empty?(@chat_editor.messages) and not @chat_editor.is_streaming do %>
      <div class="chat-welcome ui-section-card flex flex-col items-start gap-3 p-4">
        <div class="chat-welcome-icon">🤖</div>
        <h2><%= dgettext("ui", "Welcome to the AI Assistant") %></h2>
        <p><%= dgettext("ui", "I can help you manage your blog with rich visualizations. Try asking me to:") %></p>
        <ul>
          <li><%= dgettext("ui", "Search for posts about a specific topic") %></li>
          <li><%= dgettext("ui", "Show a chart of posts published per month") %></li>
          <li><%= dgettext("ui", "Compare my recent posts in a table") %></li>
          <li><%= dgettext("ui", "Update metadata for posts or media") %></li>
          <li><%= dgettext("ui", "Show post statistics by year in tabs with charts") %></li>
        </ul>
      </div>
    <% else %>
      <%= for message <- @chat_editor.messages do %>
        <div class={["chat-message flex items-start gap-3", to_string(message.role || "assistant")]}> 
          <div class="chat-message-avatar"><%= if message.role == :user, do: "👤", else: "🤖" %></div>
          <div class="chat-message-content ui-section-card">
            <div class="chat-message-header"><span class="chat-message-role"><%= message_role_label(message.role) %></span></div>
            <.chat_tool_markers markers={message.tool_markers} />

            <%= if message.role == :assistant do %>
              <div class="chat-message-text"><%= markdown_html(message.content || "") %></div>
              <%= for surface <- message.inline_surfaces do %>
                <.chat_surface surface={surface} myself={@myself} />
              <% end %>
            <% else %>
              <div class="chat-message-text chat-user-message-text" data-testid="chat-user-message-text"><%= message.content || "" %></div>
            <% end %>
          </div>
        </div>

      <% end %>

      <%= if @chat_editor.pending_user_message do %>
        <div class="chat-message user pending flex items-start gap-3" data-testid="chat-pending-user-message">
          <div class="chat-message-avatar">👤</div>
          <div class="chat-message-content ui-section-card">
            <div class="chat-message-header">
              <span class="chat-message-role"><%= message_role_label(:user) %></span>
            </div>
            <div class="chat-message-text chat-user-message-text" data-testid="chat-user-message-text"><%= @chat_editor.pending_user_message %></div>
          </div>
        </div>
      <% end %>

      <%= if @chat_editor.is_streaming and (@chat_editor.streaming_content != "" or @chat_editor.streaming_tool_markers != []) do %>
        <div class="chat-message assistant streaming flex items-start gap-3" data-testid="chat-streaming-message">
          <div class="chat-message-avatar">🤖</div>
          <div class="chat-message-content ui-section-card">
            <div class="chat-message-header">
              <span class="chat-message-role"><%= message_role_label(:assistant) %></span>
              <span class="streaming-indicator">●</span>
            </div>
            <.chat_tool_markers markers={@chat_editor.streaming_tool_markers} />

            <%= if @chat_editor.streaming_content != "" do %>
              <div class="chat-message-text"><%= markdown_html(@chat_editor.streaming_content) %></div>
            <% end %>
            <%= for surface <- @chat_editor.streaming_inline_surfaces do %>
              <.chat_surface surface={surface} myself={@myself} />
            <% end %>
          </div>
        </div>
      <% end %>

      <%= if @chat_editor.is_streaming and @chat_editor.streaming_content == "" and @chat_editor.streaming_tool_markers == [] do %>
        <div class="chat-message assistant thinking flex items-start gap-3" data-testid="chat-streaming-thinking">
          <div class="chat-message-avatar">🤖</div>
          <div class="chat-message-content">
            <div class="chat-thinking-indicator">
              <span></span><span></span><span></span>
            </div>
          </div>
        </div>
      <% end %>
    <% end %>
    <% end %>
  </div>

  <%= unless @chat_editor.needs_api_key? do %>
    <div class="chat-input-container ui-field-stack flex shrink-0 flex-col gap-3" data-testid="chat-input-container">
      <%= if @chat_editor.is_streaming do %>
        <button class="chat-abort-button ui-button ui-button-secondary" data-testid="chat-abort-button" type="button" phx-click="abort_chat_editor_message" phx-target={@myself}>◼ <%= dgettext("ui", "Stop") %></button>
      <% end %>

      <form class="chat-input-wrapper flex items-end gap-2" phx-change="change_chat_editor_input" phx-submit="send_chat_editor_message" phx-target={@myself}>
        <textarea class="chat-input chat-surface-input ui-textarea" name="message" rows="1" placeholder={dgettext("ui", "Type a message...")} disabled={@chat_editor.is_streaming}><%= @chat_editor.input %></textarea>
        <button class="chat-send-button ui-button ui-button-primary" data-testid="chat-send-button" type="button" phx-click="send_chat_editor_message" phx-target={@myself} disabled={@chat_editor.send_disabled?}>↑</button>
      </form>

      <%= if @chat_editor.action_error do %>
        <p class="chat-surface-error"><%= @chat_editor.action_error %></p>
      <% end %>
    </div>
  <% end %>
</div>