import { useState, type ReactNode } from 'react'
import { de } from '../strings/de'
import './filterPanel.css'

interface FilterPanelProps {
  /** Always visible on mobile (typically the search text input). Optional. */
  searchField?: ReactNode
  /** Collapsible filters (hidden behind toggle on mobile; inline on desktop). */
  children: ReactNode
  /** Number of currently active (non-default) filter values. Shown as badge. */
  activeCount: number
  /** Called when the reset button is clicked. */
  onReset: () => void
}

/**
 * UX-MOBILE-1: wraps a set of filter controls so they collapse on mobile.
 * Render inside the existing `.filters` div (or replace it entirely).
 *
 * Desktop (>=768px): renders all children inline, identical to today.
 * Mobile (<768px): shows searchField + a "Filter (N)" toggle; tapping reveals
 *   the rest of the controls in a column drawer + a reset button.
 */
export function FilterPanel({ searchField, children, activeCount, onReset }: FilterPanelProps) {
  const [open, setOpen] = useState(false)
  const t = de.filterPanel

  const label = activeCount > 0 ? `${t.toggleButton} (${activeCount})` : t.toggleButton

  return (
    <div className={`filters filter-panel${open ? ' filter-panel--open' : ''}`}>
      {searchField}
      <button
        type="button"
        className="btn btn--ghost filter-panel__toggle"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
        aria-label={label}
      >
        {label}
      </button>
      <div className="filter-panel__drawer">
        {children}
        {activeCount > 0 && (
          <button type="button" className="btn btn--ghost filter-panel__reset-btn" onClick={onReset}>
            {t.resetButton}
          </button>
        )}
      </div>
    </div>
  )
}
