towerops/lib/towerops_web/live/config_timeline_live.ex

defmodule ToweropsWeb.ConfigTimelineLive do
  @moduledoc """
  Timeline visualization showing config change events overlaid with
  QoE metrics and check results for a device.
  """
  use ToweropsWeb, :live_view

  alias Towerops.ConfigChanges
  alias Towerops.Devices
  alias Towerops.Monitoring
  alias Towerops.Preseem
  alias ToweropsWeb.Live.Helpers.AccessControl

  @ranges %{
    "24h" => 24,
    "7d" => 24 * 7,
    "30d" => 24 * 30
  }

  @impl true
  def mount(%{"device_id" => device_id}, _session, socket) do
    organization = socket.assigns.current_scope.organization

    case AccessControl.verify_device_access(device_id, organization.id) do
      {:ok, _} ->
        device =
          case Devices.get_device(device_id) do
            nil -> raise Ecto.NoResultsError, queryable: Towerops.Devices.DeviceSchema
            device -> device
          end

        {:ok, assign(socket, device: device, page_title: "Config Timeline — #{device.name}", active_page: "devices")}

      {:error, _} ->
        {:ok,
         socket
         |> put_flash(:error, t("Device not found"))
         |> redirect(to: ~p"/devices")}
    end
  end

  @impl true
  def handle_params(params, _url, socket) do
    range = Map.get(params, "range", "7d")
    hours = Map.get(@ranges, range, 24 * 7)
    since = DateTime.add(DateTime.utc_now(), -hours * 3600, :second)

    device = socket.assigns.device

    change_events = ConfigChanges.list_device_changes(device.id, after: since, limit: 100)
    qoe_data = load_qoe_data(device.id, since)
    check_data = load_check_data(device.id, since)

    {:noreply,
     socket
     |> assign(:range, range)
     |> assign(:change_events, change_events)
     |> assign(:qoe_data, qoe_data)
     |> assign(:check_data, check_data)
     |> assign(:selected_event, nil)}
  end

  @impl true
  def handle_event("select_range", %{"range" => range}, socket) do
    {:noreply, push_patch(socket, to: ~p"/devices/#{socket.assigns.device.id}/config-timeline?range=#{range}")}
  end

  @impl true
  def handle_event("select_event", %{"id" => event_id}, socket) do
    event = ConfigChanges.get_change_event_with_preloads!(event_id)
    {:noreply, assign(socket, :selected_event, event)}
  end

  @impl true
  def handle_event("close_event", _, socket) do
    {:noreply, assign(socket, :selected_event, nil)}
  end

  @impl true
  def render(assigns) do
    ~H"""
    <.breadcrumb items={[
      %{label: "Dashboard", navigate: ~p"/dashboard"},
      %{label: "Devices", navigate: ~p"/devices"},
      %{label: @device.name, navigate: ~p"/devices/#{@device.id}"},
      %{label: "Config Timeline"}
    ]} />
    <div class="space-y-6">
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-2xl font-bold">Config Timeline</h1>
          <p class="text-base-content/60">
            <.link navigate={~p"/devices/#{@device.id}?tab=overview"} class="link link-hover">
              {@device.name}
            </.link>
            — Config changes vs performance metrics
          </p>
        </div>
        <div class="join">
          <button
            :for={r <- ["24h", "7d", "30d"]}
            class={"join-item btn btn-sm #{if @range == r, do: "btn-primary", else: "btn-ghost"}"}
            phx-click="select_range"
            phx-value-range={r}
          >
            {r}
          </button>
        </div>
      </div>

      <%!-- Timeline chart area --%>
      <div class="card bg-base-100 shadow-sm">
        <div class="card-body">
          <h2 class="card-title text-lg">Performance & Config Changes</h2>

          <%!-- QoE metrics chart placeholder — rendered via hook --%>
          <div
            id="config-timeline-chart"
            phx-hook="ConfigTimelineChart"
            data-qoe={Jason.encode!(@qoe_data)}
            data-changes={Jason.encode!(Enum.map(@change_events, &timeline_event/1))}
            data-checks={Jason.encode!(@check_data)}
            class="h-64 w-full"
          >
            <div class="flex items-center justify-center h-full text-base-content/40">
              Loading chart...
            </div>
          </div>
        </div>
      </div>

      <%!-- Change events list --%>
      <div class="card bg-base-100 shadow-sm">
        <div class="card-body">
          <h2 class="card-title text-lg">Config Changes ({length(@change_events)})</h2>

          <%= if Enum.empty?(@change_events) do %>
            <p class="text-base-content/50 py-4">No config changes in this period.</p>
          <% else %>
            <div class="overflow-x-auto">
              <table class="table table-sm">
                <thead>
                  <tr>
                    <th>When</th>
                    <th>Sections</th>
                    <th>Size</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    :for={event <- @change_events}
                    class="hover:bg-base-200/50 cursor-pointer"
                    phx-click="select_event"
                    phx-value-id={event.id}
                  >
                    <td class="whitespace-nowrap">
                      {Calendar.strftime(event.changed_at, "%b %d, %H:%M UTC")}
                    </td>
                    <td>
                      <span
                        :for={section <- event.sections_changed}
                        class="badge badge-sm badge-ghost mr-1"
                      >
                        {section}
                      </span>
                    </td>
                    <td>
                      <span class={"badge badge-sm #{change_size_class(event.change_size)}"}>
                        {event.change_size} lines
                      </span>
                    </td>
                    <td>
                      <.link
                        navigate={
                          ~p"/devices/#{@device.id}/backups/compare?before=#{event.backup_before_id}&after=#{event.backup_after_id}"
                        }
                        class="btn btn-xs btn-ghost"
                      >
                        View Diff
                      </.link>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          <% end %>
        </div>
      </div>

      <%!-- Selected event detail modal --%>
      <%= if @selected_event do %>
        <div class="card bg-base-100 shadow-sm border border-primary/20">
          <div class="card-body">
            <div class="flex items-center justify-between">
              <h2 class="card-title text-lg">
                Change Details — {Calendar.strftime(@selected_event.changed_at, "%b %d, %H:%M UTC")}
              </h2>
              <button class="btn btn-sm btn-ghost" phx-click="close_event">✕</button>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
              <div>
                <span class="text-sm font-medium text-base-content/60">Sections Changed</span>
                <div class="mt-1">
                  <span
                    :for={s <- @selected_event.sections_changed}
                    class="badge badge-sm badge-outline mr-1"
                  >
                    {s}
                  </span>
                  <span
                    :if={Enum.empty?(@selected_event.sections_changed)}
                    class="text-base-content/40"
                  >
                    Unknown
                  </span>
                </div>
              </div>
              <div>
                <span class="text-sm font-medium text-base-content/60">Lines Changed</span>
                <p class="font-mono">{@selected_event.change_size}</p>
              </div>
              <div>
                <.link
                  navigate={
                    ~p"/devices/#{@device.id}/backups/compare?before=#{@selected_event.backup_before_id}&after=#{@selected_event.backup_after_id}"
                  }
                  class="btn btn-sm btn-primary"
                >
                  Full Diff View →
                </.link>
              </div>
            </div>

            <%= if @selected_event.diff_summary do %>
              <div class="mt-4">
                <span class="text-sm font-medium text-base-content/60">Diff Summary</span>
                <pre class="bg-base-200 p-3 rounded-lg mt-1 text-xs overflow-x-auto max-h-48 overflow-y-auto"><code>{@selected_event.diff_summary}</code></pre>
              </div>
            <% end %>
          </div>
        </div>
      <% end %>
    </div>
    """
  end

  # -- Data loaders --

  defp load_qoe_data(device_id, since) do
    Preseem.get_device_qoe_data(device_id, since)
  end

  defp load_check_data(device_id, since) do
    Monitoring.get_device_check_data(device_id, since)
  end

  @doc false
  def timeline_event(event) do
    %{
      id: event.id,
      t: DateTime.to_iso8601(event.changed_at),
      sections: event.sections_changed,
      size: event.change_size
    }
  end

  @doc false
  def change_size_class(size) when is_integer(size) and size > 50, do: "badge-error"
  def change_size_class(size) when is_integer(size) and size > 20, do: "badge-warning"
  def change_size_class(_), do: "badge-info"
end