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

      <div class="prose prose-sm dark:prose-invert max-w-none">
        <p class="text-gray-600 dark:text-gray-400">
          Sites are an optional organizational feature that lets you group devices by physical or logical
          locations such as offices, datacenters, customer locations, or network zones. Sites are disabled
          by default to keep things simple for single-location deployments.
        </p>

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

        <p class="text-gray-600 dark:text-gray-400">
          Consider enabling sites if you:
        </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">Manage multiple physical locations</strong>
            - Offices, datacenters, retail stores, etc.
          </li>
          <li>
            <strong class="text-gray-900 dark:text-white">Want to group credentials by location</strong>
            - Different SNMP communities or credentials per site
          </li>
          <li>
            <strong class="text-gray-900 dark:text-white">Need location-based monitoring</strong>
            - Assign different remote pollers to different sites
          </li>
          <li>
            <strong class="text-gray-900 dark:text-white">Organize by customer or department</strong>
            - Logical groupings for multi-tenant or large networks
          </li>
        </ul>

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

        <p class="text-gray-600 dark:text-gray-400">
          You can skip enabling sites if you:
        </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">Have a single location</strong>
            - All devices in one office or datacenter
          </li>
          <li>
            <strong class="text-gray-900 dark:text-white">Want a simpler setup</strong>
            - Devices belong directly to your organization without extra grouping
          </li>
          <li>
            <strong class="text-gray-900 dark:text-white">Don't need location-based credentials</strong>
            - Organization-level credentials work for all devices
          </li>
        </ul>

        <div class="mt-6 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">Note</h4>
              <p class="text-sm text-blue-800 dark:text-blue-300">
                Sites are optional and disabled by default. You can start without sites and enable them
                later if your needs change. When sites are disabled, all devices belong directly to
                your organization.
              </p>
            </div>
          </div>
        </div>

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

        <p class="text-gray-600 dark:text-gray-400">
          When sites are enabled, devices can be organized into sites, and credentials (SNMP communities,
          usernames, passwords) can be set at three levels:
        </p>

        <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">
              1. Organization Level
            </h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">
              Default credentials that apply to all devices across all sites in your organization.
            </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">
              2. Site Level (when sites enabled)
            </h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">
              Override organization defaults for all devices at a specific site. Useful when different
              locations have different network configurations.
            </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">3. Device Level</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">
              Override organization or site credentials for a specific device. Useful for devices with
              unique configurations.
            </p>
          </div>
        </div>

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

        <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">
                Navigate to Organization Settings
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                Go to
                <.code>Settings</.code>
                →
                <.code>Organization</.code>
                and scroll to the "Site Organization" section.
              </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">
                Enable the "Use Sites" Toggle
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                Check the box for "Use sites to organize devices" and save your 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">
                3
              </div>
            </div>
            <div class="flex-1">
              <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                Create Your First Site
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                Navigate to
                <.code>Sites</.code>
                →
                <.code>Add Site</.code>
                to create your first site. Give it a descriptive name like "Main Office" or "Dallas Datacenter".
              </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 Sites
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                When creating or editing devices, you can now assign them to specific sites. The site
                selector will appear in the device form.
              </p>
            </div>
          </div>
        </div>

        <div class="mt-8 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">
                Disabling Sites
              </h4>
              <p class="text-sm text-yellow-800 dark:text-yellow-300">
                If you disable sites after enabling them, all devices will be removed from their sites
                and assigned directly to the organization. Site assignments will be lost, but devices
                will remain in your organization and continue to be monitored.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    """
  end
end