<div class="max-w-7xl mx-auto">
  <div class="mb-6">
    <nav class="flex mb-4" aria-label="Breadcrumb">
      <ol class="inline-flex items-center space-x-1 text-sm font-medium md:space-x-2">
        <li class="inline-flex items-center">
          <%= link_to tenant_admin_auth_audit_logs_path, class: "inline-flex items-center text-gray-700 hover:text-blue-600" do %>
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
            </svg>
            All Audit Logs
          <% end %>
        </li>
      </ol>
    </nav>
    <h1 class="text-3xl font-bold text-gray-900">IP Address Activity</h1>
    <p class="mt-2 text-gray-600">
      All authentication events from IP: <span class="font-mono font-medium"><%= @ip_address %></span>
    </p>
  </div>

  <!-- IP Info Card -->
  <div class="<%= @failure_count >= 10 ? 'bg-red-50 border-red-200' : 'bg-white' %> rounded-lg shadow border p-4 mb-6">
    <div class="flex items-center justify-between">
      <div class="flex items-center space-x-4">
        <div class="<%= @failure_count >= 10 ? 'bg-red-100' : 'bg-gray-100' %> rounded-full p-3">
          <svg class="w-8 h-8 <%= @failure_count >= 10 ? 'text-red-600' : 'text-gray-600' %>" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
          </svg>
        </div>
        <div>
          <p class="font-mono text-xl font-medium text-gray-900"><%= @ip_address %></p>
          <p class="text-sm text-gray-500">
            <%= @failure_count %> failed attempts in the last hour
            <% if @failure_count >= 10 %>
              <span class="text-red-600 font-medium">- Suspicious Activity</span>
            <% end %>
          </p>
        </div>
      </div>
      <% if @failure_count >= 10 %>
        <div class="text-right">
          <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
            </svg>
            Suspicious IP
          </span>
        </div>
      <% end %>
    </div>
  </div>

  <!-- Logs Table -->
  <div class="bg-white rounded-lg shadow overflow-hidden">
    <table class="min-w-full divide-y divide-gray-200">
      <thead class="bg-gray-50">
        <tr>
          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Event</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
          <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
        </tr>
      </thead>
      <tbody class="bg-white divide-y divide-gray-200">
        <% if @logs.any? %>
          <% @logs.each do |log| %>
            <tr class="hover:bg-gray-50">
              <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                <div><%= log.created_at.strftime("%Y-%m-%d") %></div>
                <div class="text-xs text-gray-400"><%= log.created_at.strftime("%H:%M:%S") %></div>
              </td>
              <td class="px-4 py-3 whitespace-nowrap">
                <%= render partial: 'event_badge', locals: { event_type: log.event_type } %>
              </td>
              <td class="px-4 py-3 whitespace-nowrap text-sm">
                <% if log.user %>
                  <%= link_to log.email, tenant_admin_user_path(log.user), class: "text-blue-600 hover:text-blue-800" %>
                <% elsif log.email.present? %>
                  <span class="text-gray-900"><%= log.email %></span>
                <% else %>
                  <span class="text-gray-400">N/A</span>
                <% end %>
              </td>
              <td class="px-4 py-3 text-sm text-gray-500 max-w-xs truncate">
                <% if log.failure_reason.present? %>
                  <span class="text-red-600"><%= log.failure_reason %></span>
                <% elsif log.provider.present? %>
                  <span>Provider: <%= log.provider %></span>
                <% end %>
              </td>
              <td class="px-4 py-3 whitespace-nowrap text-sm">
                <%= link_to "View", tenant_admin_auth_audit_log_path(log), class: "text-blue-600 hover:text-blue-800" %>
              </td>
            </tr>
          <% end %>
        <% else %>
          <tr>
            <td colspan="5" class="px-6 py-12 text-center">
              <p class="text-gray-500">No authentication events found for this IP address.</p>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>

    <% if @logs.any? %>
      <div class="px-4 py-3 bg-gray-50 border-t border-gray-200">
        <%= render 'shared/pagination', pagy: @pagy %>
      </div>
    <% end %>
  </div>
</div>
