import React from 'react'
import CatalogRulePicker from './CatalogRulePicker'

/**
 * Fokusbereiche inkl. „nur ohne Zuordnung“; Regeln über CatalogRulePicker (+/−).
 */
export default function ExerciseFocusRulePicker({
  focusOptions,
  focusRules,
  focusOnlyWithout,
  legacyFocusAreaIds = [],
  onPatch,
}) {
  const legacyWarning =
    Array.isArray(legacyFocusAreaIds) && legacyFocusAreaIds.length > 0 && !focusOnlyWithout

  const setFocusOnly = (on) => {
    if (on) {
      onPatch({
        focus_only_without: true,
        exclude_without_focus: false,
        focus_rules: [],
        focus_area_ids: [],
      })
      return
    }
    onPatch({ focus_only_without: false })
  }

  return (
    <div className="exercise-focus-rule-picker">
      <label style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer', marginBottom: '10px' }}>
        <input type="checkbox" checked={!!focusOnlyWithout} onChange={(e) => setFocusOnly(e.target.checked)} />
        <span>
          Nur Übungen <strong>ohne</strong> Fokusbereich (keine Zuordnung)
        </span>
      </label>

      {!focusOnlyWithout ? (
        <>
          {legacyWarning ? (
            <p className="muted" style={{ fontSize: '12px', marginTop: 0, marginBottom: '8px' }}>
              Ältere ODER-Fokusliste aktiv — über die Chips auf der Übersicht entfernen.
            </p>
          ) : null}
          <CatalogRulePicker
            label="Fokusbereiche"
            hint="+ alle erforderlich (UND). − keine dieser Zuordnungen."
            options={focusOptions}
            rules={focusRules}
            rulesFieldName="focus_rules"
            idKind="numeric"
            placeholder="Fokus …"
            onPatch={onPatch}
          />
        </>
      ) : (
        <p className="muted" style={{ fontSize: '12px', marginTop: 0 }}>
          Fokus-Regeln sind deaktiviert.
        </p>
      )}
    </div>
  )
}