<div id={"chat-editor-#{@chat_editor.id}"} class="chat-panel" data-testid="chat-editor" phx-hook="ChatSurface">
  <div class="chat-panel-header">
    <div class="chat-panel-title">
      <%= if @chat_editor.needs_api_key? do %>
        <%= translated("chat.setupTitle") %>
      <% else %>
        <%= @chat_editor.title %>
      <% end %>
    </div>

    <%= unless @chat_editor.needs_api_key? do %>
      <div class="chat-panel-header-actions">
        <button
          class="chat-model-selector-button"
          type="button"
          phx-click="toggle_chat_model_selector"
          data-testid="chat-model-selector-button"
        >
          <span><%= @chat_editor.model || translated("chat.newChat") %></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">
            <%= for model <- @chat_editor.available_models do %>
              <button
                class={[
                  "chat-model-selector-option",
                  if(model.id == @chat_editor.model, do: "active")
                ]}
                type="button"
                phx-click="select_chat_model"
                phx-value-model={model.id}
              >
                <%= model.name %>
              </button>
            <% end %>
          </div>
        <% end %>
      </div>
    <% end %>
  </div>

  <div class="chat-messages chat-surface-scroll">
    <%= if @chat_editor.needs_api_key? do %>
      <div class="chat-welcome chat-api-key-state" data-testid="chat-api-key-required">
        <div class="chat-welcome-icon">🔑</div>
        <h2><%= translated("chat.apiKeyRequiredTitle") %></h2>
        <p><%= translated("chat.apiKeyRequiredDescription") %></p>
        <div class="api-key-form">
          <button class="api-key-submit" type="button" phx-click="open_chat_settings"><%= translated("chat.openSettings") %></button>
        </div>
      </div>
    <% else %>
    <%= if Enum.empty?(@chat_editor.messages) and not @chat_editor.is_streaming do %>
      <div class="chat-welcome">
        <div class="chat-welcome-icon">🤖</div>
        <h2><%= translated("chat.welcomeTitle") %></h2>
        <p><%= translated("chat.welcomeDescription") %></p>
        <ul>
          <li><%= translated("chat.welcomeTipSearch") %></li>
          <li><%= translated("chat.welcomeTipChart") %></li>
          <li><%= translated("chat.welcomeTipTable") %></li>
          <li><%= translated("chat.welcomeTipMetadata") %></li>
          <li><%= translated("chat.welcomeTipTabs") %></li>
        </ul>
      </div>
    <% else %>
      <%= if @chat_editor.pending_user_message do %>
        <div class="chat-message user pending" data-testid="chat-pending-user-message">
          <div class="chat-message-avatar">👤</div>
          <div class="chat-message-content">
            <div class="chat-message-header">
              <span class="chat-message-role"><%= message_role_label(:user) %></span>
            </div>
            <div class="chat-message-text"><%= @chat_editor.pending_user_message %></div>
          </div>
        </div>
      <% end %>

      <%= for message <- @chat_editor.messages do %>
        <div class={["chat-message", to_string(message.role || "assistant")]}>
          <div class="chat-message-avatar"><%= if message.role == :user, do: "👤", else: "🤖" %></div>
          <div class="chat-message-content">
            <div class="chat-message-header"><span class="chat-message-role"><%= message_role_label(message.role) %></span></div>
            <.chat_tool_markers markers={message.tool_markers} />

            <div class="chat-message-text">
              <%= if message.role == :assistant do %>
                <%= markdown_html(message.content || "") %>
              <% else %>
                <%= message.content || "" %>
              <% end %>
            </div>
          </div>
        </div>

        <%= for surface <- message.inline_surfaces do %>
          <.chat_surface surface={surface} />
        <% end %>

        <%= for surface <- message.tool_surfaces do %>
          <article class="chat-tool-surface" data-testid="chat-tool-surface">
            <%= if surface.title do %>
              <h3><%= surface.title %></h3>
            <% end %>

            <%= case tool_surface_type(surface) do %>
              <% "table" -> %>
                <div class="chat-tool-surface-table-wrap">
                  <table class="chat-tool-surface-table">
                    <thead>
                      <tr>
                        <%= for column <- surface.columns do %>
                          <th><%= column %></th>
                        <% end %>
                      </tr>
                    </thead>
                    <tbody>
                      <%= for row <- surface.rows do %>
                        <tr>
                          <%= for value <- row do %>
                            <td><%= value %></td>
                          <% end %>
                        </tr>
                      <% end %>
                    </tbody>
                  </table>
                </div>

              <% _other -> %>
                <pre class="chat-tool-surface-json"><%= Jason.encode!(surface.data, pretty: true) %></pre>
            <% end %>
          </article>
        <% end %>
      <% end %>

      <%= if @chat_editor.is_streaming and (@chat_editor.streaming_content != "" or @chat_editor.streaming_tool_markers != []) do %>
        <div class="chat-message assistant streaming" data-testid="chat-streaming-message">
          <div class="chat-message-avatar">🤖</div>
          <div class="chat-message-content">
            <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 %>
          </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" 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" data-testid="chat-input-container">
      <%= if @chat_editor.is_streaming do %>
        <button class="chat-abort-button" data-testid="chat-abort-button" type="button" phx-click="abort_chat_editor_message">◼ <%= translated("chat.stop") %></button>
      <% end %>

      <form class="chat-input-wrapper" phx-change="change_chat_editor_input" phx-submit="send_chat_editor_message">
        <textarea class="chat-input chat-surface-input" name="message" rows="1" placeholder={translated("chat.inputPlaceholder")}><%= @chat_editor.input %></textarea>
        <button class="chat-send-button" data-testid="chat-send-button" type="button" phx-click="send_chat_editor_message" 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>