mitgliederverwaltung/lib/mv_web/components/layouts.ex

defmodule MvWeb.Layouts do
  @moduledoc """
  This module holds different layouts used by your application.

  See the `layouts` directory for all templates available.
  The "root" layout is a skeleton rendered as part of the
  application router. The "app" layout is rendered as component
  in regular views and live views.
  """
  use MvWeb, :html
  use Gettext, backend: MvWeb.Gettext
  import MvWeb.Layouts.Sidebar

  embed_templates "layouts/*"

  @doc """
  Builds the full browser tab title: "Mila", "Mila · Page", or "Mila · Page · Club".
  Order is always: Mila · page title · club name.
  Uses assigns[:club_name] and the short page label from assigns[:content_title] or
  assigns[:page_title]. LiveViews should set content_title (same gettext as sidebar)
  and then assign page_title to the result of this function so the client receives
  the full title.
  """
  def page_title_string(assigns) do
    club = assigns[:club_name]
    page = assigns[:content_title] || assigns[:page_title]

    parts =
      [page, club]
      |> Enum.filter(&(is_binary(&1) and String.trim(&1) != ""))

    if parts == [] do
      "Mila"
    else
      "Mila · " <> Enum.join(parts, " · ")
    end
  end

  @doc """
  Assigns content_title (short label for heading; same gettext as sidebar) and
  page_title (full browser tab title). Call from LiveView mount after club_name
  is set (e.g. from on_mount). Returns the socket.
  """
  def assign_page_title(socket, content_title) do
    socket = assign(socket, :content_title, content_title)
    assign(socket, :page_title, page_title_string(socket.assigns))
  end

  @doc """
  Renders the public (unauthenticated) page layout: header with logo + "Mitgliederverwaltung" left,
  club name centered, language selector right; plus main content and flash group. Use for sign-in, join, and join-confirm pages so they
  share the same chrome without the sidebar or authenticated layout logic.

  Pass optional `:club_name` from the parent (e.g. LiveView mount) to avoid a settings read in the component.
  """
  attr :flash, :map, required: true, doc: "the map of flash messages"

  attr :club_name, :string,
    default: nil,
    doc: "optional; if set, avoids get_settings() in the component"

  slot :inner_block, required: true

  def public_page(assigns) do
    club_name =
      assigns[:club_name] ||
        case Mv.Membership.get_settings() do
          {:ok, s} -> s.club_name || "Mitgliederverwaltung"
          _ -> "Mitgliederverwaltung"
        end

    assigns = assign(assigns, :club_name, club_name)

    ~H"""
    <header class="relative flex items-center justify-between p-4 border-b border-base-300 bg-base-100">
      <div class="flex items-center gap-3 shrink-0 min-w-0 max-w-[45%]">
        <img src={~p"/images/mila.svg"} alt="Mila Logo" class="size-8 shrink-0" />
        <span class="text-lg font-bold truncate">Mitgliederverwaltung</span>
      </div>
      <span class="absolute left-1/2 -translate-x-1/2 text-lg font-bold text-center max-w-[50%] truncate">
        {@club_name}
      </span>
      <div class="shrink-0 flex items-center gap-2">
        <form method="post" action={~p"/set_locale"}>
          <input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
          <select
            name="locale"
            onchange="this.form.submit()"
            class="select select-sm focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
            aria-label={gettext("Select language")}
          >
            <option value="de" selected={Gettext.get_locale(MvWeb.Gettext) == "de"}>Deutsch</option>
            <option value="en" selected={Gettext.get_locale(MvWeb.Gettext) == "en"}>English</option>
          </select>
        </form>
        <.theme_swap />
      </div>
    </header>
    <main class="px-4 py-8 sm:px-6">
      <div class="mx-auto max-full space-y-4">
        {render_slot(@inner_block)}
      </div>
    </main>
    <.flash_group flash={@flash} />
    """
  end

  @doc """
  Renders the app layout. Can be used with or without a current_user.
  When current_user is present, it will show the navigation bar.

  ## Examples

      <Layouts.app flash={@flash}>
        <h1>Content</h1>
      </Layout.app>

      <Layouts.app flash={@flash} current_user={@current_user}>
        <h1>Authenticated Content</h1>
      </Layout.app>

  """
  attr :flash, :map, required: true, doc: "the map of flash messages"

  attr :current_user, :map, default: nil, doc: "the current user, if authenticated"

  attr :current_scope, :map,
    default: nil,
    doc: "the current [scope](https://hexdocs.pm/phoenix/scopes.html)"

  attr :club_name, :string,
    default: nil,
    doc: "optional club name to pass to navbar"

  slot :inner_block, required: true

  def app(assigns) do
    # Single get_settings() for layout; derive club_name and join_form_enabled to avoid duplicate query.
    %{club_name: club_name, join_form_enabled: join_form_enabled} = get_layout_settings()

    # TODO: unprocessed count runs on every page load when join form enabled; consider
    # loading only on navigation or caching briefly if performance becomes an issue.
    unprocessed_join_requests_count =
      get_unprocessed_join_requests_count(assigns.current_user, join_form_enabled)

    assigns =
      assigns
      |> assign(:club_name, club_name)
      |> assign(:join_form_enabled, join_form_enabled)
      |> assign(:unprocessed_join_requests_count, unprocessed_join_requests_count)

    ~H"""
    <%= if @current_user do %>
      <div
        id="app-layout"
        class="drawer lg:drawer-open"
        data-sidebar-expanded="true"
        phx-hook="SidebarState"
      >
        <input id="mobile-drawer" type="checkbox" class="drawer-toggle" phx-update="ignore" />

        <div class="drawer-content flex flex-col relative z-0">
          <!-- Mobile Header (only visible on mobile) -->
          <header class="lg:hidden sticky top-0 z-10 navbar bg-base-100 shadow-sm">
            <label
              for="mobile-drawer"
              class="btn btn-square btn-ghost"
              aria-label={gettext("Open navigation menu")}
            >
              <.icon name="hero-bars-3" class="size-6" aria-hidden="true" />
            </label>
            <span class="font-bold">{@club_name}</span>
          </header>
          
    <!-- Main Content (shared between mobile and desktop) -->
          <main class="px-4 py-8 sm:px-6 lg:px-8">
            <div class="mx-auto space-y-4 max-full">
              {render_slot(@inner_block)}
            </div>
          </main>
        </div>

        <div class="drawer-side z-40">
          <.sidebar
            current_user={@current_user}
            club_name={@club_name}
            join_form_enabled={@join_form_enabled}
            unprocessed_join_requests_count={@unprocessed_join_requests_count}
            mobile={false}
          />
        </div>
      </div>
    <% else %>
      <!-- Unauthenticated: Option 3 header (logo + app name left, club name center, language selector right) -->
      <header class="relative flex items-center justify-between p-4 border-b border-base-300 bg-base-100">
        <div class="flex items-center gap-3 shrink-0 min-w-0 max-w-[45%]">
          <img src={~p"/images/mila.svg"} alt="Mila Logo" class="size-8 shrink-0" />
          <span class="menu-label text-lg font-bold truncate">Mitgliederverwaltung</span>
        </div>
        <span class="absolute left-1/2 -translate-x-1/2 text-lg font-bold text-center max-w-[50%] truncate">
          {@club_name}
        </span>
        <div class="shrink-0 flex items-center gap-2">
          <form method="post" action={~p"/set_locale"}>
            <input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
            <select
              name="locale"
              onchange="this.form.submit()"
              class="select select-sm focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
              aria-label={gettext("Select language")}
            >
              <option value="de" selected={Gettext.get_locale(MvWeb.Gettext) == "de"}>Deutsch</option>
              <option value="en" selected={Gettext.get_locale(MvWeb.Gettext) == "en"}>English</option>
            </select>
          </form>
          <.theme_swap />
        </div>
      </header>
      <main class="px-4 py-8 sm:px-6">
        <div class="mx-auto space-y-4 max-full">
          {render_slot(@inner_block)}
        </div>
      </main>
    <% end %>

    <.flash_group flash={@flash} />
    """
  end

  # Single settings read for layout; returns club_name and join_form_enabled to avoid duplicate get_settings().
  defp get_layout_settings do
    case Mv.Membership.get_settings() do
      {:ok, settings} ->
        %{
          club_name: settings.club_name || "Mitgliederverwaltung",
          join_form_enabled: settings.join_form_enabled == true
        }

      _ ->
        %{club_name: "Mitgliederverwaltung", join_form_enabled: false}
    end
  end

  defp get_unprocessed_join_requests_count(nil, _), do: 0
  defp get_unprocessed_join_requests_count(_user, false), do: 0

  defp get_unprocessed_join_requests_count(user, true) do
    Mv.Membership.count_submitted_join_requests(actor: user)
  end

  @doc """
  Shows the flash group with standard titles and content.

  ## Examples

      <.flash_group flash={@flash} />
  """
  attr :flash, :map, required: true, doc: "the map of flash messages"
  attr :id, :string, default: "flash-group", doc: "the optional id of flash container"

  def flash_group(assigns) do
    ~H"""
    <div
      id={@id}
      aria-live="polite"
      class="z-50 toast toast-bottom toast-end flex flex-col gap-2 pointer-events-none"
    >
      <.flash kind={:success} flash={@flash} auto_clear_ms={5000} />
      <.flash kind={:warning} flash={@flash} />
      <.flash kind={:info} flash={@flash} />
      <.flash kind={:error} flash={@flash} />

      <.flash
        id="client-error"
        kind={:error}
        title={gettext("We can't find the internet")}
        phx-disconnected={show(".phx-client-error #client-error") |> JS.remove_attribute("hidden")}
        phx-connected={hide("#client-error") |> JS.set_attribute({"hidden", ""})}
        hidden
      >
        {gettext("Attempting to reconnect")}
        <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
      </.flash>

      <.flash
        id="server-error"
        kind={:error}
        title={gettext("Something went wrong!")}
        phx-disconnected={show(".phx-server-error #server-error") |> JS.remove_attribute("hidden")}
        phx-connected={hide("#server-error") |> JS.set_attribute({"hidden", ""})}
        hidden
      >
        {gettext("Attempting to reconnect")}
        <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
      </.flash>
    </div>
    """
  end
end