defmodule BerrypodWeb.Shop.Search do
  use BerrypodWeb, :live_view

  alias Berrypod.Search

  @impl true
  def mount(_params, _session, socket) do
    {:ok, assign(socket, :page_title, "Search")}
  end

  @impl true
  def handle_params(params, _uri, socket) do
    query = params["q"] || ""
    results = if query != "", do: Search.search(query), else: []

    {:noreply,
     socket
     |> assign(:search_page_query, query)
     |> assign(:search_page_results, results)}
  end

  @impl true
  def handle_event("search_submit", %{"q" => query}, socket) do
    {:noreply, push_patch(socket, to: ~p"/search?q=#{query}")}
  end

  @impl true
  def render(assigns) do
    ~H"""
    <.shop_layout {layout_assigns(assigns)} active_page="search">
      <main id="main-content" class="page-container">
        <.page_title text="Search" />

        <form action="/search" method="get" phx-submit="search_submit" class="search-page-form">
          <input
            type="search"
            name="q"
            value={@search_page_query}
            placeholder="Search products..."
            class="themed-input"
          />
          <button type="submit" class="themed-button">Search</button>
        </form>

        <%= if @search_page_results != [] do %>
          <p class="search-page-count">
            {length(@search_page_results)} {if length(@search_page_results) == 1,
              do: "result",
              else: "results"} for "{@search_page_query}"
          </p>
          <.product_grid theme_settings={@theme_settings}>
            <%= for product <- @search_page_results do %>
              <.product_card
                product={product}
                theme_settings={@theme_settings}
                mode={@mode}
                variant={:default}
              />
            <% end %>
          </.product_grid>
        <% else %>
          <%= if @search_page_query != "" do %>
            <div class="collection-empty">
              <p>No products found for "{@search_page_query}"</p>
              <.link navigate="/collections/all" class="collection-empty-link">
                Browse all products
              </.link>
            </div>
          <% end %>
        <% end %>
      </main>
    </.shop_layout>
    """
  end
end