shinkan-jinkendo/frontend/src/components/CatalogRulePicker.jsx

import React, { useState } from 'react'
import { newCatalogRuleKey } from '../constants/exerciseListFilters'

/**
 * Kompakte +/- Regeln für Katalogwerte (numerische IDs oder Slugs).
 * Chips oben, schmales Dropdown, Schalter nur „+“ und „−“.
 */
export default function CatalogRulePicker({
  label,
  hint,
  options = [],
  rules = [],
  rulesFieldName,
  disabled = false,
  placeholder = 'Auswählen …',
  idKind = 'numeric',
  onPatch,
}) {
  const [pendingId, setPendingId] = useState('')

  const labelFor = (id) => options.find((o) => String(o.id) === String(id))?.label ?? id

  const addRule = (mode) => {
    const raw = String(pendingId || '').trim()
    if (!raw || disabled) return
    if (idKind === 'numeric') {
      const n = Number(raw)
      if (!Number.isFinite(n) || n < 1) return
    }
    const dup = (rules || []).some((r) => String(r.id) === raw && r.mode === mode)
    if (dup) return
    onPatch({
      [rulesFieldName]: [
        ...(rules || []),
        { key: newCatalogRuleKey(rulesFieldName), id: raw, mode },
      ],
    })
    setPendingId('')
  }

  const removeRule = (key) => {
    onPatch({
      [rulesFieldName]: (rules || []).filter((r) => r.key !== key),
    })
  }

  return (
    <div className={`catalog-rule-picker${disabled ? ' catalog-rule-picker--disabled' : ''}`}>
      <label className="form-label catalog-rule-picker__label">{label}</label>
      {hint ? (
        <p className="muted catalog-rule-picker__hint" style={{ fontSize: '11px', marginTop: '2px', marginBottom: '6px' }}>
          {hint}
        </p>
      ) : null}
      <div className="catalog-rule-picker__chips" aria-live="polite">
        {(rules || []).map((r) => (
          <span key={r.key} className="catalog-rule-chip">
            <span className={`catalog-rule-chip__sign catalog-rule-chip__sign--${r.mode}`}>
              {r.mode === 'forbid' ? '−' : '+'}
            </span>
            <span className="catalog-rule-chip__text">{labelFor(r.id)}</span>
            <button
              type="button"
              className="catalog-rule-chip__x"
              aria-label={`${label}: Regel entfernen`}
              onClick={() => removeRule(r.key)}
            >
              ×
            </button>
          </span>
        ))}
      </div>
      <div className="catalog-rule-picker__row">
        <select
          className="form-input catalog-rule-picker__select"
          value={pendingId}
          disabled={disabled}
          onChange={(e) => setPendingId(e.target.value)}
          aria-label={label}
        >
          <option value="">{placeholder}</option>
          {options.map((o) => (
            <option key={o.id} value={String(o.id)}>
              {o.label || o.id}
            </option>
          ))}
        </select>
        <button
          type="button"
          className="btn btn-secondary btn-small catalog-rule-picker__sign-btn"
          disabled={disabled || !pendingId}
          title="Muss zutreffen"
          onClick={() => addRule('require')}
        >
          +
        </button>
        <button
          type="button"
          className="btn btn-secondary btn-small catalog-rule-picker__sign-btn"
          disabled={disabled || !pendingId}
          title="Darf nicht zutreffen"
          onClick={() => addRule('forbid')}
        >
          −
        </button>
      </div>
    </div>
  )
}