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

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

      <div class="prose prose-sm dark:prose-invert max-w-none">
        <p class="text-gray-600 dark:text-gray-400">
          Towerops provides powerful visualization capabilities for all monitored metrics. Every sensor,
          interface, and metric can be viewed as a time-series graph with multiple time ranges and a
          real-time live polling mode for instant feedback.
        </p>

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

        <p class="text-gray-600 dark:text-gray-400">
          Graphs are available throughout Towerops wherever metrics are displayed:
        </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">Device Overview:</strong>
            Click any metric tile (CPU, Memory, Temperature, etc.) to view its graph
          </li>
          <li>
            <strong class="text-gray-900 dark:text-white">Sensors Tab:</strong>
            Click the graph icon next to any sensor reading
          </li>
          <li>
            <strong class="text-gray-900 dark:text-white">Interfaces Tab:</strong>
            Click the graph icon next to any interface to view traffic graphs
          </li>
          <li>
            <strong class="text-gray-900 dark:text-white">Storage Tab:</strong>
            Click any storage volume to view usage over time
          </li>
        </ul>

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

        <p class="text-gray-600 dark:text-gray-400">
          All graphs support multiple time ranges for analyzing trends at different scales:
        </p>

        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
          <div class="p-3 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-1">1 Hour</h4>
            <p class="text-xs text-gray-600 dark:text-gray-400">Recent activity with high detail</p>
          </div>
          <div class="p-3 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-1">6 Hours</h4>
            <p class="text-xs text-gray-600 dark:text-gray-400">Half-day trends and patterns</p>
          </div>
          <div class="p-3 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-1">12 Hours</h4>
            <p class="text-xs text-gray-600 dark:text-gray-400">Business day overview</p>
          </div>
          <div class="p-3 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-1">
              24 Hours (Default)
            </h4>
            <p class="text-xs text-gray-600 dark:text-gray-400">Full day of activity</p>
          </div>
          <div class="p-3 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-1">7 Days</h4>
            <p class="text-xs text-gray-600 dark:text-gray-400">Weekly trends and patterns</p>
          </div>
          <div class="p-3 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-1">30 Days</h4>
            <p class="text-xs text-gray-600 dark:text-gray-400">
              Monthly overview and capacity planning
            </p>
          </div>
        </div>

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

        <p class="text-gray-600 dark:text-gray-400">
          Live mode provides real-time sensor monitoring with data updating every second. This is perfect for:
        </p>

        <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-3">
          <li>Testing configuration changes and seeing immediate effects</li>
          <li>Monitoring system load during maintenance or upgrades</li>
          <li>Watching temperature changes during thermal testing</li>
          <li>Observing traffic patterns during load testing</li>
          <li>Real-time troubleshooting of performance issues</li>
        </ul>

        <div class="mt-6 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
          <div class="flex gap-3">
            <.icon
              name="hero-signal"
              class="h-5 w-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5"
            />
            <div>
              <h4 class="text-sm font-semibold text-green-900 dark:text-green-300 mb-1">
                How Live Mode Works
              </h4>
              <ul class="text-sm text-green-800 dark:text-green-300 space-y-1 list-disc list-inside">
                <li>Polls sensors directly via SNMP every 1 second</li>
                <li>Displays a rolling 5-minute window (300 data points)</li>
                <li>Updates chart in real-time as new data arrives</li>
                <li>Automatically stops when you switch to another time range</li>
                <li>Works with remote pollers - polling happens on the agent</li>
              </ul>
            </div>
          </div>
        </div>

        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">Using Live Mode</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">
                Open Any Graph
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                Navigate to any device and click on a metric graph (CPU, Memory, Temperature, Traffic, etc.)
              </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">
                Click the "Live" Button
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                The Live button has a distinctive green gradient style and will pulse when active
              </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">
                Watch Real-Time Updates
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                The graph will start updating every second with fresh data. A pulsing green indicator
                shows that live polling is active.
              </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">
                Switch Back to Historical Data
              </h4>
              <p class="text-gray-600 dark:text-gray-400">
                Click any other time range button to stop live polling and view historical data
              </p>
            </div>
          </div>
        </div>

        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">
          Supported Metrics in Live Mode
        </h3>

        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
          <div class="p-3 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-1 flex items-center gap-2">
              <.icon name="hero-cpu-chip" class="h-4 w-4 text-blue-500" /> CPU / Processors
            </h4>
            <p class="text-xs text-gray-600 dark:text-gray-400">Real-time CPU load and utilization</p>
          </div>

          <div class="p-3 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-1 flex items-center gap-2">
              <.icon name="hero-circle-stack" class="h-4 w-4 text-blue-500" /> Memory Usage
            </h4>
            <p class="text-xs text-gray-600 dark:text-gray-400">RAM utilization percentage</p>
          </div>

          <div class="p-3 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-1 flex items-center gap-2">
              <.icon name="hero-fire" class="h-4 w-4 text-orange-500" /> Temperature
            </h4>
            <p class="text-xs text-gray-600 dark:text-gray-400">Device and component temperatures</p>
          </div>

          <div class="p-3 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-1 flex items-center gap-2">
              <.icon name="hero-bolt" class="h-4 w-4 text-yellow-500" /> Voltage
            </h4>
            <p class="text-xs text-gray-600 dark:text-gray-400">Power supply voltages</p>
          </div>

          <div class="p-3 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-1 flex items-center gap-2">
              <.icon name="hero-server-stack" class="h-4 w-4 text-purple-500" /> Storage
            </h4>
            <p class="text-xs text-gray-600 dark:text-gray-400">Disk usage and capacity</p>
          </div>

          <div class="p-3 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-1 flex items-center gap-2">
              <.icon name="hero-hashtag" class="h-4 w-4 text-green-500" /> Custom Metrics
            </h4>
            <p class="text-xs text-gray-600 dark:text-gray-400">Sessions, connections, and counts</p>
          </div>
        </div>

        <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 About Traffic Graphs
              </h4>
              <p class="text-sm text-blue-800 dark:text-blue-300">
                Live mode is currently only available for sensor metrics (CPU, memory, temperature, etc.).
                Interface traffic graphs use historical data only, as traffic calculations require
                comparing multiple SNMP polls over time.
              </p>
            </div>
          </div>
        </div>

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

        <div class="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">
              Multiple Sensors on One Graph
            </h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">
              When viewing aggregate metrics (like "Temperature" for all sensors), the graph
              automatically displays all sensors of that type with different colors for easy comparison.
            </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">
              Max and Min Values
            </h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">
              Historical graphs (non-live) display the maximum and minimum values for the selected
              time range at the bottom of the chart for quick reference.
            </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">
              Traffic Graph Direction
            </h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">
              Interface traffic graphs show outbound traffic as positive values (above zero) and
              inbound traffic as negative values (below zero) for easy visualization of bidirectional flow.
            </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">
              Automatic Unit Scaling
            </h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">
              Traffic graphs automatically scale units (bps, Kbps, Mbps, Gbps) based on the data
              range for optimal readability. Hover over data points to see exact values.
            </p>
          </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-light-bulb"
              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">
                Performance Tip
              </h4>
              <p class="text-sm text-yellow-800 dark:text-yellow-300">
                Live polling makes direct SNMP requests every second. While this provides instant
                feedback, keeping many live graphs open simultaneously may impact device performance.
                Use live mode for troubleshooting and testing, then switch back to historical ranges
                for routine monitoring.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    """
  end
end