defmodule AiDebugWeb.DashboardLive do
  use AiDebugWeb, :live_view
  alias AiDebug.{SessionManager, BrowserPool}
  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">
          <h1 class="text-3xl font-bold text-gray-900">AI Debug Dashboard</h1>
        </div>
      </header>

      <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <!-- Alerts -->
        <%= if @error do %>
          <div class="alert-error mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded">
            <%= @error %>
          </div>
        <% end %>

        <%= if @success do %>
          <div class="alert-success mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded">
            <%= @success %>
          </div>
        <% end %>

        <!-- Quick Actions -->
        <div class="bg-white overflow-hidden shadow rounded-lg mb-6">
          <div class="px-4 py-5 sm:p-6">
            <h2 class="text-lg font-medium text-gray-900 mb-4">Quick Actions</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
              <.link navigate="/validate" class="text-center px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                URL Validator
              </.link>
              <.link navigate="/tests" class="text-center px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700">
                Test Runner
              </.link>
              <.link navigate="/debug_demo" class="text-center px-4 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
                Debug Demo
              </.link>
              <.link navigate="/dev/dashboard" class="text-center px-4 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
                Live Dashboard
              </.link>
            </div>
          </div>
        </div>

        <!-- New Session Form -->
        <div class="bg-white overflow-hidden shadow rounded-lg mb-6">
          <div class="px-4 py-5 sm:p-6">
            <h2 class="text-lg font-medium text-gray-900 mb-4">Create New Debug Session</h2>
            <.form for={@form} phx-submit="create_session" id="new-session-form">
              <div class="flex gap-4">
                <.input field={@form[:url]} type="text" placeholder="http://localhost:3000" class="flex-1" />
                <.button type="submit">Start Session</.button>
              </div>
            </.form>
          </div>
        </div>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
          <!-- Active Sessions -->
          <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">Active Sessions</h2>
              
              <!-- Search -->
              <input
                type="text"
                id="session-search"
                name="search"
                phx-change="search_sessions"
                phx-debounce="300"
                placeholder="Search sessions..."
                class="mb-4 w-full rounded-md border-gray-300 shadow-sm"
                value={@search}
              />

              <div class="space-y-3">
                <%= for session <- filter_sessions(@sessions, @search) do %>
                  <div id={"session-#{session.id}"} class="border rounded-lg p-4 hover:bg-gray-50">
                    <div class="flex justify-between items-start">
                      <div class="flex-1">
                        <.link navigate={"/session/#{session.id}"} class="font-medium text-blue-600 hover:text-blue-500">
                          <%= session.id %>
                        </.link>
                        <p class="text-sm text-gray-500"><%= session.url %></p>
                        <p class="text-xs text-gray-400">Started <%= format_time(session.started_at) %></p>
                        <div class="flex items-center gap-2 mt-1">
                          <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
                            <%= session.event_count %> events
                          </span>
                          <%= if session.type == "debug" do %>
                            <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Debug Mode</span>
                          <% end %>
                        </div>
                      </div>
                      <button
                        phx-click="stop_session"
                        phx-value-id={session.id}
                        class="text-red-600 hover:text-red-900 text-sm ml-4"
                      >
                        Stop
                      </button>
                    </div>
                  </div>
                <% end %>
              </div>
            </div>
          </div>

          <!-- Browser Pool Status -->
          <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">Browser Pool</h2>
              <dl class="grid grid-cols-2 gap-4">
                <div>
                  <dt class="text-sm font-medium text-gray-500">Available Browsers</dt>
                  <dd class="mt-1 text-2xl font-semibold text-green-600">
                    <%= @browser_stats.available %>
                  </dd>
                </div>
                <div>
                  <dt class="text-sm font-medium text-gray-500">Active Browsers</dt>
                  <dd class="mt-1 text-2xl font-semibold text-blue-600">
                    <%= @browser_stats.active %>
                  </dd>
                </div>
              </dl>
            </div>
          </div>
        </div>

        <!-- Performance Metrics -->
        <div class="mt-6 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">Performance Metrics</h2>
            <dl class="grid grid-cols-1 gap-4 sm:grid-cols-3">
              <div>
                <dt class="text-sm font-medium text-gray-500">Session Creation Time</dt>
                <dd class="mt-1 text-xl font-semibold text-gray-900">
                  <%= @metrics.session_creation_time %> ms
                </dd>
              </div>
              <div>
                <dt class="text-sm font-medium text-gray-500">Browser Checkout Time</dt>
                <dd class="mt-1 text-xl font-semibold text-gray-900">
                  <%= @metrics.browser_checkout_time %> ms
                </dd>
              </div>
              <div>
                <dt class="text-sm font-medium text-gray-500">Active Workers</dt>
                <dd class="mt-1 text-xl font-semibold text-gray-900">
                  <%= @metrics.active_workers %>
                </dd>
              </div>
            </dl>
          </div>
        </div>

        <!-- Running Tests -->
        <%= if @running_tests != [] do %>
          <div class="mt-6 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">Running Tests</h2>
              <div class="space-y-3">
                <%= for test <- @running_tests do %>
                  <div class="border rounded-lg p-4">
                    <div class="flex justify-between items-start">
                      <div>
                        <h3 class="font-medium"><%= test.name %></h3>
                        <p class="text-sm text-gray-500">
                          <%= test.completed %> / <%= test.total %> tests completed
                        </p>
                        <div class="mt-2 w-full bg-gray-200 rounded-full h-2">
                          <div 
                            class="bg-blue-600 h-2 rounded-full" 
                            style={"width: #{test.progress}%"}
                          ></div>
                        </div>
                      </div>
                      <span class="text-sm text-gray-500">Running</span>
                    </div>
                  </div>
                <% end %>
              </div>
            </div>
          </div>
        <% end %>
      </main>
    </div>
    """
  end

  @impl true
  def mount(_params, _session, socket) do
    if connected?(socket) do
      # Subscribe to updates
      PubSub.subscribe(AiDebug.PubSub, "sessions")
      PubSub.subscribe(AiDebug.PubSub, "browser_pool")
      PubSub.subscribe(AiDebug.PubSub, "test_runner")
      
      # Schedule periodic updates
      :timer.send_interval(5000, self(), :update_metrics)
    end

    {:ok,
     socket
     |> assign(:form, to_form(%{"url" => ""}))
     |> assign(:sessions, list_sessions())
     |> assign(:browser_stats, get_browser_stats())
     |> assign(:metrics, get_metrics())
     |> assign(:running_tests, [])
     |> assign(:search, "")
     |> assign(:error, nil)
     |> assign(:success, nil)}
  end

  @impl true
  def handle_event("create_session", %{"url" => url}, socket) do
    case SessionManager.create_session(url) do
      {:ok, _session_info} ->
        {:noreply, 
         socket
         |> assign(:success, "Session created successfully")
         |> assign(:sessions, list_sessions())
         |> clear_alerts()}
      
      {:error, reason} ->
        {:noreply, 
         socket
         |> assign(:error, "Failed to create session: #{inspect(reason)}")
         |> clear_alerts()}
    end
  end

  @impl true
  def handle_event("stop_session", %{"id" => session_id}, socket) do
    SessionManager.close_session(session_id)
    {:noreply, assign(socket, :sessions, list_sessions())}
  end

  @impl true
  def handle_event("search_sessions", %{"search" => search}, socket) do
    {:noreply, assign(socket, :search, search)}
  end

  @impl true
  def handle_info({:session_created, session}, socket) do
    {:noreply, assign(socket, :sessions, [session | socket.assigns.sessions])}
  end

  @impl true
  def handle_info({:session_stopped, session_id}, socket) do
    sessions = Enum.reject(socket.assigns.sessions, &(&1.id == session_id))
    {:noreply, assign(socket, :sessions, sessions)}
  end

  @impl true
  def handle_info({:browser_pool_update, stats}, socket) do
    {:noreply, assign(socket, :browser_stats, stats)}
  end

  @impl true
  def handle_info({:test_update, test_info}, socket) do
    running_tests = update_test_list(socket.assigns.running_tests, test_info)
    {:noreply, assign(socket, :running_tests, running_tests)}
  end

  @impl true
  def handle_info(:update_metrics, socket) do
    {:noreply, assign(socket, :metrics, get_metrics())}
  end

  @impl true
  def handle_info({:error, message}, socket) do
    {:noreply, 
     socket
     |> assign(:error, message)
     |> clear_alerts()}
  end

  @impl true
  def handle_info(:clear_alerts, socket) do
    {:noreply, 
     socket
     |> assign(:error, nil)
     |> assign(:success, nil)}
  end

  defp list_sessions do
    SessionManager.list_sessions()
    |> Enum.map(fn session_info ->
      case session_info do
        session_id when is_binary(session_id) ->
          {:ok, session} = SessionManager.get_session(session_id)
          session
        session_map when is_map(session_map) ->
          session_map
      end
    end)
  end

  defp filter_sessions(sessions, ""), do: sessions
  defp filter_sessions(sessions, search) do
    search_lower = String.downcase(search)
    Enum.filter(sessions, fn session ->
      String.contains?(String.downcase(session.url), search_lower) ||
      String.contains?(String.downcase(session.id), search_lower)
    end)
  end

  defp get_browser_stats do
    %{
      available: BrowserPool.available_count(),
      active: BrowserPool.active_count()
    }
  end

  defp get_metrics do
    %{
      session_creation_time: 8,  # Mock for now
      browser_checkout_time: 45, # Mock for now
      active_workers: 4          # Mock for now
    }
  end

  defp update_test_list(tests, test_info) do
    # Update or add test info
    case Enum.find_index(tests, &(&1.id == test_info.id)) do
      nil -> [test_info | tests]
      index -> List.replace_at(tests, index, test_info)
    end
    |> Enum.reject(&(&1.status == :completed))
  end

  defp format_time(datetime) do
    # Simple time formatting
    "#{datetime.hour}:#{String.pad_leading(to_string(datetime.minute), 2, "0")}"
  end

  defp clear_alerts(socket) do
    Process.send_after(self(), :clear_alerts, 5000)
    socket
  end
end