<% content_for :title, "Users" %>

<div class="space-y-6">
  <div class="flex items-center justify-between">
    <div>
      <h2 class="text-3xl font-bold text-gray-900">User Management</h2>
      <p class="mt-1 text-sm text-gray-600">Manage user accounts and permissions</p>
    </div>
    <div>
      <%= link_to "Send Invitation", new_admin_invitation_path, class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
    </div>
  </div>

  <!-- Filters -->
  <div class="bg-white shadow rounded-lg p-4">
    <%= form_with url: admin_users_path, method: :get, class: "flex gap-4" do |f| %>
      <div class="flex-1">
        <%= f.text_field :q, value: params[:q], placeholder: "Search by email...", class: "block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
      </div>
      <div>
        <%= f.select :role, options_for_select([["All Roles", ""], ["Contributors", "contributor"], ["Reviewers", "reviewer"], ["Admins", "admin"]], params[:role]), {}, class: "block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
      </div>
      <div>
        <%= f.submit "Filter", class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700" %>
      </div>
    <% end %>
  </div>

  <!-- Users Table -->
  <div class="bg-white shadow rounded-lg overflow-hidden">
    <table class="min-w-full divide-y divide-gray-200">
      <thead class="bg-gray-50">
        <tr>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Primary Language</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Joined</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
          <th scope="col" class="relative px-6 py-3">
            <span class="sr-only">Actions</span>
          </th>
        </tr>
      </thead>
      <tbody class="bg-white divide-y divide-gray-200">
        <% @users.each do |user| %>
          <tr>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div>
                  <div class="text-sm font-medium text-gray-900">
                    <%= user.name || "(No name)" %>
                  </div>
                  <div class="text-sm text-gray-500">
                    <%= user.email %>
                  </div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                <%= case user.role
                    when 'admin' then 'bg-purple-100 text-purple-800'
                    when 'reviewer' then 'bg-blue-100 text-blue-800'
                    else 'bg-green-100 text-green-800'
                    end %>">
                <%= user.role %>
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
              <%= user.primary_language&.upcase || "-" %>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
              <%= user.invitation_accepted_at&.strftime("%b %d, %Y") || user.created_at.strftime("%b %d, %Y") %>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <% if user.invitation_accepted_at.present? %>
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                  Active
                </span>
              <% else %>
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                  Invited
                </span>
              <% end %>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <%= link_to "Edit", edit_admin_user_path(user), class: "text-blue-600 hover:text-blue-900 mr-4" %>
              <% if user != current_user && user != User.first %>
                <%= button_to "Delete", admin_user_path(user), method: :delete, data: { turbo_confirm: "Are you sure you want to delete this user?" }, class: "text-red-600 hover:text-red-900" %>
              <% end %>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>
