import React from 'react'

export default function ExerciseListSearchBar({
  searchTitleSuggestions,
  searchInput,
  onSearchInputChange,
  aiSearchInput,
  onAiSearchInputChange,
  mineOnly,
  onToggleMineOnly,
  onOpenFilter,
  filterChips,
  onResetAllFilters,
  exerciseCount,
  allOnPageSelected,
  onToggleSelectAllPage,
}) {
  return (
    <div className="card exercise-search-bar">
      <label className="form-label">Volltextsuche (Titel, Ziel, …)</label>
      <datalist id="exercise-search-titles">
        {searchTitleSuggestions.map((t) => (
          <option key={t} value={t} />
        ))}
      </datalist>
      <input
        type="search"
        className="form-input exercise-search-bar__primary"
        placeholder="Suchbegriffe…"
        value={searchInput}
        onChange={(e) => onSearchInputChange(e.target.value)}
        autoComplete="on"
        name="exercise-fulltext-search"
        list="exercise-search-titles"
        enterKeyHint="search"
      />
      <label className="form-label">Ergänzende Suche / KI-Vorbereitung (Beta)</label>
      <input
        type="search"
        className="form-input"
        placeholder="zweiter Begriff — zusätzliche Volltextsuche (ODER)"
        value={aiSearchInput}
        onChange={(e) => onAiSearchInputChange(e.target.value)}
        autoComplete="on"
        name="exercise-ai-search"
        list="exercise-search-titles"
        enterKeyHint="search"
      />
      <div className="exercise-search-bar__actions exercise-search-bar__actions--split">
        <div className="exercise-search-bar__actions-main">
          <button
            type="button"
            className={'btn btn-secondary exercise-mine-toggle' + (mineOnly ? ' exercise-mine-toggle--active' : '')}
            onClick={onToggleMineOnly}
            title="Nur Übungen, die mit deinem Profil als Ersteller gespeichert sind"
          >
            Meine Übungen
          </button>
          <button type="button" className="btn btn-secondary exercise-filter-trigger" onClick={onOpenFilter}>
            Filter
            {filterChips.length > 0 ? (
              <span className="exercise-filter-badge" aria-hidden>
                {filterChips.length}
              </span>
            ) : null}
          </button>
          {filterChips.length > 0 ? (
            <button type="button" className="btn" onClick={onResetAllFilters}>
              Alle entfernen
            </button>
          ) : null}
        </div>
      </div>
      {filterChips.length > 0 ? (
        <div className="exercise-filter-chips-row" role="list" aria-label="Aktive Filter">
          {filterChips.map((c) => (
            <button
              key={c.key}
              type="button"
              role="listitem"
              className="exercise-filter-chip"
              title="Filter entfernen"
              onClick={() => c.onRemove()}
            >
              <span className="exercise-filter-chip__text">{c.label}</span>
              <span className="exercise-filter-chip__x" aria-hidden>
                ×
              </span>
            </button>
          ))}
        </div>
      ) : null}
      <p className="exercise-search-hint">
        Trefferliste aktualisiert sich kurz nach Eingabe. Titel der aktuellen Liste erscheinen als Vorschläge (Pfeil im
        Feld). Fachliche Filter über „Filter“ – zwischen Feldern UND, Auswahl mehrerer Werte je Feld mit ODER.
        {exerciseCount > 0 ? (
          <>
            {' '}
            <button type="button" className="btn btn-secondary btn-small" onClick={onToggleSelectAllPage}>
              {allOnPageSelected ? 'Auswahl auf dieser Seite aufheben' : 'Alle auf dieser Seite auswählen'}
            </button>
          </>
        ) : null}
      </p>
    </div>
  )
}
