defmodule AiDebugWeb.SessionDetailsLive do
  use AiDebugWeb, :live_view
  alias AiDebug.SessionManager
  alias Phoenix.PubSub

  @impl true
  def render(assigns) do
    ~H"""
    <div class="min-h-screen bg-gray-50">
      <header class="bg-white shadow">
        <div class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
          <div class="flex justify-between items-center">
            <h1 class="text-3xl font-bold text-gray-900">Session Details</h1>
            <.link navigate="/" class="text-blue-600 hover:text-blue-500">
              ← Back to Dashboard
            </.link>
          </div>
        </div>
      </header>

      <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <%= if @session do %>
          <div class="bg-white overflow-hidden shadow rounded-lg mb-6">
            <div class="px-4 py-5 sm:p-6">
              <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                <div>
                  <dt class="text-sm font-medium text-gray-500">Session ID</dt>
                  <dd class="mt-1 text-sm text-gray-900"><%= @session.id %></dd>
                </div>
                <div>
                  <dt class="text-sm font-medium text-gray-500">URL</dt>
                  <dd class="mt-1 text-sm text-gray-900" data-session-url={@session.url}><%= @session.url %></dd>
                </div>
                <div>
                  <dt class="text-sm font-medium text-gray-500">Started At</dt>
                  <dd class="mt-1 text-sm text-gray-900"><%= format_datetime(@session.started_at) %></dd>
                </div>
                <div>
                  <dt class="text-sm font-medium text-gray-500">Event Count</dt>
                  <dd class="mt-1 text-sm text-gray-900"><%= @session.event_count %></dd>
                </div>
              </dl>
            </div>
          </div>

          <!-- Events -->
          <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
              <h2 class="text-lg font-medium text-gray-900 mb-4">Events</h2>
              
              <div class="space-y-3">
                <%= for event <- @events do %>
                  <div class="border rounded-lg p-4">
                    <div class="flex justify-between items-start">
                      <div>
                        <span class={"px-2 py-1 text-xs rounded-full #{event_class(event.type)}"}>
                          <%= event.type %>
                        </span>
                        <%= if event[:level] do %>
                          <span class="ml-2 text-sm text-gray-500"><%= event.level %></span>
                        <% end %>
                      </div>
                      <span class="text-xs text-gray-400">
                        <%= format_time(event[:timestamp] || DateTime.utc_now()) %>
                      </span>
                    </div>
                    <%= if event[:message] do %>
                      <p class="mt-2 text-sm text-gray-900"><%= event.message %></p>
                    <% end %>
                    <%= if event[:data] do %>
                      <pre class="mt-2 text-xs bg-gray-100 p-2 rounded overflow-x-auto"><%= inspect(event.data, pretty: true) %></pre>
                    <% end %>
                  </div>
                <% end %>
              </div>

              <%= if @events == [] do %>
                <p class="text-gray-500 text-center py-8">No events recorded yet</p>
              <% end %>
            </div>
          </div>
        <% else %>
          <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
              <p class="text-gray-500 text-center">Session not found</p>
            </div>
          </div>
        <% end %>
      </main>
    </div>
    """
  end

  @impl true
  def mount(%{"id" => session_id}, _session, socket) do
    if connected?(socket) do
      # Subscribe to session updates
      PubSub.subscribe(AiDebug.PubSub, "session:#{session_id}")
    end

    case SessionManager.get_session(session_id) do
      {:ok, session} ->
        {:ok, 
         socket
         |> assign(:session, session)
         |> assign(:events, get_session_events(session_id))}
      
      {:error, :not_found} ->
        {:ok, 
         socket
         |> assign(:session, nil)
         |> assign(:events, [])}
    end
  end

  @impl true
  def handle_info({:event_added, event}, socket) do
    {:noreply, assign(socket, :events, [event | socket.assigns.events])}
  end

  defp get_session_events(_session_id) do
    # For now, return empty list. In real implementation, would fetch from Session
    []
  end

  defp format_datetime(datetime) do
    Calendar.strftime(datetime, "%Y-%m-%d %H:%M:%S UTC")
  end

  defp format_time(datetime) do
    Calendar.strftime(datetime, "%H:%M:%S")
  end

  defp event_class("console"), do: "bg-blue-100 text-blue-800"
  defp event_class("network"), do: "bg-green-100 text-green-800"
  defp event_class("error"), do: "bg-red-100 text-red-800"
  defp event_class("navigation"), do: "bg-purple-100 text-purple-800"
  defp event_class(_), do: "bg-gray-100 text-gray-800"
end