<%= turbo_frame_tag chat_frame do %>
  <div class="p-4 flex flex-col h-full">
    <nav class="mb-6">
      <% back_path = @last_viewed_chat ? chat_path(@last_viewed_chat) : new_chat_path %>
      <%= link_to back_path, class: "w-9 h-9 flex items-center justify-center rounded-lg hover:bg-surface-hover" do %>
        <%= icon("arrow-left", color: "gray" ) %>
      <% end %>
    </nav>

    <div class="grow">
      <h1 class="text-xl font-medium mb-6">Chats</h1>

      <% if @chats.any? %>
        <div class="space-y-2 px-0.5">
          <%= render @chats %>
        </div>
      <% else %>
        <div class="text-center py-12 bg-white rounded-lg border border-gray-200">
          <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <%= icon("message-square", size: "lg") %>
          </div>
          <h3 class="text-lg font-medium text-gray-900 mb-1">No chats yet</h3>
          <p class="text-gray-500 mb-4">Start a new conversation with the AI assistant</p>
          <%= link_to "Start a chat", new_chat_path, class: "inline-flex items-center gap-2 py-2 px-4 bg-gray-800 text-white rounded-lg text-sm font-medium" %>
        </div>
      <% end %>
    </div>

    <%= render "messages/chat_form" %>
  </div>
<% end %>
