defmodule ToweropsWeb.HelpLive.Sections.GettingStarted 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">
        Getting Started with Towerops
      </h2>

      <div class="prose prose-sm dark:prose-invert max-w-none">
        <p class="text-gray-600 dark:text-gray-400">
          Towerops is a network monitoring platform that helps you keep track of your network devices,
          monitor their health, and get alerts when issues occur.
        </p>

        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
          Quick Start Guide
        </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 a Site (Optional)
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                Sites represent physical or logical locations where your network devices are located.
                If you manage multiple locations, start by creating a site for your office, data center,
                or any location where you have equipment.
              </p>
              <p class="text-sm text-gray-500 dark:text-gray-500 mt-2">
                Navigate to
                <.code>Sites</.code>
                →
                <.code>Add Site</.code>
              </p>
              <p class="text-sm text-gray-500 dark:text-gray-500 mt-1">
                Sites are disabled by default and can be enabled later in
                <.link
                  patch={~p"/help?section=settings"}
                  class="underline hover:text-gray-700 dark:hover:text-gray-300"
                >
                  Organization Settings
                </.link>
                → General tab.
              </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 Your First Device
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                Add network devices like routers, switches, access points, or servers. You'll need the device's
                IP address or hostname, and SNMP community string (for SNMP-enabled devices).
              </p>
              <p class="text-sm text-gray-500 dark:text-gray-500 mt-2">
                Navigate to
                <.code>Devices</.code>
                →
                <.code>Add Device</.code>
              </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">
                View Device Metrics
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                Click on any device to view real-time metrics including CPU usage, memory, temperature,
                interface traffic, and more. Explore the different tabs to see network topology, port status,
                and historical performance data.
              </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-light-bulb"
              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">Pro Tip</h4>
              <p class="text-sm text-blue-800 dark:text-blue-300">
                For devices behind firewalls or in remote locations, you can deploy a remote poller
                to monitor devices locally without exposing them to the internet. See the
                <.link
                  patch={~p"/help?section=agents"}
                  class="underline hover:text-blue-900 dark:hover:text-blue-200"
                >
                  Remote Pollers
                </.link>
                section for more information.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    """
  end
end