defmodule ToweropsWeb.HelpLive.Sections.GraphqlApi 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">GraphQL API</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">
        The GraphQL API lets you query exactly the data you need in a single request. The endpoint is
        <code class="rounded bg-gray-100 px-1.5 py-0.5 text-sm font-mono dark:bg-gray-700">
          POST /api/graphql
        </code>
        and uses the same API token authentication as the REST API.
      </p>

      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">Why GraphQL?</h3>
      <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 mb-4">
        <li>
          <strong>Fetch related data in one query</strong>
          — Get devices with their sites, alerts, and latest metrics in a single request
        </li>
        <li><strong>No over-fetching</strong> — Request only the fields you need</li>
        <li>
          <strong>Introspection</strong>
          — The schema is self-documenting; use any GraphQL client to explore available types and fields
        </li>
      </ul>

      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">Quick Example</h3>
      <div class="rounded-lg bg-gray-900 p-4 mb-4">
        <pre class="text-sm text-green-400 overflow-x-auto"><code><%= raw("curl -X POST https://app.towerops.net/api/graphql \\\n  -H \"Authorization: Bearer YOUR_TOKEN\" \\\n  -H \"Content-Type: application/json\" \\\n  -d '{\"query\": \"{ devices { id name ipAddress status } }\"}'") %></code></pre>
      </div>

      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">Available Queries</h3>
      <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 mb-4">
        <li>
          <strong>devices</strong> — List devices with filtering and nested site/alert data
        </li>
        <li>
          <strong>device(id)</strong>
          — Single device with full detail including sensors and interfaces
        </li>
        <li><strong>sites</strong> — Sites with nested device lists</li>
        <li>
          <strong>alerts</strong> — Active and historical alerts with device context
        </li>
        <li><strong>agents</strong> — Remote poller agents and their assignments</li>
      </ul>

      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">Mutations</h3>
      <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 mb-4">
        <li>
          <strong>createDevice</strong> / <strong>updateDevice</strong> — Manage devices
        </li>
        <li>
          <strong>acknowledgeAlert</strong>
          / <strong>resolveAlert</strong>
          — Alert lifecycle management
        </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>Full reference:</strong>
          <a href="/docs/graphql" class="underline font-medium">
            GraphQL API Documentation →
          </a>
          — complete schema reference with query examples and variable usage.
        </p>
      </div>
    </div>
    """
  end
end