<div class="container mx-auto px-4 py-8">
  <h1 class="text-2xl font-bold dark:text-gray-200 mb-6">Admin Dashboard</h1>

  <!-- Stats Overview -->
  <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden rounded-lg">
      <div class="px-4 py-5 sm:p-6">
        <dl>
          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Conferences</dt>
          <dd class="mt-1 text-3xl font-semibold text-blue-600 dark:text-blue-400">
            <%= link_to @conferences_count, admin_conferences_path, class: "hover:underline" %>
          </dd>
        </dl>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden rounded-lg">
      <div class="px-4 py-5 sm:p-6">
        <dl>
          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Sessions</dt>
          <dd class="mt-1 text-3xl font-semibold text-blue-600 dark:text-blue-400">
            <%= @sessions_count %>
          </dd>
        </dl>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden rounded-lg">
      <div class="px-4 py-5 sm:p-6">
        <dl>
          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Users</dt>
          <dd class="mt-1 text-3xl font-semibold text-blue-600 dark:text-blue-400">
            <%= link_to @users_count, admin_users_path, class: "hover:underline" %>
          </dd>
        </dl>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden rounded-lg">
      <div class="px-4 py-5 sm:p-6">
        <dl>
          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Assignments</dt>
          <dd class="mt-1 text-3xl font-semibold text-blue-600 dark:text-blue-400">
            <%= @assignments_count %>
          </dd>
        </dl>
      </div>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Recent Imports -->
    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden rounded-lg">
      <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white">Recent Import Jobs</h3>
      </div>
      <div class="px-4 py-5 sm:p-6">
        <% if @recent_imports.any? %>
          <div class="flow-root">
            <ul class="-my-5 divide-y divide-gray-200 dark:divide-gray-700">
              <% @recent_imports.each do |import| %>
                <li class="py-4">
                  <div class="flex items-center space-x-4">
                    <div class="flex-1 min-w-0">
                      <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                        <%= link_to import.conference.name, admin_conference_path(import.conference), class: "text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300" %>
                        <% status_class = case import.status 
                          when 'completed' then 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                          when 'failed' then 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
                          else 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' 
                          end %>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium <%= status_class %>">
                          <%= import.status %>
                        </span>
                      </p>
                      <p class="text-sm text-gray-500 dark:text-gray-400">
                        Started <%= import.started_at.strftime("%Y-%m-%d %H:%M") %>
                        <% if import.completed_at %>
                          Completed <%= import.completed_at.strftime("%Y-%m-%d %H:%M") %>
                        <% end %>
                      </p>
                    </div>
                    <div>
                      <% if import.conference %>
                        <%= link_to "Details", import_history_admin_conference_path(import.conference), class: "text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300" %>
                      <% end %>
                    </div>
                  </div>
                </li>
              <% end %>
            </ul>
          </div>
        <% else %>
          <p class="text-gray-500 dark:text-gray-400">No recent imports found.</p>
        <% end %>
      </div>
    </div>

    <!-- User Roles -->
    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden rounded-lg">
      <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white">Users with Special Roles</h3>
      </div>
      <div class="px-4 py-5 sm:p-6">
        <div class="space-y-6">
          <div>
            <h4 class="font-medium text-gray-900 dark:text-white">Admins</h4>
            <div class="mt-2">
              <% if @admin_users.any? %>
                <div class="flex flex-wrap gap-2">
                  <% @admin_users.each do |user| %>
                    <%= link_to admin_user_path(user) do %>
                      <%= render "application/user_avatar", user: user %>
                    <% end %>
                  <% end %>
                </div>
              <% else %>
                <p class="text-gray-500 dark:text-gray-400">No admin users found.</p>
              <% end %>
            </div>
          </div>

          <div>
            <h4 class="font-medium text-gray-900 dark:text-white">Events Admins</h4>
            <div class="mt-2">
              <% if @events_admins.any? %>
                <div class="flex flex-wrap gap-2">
                  <% @events_admins.each do |user| %>
                    <%= link_to admin_user_path(user) do %>
                      <%= render "application/user_avatar", user: user %>
                    <% end %>
                  <% end %>
                </div>
              <% else %>
                <p class="text-gray-500 dark:text-gray-400">No events admin users found.</p>
              <% end %>
            </div>
          </div>

          <div>
            <h4 class="font-medium text-gray-900 dark:text-white">Shift Coordinators</h4>
            <div class="mt-2">
              <% if @shift_coordinators.any? %>
                <div class="flex flex-wrap gap-2">
                  <% @shift_coordinators.each do |user| %>
                    <%= link_to admin_user_path(user) do %>
                      <%= render "application/user_avatar", user: user %>
                    <% end %>
                  <% end %>
                </div>
              <% else %>
                <p class="text-gray-500 dark:text-gray-400">No shift coordinator users found.</p>
              <% end %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>