<div class="max-w-7xl mx-auto">
  <div class="mb-4 md:mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
    <div>
      <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Users</h1>
      <p class="mt-1 md:mt-2 text-sm md:text-base text-gray-600">Manage all users across tenants</p>
    </div>
    <%= link_to new_tenant_admin_user_path, class: "px-3 md:px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center text-sm" do %>
      <svg class="w-4 h-4 md:w-5 md:h-5 mr-1 md:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
      </svg>
      Add User
    <% end %>
  </div>

  <!-- Search Form -->
  <div class="mb-4 md:mb-6 bg-white rounded-lg shadow p-3 md:p-4">
    <%= form_with url: tenant_admin_users_path, method: :get, local: true, class: "flex flex-col sm:flex-row gap-2 sm:gap-4" do |f| %>
      <div class="flex-1">
        <%= f.text_field :search, value: params[:search], placeholder: "Search by email...", class: "w-full px-3 md:px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" %>
      </div>
      <%= f.submit "Search", class: "px-4 md:px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm cursor-pointer" %>
    <% end %>
  </div>

  <!-- Users Table -->
  <div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
            <th class="hidden lg:table-cell px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Website</th>
            <th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Admin</th>
            <th class="hidden md:table-cell px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sign-in Count</th>
            <th class="hidden sm:table-cell px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Sign-in</th>
            <th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <% if @users.any? %>
            <% @users.each do |user| %>
              <tr>
                <td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                  <%= link_to user.email, tenant_admin_user_path(user), class: "text-blue-600 hover:text-blue-800" %>
                </td>
                <td class="hidden lg:table-cell px-4 md:px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  N/A
                </td>
                <td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  <% if user.respond_to?(:admin) && user.admin %>
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                      Yes
                    </span>
                  <% else %>
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                      No
                    </span>
                  <% end %>
                </td>
                <td class="hidden md:table-cell px-4 md:px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  <%= user.respond_to?(:sign_in_count) ? user.sign_in_count : 'N/A' %>
                </td>
                <td class="hidden sm:table-cell px-4 md:px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  <%= user.respond_to?(:last_sign_in_at) && user.last_sign_in_at ? format_date(user.last_sign_in_at) : 'Never' %>
                </td>
                <td class="px-4 md:px-6 py-4 whitespace-nowrap text-sm">
                  <%= link_to "View", tenant_admin_user_path(user), class: "text-blue-600 hover:text-blue-800 mr-2 md:mr-3" %>
                  <%= link_to "Edit", edit_tenant_admin_user_path(user), class: "text-green-600 hover:text-green-800" %>
                </td>
              </tr>
            <% end %>
          <% else %>
          <tr>
            <td colspan="6" class="px-6 py-12 text-center">
              <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
              </svg>
              <h3 class="mt-2 text-sm font-medium text-gray-900">No users found</h3>
              <p class="mt-1 text-sm text-gray-500">Get started by adding a new user.</p>
              <div class="mt-6">
                <%= link_to new_tenant_admin_user_path, class: "inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" do %>
                  <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                  </svg>
                  Add User
                <% end %>
              </div>
            </td>
          </tr>
          <% end %>
        </tbody>
      </table>
    </div>
  </div>
</div>
