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

  import ToweropsWeb.HelpLive.Sections.Helpers

  def render(assigns) do
    ~H"""
    <div class="p-6">
      <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Remote Pollers</h2>

      <div class="prose prose-sm dark:prose-invert max-w-none">
        <p class="text-gray-600 dark:text-gray-400">
          Remote pollers are lightweight Docker containers that run on your network to monitor devices
          that aren't accessible from the public internet — behind firewalls, on private networks, or
          at remote locations. They use minimal resources (1 CPU core, 512 MB RAM) and auto-update
          themselves via Watchtower. Just deploy a
          <.code>docker-compose.yml</.code>
          and you're done.
        </p>

        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">Requirements</h3>

        <p class="text-gray-600 dark:text-gray-400">
          Remote pollers can run on any system that supports Docker Compose, including:
        </p>

        <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside">
          <li>Linux servers (Ubuntu, Debian, CentOS, RHEL, etc.)</li>
          <li>Windows Server with Docker Desktop</li>
          <li>macOS with Docker Desktop</li>
          <li>Raspberry Pi or other ARM-based systems</li>
          <li>Virtual machines (VMware, Hyper-V, Proxmox, etc.)</li>
        </ul>

        <div class="mt-4 p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
          <p class="text-sm text-gray-600 dark:text-gray-400">
            <strong class="text-gray-900 dark:text-white">Minimum requirements:</strong>
            1 CPU core, 512 MB RAM, and network access to your devices
          </p>
        </div>

        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">Getting Started</h3>

        <div class="space-y-6">
          <div class="flex gap-4">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                1
              </div>
            </div>
            <div class="flex-1">
              <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                Create an Agent Token
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                Navigate to the
                <.code>Agents</.code>
                page in Towerops and create a new agent token. This token authenticates your remote poller with the Towerops platform.
              </p>
            </div>
          </div>

          <div class="flex gap-4">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                2
              </div>
            </div>
            <div class="flex-1">
              <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                Create a docker-compose.yml
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                When you create a new agent on the
                <.code>Agents</.code>
                page, Towerops will show you a ready-to-use
                <.code>docker-compose.yml</.code>
                with your agent token pre-filled. It looks like this:
              </p>
              <div class="mt-3 p-4 bg-black rounded-lg not-prose overflow-x-auto">
                <pre class="text-xs text-green-400 font-mono"><code><%= raw(~S[services:
    towerops-agent:
    image: codeberg.org/towerops-agent/towerops-agent:latest
    container_name: towerops-agent
    restart: unless-stopped
    environment:
      - TOWEROPS_API_URL=https://app.towerops.net/
      - TOWEROPS_AGENT_TOKEN=your-token-here
    labels:
      - "com.centurylinklabs.watchtower.enable=true"
      - "com.centurylinklabs.watchtower.scope=towerops"

    watchtower:
    image: containrrr/watchtower:latest
    container_name: towerops-watchtower
    restart: unless-stopped
    environment:
      - WATCHTOWER_POLL_INTERVAL=43200
      - WATCHTOWER_LABEL_ENABLE=true
      - WATCHTOWER_SCOPE=towerops
      - WATCHTOWER_CLEANUP=true
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock]) %></code></pre>
              </div>
              <p class="text-gray-600 dark:text-gray-400 mt-3">
                The agent is lightweight — it uses minimal CPU and memory. Watchtower is included
                to automatically update the agent every 12 hours, so you never have to think about it.
              </p>
            </div>
          </div>

          <div class="flex gap-4">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                3
              </div>
            </div>
            <div class="flex-1">
              <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">Deploy It</h4>
              <p class="text-gray-600 dark:text-gray-400">
                Copy the
                <.code>docker-compose.yml</.code>
                to your server and run:
              </p>
              <div class="mt-3 p-4 bg-black rounded-lg not-prose">
                <pre class="text-sm text-white font-mono"><code>docker compose up -d</code></pre>
              </div>
              <p class="text-gray-600 dark:text-gray-400 mt-3">
                That's it. The agent will connect to Towerops within seconds and start polling your local devices.
                You'll see it come online on the Agents page.
              </p>
            </div>
          </div>

          <div class="flex gap-4">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                4
              </div>
            </div>
            <div class="flex-1">
              <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                Assign Devices to Remote Poller
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                You can assign devices to your remote poller in several ways:
              </p>
              <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-2">
                <li>
                  <strong class="text-gray-900 dark:text-white">Per Organization:</strong>
                  Set a default agent for all devices in your organization
                </li>
                <li>
                  <strong class="text-gray-900 dark:text-white">Per Site:</strong>
                  Set a default agent for all devices at a specific site
                </li>
                <li>
                  <strong class="text-gray-900 dark:text-white">Per Device:</strong>
                  Select the remote poller when creating or editing individual devices
                </li>
              </ul>
              <p class="text-gray-600 dark:text-gray-400 mt-3">
                Devices assigned to a remote poller will be monitored from your local network instead
                of from the cloud.
              </p>
            </div>
          </div>
        </div>

        <div class="mt-8 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
          <div class="flex gap-3">
            <.icon
              name="hero-shield-check"
              class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
            />
            <div>
              <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
                Security Note
              </h4>
              <p class="text-sm text-blue-800 dark:text-blue-300">
                Remote pollers use secure WebSocket connections to communicate with Towerops.
                Your agent token is encrypted and should be kept confidential. The remote poller
                only needs outbound HTTPS access (port 443) to connect to Towerops - no inbound
                ports need to be opened on your firewall.
              </p>
            </div>
          </div>
        </div>

        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">
          Managing Remote Pollers
        </h3>

        <p class="text-gray-600 dark:text-gray-400">
          You can view the status of your remote pollers on the Agents page. The page shows:
        </p>

        <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-3">
          <li>Last connection time</li>
          <li>Number of devices assigned to each poller</li>
          <li>Connection status (online/offline)</li>
        </ul>

        <div class="mt-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
          <div class="flex gap-3">
            <.icon
              name="hero-exclamation-triangle"
              class="h-5 w-5 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5"
            />
            <div>
              <h4 class="text-sm font-semibold text-yellow-900 dark:text-yellow-300 mb-1">
                Important
              </h4>
              <p class="text-sm text-yellow-800 dark:text-yellow-300">
                If a remote poller goes offline, devices assigned to it will not be monitored until
                the poller comes back online. Consider setting up monitoring alerts for your remote
                pollers to be notified if they disconnect.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    """
  end
end