<%= page_title @group.name %>

<div class="flex items-center justify-between mb-6">
  <div>
    <div class="flex items-center mb-2">
      <h1 class="text-h2 text-neutral-900"><%= @group.name %></h1>
      <% if @group.system_group? %>
        <span class="ml-3 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-brand-100 text-brand-600">
          System Group
        </span>
      <% end %>
    </div>
    <% if @group.description.present? %>
      <p class="text-body text-neutral-700"><%= @group.description %></p>
    <% end %>
  </div>
  <div class="flex space-x-3">
    <% if policy(@group).edit? %>
      <%= link_to edit_group_path(@group), class: "btn-secondary btn-md" do %>
        Edit Group
      <% end %>
    <% end %>
  </div>
</div>

<!-- Group Statistics -->
<div class="card mb-8">
  <div class="card-body p-6">
    <div class="flex items-center space-x-8 text-caption text-neutral-500">
      <div class="flex items-center">
        <svg class="w-4 h-4 mr-2" 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.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
        </svg>
        <span class="font-medium text-neutral-900"><%= pluralize(@group.users.size, 'member') %></span>
      </div>
      
      <div class="flex items-center">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
        </svg>
        <span class="font-medium text-neutral-900"><%= pluralize(@group.admins.size, 'admin') %></span>
      </div>
      
      <div class="flex items-center">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        Updated <%= time_ago_in_words(@group.updated_at) %> ago
      </div>
    </div>
  </div>
</div>

<!-- Members List -->
<div class="card">
  <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 Members</h3>
    </div>
    
    <% if @members.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">User</th>
              <th class="px-6 py-3 text-left text-label text-neutral-700">Role</th>
              <th class="px-6 py-3 text-left text-label text-neutral-700">Joined</th>
              <% unless @group.system_group? %>
                <th class="px-6 py-3 text-right text-label text-neutral-700">Actions</th>
              <% end %>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-neutral-200">
            <% @members.each do |membership| %>
              <tr>
                <td class="px-6 py-4">
                  <div class="flex items-center">
                    <div class="h-8 w-8 rounded-full flex items-center justify-center text-white font-medium bg-gradient-to-br from-brand to-brand-600 text-sm">
                      <%= user_initials(membership.user) %>
                    </div>
                    <div class="ml-3">
                      <p class="text-body font-medium text-neutral-900">
                        <%= link_to membership.user.full_name, user_path(membership.user), class: "text-brand hover:text-brand-600" %>
                      </p>
                      <p class="text-caption text-neutral-500"><%= membership.user.email %></p>
                    </div>
                  </div>
                </td>
                <td class="px-6 py-4">
                  <% if @group.system_group? || !policy(membership).update? %>
                    <%= membership_role_badge(membership) %>
                  <% else %>
                    <%= form_with model: [@group, membership], method: :patch, local: true, class: "inline-block" do |form| %>
                      <%= form.select :role,
                          options_for_select(Membership.roles.map { |key, value| [key.humanize, key] }, membership.role),
                          {},
                          { class: "frm-input py-1 text-sm", onchange: "this.form.submit();" } %>
                    <% end %>
                  <% end %>
                </td>
                <td class="px-6 py-4 text-body text-neutral-500">
                  <%= membership.created_at.strftime("%B %d, %Y") %>
                </td>
                <% unless @group.system_group? %>
                  <td class="px-6 py-4 text-right">
                    <% if policy(membership).destroy? %>
                      <%= button_to group_membership_path(@group, membership),
                          method: :delete,
                          form: { data: {
                            turbo_confirm: "Are you sure you want to remove #{membership.user.full_name} from this group?"
                          } },
                          class: "btn-danger btn-sm" do %>
                        Remove
                      <% end %>
                    <% end %>
                  </td>
                <% end %>
              </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">
          <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.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 members yet</h3>
        <p class="text-body text-neutral-500 mt-2">Add users to this group to get started.</p>
      </div>
      <% end %>
  </div>
</div>

<!-- Add Member Section -->
<% unless @group.system_group? || @available_users.empty? %>
  <% if policy(@group.memberships.build).create? %>
    <div class="card mb-8">
      <div class="card-body p-6">
        <h3 class="text-h3 text-neutral-900 mb-4">Add New Member</h3>

        <%= form_with model: [@group, @group.memberships.build], local: true, class: "flex items-end space-x-4" do |form| %>
          <div class="flex-1">
            <label class="frm-label mb-2 block">Select User</label>
            <%= form.select :user_id,
                options_from_collection_for_select(@available_users, :id, :full_name),
                { prompt: "Choose a user..." },
                { class: "frm-input", required: true } %>
          </div>

          <div class="w-32">
            <label class="frm-label mb-2 block">Role</label>
            <%= form.select :role,
                options_for_select(Membership.roles.map { |key, value| [key.humanize, key] }, 'member'),
                {},
                { class: "frm-input" } %>
          </div>

          <%= form.submit "Add Member", class: "btn-primary btn-md" %>
        <% end %>
      </div>
    </div>
  <% end %>
<% end %>

<!-- Actions -->
<div class="card">
  <div class="card-body">
    <div class="flex flex-col sm:flex-row gap-6 justify-between items-start sm:items-center">
      <div class="flex flex-col sm:flex-row gap-4">
        <%= link_to "Back to Groups", groups_path, class: "btn btn-secondary" %>
      </div>
      
      <% unless @group.system_group? %>
        <% if policy(@group).destroy? %>
          <div class="flex-shrink-0">
            <%= button_to "Delete this Group", group_path(@group),
                method: :delete,
                class: "btn btn-danger",
                form_class: "inline-block",
                form: { data: {
                  turbo_confirm: "Are you sure you want to delete this group? This action cannot be undone."
                } } %>
          </div>
        <% end %>
      <% end %>
    </div>
  </div>
</div>
