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

  attr :active_section, :string, required: true

  def sidebar(assigns) do
    ~H"""
    <div class="lg:col-span-1">
      <nav class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-4 sticky top-4">
        <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
          Sections
        </h3>
        <ul class="space-y-1">
          <li :for={{section_key, label} <- sections()}>
            <.link
              patch={~p"/help?section=#{section_key}"}
              class={[
                "block px-3 py-2 rounded-md text-sm font-medium transition-colors",
                active_class(section_key, @active_section)
              ]}
            >
              {label}
            </.link>
          </li>
        </ul>
      </nav>
    </div>
    """
  end

  defp sections do
    [
      {"about", "About Towerops"},
      {"getting-started", "Getting Started"},
      {"settings", "Organization Settings"},
      {"sites", "Sites"},
      {"cloud-pollers", "Cloud Pollers"},
      {"agents", "Remote Pollers"},
      {"integrations", "Integrations"},
      {"graphs", "Graphs & Live Polling"},
      {"insights", "Network Insights"},
      {"network-map", "Network Map"},
      {"api-tokens", "API Tokens"},
      {"rest-api", "REST API"},
      {"graphql-api", "GraphQL API"},
      {"mikrotik", "MikroTik"}
    ]
  end

  defp active_class(key, key), do: "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"

  defp active_class(_, _), do: "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
end