<%= page_title @user.display_name %>

<div class="flex items-center justify-between mb-6">
  <div class="flex items-center">
    <div class="h-16 w-16 rounded-full flex items-center justify-center text-white font-medium bg-gradient-to-br from-brand to-brand-600 text-2xl mr-4">
      <%= user_initials(@user) %>
    </div>
    <div>
      <div class="flex items-center gap-2">
        <h1 class="text-h2 text-neutral-900"><%= @user.display_name %></h1>
        <% if @user.is_system_user %>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-neutral-200 text-neutral-800">
            System User
          </span>
        <% end %>
        <% if @user.system_admin? %>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-brand-100 text-brand-600">
            System Administrator
          </span>
        <% end %>
      </div>
    </div>
  </div>
  <% if policy(@user).admin_manage? %>
    <div class="flex items-center space-x-2">
      <%= link_to edit_admin_user_path(@user), class: "btn-secondary" do %>
        <svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
        </svg>
        Edit User
      <% end %>
      <%= button_to admin_user_path(@user), method: :delete, class: "btn-danger", form: { data: { turbo_confirm: "Are you sure you want to delete this user? This action cannot be undone." } } do %>
        <svg class="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
        </svg>
        Delete User
      <% end %>
    </div>
  <% end %>
</div>

<!-- Group Memberships -->
<div class="card mb-8">
  <div class="card-body p-0">
    <div class="px-6 py-4 border-b border-neutral-200">
      <h3 class="text-h3 text-neutral-900">Group Memberships</h3>
    </div>

    <% if @memberships.any? %>
      <div class="overflow-x-auto">
        <table class="min-w-full">
          <thead class="bg-neutral-100">
            <tr>
              <th class="px-6 py-3 text-left text-label text-neutral-700">Group</th>
              <th class="px-6 py-3 text-left text-label text-neutral-700">Role</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-neutral-200">
            <% @memberships.each do |membership| %>
              <tr>
                <td class="px-6 py-4">
                  <%= link_to membership.group.name, group_path(membership.group), class: "text-body font-medium text-brand hover:text-brand-600" %>
                </td>
                <td class="px-6 py-4">
                  <%= membership_role_badge(membership) %>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    <% else %>
      <div class="px-6 py-12 text-center">
        <svg class="mx-auto h-12 w-12 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
        </svg>
        <h3 class="text-h3 text-neutral-900 mt-4">No group memberships</h3>
        <p class="text-body text-neutral-500 mt-2">This user is not a member of any groups.</p>
      </div>
    <% end %>
  </div>
</div>

<!-- Uploaded Content -->
<div class="card mb-8">
  <div class="card-body p-0">
    <div class="px-6 py-4 border-b border-neutral-200">
      <h3 class="text-h3 text-neutral-900">Uploaded Content (<%= @user.contents.count %>)</h3>
    </div>

    <% if @user.contents.any? %>
      <div class="p-6">
        <%= render partial: "contents/grid", locals: {contents: @user.contents} %>
      </div>
    <% else %>
      <div class="px-6 py-12 text-center">
        <svg class="mx-auto h-12 w-12 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
        </svg>
        <h3 class="text-h3 text-neutral-900 mt-4">No content yet</h3>
        <p class="text-body text-neutral-500 mt-2">This user has not uploaded any content.</p>
      </div>
    <% end %>
  </div>
</div>
