defmodule AiDebugWeb.DebugDemoLive do
  @moduledoc """
  A demonstration LiveView showcasing all debugging features.
  
  This LiveView includes:
  - State inspection and manipulation
  - Event tracking and replay
  - Performance monitoring
  - Debug annotations
  - Interactive debugging panel
  """
  
  use AiDebugWeb, :live_view
  
  alias AiDebug.LiveViewDebugger
  
  @impl true
  def mount(_params, _session, socket) do
    if connected?(socket) do
      :timer.send_interval(1000, self(), :tick)
    end
    
    {:ok,
     socket
     |> assign(:counter, 0)
     |> assign(:messages, [])
     |> assign(:form_data, %{})
     |> assign(:items, generate_items(10))
     |> assign(:selected_item, nil)
     |> assign(:show_details, false)
     |> assign(:last_event, nil)
     |> assign(:tick_count, 0)}
  end
  
  @impl true
  def handle_event("increment", _params, socket) do
    {:noreply,
     socket
     |> update(:counter, &(&1 + 1))
     |> assign(:last_event, "increment")}
  end
  
  @impl true
  def handle_event("decrement", _params, socket) do
    {:noreply,
     socket
     |> update(:counter, &(&1 - 1))
     |> assign(:last_event, "decrement")}
  end
  
  @impl true
  def handle_event("add_message", %{"message" => message}, socket) do
    new_message = %{
      id: System.unique_integer([:positive]),
      text: message,
      timestamp: DateTime.utc_now()
    }
    
    {:noreply,
     socket
     |> update(:messages, &([new_message | &1]))
     |> assign(:last_event, "add_message")}
  end
  
  @impl true
  def handle_event("select_item", %{"id" => id}, socket) do
    item = Enum.find(socket.assigns.items, &(&1.id == String.to_integer(id)))
    
    {:noreply,
     socket
     |> assign(:selected_item, item)
     |> assign(:show_details, true)
     |> assign(:last_event, "select_item")}
  end
  
  @impl true
  def handle_event("close_details", _params, socket) do
    {:noreply,
     socket
     |> assign(:show_details, false)
     |> assign(:last_event, "close_details")}
  end
  
  @impl true
  def handle_event("trigger_error", _params, socket) do
    # Intentionally trigger an error for debugging
    _ = 1 / 0
    {:noreply, socket}
  rescue
    error ->
      {:noreply,
       socket
       |> put_flash(:error, "Error caught: #{inspect(error)}")
       |> assign(:last_event, "trigger_error")}
  end
  
  @impl true
  def handle_event("heavy_computation", _params, socket) do
    # Simulate heavy computation
    result = Enum.reduce(1..1_000_000, 0, fn i, acc ->
      :math.sin(i) + acc
    end)
    
    {:noreply,
     socket
     |> put_flash(:info, "Computation complete: #{Float.round(result, 2)}")
     |> assign(:last_event, "heavy_computation")}
  end
  
  @impl true
  def handle_info(:tick, socket) do
    {:noreply, update(socket, :tick_count, &(&1 + 1))}
  end
  
  @impl true
  def render(assigns) do
    ~H"""
    <div class="max-w-4xl mx-auto p-6">
      <h1 class="text-3xl font-bold mb-6">LiveView Debug Demo</h1>
      
      <div class="mb-8 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
        <p class="text-sm text-blue-800 dark:text-blue-200">
          Press <kbd class="px-2 py-1 bg-white dark:bg-gray-800 rounded">Ctrl+Shift+D</kbd> to toggle the debug panel
        </p>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Counter Section -->
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow" data-phx-component="counter-section">
          <h2 class="text-xl font-semibold mb-4">Counter Demo</h2>
          <div class="flex items-center gap-4">
            <button
              phx-click="decrement"
              class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
            >
              -
            </button>
            <span class="text-2xl font-bold"><%= @counter %></span>
            <button
              phx-click="increment"
              class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
            >
              +
            </button>
          </div>
        </div>
        
        <!-- Messages Section -->
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow" data-phx-component="messages-section">
          <h2 class="text-xl font-semibold mb-4">Messages</h2>
          <form phx-submit="add_message" class="mb-4">
            <div class="flex gap-2">
              <input
                type="text"
                name="message"
                placeholder="Enter a message..."
                class="flex-1 px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600"
                required
              />
              <button
                type="submit"
                class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
              >
                Add
              </button>
            </div>
          </form>
          
          <div class="space-y-2 max-h-40 overflow-y-auto">
            <%= for message <- Enum.take(@messages, 5) do %>
              <div class="p-2 bg-gray-100 dark:bg-gray-700 rounded">
                <p class="text-sm"><%= message.text %></p>
                <p class="text-xs text-gray-500"><%= Calendar.strftime(message.timestamp, "%H:%M:%S") %></p>
              </div>
            <% end %>
          </div>
        </div>
        
        <!-- Items List -->
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow" data-phx-component="items-section">
          <h2 class="text-xl font-semibold mb-4">Items List</h2>
          <div class="space-y-2 max-h-60 overflow-y-auto">
            <%= for item <- @items do %>
              <div
                phx-click="select_item"
                phx-value-id={item.id}
                class="p-3 border rounded cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
                data-phx-component={"item-#{item.id}"}
              >
                <h3 class="font-semibold"><%= item.name %></h3>
                <p class="text-sm text-gray-600"><%= item.description %></p>
              </div>
            <% end %>
          </div>
        </div>
        
        <!-- Debug Actions -->
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow" data-phx-component="debug-actions">
          <h2 class="text-xl font-semibold mb-4">Debug Actions</h2>
          <div class="space-y-3">
            <button
              phx-click="trigger_error"
              class="w-full px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
            >
              Trigger Error
            </button>
            <button
              phx-click="heavy_computation"
              class="w-full px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600"
            >
              Heavy Computation
            </button>
            <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded">
              <p class="text-sm">Last Event: <span class="font-mono"><%= @last_event || "none" %></span></p>
              <p class="text-sm">Tick Count: <span class="font-mono"><%= @tick_count %></span></p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Item Details Modal -->
      <%= if @show_details && @selected_item do %>
        <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-40">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg max-w-md w-full">
            <h3 class="text-xl font-semibold mb-4"><%= @selected_item.name %></h3>
            <p class="mb-4"><%= @selected_item.description %></p>
            <dl class="space-y-2 mb-4">
              <div>
                <dt class="text-sm font-medium text-gray-500">ID</dt>
                <dd class="text-sm"><%= @selected_item.id %></dd>
              </div>
              <div>
                <dt class="text-sm font-medium text-gray-500">Value</dt>
                <dd class="text-sm"><%= @selected_item.value %></dd>
              </div>
            </dl>
            <button
              phx-click="close_details"
              class="w-full px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
            >
              Close
            </button>
          </div>
        </div>
      <% end %>
    </div>
    """
  end
  
  # Private functions
  
  defp generate_items(count) do
    for i <- 1..count do
      %{
        id: i,
        name: "Item #{i}",
        description: "Description for item #{i}",
        value: :rand.uniform(100)
      }
    end
  end
  
end