<div class="max-w-6xl mx-auto p-6 space-y-6">
  <header class="text-center mb-8">
    <h1 class="text-4xl font-bold text-surface-content mb-2">Admin Management</h1>
    <p class="text-muted">Who can access the admin panel?</p>
  </header>

  <div class="border border-primary rounded-xl p-6 bg-dark">
    <h2 class="text-2xl font-semibold text-green mb-4">Promote</h2>
    <div class="mb-4">
      <input type="text" id="user-search" placeholder="Search by name or Slack ID..." class="w-full px-4 py-2 bg-darker border border-surface-200 rounded-lg text-surface-content placeholder-gray-500 focus:outline-none focus:border-primary" data-controller="admin-user-search" data-action="input->admin-user-search#search">
    </div>
    <div id="search-results" class="space-y-2"></div>
  </div>

  <div class="border border-primary rounded-xl p-6 bg-dark">
    <h2 class="text-2xl font-semibold text-red mb-4">Superadmins (<%= @superadmins.count %>)</h2>
    <% if @superadmins.any? %>
      <div class="overflow-x-auto">
        <table class="w-full text-left">
          <thead>
            <tr class="border-b border-surface-200">
              <th class="py-3 px-4">User</th>
              <th class="py-3 px-4">Slack ID</th>
              <th class="py-3 px-4">Actions</th>
            </tr>
          </thead>
          <tbody>
            <% @superadmins.each do |user| %>
              <tr class="border-b border-surface-200 hover:bg-surface-100/50">
                <td class="py-3 px-4">
                  <div class="flex items-center gap-2">
                    <img src="<%= user.avatar_url %>" alt="Avatar" class="w-8 h-8 rounded-full">
                    <span class="text-surface-content"><%= user.display_name %></span>
                    <% if user.id == @current_user_id %>
                      <span class="px-2 py-0.5 text-xs rounded-full bg-blue/20 text-blue">(you)</span>
                    <% end %>
                  </div>
                </td>
                <td class="py-3 px-4 text-muted"><%= user.slack_uid || 'N/A' %></td>
                <td class="py-3 px-4">
                  <% if user.id != @current_user_id %>
                    <div class="flex gap-2">
                      <%= button_to '→ Admin', admin_admin_user_path(user, admin_level: 'admin'), method: :patch, class: 'px-3 py-1 bg-yellow hover:bg-yellow text-on-primary text-sm font-medium rounded transition-colors cursor-pointer', data: { confirm: "Demote #{user.display_name} to Admin?" } %>
                      <%= button_to '→ Viewer', admin_admin_user_path(user, admin_level: 'viewer'), method: :patch, class: 'px-3 py-1 bg-blue hover:bg-blue text-on-primary text-sm font-medium rounded transition-colors cursor-pointer', data: { confirm: "Demote #{user.display_name} to Viewer?" } %>
                      <%= button_to '→ Default', admin_admin_user_path(user, admin_level: 'default'), method: :patch, class: 'px-3 py-1 bg-surface-100 hover:bg-surface-100 text-surface-content text-sm font-medium rounded transition-colors cursor-pointer', data: { confirm: "Remove #{user.display_name}'s admin privileges?" } %>
                    </div>
                  <% else %>
                    <span class="text-muted text-sm">Cannot modify yourself</span>
                  <% end %>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    <% else %>
      <p class="text-muted">No superadmins found!</p>
    <% end %>
  </div>

  <div class="border border-primary rounded-xl p-6 bg-dark">
    <h2 class="text-2xl font-semibold text-yellow mb-4">Admins (<%= @admins.count %>)</h2>
    <% if @admins.any? %>
      <div class="overflow-x-auto">
        <table class="w-full text-left">
          <thead>
            <tr class="border-b border-surface-200">
              <th class="py-3 px-4">User</th>
              <th class="py-3 px-4">Slack ID</th>
              <th class="py-3 px-4">Actions</th>
            </tr>
          </thead>
          <tbody>
            <% @admins.each do |user| %>
              <tr class="border-b border-surface-200 hover:bg-surface-100/50">
                <td class="py-3 px-4">
                  <div class="flex items-center gap-2">
                    <img src="<%= user.avatar_url %>" alt="Avatar" class="w-8 h-8 rounded-full">
                    <span class="text-surface-content"><%= user.display_name %></span>
                  </div>
                </td>
                <td class="py-3 px-4 text-muted"><%= user.slack_uid || 'N/A' %></td>
                <td class="py-3 px-4">
                  <div class="flex gap-2">
                    <%= button_to '→ Superadmin', admin_admin_user_path(user, admin_level: 'superadmin'), method: :patch, class: 'px-3 py-1 bg-red hover:bg-red text-on-primary text-sm font-medium rounded transition-colors cursor-pointer', data: { confirm: "Promote #{user.display_name} to Superadmin?" } %>
                    <%= button_to '→ Viewer', admin_admin_user_path(user, admin_level: 'viewer'), method: :patch, class: 'px-3 py-1 bg-blue hover:bg-blue text-on-primary text-sm font-medium rounded transition-colors cursor-pointer', data: { confirm: "Demote #{user.display_name} to Viewer?" } %>
                    <%= button_to '→ Default', admin_admin_user_path(user, admin_level: 'default'), method: :patch, class: 'px-3 py-1 bg-surface-100 hover:bg-surface-100 text-surface-content text-sm font-medium rounded transition-colors cursor-pointer', data: { confirm: "Remove #{user.display_name}'s admin privileges?" } %>
                  </div>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    <% else %>
      <p class="text-muted">No admins found</p>
    <% end %>
  </div>

  <div class="border border-primary rounded-xl p-6 bg-dark">
    <h2 class="text-2xl font-semibold text-blue mb-4">Viewers (<%= @viewers.count %>)</h2>
    <% if @viewers.any? %>
      <div class="overflow-x-auto">
        <table class="w-full text-left">
          <thead>
            <tr class="border-b border-surface-200">
              <th class="py-3 px-4">User</th>
              <th class="py-3 px-4">Slack ID</th>
              <th class="py-3 px-4">Actions</th>
            </tr>
          </thead>
          <tbody>
            <% @viewers.each do |user| %>
              <tr class="border-b border-surface-200 hover:bg-surface-100/50">
                <td class="py-3 px-4">
                  <div class="flex items-center gap-2">
                    <img src="<%= user.avatar_url %>" alt="Avatar" class="w-8 h-8 rounded-full">
                    <span class="text-surface-content"><%= user.display_name %></span>
                  </div>
                </td>
                <td class="py-3 px-4 text-muted"><%= user.slack_uid || 'N/A' %></td>
                <td class="py-3 px-4">
                  <div class="flex gap-2">
                    <%= button_to '→ Superadmin', admin_admin_user_path(user, admin_level: 'superadmin'), method: :patch, class: 'px-3 py-1 bg-red hover:bg-red text-on-primary text-sm font-medium rounded transition-colors cursor-pointer', data: { confirm: "Promote #{user.display_name} to Superadmin?" } %>
                    <%= button_to '→ Admin', admin_admin_user_path(user, admin_level: 'admin'), method: :patch, class: 'px-3 py-1 bg-yellow hover:bg-yellow text-on-primary text-sm font-medium rounded transition-colors cursor-pointer', data: { confirm: "Promote #{user.display_name} to Admin?" } %>
                    <%= button_to '→ Default', admin_admin_user_path(user, admin_level: 'default'), method: :patch, class: 'px-3 py-1 bg-surface-100 hover:bg-surface-100 text-surface-content text-sm font-medium rounded transition-colors cursor-pointer', data: { confirm: "Remove #{user.display_name}'s viewer privileges?" } %>
                  </div>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    <% else %>
      <p class="text-muted">No viewers found</p>
    <% end %>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const input = document.getElementById("user-search");
    const res = document.getElementById("search-results");
    let d;

    if (input) {
      input.addEventListener("input", function () {
        clearTimeout(d);
        const query = this.value.trim();

        if (query.length < 2) {
          res.innerHTML = "";
          return;
        }

        d = setTimeout(function () {
          fetch("/admin/admin_users/search?q=" + encodeURIComponent(query), {
            headers: { Accept: "text/html" },
          })
            .then((r) => r.text())
            .then((html) => {
              res.innerHTML = html;
            });
        }, 100);
      });
    }
  });
</script>
