defmodule ToweropsWeb.HelpLive.Sections.Integrations 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">Integrations</h2>

      <div class="prose prose-sm dark:prose-invert max-w-none">
        <p class="text-gray-600 dark:text-gray-400">
          Integrations allow you to connect Towerops with third-party services to enrich your
          monitoring data, sync subscriber information, and streamline your workflow. Configure
          integrations from
          <.code>Organization Settings</.code>
          →
          <.code>Integrations</.code>
          tab.
        </p>

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

        <p class="text-gray-600 dark:text-gray-400">
          <a
            href="https://preseem.com"
            class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
          >
            Preseem
          </a>
          is a Quality of Experience (QoE) monitoring platform designed for WISPs and broadband providers.
          The Preseem integration syncs subscriber and access point QoE data into Towerops, giving you
          a unified view of network health alongside device monitoring.
        </p>

        <h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">What It Syncs</h4>

        <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside">
          <li>Subscriber QoE scores and metrics</li>
          <li>Access point performance data</li>
          <li>Latency, jitter, and packet loss statistics</li>
        </ul>

        <h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">Configuration</h4>

        <div class="space-y-4">
          <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">
                Get Your Preseem API Key
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                Log in to your Preseem dashboard and generate an API key from your account settings.
              </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">
                Add the Integration
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                Navigate to
                <.code>Organization Settings</.code>
                →
                <.code>Integrations</.code>
                tab.
                Enter your Preseem API key and configure the sync interval.
              </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">
                Test the Connection
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                Use the <strong class="text-gray-900 dark:text-white">Test Connection</strong> button
                to verify your API key is valid and Towerops can reach the Preseem API.
              </p>
            </div>
          </div>
        </div>

        <div class="mt-4 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-information-circle"
              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">
                Sync Schedule
              </h4>
              <p class="text-sm text-blue-800 dark:text-blue-300">
                Preseem data is synced automatically on a periodic schedule based on your configured
                sync interval. You can also trigger a manual sync at any time from the integration settings.
              </p>
            </div>
          </div>
        </div>

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

        <p class="text-gray-600 dark:text-gray-400">
          <a
            href="https://gaiia.com"
            class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
          >
            Gaiia
          </a>
          is a billing and subscriber management platform. The Gaiia integration syncs subscriber data,
          service plans, and entity mappings into Towerops, enabling you to correlate network issues with
          specific customers and services.
        </p>

        <h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">What It Syncs</h4>

        <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside">
          <li>Subscriber accounts and contact information</li>
          <li>Service plans and subscription status</li>
          <li>Entity mappings between Gaiia and Towerops devices</li>
        </ul>

        <h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">Configuration</h4>

        <div class="space-y-4">
          <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">
                Configure Gaiia Credentials
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                Navigate to
                <.code>Organization Settings</.code>
                →
                <.code>Integrations</.code>
                tab
                and enter your Gaiia API credentials.
              </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">
                Set Up Webhooks
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                Configure a webhook in your Gaiia account pointing to the webhook URL provided
                in the integration settings. Webhooks enable real-time updates when subscriber
                data changes in Gaiia.
              </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">
                Entity Mapping & Reconciliation
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                After the initial sync, review the entity mapping to ensure Gaiia subscribers are
                correctly matched to Towerops devices. Use the reconciliation tools to resolve
                any mismatches.
              </p>
            </div>
          </div>
        </div>

        <div class="mt-4 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-information-circle"
              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">
                Sync Schedule
              </h4>
              <p class="text-sm text-blue-800 dark:text-blue-300">
                Gaiia data is synced through two mechanisms: automatic periodic syncs pull the full
                dataset on a schedule, while real-time webhooks push individual changes as they happen
                in Gaiia. This ensures your data stays current without excessive API calls.
              </p>
            </div>
          </div>
        </div>

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

        <p class="text-gray-600 dark:text-gray-400">
          <a
            href="https://www.pagerduty.com"
            class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
          >
            PagerDuty
          </a>
          is an incident management and on-call alerting platform. The PagerDuty integration provides
          2-way alert sync — when a device goes down in Towerops, a PagerDuty incident is automatically
          triggered. Acknowledging or resolving the alert in Towerops updates the PagerDuty incident as well.
        </p>

        <h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">How It Works</h4>

        <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside">
          <li>Device goes down → PagerDuty incident triggered (critical severity)</li>
          <li>Alert acknowledged in Towerops → PagerDuty incident acknowledged</li>
          <li>Device recovers / alert resolved → PagerDuty incident resolved</li>
        </ul>

        <h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">Configuration</h4>

        <div class="space-y-4">
          <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 Events API v2 Integration in PagerDuty
              </h4>
              <p class="text-sm text-gray-600 dark:text-gray-400">
                In PagerDuty, go to
                <.code>Services</.code>
                → select your service →
                <.code>Integrations</.code>
                tab →
                <.code>Add Integration</.code>
                → choose <.code>Events API v2</.code>. Copy the
                <.code>Integration Key</.code>
                (routing key).
              </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">
                Configure in Towerops
              </h4>
              <p class="text-sm text-gray-600 dark:text-gray-400">
                Navigate to
                <.code>Organization Settings</.code>
                →
                <.code>Integrations</.code>
                tab → click
                <.code>Configure</.code>
                on PagerDuty. Paste your integration key and test the connection.
              </p>
            </div>
          </div>
        </div>

        <div class="mt-4 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-information-circle"
              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">
                Event-Driven
              </h4>
              <p class="text-sm text-blue-800 dark:text-blue-300">
                Unlike other integrations, PagerDuty is event-driven — there is no periodic sync.
                Alerts are sent to PagerDuty in real time as they occur. No polling or sync interval is needed.
              </p>
            </div>
          </div>
        </div>

        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">
          General Integration Features
        </h3>

        <div class="mt-4 space-y-3">
          <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
            <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">Test Connection</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">
              Every integration includes a Test Connection button that validates your credentials
              and confirms Towerops can communicate with the external service before saving.
            </p>
          </div>

          <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
            <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">Sync Status</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">
              The Integrations tab shows the last sync time, sync status, and any errors for
              each configured integration.
            </p>
          </div>
        </div>
      </div>
    </div>
    """
  end
end