defmodule ToweropsWeb.HelpLive.Sections.ApiTokens do
  @moduledoc false
  use ToweropsWeb, :html

  def render(assigns) do
    ~H"""
    <div class="p-6">
      <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">API Tokens</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">
        API tokens allow external applications and scripts to authenticate with the Towerops REST and GraphQL APIs. Each token is scoped to an organization and can be managed from your user settings.
      </p>

      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">Creating a Token</h3>
      <ol class="list-decimal list-inside text-gray-600 dark:text-gray-400 space-y-2 mb-4">
        <li>Go to <strong>User Settings → API Tokens</strong></li>
        <li>Click <strong>"Create API Token"</strong></li>
        <li>Give the token a descriptive name (e.g., "Grafana Integration")</li>
        <li>Copy the token immediately — it will only be shown once</li>
      </ol>

      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">Using a Token</h3>
      <p class="text-gray-600 dark:text-gray-400 mb-4">
        Include the token in the
        <code class="rounded bg-gray-100 px-1.5 py-0.5 text-sm font-mono dark:bg-gray-700">
          Authorization
        </code>
        header:
      </p>
      <div class="rounded-lg bg-gray-900 p-4 mb-4">
        <pre class="text-sm text-green-400 overflow-x-auto"><code>Authorization: Bearer your-api-token-here</code></pre>
      </div>

      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
        Security Best Practices
      </h3>
      <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 mb-4">
        <li>
          Create separate tokens for each integration — don't reuse tokens across services
        </li>
        <li>Revoke tokens you no longer need</li>
        <li>Never commit tokens to version control</li>
        <li>Store tokens in environment variables or a secrets manager</li>
      </ul>

      <div class="mt-6 rounded-lg bg-blue-50 dark:bg-blue-900/20 p-4">
        <p class="text-sm text-blue-700 dark:text-blue-300">
          <strong>See also:</strong>
          <.link navigate={~p"/help?section=rest-api"} class="underline">REST API</.link>
          and
          <.link navigate={~p"/help?section=graphql-api"} class="underline">
            GraphQL API
          </.link>
          for endpoint documentation.
        </p>
      </div>
    </div>
    """
  end
end