{#
/**
 * @file
 * FlowDrop Plugin Selector Component
 *
 * A grid-based plugin selector that groups plugins by provider module.
 * Used for selecting executor plugins in node type configuration.
 *
 * Available variables:
 * - plugins: Array of plugin groups, each with:
 *   - provider_name: Display name for the provider module
 *   - provider_id: Machine name of the provider module
 *   - plugins: Array of plugins with id, label, description
 * - input_name: Name attribute for the hidden input field (deprecated, use form API)
 * - input_id: ID of the form's hidden input field to sync selection to
 * - selected: ID of the currently selected plugin
 * - stagger: Enable staggered entrance animation (default: true)
 *
 * Note: When used with Drupal Form API, add a separate hidden field in the form
 * with the same ID as input_id. This component will sync its selection to that
 * field via JavaScript.
 *
 * Usage (PHP render array):
 * $build['selector'] = [
 *   '#type' => 'component',
 *   '#component' => 'flowdrop_ui_components:plugin-selector',
 *   '#props' => [
 *     'plugins' => $grouped_plugins,
 *     'input_id' => 'edit-executor-plugin',
 *   ],
 * ];
 */
#}

{% set stagger = stagger ?? true %}
{% set selected = selected ?? '' %}
{% set input_id = input_id ?? 'fd-plugin-selector-input' %}

{# Build container classes #}
{% set container_classes = ['fd-plugin-selector'] %}
{% if stagger %}
  {% set container_classes = container_classes|merge(['fd-plugin-selector--stagger']) %}
{% endif %}

{# Count plugins across all groups for the search placeholder. #}
{% set total_plugins = 0 %}
{% for group in plugins %}
  {% set total_plugins = total_plugins + group.plugins|length %}
{% endfor %}

<div class="{{ container_classes|join(' ') }}" data-flowdrop-plugin-selector data-flowdrop-target-input="{{ input_id }}">

  {% if plugins is empty %}
    <div class="fd-plugin-selector__empty">
      {{ 'No plugins available.'|t }}
    </div>
  {% else %}
    <div class="fd-plugin-selector__search">
      <input
        type="search"
        class="fd-plugin-selector__search-input"
        placeholder="{{ 'Search @count plugins…'|t({'@count': total_plugins}) }}"
        aria-label="{{ 'Search plugins'|t }}"
        autocomplete="off"
        data-flowdrop-plugin-search
      >
    </div>

    <div class="fd-plugin-selector__no-results" data-flowdrop-plugin-no-results hidden>
      {{ 'No plugins match your search.'|t }}
    </div>

    {% for group in plugins %}
      {% set group_id = 'fd-plugin-group-' ~ loop.index %}
      <div class="fd-plugin-selector__group" data-flowdrop-plugin-group>
        <button
          type="button"
          class="fd-plugin-selector__group-header"
          aria-expanded="true"
          aria-controls="{{ group_id }}"
          data-flowdrop-plugin-group-toggle
        >
          <span class="fd-plugin-selector__group-chevron" aria-hidden="true"></span>
          <span class="fd-plugin-selector__group-title">{{ group.provider_name }}</span>
          <span class="fd-plugin-selector__group-count">{{ group.plugins|length }}</span>
        </button>

        <div class="fd-plugin-selector__group-content" id="{{ group_id }}">
          <div class="fd-plugin-selector__grid">
            {% for plugin in group.plugins %}
              {% set card_id = 'fd-plugin-' ~ (plugin.id|replace({':': '-', '_': '-'})) %}
              {% set is_selected = selected == plugin.id %}
              {% set usage_count = plugin.usages|default([])|length %}
              {% set card_classes = ['fd-plugin-selector__card'] %}
              {% if is_selected %}
                {% set card_classes = card_classes|merge(['fd-plugin-selector__card--selected']) %}
              {% endif %}

              <div
                class="fd-plugin-selector__item"
                data-search-text="{{ (plugin.label ~ ' ' ~ plugin.description)|lower }}"
              >
                <label
                  class="{{ card_classes|join(' ') }}"
                  for="{{ card_id }}"
                  data-plugin-id="{{ plugin.id }}"
                >
                  <input
                    type="radio"
                    name="fd_plugin_radio"
                    value="{{ plugin.id }}"
                    id="{{ card_id }}"
                    class="fd-plugin-selector__radio"
                    {% if is_selected %}checked{% endif %}
                    data-flowdrop-plugin-radio
                  >
                  <span class="fd-plugin-selector__indicator" aria-hidden="true"></span>
                  <span class="fd-plugin-selector__content">
                    <span class="fd-plugin-selector__title">{{ plugin.label }}</span>
                    {% if plugin.description %}
                      <span class="fd-plugin-selector__description">{{ plugin.description }}</span>
                    {% endif %}
                    {% if plugin.tags|default([]) is not empty %}
                      <span class="fd-plugin-selector__tags">
                        {% for tag in plugin.tags %}
                          <span class="fd-plugin-selector__tag fd-plugin-selector__tag--{{ tag.key }}">{{ tag.label }}</span>
                        {% endfor %}
                      </span>
                    {% endif %}
                  </span>
                </label>

                {# Usage summary lives outside the card so it is not part of
                   the selectable click area, but stays visually attached.
                   Only rendered when the plugin is already in use. #}
                {% if usage_count > 0 %}
                  <div class="fd-plugin-selector__usage">
                    <button
                      type="button"
                      class="fd-plugin-selector__usage-toggle"
                      aria-expanded="false"
                      aria-controls="{{ card_id }}-usage"
                      data-flowdrop-plugin-usage-toggle
                    >
                      <span class="fd-plugin-selector__usage-chevron" aria-hidden="true"></span>
                      <span>{% trans %}Used in {{ usage_count }} node type{% plural usage_count %}Used in {{ usage_count }} node types{% endtrans %}</span>
                    </button>
                    <ol class="fd-plugin-selector__usage-list" id="{{ card_id }}-usage" hidden>
                      {% for usage in plugin.usages %}
                        <li><a href="{{ usage.url }}" class="fd-plugin-selector__usage-link">{{ usage.label }}</a></li>
                      {% endfor %}
                    </ol>
                  </div>
                {% endif %}
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
    {% endfor %}
  {% endif %}
</div>
