towerops/lib/towerops_web/live/org/gaiia_mapping_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: "Gaiia"}
    ]} />
    <h1 class="text-3xl font-semibold tracking-tight text-cool-steel-900 dark:text-white">
      {t("Link Devices & Sites to Gaiia")}
    </h1>
    <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
      {t(
        "For each of your monitored devices and sites, find the matching Gaiia inventory item. This enables subscriber impact data when devices 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/gaiia/mapping"}
        class="border-b-2 border-cerulean-500 px-1 pb-3 text-sm font-medium text-cerulean-600 dark:text-cerulean-400"
      >
        {t("Device & Site Linking")}
      </.link>
      <.link
        navigate={~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/reconciliation"}
        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("Comparison Report")}
      </.link>
    </nav>
  </div>

  <%!-- Tab navigation --%>
  <div class="mt-6 border-b border-cool-steel-200 dark:border-white/10">
    <nav class="-mb-px flex space-x-8">
      <.link
        id="tab-devices"
        patch={
          ~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/mapping?tab=devices&filter=#{@filter}"
        }
        class={[
          "whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium",
          if(@tab == "devices",
            do:
              "border-cerulean-500 text-cerulean-600 dark:border-cerulean-400 dark:text-cerulean-400",
            else:
              "border-transparent 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-cool-steel-300"
          )
        ]}
      >
        {t("Devices")}
      </.link>
      <.link
        id="tab-sites"
        patch={
          ~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/mapping?tab=sites&filter=#{@filter}"
        }
        class={[
          "whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium",
          if(@tab == "sites",
            do:
              "border-cerulean-500 text-cerulean-600 dark:border-cerulean-400 dark:text-cerulean-400",
            else:
              "border-transparent 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-cool-steel-300"
          )
        ]}
      >
        {t("Sites")}
      </.link>
    </nav>
  </div>

  <%!-- Filter pills --%>
  <div class="mt-4 flex items-center gap-2">
    <.link
      :for={{f, label} <- [{"all", "All"}, {"linked", "Linked"}, {"unlinked", "Unlinked"}]}
      patch={
        ~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/mapping?tab=#{@tab}&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>

  <%!-- Content --%>
  <div class="mt-6">
    <%= if @items == [] 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={if(@tab == "sites", do: "hero-map-pin", else: "hero-cpu-chip")}
          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">
          <%= case {@tab, @filter} do %>
            <% {"devices", "linked"} -> %>
              {t("No linked devices yet")}
            <% {"devices", "unlinked"} -> %>
              {t("All devices are linked to Gaiia")}
            <% {"sites", "linked"} -> %>
              {t("No linked sites yet")}
            <% {"sites", "unlinked"} -> %>
              {t("All sites are linked to Gaiia")}
            <% {"devices", _} -> %>
              {t("No devices in your organization")}
            <% _ -> %>
              {t("No sites in your organization")}
          <% end %>
        </h3>
        <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
          <%= case {@tab, @filter} do %>
            <% {_, "unlinked"} -> %>
              {t("Nothing left to do here.")}
            <% {_, "linked"} -> %>
              {t("Link devices or sites using the Unlinked filter.")}
            <% _ -> %>
              {t("Add devices to TowerOps to get started.")}
          <% 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"
              >
                {if @tab == "devices", do: t("Your Device"), else: t("Your Site")}
              </th>
              <%= if @tab == "devices" do %>
                <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("IP Address")}
                </th>
              <% end %>
              <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"
              >
                {if @tab == "devices",
                  do: t("Gaiia Inventory Item"),
                  else: t("Gaiia Network Site")}
              </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 row <- @items do %>
              <% row_id = if @tab == "devices", do: row.device.id, else: row.site.id

              is_linked =
                if @tab == "devices",
                  do: not is_nil(row.inventory_item),
                  else: not is_nil(row.network_site) %>
              <tr
                id={"row-#{row_id}"}
                class={[
                  "hover:bg-cool-steel-50 dark:hover:bg-white/5",
                  if(not is_linked, do: "cursor-pointer")
                ]}
                phx-click={if(not is_linked, do: "start_link")}
                phx-value-id={if(not is_linked, do: row_id)}
              >
                <%!-- Device / Site column --%>
                <td class="px-4 py-4 text-sm">
                  <div class="flex flex-wrap items-center gap-2">
                    <%= if @tab == "devices" do %>
                      <div>
                        <div class="flex items-center gap-2 flex-wrap">
                          <.link
                            navigate={~p"/devices/#{row.device.id}"}
                            class="font-medium text-cool-steel-900 hover:text-cerulean-600 dark:text-white dark:hover:text-cerulean-400"
                          >
                            {row.device.name || row.device.ip_address || "Unnamed"}
                          </.link>
                          <%= if Map.has_key?(@suggestions, row.device.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>
                        <%= if row.device.site do %>
                          <div class="mt-0.5 text-xs text-cool-steel-500 dark:text-cool-steel-400">
                            {row.device.site.name}
                          </div>
                        <% end %>
                      </div>
                    <% else %>
                      <div>
                        <div class="flex items-center gap-2 flex-wrap">
                          <span class="font-medium text-cool-steel-900 dark:text-white">
                            {row.site.name || "Unnamed"}
                          </span>
                          <%= if Map.has_key?(@suggestions, row.site.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>
                      </div>
                    <% end %>
                  </div>
                </td>

                <%!-- IP Address (devices only) --%>
                <%= if @tab == "devices" do %>
                  <td class="hidden whitespace-nowrap px-4 py-4 text-sm text-cool-steel-500 dark:text-cool-steel-400 sm:table-cell">
                    <%= if row.device.ip_address do %>
                      <a
                        href={"http://#{row.device.ip_address}"}
                        target="_blank"
                        rel="noopener noreferrer"
                        class="font-mono hover:text-cerulean-600 dark:hover:text-cerulean-400"
                        onclick="event.stopPropagation()"
                      >
                        {row.device.ip_address}
                      </a>
                    <% else %>
                      —
                    <% end %>
                  </td>
                <% end %>

                <%!-- Gaiia Item / Network Site column --%>
                <td class="hidden px-4 py-4 text-sm md:table-cell">
                  <%= if @tab == "devices" do %>
                    <%= if row.inventory_item do %>
                      <div>
                        <%= if @gaiia_app_url do %>
                          <a
                            href={"#{@gaiia_app_url}/inventory/items/#{row.inventory_item.gaiia_id}"}
                            target="_blank"
                            rel="noopener noreferrer"
                            class="font-medium text-cool-steel-900 hover:text-cerulean-600 dark:text-white dark:hover:text-cerulean-400"
                          >
                            {row.inventory_item.name || "Unnamed"}
                            <.icon
                              name="hero-arrow-top-right-on-square"
                              class="inline h-3 w-3 ml-0.5 opacity-50"
                            />
                          </a>
                        <% else %>
                          <span class="font-medium text-cool-steel-900 dark:text-white">
                            {row.inventory_item.name || "Unnamed"}
                          </span>
                        <% end %>
                        <%= if row.inventory_item.model_name do %>
                          <div class="mt-0.5 text-xs text-cool-steel-500 dark:text-cool-steel-400">
                            {row.inventory_item.model_name}
                          </div>
                        <% end %>
                      </div>
                    <% 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 %>
                  <% else %>
                    <%= if row.network_site do %>
                      <%= if @gaiia_app_url do %>
                        <a
                          href={"#{@gaiia_app_url}/network-sites/#{row.network_site.gaiia_id}"}
                          target="_blank"
                          rel="noopener noreferrer"
                          class="font-medium text-cool-steel-900 hover:text-cerulean-600 dark:text-white dark:hover:text-cerulean-400"
                          onclick="event.stopPropagation()"
                        >
                          {row.network_site.name || "Unnamed"}
                          <.icon
                            name="hero-arrow-top-right-on-square"
                            class="inline h-3 w-3 ml-0.5 opacity-50"
                          />
                        </a>
                      <% else %>
                        <span class="font-medium text-cool-steel-900 dark:text-white">
                          {row.network_site.name || "Unnamed"}
                        </span>
                      <% end %>
                    <% 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 %>
                  <% end %>
                </td>

                <%!-- Actions column --%>
                <td class="whitespace-nowrap px-4 py-4 text-right text-sm">
                  <%= if @tab == "devices" do %>
                    <%= if row.inventory_item do %>
                      <button
                        type="button"
                        id={"unlink-#{row.device.id}"}
                        phx-click="unlink_device"
                        phx-value-device-id={row.device.id}
                        data-confirm={
                          t("Remove the link between this device and its Gaiia item?")
                        }
                        class="text-sweet-salmon-600 hover:text-sweet-salmon-800 dark:text-sweet-salmon-400 dark:hover:text-sweet-salmon-300"
                      >
                        {t("Unlink")}
                      </button>
                    <% else %>
                      <button
                        type="button"
                        id={"link-#{row.device.id}"}
                        phx-click="start_link"
                        phx-value-id={row.device.id}
                        class="text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
                      >
                        {t("Link")}
                      </button>
                    <% end %>
                  <% else %>
                    <%= if row.network_site do %>
                      <button
                        type="button"
                        id={"unlink-#{row.site.id}"}
                        phx-click="unlink_site"
                        phx-value-site-id={row.site.id}
                        data-confirm={
                          t("Remove the link between this site and its Gaiia network site?")
                        }
                        class="text-sweet-salmon-600 hover:text-sweet-salmon-800 dark:text-sweet-salmon-400 dark:hover:text-sweet-salmon-300"
                      >
                        {t("Unlink")}
                      </button>
                    <% else %>
                      <button
                        type="button"
                        id={"link-#{row.site.id}"}
                        phx-click="start_link"
                        phx-value-id={row.site.id}
                        class="text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
                      >
                        {t("Link")}
                      </button>
                    <% end %>
                  <% end %>
                </td>
              </tr>

              <%!-- Inline linking row --%>
              <%= if row_id == @linking_id do %>
                <tr id={"linking-row-#{row_id}"} class="bg-cerulean-50 dark:bg-cerulean-900/20">
                  <td colspan={if(@tab == "devices", do: "4", else: "3")} 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">
                          <%= if @tab == "devices" do %>
                            Find a Gaiia item to link to
                            <span class="text-cerulean-600 dark:text-cerulean-400">
                              {row.device.name || row.device.ip_address}
                            </span>
                          <% else %>
                            Find a Gaiia network site to link to
                            <span class="text-cerulean-600 dark:text-cerulean-400">
                              {row.site.name}
                            </span>
                          <% end %>
                        </p>

                        <%!-- Suggestions --%>
                        <%= if suggestions = @suggestions[row_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="inline h-3 w-3 mr-0.5" />
                              {t("Suggested match (same IP):")}
                            </p>
                            <div class="flex flex-wrap gap-2">
                              <%= for suggestion <- suggestions do %>
                                <button
                                  type="button"
                                  phx-click={
                                    if(@tab == "sites", do: "link_site", else: "link_device")
                                  }
                                  phx-value-device-id={if(@tab == "devices", do: row.device.id)}
                                  phx-value-site-id={if(@tab == "sites", do: row.site.id)}
                                  phx-value-gaiia-id={suggestion.entity.gaiia_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.entity.name}
                                  <%= if @tab == "devices" && suggestion.entity.ip_address do %>
                                    <span class="text-wheat-600 dark:text-wheat-400">
                                      {suggestion.entity.ip_address}
                                    </span>
                                  <% end %>
                                  <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="search-form" phx-change="search" class="flex gap-2">
                          <input
                            type="text"
                            id="search-input"
                            name="query"
                            value={@search_query}
                            placeholder={
                              if(@tab == "sites",
                                do: "Search Gaiia network sites by name...",
                                else: "Search Gaiia inventory by name, model, 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={result <- @search_results}>
                                <button
                                  type="button"
                                  id={"select-#{result.id}"}
                                  phx-click={
                                    if(@tab == "sites", do: "link_site", else: "link_device")
                                  }
                                  phx-value-device-id={if(@tab == "devices", do: @linking_id)}
                                  phx-value-site-id={if(@tab == "sites", do: @linking_id)}
                                  phx-value-gaiia-id={result.gaiia_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">
                                    {result.name || "Unnamed"}
                                  </span>
                                  <%= if @tab == "devices" do %>
                                    <span class="flex items-center gap-2 text-cool-steel-500 dark:text-cool-steel-400">
                                      <%= if result.model_name do %>
                                        <span class="text-xs">{result.model_name}</span>
                                      <% end %>
                                      {result.ip_address}
                                    </span>
                                  <% end %>
                                </button>
                              </li>
                            </ul>
                          </div>
                        <% end %>

                        <%= if @search_query != "" and String.length(@search_query) >= 2 and @search_results == [] do %>
                          <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
                            No Gaiia {if(@tab == "sites",
                              do: "network sites",
                              else: "inventory items"
                            )} matching "{@search_query}"
                          </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>