<% content_for :title, "Invitations" %>

<div class="space-y-6">
  <div class="flex items-center justify-between">
    <div>
      <h2 class="text-3xl font-bold text-gray-900">Invitations</h2>
      <p class="mt-1 text-sm text-gray-600">Manage user invitations</p>
    </div>
    <div>
      <%= link_to "Send New 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>

  <!-- Pending Invitations -->
  <div class="bg-white shadow rounded-lg overflow-hidden">
    <div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
      <h3 class="text-lg leading-6 font-medium text-gray-900">
        Pending Invitations
        <span class="ml-2 px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">
          <%= @pending_invitations.count %>
        </span>
      </h3>
    </div>
    <% if @pending_invitations.any? %>
      <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">Email</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">Sent</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Expires</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invited By</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">
          <% @pending_invitations.each do |invitation| %>
            <tr>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                <%= invitation.email %>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                  <%= case invitation.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 %>">
                  <%= invitation.role %>
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                <%= invitation.invitation_sent_at.strftime("%b %d, %Y") %>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                <% expires_at = invitation.invitation_sent_at + 14.days %>
                <% if expires_at < Time.current %>
                  <span class="text-red-600 font-medium">Expired</span>
                <% else %>
                  <%= expires_at.strftime("%b %d, %Y") %>
                <% end %>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                <%= invitation.invited_by&.name || invitation.invited_by&.email || "-" %>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <%= button_to "Cancel", admin_invitation_path(invitation), method: :delete, data: { turbo_confirm: "Are you sure you want to cancel this invitation?" }, class: "text-red-600 hover:text-red-900" %>
              </td>
            </tr>
          <% end %>
        </tbody>
      </table>
    <% else %>
      <div class="px-6 py-12 text-center">
        <p class="text-gray-500">No pending invitations</p>
      </div>
    <% end %>
  </div>

  <!-- Recent Accepted Invitations -->
  <div class="bg-white shadow rounded-lg overflow-hidden">
    <div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
      <h3 class="text-lg leading-6 font-medium text-gray-900">Recently Accepted</h3>
    </div>
    <% if @accepted_invitations.any? %>
      <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">Accepted</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invited By</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <% @accepted_invitations.each do |user| %>
            <tr>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900"><%= user.name || "(No name)" %></div>
                <div class="text-sm text-gray-500"><%= user.email %></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.invitation_accepted_at.strftime("%b %d, %Y") %>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                <%= user.invited_by&.name || user.invited_by&.email || "-" %>
              </td>
            </tr>
          <% end %>
        </tbody>
      </table>
    <% else %>
      <div class="px-6 py-12 text-center">
        <p class="text-gray-500">No accepted invitations yet</p>
      </div>
    <% end %>
  </div>
</div>
