<div class="max-w-7xl mx-auto">
  <div class="mb-6">
    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Activity Logs</h1>
    <p class="mt-2 text-gray-600">Authentication and security events for <%= current_website.subdomain %></p>
  </div>

  <!-- Stats Dashboard -->
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-white rounded-lg shadow p-4">
      <div class="text-2xl font-bold text-gray-900"><%= @stats[:total_today] %></div>
      <div class="text-sm text-gray-600">Events Today</div>
    </div>
    <div class="bg-white rounded-lg shadow p-4">
      <div class="text-2xl font-bold text-green-600"><%= @stats[:logins_today] %></div>
      <div class="text-sm text-gray-600">Logins Today</div>
    </div>
    <div class="bg-white rounded-lg shadow p-4">
      <div class="text-2xl font-bold text-red-600"><%= @stats[:failures_today] %></div>
      <div class="text-sm text-gray-600">Failed Attempts</div>
    </div>
    <div class="bg-white rounded-lg shadow p-4">
      <div class="text-2xl font-bold text-blue-600"><%= @stats[:unique_ips_today] %></div>
      <div class="text-sm text-gray-600">Unique IPs</div>
    </div>
  </div>

  <!-- Filters -->
  <div class="bg-white rounded-lg shadow p-4 mb-6">
    <%= form_with url: site_admin_activity_logs_path, method: :get, local: true, class: "flex flex-wrap gap-4" do |f| %>
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Event Type</label>
        <%= select_tag :event_type, 
            options_for_select([['All Events', '']] + @event_types.map { |e| [e.titleize, e] }, params[:event_type]),
            class: "px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" %>
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">User</label>
        <%= select_tag :user_id,
            options_for_select([['All Users', '']] + @users.map { |u| [u.email, u.id] }, params[:user_id]),
            class: "px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" %>
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Time Range</label>
        <%= select_tag :since,
            options_for_select([
              ['All Time', ''],
              ['Last Hour', '1h'],
              ['Last 24 Hours', '24h'],
              ['Last 7 Days', '7d'],
              ['Last 30 Days', '30d']
            ], params[:since]),
            class: "px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" %>
      </div>
      <div class="flex items-end">
        <%= f.submit "Filter", class: "px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 cursor-pointer" %>
        <% if params[:event_type].present? || params[:user_id].present? || params[:since].present? %>
          <%= link_to "Clear", site_admin_activity_logs_path, class: "ml-2 px-4 py-2 text-gray-600 hover:text-gray-800" %>
        <% end %>
      </div>
    <% end %>
  </div>

  <!-- Activity Log 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-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Event</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
          <th class="hidden md:table-cell px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP Address</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</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-6 py-4 whitespace-nowrap">
                <% event_class = case log.event_type
                   when 'login_success', 'oauth_success', 'registration' then 'bg-green-100 text-green-800'
                   when 'login_failure', 'oauth_failure', 'account_locked' then 'bg-red-100 text-red-800'
                   when 'logout', 'session_timeout' then 'bg-gray-100 text-gray-800'
                   when 'password_reset_request', 'password_reset_success', 'account_unlocked' then 'bg-yellow-100 text-yellow-800'
                   else 'bg-blue-100 text-blue-800'
                   end %>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium <%= event_class %>">
                  <%= log.event_type.titleize %>
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                <% if log.user.present? %>
                  <%= link_to log.email, site_admin_user_path(log.user), class: 'text-blue-600 hover:text-blue-800' %>
                <% else %>
                  <span class="text-gray-500"><%= log.email || 'Unknown' %></span>
                <% end %>
              </td>
              <td class="hidden md:table-cell px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                <%= log.ip_address || '-' %>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                <span title="<%= log.created_at.strftime('%Y-%m-%d %H:%M:%S') %>">
                  <%= time_ago_in_words(log.created_at) %> ago
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm">
                <%= link_to 'View', site_admin_activity_log_path(log), class: 'text-blue-600 hover:text-blue-800' %>
              </td>
            </tr>
          <% end %>
        <% else %>
          <tr>
            <td colspan="5" class="px-6 py-8 text-center text-gray-500">
              <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
              <p class="mt-2">No activity logs found</p>
              <% if params[:event_type].present? || params[:user_id].present? || params[:since].present? %>
                <p class="mt-1 text-sm">Try adjusting your filters</p>
              <% end %>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>

  <%# Pagination %>
  <% if defined?(@pagy) && @pagy.pages > 1 %>
    <div class="mt-4">
      <%= render 'shared/pagination', pagy: @pagy %>
    </div>
  <% end %>

  <!-- Info Box -->
  <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
    <div class="flex">
      <svg class="w-5 h-5 text-blue-600 mr-3 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
      </svg>
      <div>
        <h3 class="text-sm font-medium text-blue-800">About Activity Logs</h3>
        <p class="mt-1 text-sm text-blue-700">
          Activity logs track authentication events including logins, logouts, password resets, and security events.
          Use these logs to monitor access to your website and identify potential security issues.
        </p>
      </div>
    </div>
  </div>
</div>
