dialup

defmodule Dialup.App.Page do
  @moduledoc """
  Home page at /.
  """

  use Dialup.Page

  @impl true
  def mount(_params, assigns) do
    {:ok, Map.merge(assigns, %{count: 0})}
  end

  @impl true
  def handle_event("increment", _value, assigns) do
    new_assigns = Map.update!(assigns, :count, &(&1 + 1))
    {:patch, "counter", render_counter(new_assigns), new_assigns}
  end

  @impl true
  def handle_event("reset", _value, assigns) do
    new_assigns = Map.put(assigns, :count, 0)
    {:patch, "counter", render_counter(new_assigns), new_assigns}
  end

  @impl true
  def render(assigns) do
    ~H"""
    <section class="hero">
      <div class="hero-text">
        <p class="hero-eyebrow">Elixir · WebSocket · Real-time</p>
        <h1>Welcome to <span class="brand">Dialup</span></h1>
        <p class="hero-sub">
          1 tab = 1 Elixir process.<br/>
          State lives on the server, synced over WebSocket.
        </p>
        <div class="hint-container">
          <p class="hint">💡 Edit <code>lib/app/page.ex</code> + <code>lib/app/page.css</code></p>
        </div>
      </div>
      <div class="hero-demo">
        <%= "<%=" %> render_counter(assigns) %>
      </div>
    </section>
    """
  end

  defp render_counter(assigns) do
    ~H"""
    <div id="counter" class="counter-card">
      <p class="counter-eyebrow">Live Demo — WebSocket Counter</p>
      <div class="counter-value">{@count}</div>
      <div class="counter-actions">
        <button class="btn btn-primary" ws-event="increment">＋ Increment</button>
        <button class="btn btn-ghost" ws-event="reset">Reset</button>
      </div>
      <p class="counter-note">Each click reaches the server via WebSocket</p>
    </div>
    """
  end
end