defmodule ToweropsWeb.HelpLive.Sections.RestApi 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">REST API</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">
        The Towerops REST API provides programmatic access to your monitoring data. All endpoints are under
        <code class="rounded bg-gray-100 px-1.5 py-0.5 text-sm font-mono dark:bg-gray-700">
          /api/v1/
        </code>
        and require a valid API token.
      </p>

      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
        Available Endpoints
      </h3>
      <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 mb-4">
        <li>
          <strong>Devices</strong> — List, view, create, and update monitored devices
        </li>
        <li>
          <strong>Alerts</strong> — Query active and historical alerts, acknowledge, and resolve
        </li>
        <li><strong>Sites</strong> — Manage sites and their device assignments</li>
        <li><strong>Agents</strong> — List remote pollers and their status</li>
        <li>
          <strong>Check Results</strong> — Query monitoring check results and metrics
        </li>
        <li>
          <strong>Organization Settings</strong> — Read and update SNMP/MikroTik configuration
        </li>
        <li><strong>Members & Invitations</strong> — Manage organization membership</li>
        <li><strong>Integrations</strong> — Configure Preseem, Gaiia, and PagerDuty</li>
        <li>
          <strong>Activity Feed</strong> — Recent events and changes across the organization
        </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 -H \"Authorization: Bearer YOUR_TOKEN\" \\\n  https://app.towerops.net/api/v1/devices") %></code></pre>
      </div>
      <p class="text-gray-600 dark:text-gray-400 mb-4">
        All responses use
        <code class="rounded bg-gray-100 px-1.5 py-0.5 text-sm font-mono dark:bg-gray-700">
          {raw("&#123;\"data\": ...&#125;")}
        </code>
        format. Results are scoped to the organization associated with your API token.
      </p>

      <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/api" class="underline font-medium">REST API Documentation →</a>
          — complete endpoint reference with request/response examples.
        </p>
      </div>
    </div>
    """
  end
end