<div class="space-y-8">
  <div>
    <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">Sessions</h1>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Manage your active sessions and connected applications.</p>
  </div>

  <!-- Connected Applications -->
  <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
    <div class="px-4 py-5 sm:p-6">
      <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">Connected Applications</h3>
      <div class="mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400">
        <p>These applications have access to your account. You can revoke access at any time.</p>
      </div>
      <div class="mt-5">
        <% if @connected_applications.any? %>
          <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
            <% @connected_applications.each do |consent| %>
              <li class="py-4">
                <div class="flex items-center justify-between">
                  <div class="flex flex-col">
                    <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
                      <%= consent.application.name %>
                    </p>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                      Access to: <%= consent.formatted_scopes %>
                    </p>
                    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
                      Authorized <%= time_ago_in_words(consent.granted_at) %> ago
                    </p>
                  </div>
                  <%= button_to "Revoke Access", revoke_consent_active_sessions_path(application_id: consent.application.id), method: :delete,
                      class: "inline-flex items-center rounded-md border border-red-300 bg-white dark:bg-gray-700 dark:ring-gray-600 dark:text-gray-200 px-3 py-2 text-sm font-medium text-red-700 shadow-sm hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900",
                      form: { data: { turbo_confirm: "Are you sure you want to revoke access to #{consent.application.name}? You'll need to re-authorize this application to use it again." } } %>
                </div>
              </li>
            <% end %>
          </ul>
        <% else %>
          <p class="text-sm text-gray-500 dark:text-gray-400">No connected applications.</p>
        <% end %>

        <% if @connected_applications.any? %>
          <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
            <div class="flex justify-end">
              <div class="inline-block">
                <%= button_to "Revoke All App Access", revoke_all_consents_active_sessions_path, method: :delete,
                    class: "inline-flex items-center rounded-md border border-red-300 bg-white dark:bg-gray-700 dark:ring-gray-600 dark:text-gray-200 px-3 py-2 text-sm font-medium text-red-700 shadow-sm hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 whitespace-nowrap",
                    form: { data: { turbo_confirm: "This will revoke access from all connected applications. You'll need to re-authorize each application to use them again. Are you sure?" } } %>
              </div>
            </div>
          </div>
        <% end %>
      </div>
    </div>
  </div>

  <!-- Active Sessions -->
  <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
    <div class="px-4 py-5 sm:p-6">
      <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">Active Sessions</h3>
      <div class="mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400">
        <p>These devices are currently signed in to your account. Revoke any sessions that you don't recognize.</p>
      </div>
      <div class="mt-5">
        <% if @active_sessions.any? %>
          <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
            <% @active_sessions.each do |session| %>
              <li class="py-4">
                <div class="flex items-center justify-between">
                  <div class="flex flex-col">
                    <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
                      <%= session.device_name || "Unknown Device" %>
                      <% if session.id == Current.session.id %>
                        <span class="ml-2 inline-flex items-center rounded-full bg-green-100 dark:bg-green-900/50 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:text-green-200">
                          This device
                        </span>
                      <% end %>
                    </p>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                      <%= session.ip_address %>
                    </p>
                    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
                      Last active <%= time_ago_in_words(session.last_activity_at || session.updated_at) %> ago
                    </p>
                  </div>
                  <% if session.id != Current.session.id %>
                    <%= button_to "Revoke", session_path(session), method: :delete,
                        class: "inline-flex items-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 dark:text-gray-200 px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900",
                        form: { data: { turbo_confirm: "Are you sure you want to revoke this session?" } } %>
                  <% end %>
                </div>
              </li>
            <% end %>
          </ul>
        <% else %>
          <p class="text-sm text-gray-500 dark:text-gray-400">No other active sessions.</p>
        <% end %>

        <% if @active_sessions.count > 1 %>
          <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
            <div class="flex justify-end">
              <div class="inline-block">
                <%= button_to "Sign Out Everywhere Else", session_path(Current.session), method: :delete,
                    class: "inline-flex items-center rounded-md border border-orange-300 bg-white dark:bg-gray-700 dark:ring-gray-600 dark:text-gray-200 px-3 py-2 text-sm font-medium text-orange-700 shadow-sm hover:bg-orange-50 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 whitespace-nowrap",
                    form: { data: { turbo_confirm: "This will sign you out from all other devices except this one. Are you sure?" } } %>
              </div>
            </div>
          </div>
        <% end %>
      </div>
    </div>
  </div>

  </div>
