{#
/**
 * @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 %}

<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 %}
    {% for group in plugins %}
      <div class="fd-plugin-selector__group">
        <div class="fd-plugin-selector__group-header">
          <h3 class="fd-plugin-selector__group-title">{{ group.provider_name }}</h3>
          <span class="fd-plugin-selector__group-count">{{ group.plugins|length }}</span>
        </div>

        <div class="fd-plugin-selector__group-content">
          <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 card_classes = ['fd-plugin-selector__card'] %}
              {% if is_selected %}
                {% set card_classes = card_classes|merge(['fd-plugin-selector__card--selected']) %}
              {% endif %}

              <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 %}
                </span>
              </label>
            {% endfor %}
          </div>
        </div>
      </div>
    {% endfor %}
  {% endif %}
</div>
