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

      <div class="prose prose-sm dark:prose-invert max-w-none">
        <p class="text-gray-600 dark:text-gray-400">
          Organization Settings is the central hub for configuring your Towerops organization. Access it
          from the main navigation under <.code>Organization Settings</.code>. The settings page uses a
          tabbed interface to organize different configuration areas.
        </p>

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

        <p class="text-gray-600 dark:text-gray-400">
          The General tab lets you manage basic organization properties:
        </p>

        <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-3">
          <li>
            <strong class="text-gray-900 dark:text-white">Organization Name</strong>
            — The display name for your organization
          </li>
          <li>
            <strong class="text-gray-900 dark:text-white">Default Organization</strong>
            — Set this as the default org when logging in
          </li>
          <li>
            <strong class="text-gray-900 dark:text-white">Sites Toggle</strong>
            — Enable or disable site-based device organization (see the
            <.link
              patch={~p"/help?section=sites"}
              class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
            >
              Sites
            </.link>
            section for details)
          </li>
        </ul>

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

        <p class="text-gray-600 dark:text-gray-400">
          Configure organization-wide SNMP defaults used for device polling:
        </p>

        <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-3">
          <li>
            <strong class="text-gray-900 dark:text-white">SNMP Version</strong>
            — Choose between v1, v2c, or v3
          </li>
          <li>
            <strong class="text-gray-900 dark:text-white">Community String</strong>
            — The SNMP community string for v1/v2c
          </li>
          <li>
            <strong class="text-gray-900 dark:text-white">SNMPv3 Credentials</strong>
            — Username, auth protocol, auth passphrase, privacy protocol, and privacy passphrase
          </li>
          <li>
            <strong class="text-gray-900 dark:text-white">Port</strong> — SNMP port (default: 161)
          </li>
        </ul>

        <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">
                Credential Hierarchy
              </h4>
              <p class="text-sm text-blue-800 dark:text-blue-300">
                SNMP credentials follow a hierarchy: <strong>Device > Site > Organization</strong>.
                Device-level settings take the highest priority, followed by site-level, then
                organization-level defaults. This lets you set sensible defaults while overriding
                for specific locations or devices.
              </p>
            </div>
          </div>
        </div>

        <p class="text-gray-600 dark:text-gray-400 mt-4">
          Use the <strong class="text-gray-900 dark:text-white">Force Apply</strong> button to push
          the organization's SNMP settings to all devices, overriding any device or site-level
          customizations.
        </p>

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

        <p class="text-gray-600 dark:text-gray-400">
          Configure organization-wide SSH credentials for MikroTik device monitoring. This tab is
          only accessible to superusers. See the
          <.link
            patch={~p"/help?section=mikrotik"}
            class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
          >
            MikroTik
          </.link>
          section for detailed setup instructions.
        </p>

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

        <p class="text-gray-600 dark:text-gray-400">
          Manage remote poller (agent) assignments for your organization:
        </p>

        <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-3">
          <li>
            <strong class="text-gray-900 dark:text-white">Default Agent</strong>
            — Set a default remote poller for all devices in the organization
          </li>
          <li>
            <strong class="text-gray-900 dark:text-white">Assignment Breakdown</strong>
            — View how devices are distributed across pollers (cloud vs. remote agents)
          </li>
        </ul>

        <p class="text-gray-600 dark:text-gray-400 mt-4">
          Use the <strong class="text-gray-900 dark:text-white">Force Apply</strong> button to push
          the default agent assignment to all devices, overriding any device or site-level agent
          selections.
        </p>

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

        <p class="text-gray-600 dark:text-gray-400">
          Connect Towerops with third-party services. See the
          <.link
            patch={~p"/help?section=integrations"}
            class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
          >
            Integrations
          </.link>
          section for full details on available integrations and how to configure them.
        </p>
      </div>
    </div>
    """
  end
end