<% content_for :title, 'Admin API Key Details' %>

<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <div class="mb-8">
    <div class="flex items-center justify-between">
      <div>
        <h1 class="text-3xl font-bold text-surface-content mb-2">lookin at <%= @admin_api_key.name %></h1>
        <p class="text-muted">get the deets</p>
      </div>
      <%= link_to '← Back to API Keys', admin_admin_api_keys_path, class: 'text-muted hover:text-surface-content' %>
    </div>
  </div>

  <div class="grid grid-cols-1 gap-8">
    <div class="bg-dark rounded-lg p-6">
      <h2 class="text-xl font-semibold text-surface-content mb-4">okay now what lmao</h2>
      <div class="space-y-4">
        <div>
          <label class="block text-md font-medium text-muted mb-2">what was it again?</label>
          <code class="block bg-darkless px-3 py-2 rounded text-surface-content text-sm"> <%= @admin_api_key.token[0..20] %>... </code>
          <% unless flash[:api_key_token] %>
            <p class="text-md text-muted mt-1">you cant see the full thing again, we showed it when you created it ya doofus</p>
          <% end %>
        </div>
        <div>
          <label class="block text-md font-bold text-surface-content mb-2">how to use it?</label>
          <p class="text-md text-muted mb-2">most likely you are not crazy enough to build your own api client but you can use rowan's fraud check tool to use the admin api.</p>
          <p class="text-md text-muted">if you are building your own client, just use the token as a bearer token in the auth header of your requests, check the actual source code for more details. or you could just be normal and use the fraud check tool i already made for you.</p>
        </div>
      </div>
    </div>

    <div class="bg-dark rounded-lg p-6">
      <h2 class="text-xl font-semibold text-surface-content mb-4">deets</h2>
      <% if @show_token %>
        <div class="bg-green/30 border border-green/50 rounded-lg p-4 mb-6">
          <h3 class="text-green font-medium mb-2">heres ya key, copy it now!</h3>
          <p class="text-green text-sm mb-3">copy it now, its not gonna be shown again silly</p>
          <div class="bg-surface-100 rounded p-3">
            <code class="block text-surface-content text-sm break-all select-all"> <%= @admin_api_key.token %> </code>
          </div>
        </div>
      <% end %>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label class="block text-sm font-medium text-muted mb-1">name</label>
          <div class="text-surface-content"><%= @admin_api_key.name %></div>
        </div>

        <div>
          <label class="block text-sm font-medium text-muted mb-1">spawned by</label>
          <div class="flex items-center">
            <% if @admin_api_key.user.avatar_url %>
              <img class="h-6 w-6 rounded-full mr-2" src="<%= @admin_api_key.user.avatar_url %>" alt="">
            <% end %>
            <div>
              <div class="text-surface-content"><%= @admin_api_key.user.display_name %></div>
              <div class="text-xs text-muted">ID: <%= @admin_api_key.user.id %></div>
            </div>
          </div>
        </div>

        <div>
          <label class="block text-sm font-medium text-muted mb-1">spawned at</label>
          <div class="text-surface-content"><%= @admin_api_key.created_at.strftime('%B %d, %Y at %I:%M %p') %></div>
        </div>

        <div>
          <label class="block text-sm font-medium text-muted mb-1">status</label>
          <div class="text-green">live</div>
        </div>
      </div>
      <div class="mt-6"></div>
      <%= link_to 'nuke it', admin_admin_api_key_path(@admin_api_key), data: { 'turbo-method': :delete }, class: 'bg-red hover:bg-red text-on-primary px-4 py-2 rounded-lg font-medium transition-colors' %>
    </div>
  </div>
</div>
