<Layouts.authenticated
  flash={@flash}
  current_scope={@current_scope}
  current_organization={@current_organization}
  active_page="devices"
  timezone={@timezone}
>
  <.header>
    {@page_title}
    <:subtitle>Monitor and manage all your network devices</:subtitle>
    <:actions>
      <%= if @device != [] do %>
        <.button
          type="button"
          phx-click="force_rediscover_all"
          data-confirm="This will trigger SNMP discovery for all SNMP-enabled devices. Continue?"
        >
          <.icon name="hero-magnifying-glass" class="h-4 w-4" /> Force Rediscover All
        </.button>
      <% end %>
      <.button
        :if={@has_sites}
        navigate={~p"/devices/new"}
        variant="primary"
      >
        <.icon name="hero-plus" class="h-5 w-5" /> New Device
      </.button>
    </:actions>
  </.header>

  <%= if !@has_sites do %>
    <div class="text-center py-16">
      <.icon
        name="hero-building-office"
        class="mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-600"
      />
      <h3 class="mt-4 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
        Create a site first
      </h3>
      <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
        Before adding device, you need to create at least one site location.
      </p>
      <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
        Sites help you organize your devices by physical location.
      </p>
      <div class="mt-6">
        <.button navigate={~p"/sites/new"} variant="primary">
          <.icon name="hero-plus" class="h-5 w-5" /> Create Your First Site
        </.button>
      </div>
    </div>
  <% else %>
    <%= if @device == [] do %>
      <div class="text-center py-16">
        <.icon name="hero-server" class="mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-600" />
        <h3 class="mt-4 text-lg font-semibold text-zinc-900 dark:text-zinc-100">No devices</h3>
        <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
          Get started by adding your first device.
        </p>
        <div class="mt-6">
          <.button
            navigate={~p"/devices/new"}
            variant="primary"
          >
            <.icon name="hero-plus" class="h-5 w-5" /> New Device
          </.button>
        </div>
      </div>
    <% else %>
      <.table
        id="devices"
        rows={@device}
        row_click={
          fn eq ->
            JS.navigate(~p"/devices/#{eq.id}")
          end
        }
      >
        <:col :let={eq} label="Name">
          <span class="font-medium">{eq.name}</span>
        </:col>
        <:col :let={eq} label="IP Address">
          <span class="font-mono text-sm">{eq.ip_address}</span>
        </:col>
        <:col :let={eq} label="Site">
          <.link
            navigate={~p"/sites/#{eq.site.id}"}
            class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
          >
            {eq.site.name}
          </.link>
        </:col>
        <:col :let={eq} label="Status">
          <span class={[
            "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
            eq.status == :up &&
              "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
            eq.status == :down && "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
            eq.status == :unknown &&
              "bg-zinc-100 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200"
          ]}>
            {eq.status |> to_string() |> String.upcase()}
          </span>
        </:col>
        <:col :let={eq} label="Last Checked">
          <span class="text-sm text-zinc-600 dark:text-zinc-400">
            {ToweropsWeb.TimeHelpers.format_datetime(eq.last_checked_at, @timezone)}
          </span>
        </:col>
      </.table>
    <% end %>
  <% end %>
</Layouts.authenticated>
