berrypod/lib/berrypod_web/components/block_editor_components.ex

defmodule BerrypodWeb.BlockEditorComponents do
  @moduledoc """
  Shared UI components for the block editor.

  Used by both the admin page editor (`Admin.Pages.Editor`) and the
  live page editor sidebar (`PageEditorHook` + `PageRenderer`).

  All components accept an `event_prefix` attr to namespace phx-click
  events. The admin editor uses `""` (default), the live sidebar uses
  `"editor_"`.
  """

  use Phoenix.Component

  import BerrypodWeb.CoreComponents, only: [icon: 1]

  alias Berrypod.Pages.{BlockEditor, BlockTypes}

  # ── Block card ─────────────────────────────────────────────────

  attr :block, :map, required: true
  attr :idx, :integer, required: true
  attr :total, :integer, required: true
  attr :expanded, :any, required: true
  attr :event_prefix, :string, default: ""

  def block_card(assigns) do
    block_type = BlockTypes.get(assigns.block["type"])
    has_settings = BlockEditor.has_settings?(assigns.block)
    expanded = MapSet.member?(assigns.expanded, assigns.block["id"])

    assigns =
      assigns
      |> assign(:block_type, block_type)
      |> assign(:has_settings, has_settings)
      |> assign(:is_expanded, expanded)

    ~H"""
    <div
      class={["block-card", @is_expanded && "block-card-expanded"]}
      role="listitem"
      aria-label={"#{@block_type && @block_type.name || @block["type"]}, position #{@idx + 1} of #{@total}"}
      id={"block-#{@block["id"]}"}
    >
      <div class="block-card-header">
        <span class="block-card-position">{@idx + 1}</span>

        <span class="block-card-icon">
          <.icon name={(@block_type && @block_type.icon) || "hero-puzzle-piece"} class="size-5" />
        </span>

        <span class="block-card-name">
          {(@block_type && @block_type.name) || @block["type"]}
        </span>

        <span class="block-card-controls">
          <button
            :if={@has_settings}
            phx-click={"#{@event_prefix}toggle_expand"}
            phx-value-id={@block["id"]}
            class={[
              "admin-btn admin-btn-ghost admin-btn-icon admin-btn-sm",
              @is_expanded && "block-edit-btn-active"
            ]}
            aria-label={"Edit #{@block_type && @block_type.name} settings"}
            aria-expanded={to_string(@is_expanded)}
            aria-controls={"block-settings-#{@block["id"]}"}
            id={"block-edit-btn-#{@block["id"]}"}
          >
            <.icon name="hero-cog-6-tooth-mini" class="size-4" />
          </button>
          <button
            phx-click={"#{@event_prefix}move_up"}
            phx-value-id={@block["id"]}
            class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-sm"
            aria-label={"Move #{@block_type && @block_type.name} up"}
            disabled={@idx == 0}
          >
            <.icon name="hero-chevron-up-mini" class="size-4" />
          </button>
          <button
            phx-click={"#{@event_prefix}move_down"}
            phx-value-id={@block["id"]}
            class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-sm"
            aria-label={"Move #{@block_type && @block_type.name} down"}
            disabled={@idx == @total - 1}
          >
            <.icon name="hero-chevron-down-mini" class="size-4" />
          </button>
          <button
            phx-click={"#{@event_prefix}duplicate_block"}
            phx-value-id={@block["id"]}
            class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-sm"
            aria-label={"Duplicate #{@block_type && @block_type.name}"}
          >
            <.icon name="hero-document-duplicate-mini" class="size-4" />
          </button>
          <button
            phx-click={"#{@event_prefix}remove_block"}
            phx-value-id={@block["id"]}
            class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-sm block-remove-btn"
            aria-label={"Remove #{@block_type && @block_type.name}"}
            data-confirm={"Remove #{@block_type && @block_type.name}?"}
          >
            <.icon name="hero-trash-mini" class="size-4" />
          </button>
        </span>
      </div>

      <.block_settings_form
        :if={@is_expanded}
        block={@block}
        schema={@block_type.settings_schema}
        event_prefix={@event_prefix}
      />
    </div>
    """
  end

  # ── Settings form ──────────────────────────────────────────────

  attr :block, :map, required: true
  attr :schema, :list, required: true
  attr :event_prefix, :string, default: ""

  def block_settings_form(assigns) do
    settings = BlockEditor.settings_with_defaults(assigns.block)
    assigns = assign(assigns, :settings, settings)

    ~H"""
    <div class="block-card-settings" id={"block-settings-#{@block["id"]}"}>
      <form phx-change={"#{@event_prefix}update_block_settings"}>
        <input type="hidden" name="block_id" value={@block["id"]} />

        <div class="block-settings-fields">
          <.block_field
            :for={field <- @schema}
            field={field}
            value={@settings[field.key]}
            block_id={@block["id"]}
            event_prefix={@event_prefix}
          />
        </div>
      </form>
    </div>
    """
  end

  # ── Field renderers ────────────────────────────────────────────

  attr :field, :any, required: true
  attr :value, :any, required: true
  attr :block_id, :string, required: true
  attr :event_prefix, :string, default: ""

  def block_field(%{field: %{type: :select}} = assigns) do
    ~H"""
    <div class="admin-fieldset">
      <label>
        <span class="admin-label">{@field.label}</span>
        <select
          name={"block_settings[#{@field.key}]"}
          id={"block-#{@block_id}-#{@field.key}"}
          class="admin-select"
          phx-debounce="blur"
        >
          {Phoenix.HTML.Form.options_for_select(@field.options, to_string(@value))}
        </select>
      </label>
    </div>
    """
  end

  def block_field(%{field: %{type: :textarea}} = assigns) do
    ~H"""
    <div class="admin-fieldset">
      <label>
        <span class="admin-label">{@field.label}</span>
        <textarea
          name={"block_settings[#{@field.key}]"}
          id={"block-#{@block_id}-#{@field.key}"}
          class="admin-textarea"
          rows="3"
          phx-debounce="300"
        >{@value}</textarea>
      </label>
    </div>
    """
  end

  def block_field(%{field: %{type: :number}} = assigns) do
    ~H"""
    <div class="admin-fieldset">
      <label>
        <span class="admin-label">{@field.label}</span>
        <input
          type="number"
          name={"block_settings[#{@field.key}]"}
          id={"block-#{@block_id}-#{@field.key}"}
          value={@value}
          class="admin-input"
          phx-debounce="blur"
        />
      </label>
    </div>
    """
  end

  def block_field(%{field: %{type: :repeater}} = assigns) do
    items = if is_list(assigns.value), do: assigns.value, else: []
    item_count = length(items)

    assigns =
      assigns
      |> assign(:items, items)
      |> assign(:item_count, item_count)

    ~H"""
    <div class="repeater-field">
      <span class="admin-label">{@field.label}</span>

      <ol class="repeater-items" aria-label={@field.label}>
        <li :for={{item, idx} <- Enum.with_index(@items)} class="repeater-item">
          <fieldset>
            <legend class="sr-only">
              Item {idx + 1}: {item["label"] || item[:label] || "New item"}
            </legend>

            <div class="repeater-item-fields">
              <.repeater_item_field
                :for={sub_field <- @field.item_schema}
                sub_field={sub_field}
                item={item}
                field_key={@field.key}
                block_id={@block_id}
                index={idx}
                event_prefix={@event_prefix}
              />
            </div>

            <div class="repeater-item-controls">
              <button
                type="button"
                phx-click={"#{@event_prefix}repeater_move"}
                phx-value-block-id={@block_id}
                phx-value-field={@field.key}
                phx-value-index={idx}
                phx-value-dir="up"
                class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-xs"
                aria-label={"Move item #{idx + 1} up"}
                disabled={idx == 0}
              >
                <.icon name="hero-chevron-up-mini" class="size-3.5" />
              </button>
              <button
                type="button"
                phx-click={"#{@event_prefix}repeater_move"}
                phx-value-block-id={@block_id}
                phx-value-field={@field.key}
                phx-value-index={idx}
                phx-value-dir="down"
                class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-xs"
                aria-label={"Move item #{idx + 1} down"}
                disabled={idx == @item_count - 1}
              >
                <.icon name="hero-chevron-down-mini" class="size-3.5" />
              </button>
              <button
                type="button"
                phx-click={"#{@event_prefix}repeater_remove"}
                phx-value-block-id={@block_id}
                phx-value-field={@field.key}
                phx-value-index={idx}
                class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-xs repeater-remove-btn"
                aria-label={"Remove item #{idx + 1}"}
              >
                <.icon name="hero-x-mark-mini" class="size-3.5" />
              </button>
            </div>
          </fieldset>
        </li>
      </ol>

      <button
        type="button"
        phx-click={"#{@event_prefix}repeater_add"}
        phx-value-block-id={@block_id}
        phx-value-field={@field.key}
        class="admin-btn admin-btn-outline admin-btn-xs repeater-add-btn"
      >
        <.icon name="hero-plus-mini" class="size-3.5" /> Add item
      </button>
    </div>
    """
  end

  def block_field(assigns) do
    ~H"""
    <div class="admin-fieldset">
      <label>
        <span class="admin-label">{@field.label}</span>
        <input
          type="text"
          name={"block_settings[#{@field.key}]"}
          id={"block-#{@block_id}-#{@field.key}"}
          value={@value}
          class="admin-input"
          phx-debounce="300"
        />
      </label>
    </div>
    """
  end

  # ── Repeater item field ────────────────────────────────────────

  attr :sub_field, :any, required: true
  attr :item, :map, required: true
  attr :field_key, :string, required: true
  attr :block_id, :string, required: true
  attr :index, :integer, required: true
  attr :event_prefix, :string, default: ""

  def repeater_item_field(assigns) do
    value = assigns.item[assigns.sub_field.key] || ""
    assigns = assign(assigns, :value, value)

    ~H"""
    <label class="repeater-sub-field">
      <span class="sr-only">{@sub_field.label}</span>
      <input
        type="text"
        name={"block_settings[#{@field_key}][#{@index}][#{@sub_field.key}]"}
        id={"block-#{@block_id}-#{@field_key}-#{@index}-#{@sub_field.key}"}
        value={@value}
        placeholder={@sub_field.label}
        class="admin-input admin-input-sm"
        phx-debounce="300"
      />
    </label>
    """
  end

  # ── Block picker ───────────────────────────────────────────────

  attr :allowed_blocks, :any, required: true
  attr :filter, :string, required: true
  attr :event_prefix, :string, default: ""

  def block_picker(assigns) do
    filter = String.downcase(assigns.filter)

    filtered =
      assigns.allowed_blocks
      |> Enum.filter(fn {_type, def} ->
        filter == "" or String.contains?(String.downcase(def.name), filter)
      end)
      |> Enum.sort_by(fn {_type, def} -> def.name end)

    assigns = assign(assigns, :filtered_blocks, filtered)

    ~H"""
    <div class="block-picker-overlay">
      <div class="block-picker" phx-click-away={"#{@event_prefix}hide_picker"}>
        <div class="block-picker-header">
          <h3>Add a block</h3>
          <button
            phx-click={"#{@event_prefix}hide_picker"}
            class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-sm"
            aria-label="Close"
          >
            <.icon name="hero-x-mark" class="size-5" />
          </button>
        </div>

        <input
          type="text"
          placeholder="Filter blocks..."
          value={@filter}
          phx-keyup={"#{@event_prefix}filter_picker"}
          phx-key=""
          class="admin-input block-picker-search"
          autofocus
        />

        <div class="block-picker-grid">
          <button
            :for={{type, def} <- @filtered_blocks}
            phx-click={"#{@event_prefix}add_block"}
            phx-value-type={type}
            class="block-picker-item"
          >
            <.icon name={def.icon} class="size-5" />
            <span>{def.name}</span>
          </button>

          <p :if={@filtered_blocks == []} class="block-picker-empty">
            No matching blocks.
          </p>
        </div>
      </div>
    </div>
    """
  end
end