<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title="Live Sessions - {@project_title} Admin"
  current_path={@url_path}
  project_title={@project_title}
>
  <div class="container mx-auto px-4 py-8">
    <.admin_page_header back={PhoenixKit.Utils.Routes.path("/admin/users")}>
      <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-base-content">Live Sessions</h1>
      <p class="text-sm text-base-content/60 mt-0.5">
        Real-time monitoring of all active sessions with live updates.
        Last updated: {Calendar.strftime(@last_updated, "%H:%M:%S")}
      </p>
      <:actions>
        <%!-- Live Indicator --%>
        <div class="flex items-center gap-2 px-3 py-1 bg-success/10 text-success rounded-full">
          <div class="w-2 h-2 bg-success rounded-full animate-pulse"></div>
          <span class="text-xs font-medium">LIVE</span>
        </div>
        <%!-- Auto-refresh toggle --%>
        <button
          phx-click="toggle_auto_refresh"
          class={[
            "btn btn-sm",
            if(@auto_refresh, do: "btn-success", else: "btn-outline")
          ]}
        >
          <%= if @auto_refresh do %>
            <.icon name="hero-pause-circle" class="w-5 h-5" /> Auto-refresh ON
          <% else %>
            <.icon name="hero-play-circle" class="w-5 h-5" /> Auto-refresh OFF
          <% end %>
        </button>
        <%!-- Manual refresh --%>
        <button
          phx-click="refresh_now"
          class="btn btn-sm btn-outline"
        >
          <.icon name="hero-arrow-path" class="w-5 h-5" /> Refresh
        </button>
      </:actions>
    </.admin_page_header>

    <%!-- Statistics Cards --%>
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
      <%!-- Total Sessions --%>
      <PhoenixKitWeb.Components.Core.StatCard.stat_card
        compact={true}
        rounded="xl"
        value={@presence_stats.total_sessions}
        title="Total Sessions"
        subtitle="Real-time connections"
      >
        <:icon>
          <.icon name="hero-user-circle" class="w-5 h-5" />
        </:icon>
      </PhoenixKitWeb.Components.Core.StatCard.stat_card>

      <%!-- Anonymous Sessions --%>
      <PhoenixKitWeb.Components.Core.StatCard.stat_card
        compact={true}
        rounded="xl"
        value={@presence_stats.anonymous_sessions}
        title="Anonymous"
        subtitle="Unregistered visitors"
      >
        <:icon>
          <.icon name="hero-user" class="w-5 h-5" />
        </:icon>
      </PhoenixKitWeb.Components.Core.StatCard.stat_card>

      <%!-- Authenticated Sessions --%>
      <PhoenixKitWeb.Components.Core.StatCard.stat_card
        compact={true}
        rounded="xl"
        value={@presence_stats.authenticated_sessions}
        title="Authenticated"
        subtitle="Logged in users"
      >
        <:icon>
          <.icon name="hero-check-circle" class="w-5 h-5" />
        </:icon>
      </PhoenixKitWeb.Components.Core.StatCard.stat_card>

      <%!-- Unique Visitors --%>
      <PhoenixKitWeb.Components.Core.StatCard.stat_card
        compact={true}
        rounded="xl"
        value={@presence_stats.unique_anonymous_visitors}
        title="Unique Visitors"
        subtitle="Individual connections"
      >
        <:icon>
          <.icon name="hero-user-group" class="w-5 h-5" />
        </:icon>
      </PhoenixKitWeb.Components.Core.StatCard.stat_card>
    </div>

    <%!-- Filters and Search --%>
    <div class="card bg-base-100 shadow-xl mb-6">
      <div class="card-body p-4">
        <div class="flex flex-col md:flex-row gap-4 items-center justify-between">
          <%!-- Search --%>
          <div class="flex-1 max-w-md">
            <form phx-submit="search" phx-change="search" class="form-control">
              <div class="input-group">
                <input
                  type="text"
                  name="search"
                  value={@search_query}
                  placeholder="Search by IP, User-Agent, email..."
                  class="input input-bordered flex-1"
                />
                <button type="submit" class="btn btn-square">
                  <.icon name="hero-magnifying-glass" class="w-5 h-5" />
                </button>
              </div>
            </form>
          </div>

          <%!-- Filter Tabs --%>
          <div class="tabs tabs-boxed">
            <button
              phx-click="filter_by"
              phx-value-type="all"
              class={["tab", if(@filter_type == "all", do: "tab-active", else: "")]}
            >
              All ({@total_sessions})
            </button>
            <button
              phx-click="filter_by"
              phx-value-type="anonymous"
              class={["tab", if(@filter_type == "anonymous", do: "tab-active", else: "")]}
            >
              Anonymous ({@presence_stats.anonymous_sessions})
            </button>
            <button
              phx-click="filter_by"
              phx-value-type="authenticated"
              class={["tab", if(@filter_type == "authenticated", do: "tab-active", else: "")]}
            >
              Authenticated ({@presence_stats.authenticated_sessions})
            </button>
          </div>
        </div>
      </div>
    </div>

    <%!-- Sessions Table / Cards --%>
    <.table_default
      id="live-sessions-table"
      variant="zebra"
      toggleable={true}
      items={@sessions}
      card_fields={
        fn session ->
          [
            %{label: "IP Address", value: session.ip_address || "Unknown"},
            %{label: "Current Page", value: session.current_page || "—"},
            %{
              label: "Connected",
              value: Calendar.strftime(session.connected_at, "%H:%M:%S %d/%m/%Y")
            },
            %{label: "Status", value: "● Active"}
          ]
        end
      }
    >
      <:card_header :let={session}>
        <div class="flex items-start justify-between gap-2">
          <%= if session.type == :authenticated do %>
            <% user = Map.get(@users_map, session.user_uuid) %>
            <div class="flex items-center gap-2 min-w-0">
              <.user_avatar user={user || %{email: session.user_email}} size="sm" />
              <div class="min-w-0">
                <div class="font-medium text-sm truncate">{session.user_email}</div>
                <div class="text-xs text-base-content/70 font-mono truncate">
                  {session.user_uuid}
                </div>
              </div>
            </div>
            <div class="badge badge-success badge-sm h-auto shrink-0">
              <.icon name="hero-shield-check" class="w-3 h-3 mr-1" /> Auth
            </div>
          <% else %>
            <div class="flex items-center gap-2 min-w-0">
              <div class="w-8 h-8 bg-warning rounded-full flex shrink-0 items-center justify-center text-warning-content text-xs font-bold">
                ?
              </div>
              <div class="min-w-0">
                <div class="font-medium text-sm">Anonymous User</div>
                <div class="text-xs text-base-content/70 font-mono truncate">
                  {session.session_id}
                </div>
              </div>
            </div>
            <div class="badge badge-warning badge-sm h-auto shrink-0">
              <.icon name="hero-user" class="w-3 h-3 mr-1" /> Anon
            </div>
          <% end %>
        </div>
      </:card_header>
      <.table_default_header>
        <.table_default_row>
          <.table_default_header_cell>
            <button
              phx-click="sort_by"
              phx-value-field="type"
              class="flex items-center gap-1 cursor-pointer"
            >
              Type
              <%= if @sort_by == :type do %>
                <%= if @sort_order == :asc do %>
                  <.icon name="hero-chevron-up" class="w-4 h-4" />
                <% else %>
                  <.icon name="hero-chevron-down" class="w-4 h-4" />
                <% end %>
              <% end %>
            </button>
          </.table_default_header_cell>
          <.table_default_header_cell>User/Session</.table_default_header_cell>
          <.table_default_header_cell>IP Address</.table_default_header_cell>
          <.table_default_header_cell>Current Page</.table_default_header_cell>
          <.table_default_header_cell>
            <button
              phx-click="sort_by"
              phx-value-field="connected_at"
              class="flex items-center gap-1 cursor-pointer"
            >
              Connected
              <%= if @sort_by == :connected_at do %>
                <%= if @sort_order == :asc do %>
                  <.icon name="hero-chevron-up" class="w-4 h-4" />
                <% else %>
                  <.icon name="hero-chevron-down" class="w-4 h-4" />
                <% end %>
              <% end %>
            </button>
          </.table_default_header_cell>
          <.table_default_header_cell>Status</.table_default_header_cell>
        </.table_default_row>
      </.table_default_header>
      <.table_default_body>
        <%= if Enum.empty?(@sessions) do %>
          <.table_default_row>
            <.table_default_cell class="text-center py-12" colspan={6}>
              <div class="text-base-content/50 mb-4">
                <.icon name="hero-inbox" class="w-16 h-16 mx-auto" />
              </div>
              <h3 class="text-lg font-medium text-base-content mb-2">No active sessions</h3>
              <p class="text-base-content/70">
                There are currently no active sessions to display.
              </p>
            </.table_default_cell>
          </.table_default_row>
        <% else %>
          <%= for session <- @sessions do %>
            <.table_default_row>
              <.table_default_cell>
                <div class="flex items-center gap-2">
                  <%= if session.type == :authenticated do %>
                    <div class="badge badge-success badge-sm h-auto">
                      <.icon name="hero-shield-check" class="w-3 h-3 mr-1" /> Auth
                    </div>
                  <% else %>
                    <div class="badge badge-warning badge-sm h-auto">
                      <.icon name="hero-user" class="w-3 h-3 mr-1" /> Anon
                    </div>
                  <% end %>
                </div>
              </.table_default_cell>
              <.table_default_cell>
                <%= if session.type == :authenticated do %>
                  <% user = Map.get(@users_map, session.user_uuid) %>
                  <div class="flex items-center gap-2">
                    <.user_avatar user={user || %{email: session.user_email}} size="sm" />
                    <div>
                      <div class="font-medium text-sm">{session.user_email}</div>
                      <div class="text-xs text-base-content/70">ID: {session.user_uuid}</div>
                    </div>
                  </div>
                <% else %>
                  <div class="flex items-center gap-2">
                    <div class="w-8 h-8 bg-warning rounded-full flex items-center justify-center text-warning-content text-xs font-bold">
                      ?
                    </div>
                    <div>
                      <div class="font-medium text-sm">Anonymous User</div>
                      <div class="text-xs text-base-content/70 font-mono">
                        {session.session_id}
                      </div>
                    </div>
                  </div>
                <% end %>
              </.table_default_cell>
              <.table_default_cell>
                <code class="text-xs bg-base-200 px-2 py-1 rounded">
                  {session.ip_address || "Unknown"}
                </code>
              </.table_default_cell>
              <.table_default_cell>
                <%= if session.current_page do %>
                  <code class="text-xs bg-base-200 px-2 py-1 rounded">
                    {session.current_page}
                  </code>
                <% else %>
                  <span class="text-base-content/50">—</span>
                <% end %>
              </.table_default_cell>
              <.table_default_cell>
                <.time_ago datetime={session.connected_at} />
              </.table_default_cell>
              <.table_default_cell>
                <div class="flex items-center gap-1">
                  <div class="w-2 h-2 bg-success rounded-full animate-pulse"></div>
                  <span class="text-xs text-success">Active</span>
                </div>
              </.table_default_cell>
            </.table_default_row>
          <% end %>
        <% end %>
      </.table_default_body>
    </.table_default>

    <%!-- Pagination --%>
    <%= if @total_pages > 1 do %>
      <div class="flex justify-center mt-6">
        <div class="btn-group">
          <%= for page_num <- 1..@total_pages do %>
            <button
              phx-click="goto_page"
              phx-value-page={page_num}
              class={[
                "btn btn-sm",
                if(page_num == @page, do: "btn-active", else: "")
              ]}
            >
              {page_num}
            </button>
          <% end %>
        </div>
      </div>
    <% end %>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
