prop/lib/microwaveprop_web/live/map_live.ex

defmodule MicrowavepropWeb.MapLive do
  @moduledoc false
  use MicrowavepropWeb, :live_view

  alias Microwaveprop.Propagation
  alias Microwaveprop.Propagation.BandConfig

  @default_band 10_000
  @initial_bounds %{
    "south" => 29.5,
    "north" => 36.3,
    "west" => -101.5,
    "east" => -92.5
  }

  @impl true
  def mount(_params, _session, socket) do
    bands = BandConfig.all_bands()
    valid_time = Propagation.latest_valid_time()
    initial_scores = Propagation.latest_scores(@default_band, @initial_bounds)

    if connected?(socket) do
      Phoenix.PubSub.subscribe(Microwaveprop.PubSub, "propagation:updated")
    end

    {:ok,
     assign(socket,
       page_title: "Propagation Map",
       bands: bands,
       selected_band: @default_band,
       initial_scores_json: Jason.encode!(initial_scores),
       valid_time: valid_time,
       bounds: @initial_bounds,
       grid_visible: false
     )}
  end

  @impl true
  def handle_event("select_band", %{"value" => band}, socket) do
    band = if is_binary(band), do: String.to_integer(band), else: band
    scores = Propagation.latest_scores(band, socket.assigns.bounds)

    socket =
      socket
      |> assign(:selected_band, band)
      |> push_event("update_scores", %{scores: scores})
      |> push_event("update_band_info", %{band_info: band_info(band)})

    {:noreply, socket}
  end

  def handle_event("toggle_grid", _params, socket) do
    visible = !socket.assigns.grid_visible

    socket =
      socket
      |> assign(:grid_visible, visible)
      |> push_event("toggle_grid", %{visible: visible})

    {:noreply, socket}
  end

  def handle_event("point_detail", %{"lat" => lat, "lon" => lon}, socket) do
    detail = Propagation.point_detail(socket.assigns.selected_band, lat, lon)
    {:noreply, push_event(socket, "point_detail", detail || %{})}
  end

  def handle_event("map_bounds", bounds, socket) do
    scores = Propagation.latest_scores(socket.assigns.selected_band, bounds)

    socket =
      socket
      |> assign(:bounds, bounds)
      |> push_event("update_scores", %{scores: scores})

    {:noreply, socket}
  end

  @impl true
  def handle_info({:propagation_updated, valid_time}, socket) do
    scores = Propagation.latest_scores(socket.assigns.selected_band, socket.assigns.bounds)

    socket =
      socket
      |> assign(:valid_time, valid_time)
      |> push_event("update_scores", %{scores: scores})

    {:noreply, socket}
  end

  defp band_info(band_mhz) do
    config = BandConfig.get(band_mhz)

    %{
      band_label: config.label,
      typical_range_km: config.typical_range_km,
      extended_range_km: config.extended_range_km,
      exceptional_range_km: config.exceptional_range_km
    }
  end

  defp time_ago(dt) do
    seconds = DateTime.diff(DateTime.utc_now(), dt)

    cond do
      seconds < 60 -> "just now"
      seconds < 3600 -> "#{div(seconds, 60)}m ago"
      seconds < 86_400 -> "#{div(seconds, 3600)}h ago"
      true -> "#{div(seconds, 86_400)}d ago"
    end
  end

  defp selected_label(bands, selected_band) do
    case Enum.find(bands, &(&1.freq_mhz == selected_band)) do
      nil -> "Select Band"
      band -> band.label
    end
  end

  @impl true
  def render(assigns) do
    ~H"""
    <div class="relative w-screen h-screen">
      <%!-- Full-page map --%>
      <div
        id="propagation-map"
        phx-hook="PropagationMap"
        phx-update="ignore"
        data-scores={@initial_scores_json}
        data-band-info={Jason.encode!(band_info(@selected_band))}
        class="absolute inset-0 z-0"
      >
      </div>

      <%!-- Top-left control panel --%>
      <div id="map-controls" class="absolute top-3 left-14 z-[1000] flex flex-col gap-2">
        <div class="bg-base-100/90 shadow rounded-box border border-base-300 p-3 flex flex-col gap-2">
          <div class="font-bold text-sm leading-tight px-1">
            North Texas Microwave Society
            <div class="font-normal text-xs opacity-70">Propagation Map</div>
          </div>

          <%!-- Band selector --%>
          <div class="dropdown">
            <div tabindex="0" role="button" class="btn btn-sm w-full justify-between">
              <span class="flex items-center gap-1.5">
                <.icon name="hero-signal" class="size-4" />
                {selected_label(@bands, @selected_band)}
              </span>
              <.icon name="hero-chevron-down" class="size-3" />
            </div>
            <ul
              tabindex="0"
              class="dropdown-content menu bg-base-100 rounded-box shadow-lg w-44 mt-1 p-1"
            >
              <li :for={band <- @bands}>
                <button
                  onclick="document.activeElement.blur()"
                  phx-click={
                    JS.dispatch("show-loading", to: "#propagation-map")
                    |> JS.push("select_band", value: %{value: band.freq_mhz})
                  }
                  class={[if(@selected_band == band.freq_mhz, do: "active")]}
                >
                  {band.label}
                </button>
              </li>
            </ul>
          </div>

          <%!-- Grid toggle --%>
          <label class="flex items-center gap-2 cursor-pointer px-1">
            <input
              type="checkbox"
              class="toggle toggle-sm toggle-primary"
              checked={@grid_visible}
              phx-click="toggle_grid"
            />
            <span class="text-sm">Grid squares</span>
          </label>

          <%!-- Latest data --%>
          <div :if={@valid_time} class="text-xs opacity-70 px-1">
            Data: {Calendar.strftime(@valid_time, "%b %d, %H:%M UTC")} ({time_ago(@valid_time)})
          </div>

          <%!-- Links --%>
          <div class="flex flex-col gap-1 border-t border-base-300 pt-2">
            <.link navigate="/algo" class="btn btn-xs btn-ghost justify-start gap-1.5">
              <.icon name="hero-calculator" class="size-3.5" /> Scoring Algorithm
            </.link>
            <.link navigate="/submit" class="btn btn-xs btn-ghost justify-start gap-1.5">
              <.icon name="hero-arrow-up-tray" class="size-3.5" /> Submit a QSO
            </.link>
          </div>
        </div>
      </div>
    </div>

    <Layouts.flash_group flash={@flash} />
    """
  end
end