towerops/lib/towerops_web/live/org/preseem_devices_live.html.heex

<Layouts.authenticated
  flash={@flash}
  current_scope={@current_scope}
  unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
>
  <div class="border-b border-cool-steel-200 pb-5 dark:border-white/5">
    <.breadcrumb items={[
      %{label: "Dashboard", navigate: ~p"/dashboard"},
      %{label: "Settings", navigate: ~p"/orgs/#{@organization.slug}/settings"},
      %{label: "Integrations", navigate: ~p"/orgs/#{@organization.slug}/settings/integrations"},
      %{label: "Preseem"}
    ]} />
    <h1 class="text-3xl font-semibold tracking-tight text-cool-steel-900 dark:text-white">
      {t("Preseem Devices")}
    </h1>
    <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
      {t(
        "For each Preseem access point, find and link the matching TowerOps device. This enables subscriber impact data when access points go down."
      )}
    </p>
  </div>

  <%!-- Sub-navigation tabs --%>
  <div class="mt-4 border-b border-cool-steel-200 dark:border-white/10">
    <nav class="flex space-x-6">
      <.link
        navigate={~p"/orgs/#{@organization.slug}/settings/integrations/preseem/devices"}
        class="border-b-2 border-cerulean-500 px-1 pb-3 text-sm font-medium text-cerulean-600 dark:text-cerulean-400"
      >
        {t("Devices")}
      </.link>
      <.link
        navigate={~p"/insights?source=preseem"}
        class="border-b-2 border-transparent px-1 pb-3 text-sm font-medium text-cool-steel-500 hover:border-cool-steel-300 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:border-cool-steel-600 dark:hover:text-white"
      >
        {t("Insights")}
      </.link>
    </nav>
  </div>

  <%!-- Filter pills --%>
  <div class="mt-4 flex items-center gap-2">
    <.link
      :for={{f, label} <- [{"all", "All"}, {"unmatched", "Unmatched"}, {"matched", "Matched"}]}
      id={"filter-#{f}"}
      patch={~p"/orgs/#{@organization.slug}/settings/integrations/preseem/devices?filter=#{f}"}
      class={[
        "rounded-full px-3 py-1 text-xs font-medium",
        if(@filter == f,
          do: "bg-cerulean-100 text-cerulean-700 dark:bg-cerulean-900/40 dark:text-cerulean-300",
          else:
            "bg-cool-steel-100 text-cool-steel-600 hover:bg-cool-steel-200 dark:bg-white/5 dark:text-cool-steel-400 dark:hover:bg-white/10"
        )
      ]}
    >
      {label}
    </.link>
  </div>

  <%!-- Access points table --%>
  <div class="mt-6">
    <%= if @access_points == [] do %>
      <div
        id="empty-state"
        class="rounded-lg border-2 border-dashed border-cool-steel-300 p-12 text-center dark:border-cool-steel-700"
      >
        <.icon
          name="hero-signal"
          class="mx-auto h-12 w-12 text-cool-steel-400 dark:text-cool-steel-500"
        />
        <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
          {t("No access points found")}
        </h3>
        <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
          <%= case @filter do %>
            <% "unmatched" -> %>
              {t("All access points are matched. Nice!")}
            <% "matched" -> %>
              {t("No matched access points yet. Sync from Preseem and link devices.")}
            <% _ -> %>
              {t(
                "No Preseem access points have been synced yet. Enable the integration and run a sync."
              )}
          <% end %>
        </p>
      </div>
    <% else %>
      <div class="overflow-x-auto rounded-lg border border-cool-steel-200 dark:border-white/10">
        <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
          <thead class="bg-cool-steel-50 dark:bg-white/5">
            <tr>
              <th
                scope="col"
                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
              >
                {t("Access Point")}
              </th>
              <th
                scope="col"
                class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 md:table-cell"
              >
                {t("IP Address")}
              </th>
              <th
                scope="col"
                class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 sm:table-cell"
              >
                {t("Status")}
              </th>
              <th
                scope="col"
                class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 md:table-cell"
              >
                {t("Linked Device")}
              </th>
              <th
                scope="col"
                class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
              >
                {t("Actions")}
              </th>
            </tr>
          </thead>
          <tbody class="divide-y divide-cool-steel-200 bg-white dark:divide-white/5 dark:bg-transparent">
            <%= for ap <- @access_points do %>
              <tr
                id={"ap-row-#{ap.id}"}
                class={[
                  "hover:bg-cool-steel-50 dark:hover:bg-white/5",
                  if(is_nil(ap.device), do: "cursor-pointer")
                ]}
                phx-click={if(is_nil(ap.device), do: "start_link")}
                phx-value-ap-id={if(is_nil(ap.device), do: ap.id)}
              >
                <td class="px-4 py-4 text-sm">
                  <div>
                    <div class="flex flex-wrap items-center gap-2">
                      <span class="break-all font-medium text-cool-steel-900 dark:text-white">
                        {ap.name || "Unnamed"}
                      </span>
                      <%= if Map.has_key?(@suggestions, ap.id) do %>
                        <span class="inline-flex items-center rounded-full bg-wheat-100 px-2 py-0.5 text-xs font-medium text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400">
                          <.icon name="hero-light-bulb-mini" class="mr-0.5 h-3 w-3" /> Match found
                        </span>
                      <% end %>
                    </div>
                    <span class="mt-0.5 block text-xs text-cool-steel-400 dark:text-cool-steel-500 sm:hidden">
                      {ap.preseem_id}
                    </span>
                    <span class={[
                      "mt-1 inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium sm:hidden",
                      match_confidence_classes(ap.match_confidence)
                    ]}>
                      {humanize_confidence(ap.match_confidence)}
                    </span>
                  </div>
                </td>
                <td class="hidden whitespace-nowrap px-4 py-4 text-sm text-cool-steel-500 dark:text-cool-steel-400 md:table-cell">
                  <%= if ap.ip_address do %>
                    <a
                      href={"http://#{ap.ip_address}"}
                      target="_blank"
                      rel="noopener noreferrer"
                      class="font-mono hover:text-cerulean-600 dark:hover:text-cerulean-400"
                      onclick="event.stopPropagation()"
                    >
                      {ap.ip_address}
                    </a>
                  <% else %>
                    —
                  <% end %>
                </td>
                <td class="hidden whitespace-nowrap px-4 py-4 text-sm sm:table-cell">
                  <span class={[
                    "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
                    match_confidence_classes(ap.match_confidence)
                  ]}>
                    {humanize_confidence(ap.match_confidence)}
                  </span>
                </td>
                <td class="hidden whitespace-nowrap px-4 py-4 text-sm text-cool-steel-500 dark:text-cool-steel-400 md:table-cell">
                  <%= if ap.device do %>
                    <.link
                      navigate={~p"/devices/#{ap.device.id}"}
                      class="text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
                      onclick="event.stopPropagation()"
                    >
                      {ap.device.name || ap.device.ip_address}
                    </.link>
                  <% else %>
                    <span class="inline-flex items-center rounded-full bg-cool-steel-100 px-2.5 py-0.5 text-xs font-medium text-cool-steel-500 dark:bg-white/10 dark:text-cool-steel-400">
                      Not linked
                    </span>
                  <% end %>
                </td>
                <td class="whitespace-nowrap px-4 py-4 text-right text-sm">
                  <%= if ap.device do %>
                    <button
                      type="button"
                      id={"unlink-ap-#{ap.id}"}
                      phx-click="unlink_device"
                      phx-value-ap-id={ap.id}
                      data-confirm={t("Unlink this device from the Preseem access point?")}
                      class="text-sweet-salmon-600 hover:text-sweet-salmon-800 dark:text-sweet-salmon-400 dark:hover:text-sweet-salmon-300"
                      onclick="event.stopPropagation()"
                    >
                      {t("Unlink")}
                    </button>
                  <% else %>
                    <button
                      type="button"
                      id={"link-ap-#{ap.id}"}
                      phx-click="start_link"
                      phx-value-ap-id={ap.id}
                      class="text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
                      onclick="event.stopPropagation()"
                    >
                      {t("Link")}
                    </button>
                  <% end %>
                </td>
              </tr>
              <%!-- Inline linking row --%>
              <%= if ap.id == @linking_ap_id do %>
                <tr id={"linking-row-#{ap.id}"} class="bg-cerulean-50 dark:bg-cerulean-900/20">
                  <td colspan="5" class="px-4 py-4">
                    <div class="flex items-start gap-4">
                      <div class="flex-1">
                        <p class="mb-2 text-sm font-medium text-cool-steel-900 dark:text-white">
                          Find a TowerOps device to link to
                          <span class="text-cerulean-600 dark:text-cerulean-400">{ap.name}</span>
                        </p>

                        <%!-- Suggestions --%>
                        <%= if suggestions = @suggestions[ap.id] do %>
                          <div class="mb-3">
                            <p class="mb-1 text-xs font-medium text-wheat-700 dark:text-wheat-400">
                              <.icon name="hero-light-bulb-mini" class="mr-0.5 inline h-3 w-3" />
                              {t("Suggested match (same IP):")}
                            </p>
                            <div class="flex flex-wrap gap-2">
                              <%= for suggestion <- suggestions do %>
                                <button
                                  type="button"
                                  phx-click="link_device"
                                  phx-value-ap-id={ap.id}
                                  phx-value-device-id={suggestion.device.id}
                                  class="inline-flex items-center gap-1.5 rounded-md border border-wheat-300 bg-wheat-50 px-2.5 py-1.5 text-xs font-medium text-wheat-800 hover:bg-wheat-100 dark:border-wheat-700 dark:bg-wheat-900/20 dark:text-wheat-300 dark:hover:bg-wheat-900/40"
                                >
                                  {suggestion.device.name || suggestion.device.ip_address ||
                                    "Unnamed"}
                                  <span class="rounded bg-wheat-200 px-1 text-wheat-700 dark:bg-wheat-800 dark:text-wheat-300">
                                    {suggestion.match_type}
                                  </span>
                                </button>
                              <% end %>
                            </div>
                          </div>
                        <% end %>

                        <%!-- Search --%>
                        <form
                          id="device-search-form"
                          phx-change="search_devices"
                          class="flex gap-2"
                        >
                          <input
                            type="text"
                            id="device-search-input"
                            name="query"
                            value={@device_search}
                            placeholder={t("Search by device name or IP...")}
                            autocomplete="off"
                            phx-debounce="300"
                            class="block w-full rounded-md border-cool-steel-300 text-sm shadow-sm focus:border-cerulean-500 focus:ring-cerulean-500 dark:border-white/10 dark:bg-white/5 dark:text-white"
                          />
                        </form>

                        <%= if @search_results != [] do %>
                          <div class="mt-2 max-h-48 overflow-y-auto rounded-md border border-cool-steel-200 bg-white dark:border-white/10 dark:bg-cool-steel-800">
                            <ul class="divide-y divide-cool-steel-200 dark:divide-white/5">
                              <li :for={device <- @search_results}>
                                <button
                                  type="button"
                                  id={"select-device-#{device.id}"}
                                  phx-click="link_device"
                                  phx-value-ap-id={ap.id}
                                  phx-value-device-id={device.id}
                                  class="flex w-full items-center justify-between px-3 py-2 text-left text-sm hover:bg-cool-steel-50 dark:hover:bg-white/5"
                                >
                                  <span class="font-medium text-cool-steel-900 dark:text-white">
                                    {device.name || "Unnamed"}
                                  </span>
                                  <span class="flex items-center gap-2 text-cool-steel-500 dark:text-cool-steel-400">
                                    {device.ip_address}
                                    <%= if device.site do %>
                                      <span class="text-xs text-cool-steel-400 dark:text-cool-steel-500">
                                        {device.site.name}
                                      </span>
                                    <% end %>
                                  </span>
                                </button>
                              </li>
                            </ul>
                          </div>
                        <% end %>

                        <%= if @device_search != "" and String.length(@device_search) >= 2 and @search_results == [] do %>
                          <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
                            No devices found matching "{@device_search}"
                          </p>
                        <% end %>
                      </div>
                      <button
                        type="button"
                        id="cancel-link"
                        phx-click="cancel_link"
                        class="flex-shrink-0 self-start text-sm text-cool-steel-500 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:text-cool-steel-300"
                      >
                        {t("Cancel")}
                      </button>
                    </div>
                  </td>
                </tr>
              <% end %>
            <% end %>
          </tbody>
        </table>
      </div>
    <% end %>
  </div>
</Layouts.authenticated>