defmodule ToweropsWeb.DeviceLive.Components.WirelessTab do
  @moduledoc """
  LiveComponent for the device wireless clients tab.

  Displays wireless clients connected to the device with optional
  subscriber matching from Gaiia integration.
  """
  use ToweropsWeb, :live_component

  alias ToweropsWeb.DeviceLive.Helpers.DataLoaders

  @impl true
  def update(assigns, socket) do
    {:ok,
     socket
     |> assign(assigns)
     |> load_wireless_data()}
  end

  defp load_wireless_data(socket) do
    device_id = socket.assigns.device.id
    wireless_data = DataLoaders.load_wireless_data(device_id)

    socket
    |> assign(:wireless_clients, wireless_data.wireless_clients)
    |> assign(:wireless_client_subscribers, wireless_data.wireless_client_subscribers)
    |> assign(:wireless_client_count, wireless_data.wireless_client_count)
    |> assign(:wireless_matched_count, wireless_data.wireless_matched_count)
    |> assign(:wireless_last_updated, wireless_data.wireless_last_updated)
    |> assign(:wireless_clients_available, wireless_data.wireless_clients_available)
  end

  @impl true
  def render(assigns) do
    ~H"""
    <div id="wireless-tab">
      <%= if @wireless_clients && length(@wireless_clients) > 0 do %>
        <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
          <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10 flex items-center justify-between">
            <div>
              <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                {t("Connected Wireless Clients")}
              </h3>
              <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                {length(@wireless_clients)} clients — {@wireless_matched_count} subscribers matched
                <%= if @wireless_last_updated do %>
                  · Last updated {format_relative_time(@wireless_last_updated)}
                <% end %>
              </p>
            </div>
          </div>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
              <thead class="bg-gray-50 dark:bg-gray-800/75">
                <tr class="text-xs text-gray-600 dark:text-gray-400">
                  <th class="px-3 py-2 text-left font-medium">MAC Address</th>
                  <th class="px-3 py-2 text-left font-medium">IP Address</th>
                  <th class="px-3 py-2 text-left font-medium">Subscriber</th>
                  <th class="px-3 py-2 text-left font-medium">Signal</th>
                  <th class="px-3 py-2 text-left font-medium">SNR</th>
                  <th class="px-3 py-2 text-right font-medium">Distance</th>
                  <th class="px-3 py-2 text-right font-medium">TX Rate</th>
                  <th class="px-3 py-2 text-right font-medium">RX Rate</th>
                  <th class="px-3 py-2 text-right font-medium">Uptime</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-gray-200 dark:divide-white/10">
                <%= for client <- @wireless_clients do %>
                  <% subscriber_link =
                    Map.get(@wireless_client_subscribers, String.downcase(client.mac_address)) %>
                  <tr class="text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                    <td class="px-3 py-2 font-mono text-xs">
                      <span
                        class="cursor-pointer group/mac text-gray-900 dark:text-white"
                        phx-click={JS.dispatch("phx:copy", detail: %{text: client.mac_address})}
                        title={t("Click to copy")}
                      >
                        {client.mac_address}
                        <.icon
                          name="hero-clipboard-document"
                          class="h-3 w-3 inline ml-0.5 opacity-0 group-hover/mac:opacity-100 transition-opacity text-gray-400"
                        />
                      </span>
                    </td>
                    <td class="px-3 py-2 font-mono text-xs text-gray-600 dark:text-gray-400">
                      <%= if client.ip_address do %>
                        <span
                          class="cursor-pointer group/ip"
                          phx-click={JS.dispatch("phx:copy", detail: %{text: client.ip_address})}
                          title={t("Click to copy")}
                        >
                          {client.ip_address}
                          <.icon
                            name="hero-clipboard-document"
                            class="h-3 w-3 inline ml-0.5 opacity-0 group-hover/ip:opacity-100 transition-opacity text-gray-400"
                          />
                        </span>
                      <% else %>
                        <span class="text-gray-400">—</span>
                      <% end %>
                    </td>
                    <td class="px-3 py-2 text-xs">
                      <%= if subscriber_link && subscriber_link.gaiia_account do %>
                        <span class="text-gray-900 dark:text-white font-medium">
                          {subscriber_link.gaiia_account.account_name}
                        </span>
                      <% else %>
                        <span class="text-gray-400">—</span>
                      <% end %>
                    </td>
                    <td class="px-3 py-2 text-xs">
                      <%= if client.signal_strength do %>
                        <.signal_badge value={client.signal_strength} />
                      <% else %>
                        <span class="text-gray-400">—</span>
                      <% end %>
                    </td>
                    <td class="px-3 py-2 text-xs">
                      <%= if client.snr do %>
                        <.snr_badge value={client.snr} />
                      <% else %>
                        <span class="text-gray-400">—</span>
                      <% end %>
                    </td>
                    <td class="px-3 py-2 text-right font-mono text-xs text-gray-900 dark:text-white">
                      <%= if client.distance do %>
                        {client.distance}m
                      <% else %>
                        <span class="text-gray-400">—</span>
                      <% end %>
                    </td>
                    <td class="px-3 py-2 text-right font-mono text-xs text-gray-900 dark:text-white">
                      {format_rate(client.tx_rate)}
                    </td>
                    <td class="px-3 py-2 text-right font-mono text-xs text-gray-900 dark:text-white">
                      {format_rate(client.rx_rate)}
                    </td>
                    <td class="px-3 py-2 text-right font-mono text-xs text-gray-600 dark:text-gray-400">
                      <%= if client.uptime_seconds do %>
                        {format_uptime(client.uptime_seconds * 100)}
                      <% else %>
                        <span class="text-gray-400">—</span>
                      <% end %>
                    </td>
                  </tr>
                <% end %>
              </tbody>
            </table>
          </div>
        </div>
      <% else %>
        <div class="text-center py-12">
          <.icon
            name="hero-signal"
            class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-600"
          />
          <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
            {t("No wireless clients")}
          </h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            {t("No clients are currently connected to this access point.")}
          </p>
        </div>
      <% end %>
    </div>
    """
  end

  # Helper functions
  defp format_relative_time(datetime) do
    ToweropsWeb.TimeHelpers.format_time_ago(datetime)
  end

  defp format_rate(nil), do: "—"

  defp format_rate(kbps) when is_integer(kbps) do
    mbps = kbps / 1000
    "#{Float.round(mbps, 1)} Mbps"
  end

  defp format_uptime(timeticks) when is_integer(timeticks) do
    seconds = div(timeticks, 100)
    hours = div(seconds, 3600)
    remainder = rem(seconds, 3600)
    minutes = div(remainder, 60)

    cond do
      hours > 0 -> "#{hours}h #{minutes}m"
      minutes > 0 -> "#{minutes}m"
      true -> "<1m"
    end
  end

  defp format_uptime(_), do: "—"
end