import React, { useState, useEffect, ReactNode, KeyboardEvent } from 'react';
import { useLanguage } from '../../contexts/LanguageContext';

interface FilterControlsProps {
  children: ReactNode;
  title?: string;
  defaultExpanded?: boolean;
  onReset?: (() => void) | null;
  className?: string;
}

interface FilterGroupProps {
  label?: string;
  children: ReactNode;
}

interface FilterRowProps {
  children: ReactNode;
}

interface FilterControlsComponent extends React.FC<FilterControlsProps> {
  Group: React.FC<FilterGroupProps>;
  Row: React.FC<FilterRowProps>;
}

const FilterControls: FilterControlsComponent = ({ 
  children, 
  title,
  defaultExpanded = true,
  onReset = null,
  className = ''
}) => {
  const { t } = useLanguage();
  const displayTitle = title || t('filters.title');
  
  // Start collapsed on mobile
  const [expanded, setExpanded] = useState(() => {
    if (typeof window !== 'undefined') {
      return window.innerWidth > 768 ? defaultExpanded : false;
    }
    return defaultExpanded;
  });

  // Handle resize
  useEffect(() => {
    const handleResize = () => {
      // Auto-expand on desktop, keep user preference on mobile
      if (window.innerWidth > 768) {
        setExpanded(true);
      }
    };
    
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const toggleExpanded = () => {
    setExpanded(!expanded);
  };

  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      toggleExpanded();
    }
  };

  return (
    <div className={`controls ${expanded ? 'expanded' : 'collapsed'} ${className}`}>
      <div 
        className="controls-header" 
        onClick={toggleExpanded}
        role="button"
        aria-expanded={expanded}
        tabIndex={0}
        onKeyDown={handleKeyDown}
      >
        <h3>{displayTitle}</h3>
        <div className="controls-header-actions">
          {onReset && expanded && (
            <button 
              className="controls-reset"
              onClick={(e) => { 
                e.stopPropagation(); 
                onReset(); 
              }}
              aria-label={t('filters.reset') || 'Reset filters'}
            >
              {t('filters.reset') || 'Reset'}
            </button>
          )}
          <button 
            className="controls-toggle"
            aria-hidden="true"
          >
            {expanded ? '▲' : '▼'}
          </button>
        </div>
      </div>
      
      <div 
        className="controls-body"
        style={{
          display: expanded ? 'block' : 'none',
          animation: expanded ? 'fadeIn 200ms ease' : 'none'
        }}
      >
        {children}
      </div>
    </div>
  );
};

const FilterGroup: React.FC<FilterGroupProps> = ({ label, children }) => {
  return (
    <div className="control-group">
      {label && <label>{label}</label>}
      {children}
    </div>
  );
};

const FilterRow: React.FC<FilterRowProps> = ({ children }) => {
  return <div className="control-row">{children}</div>;
};

FilterControls.Group = FilterGroup;
FilterControls.Row = FilterRow;

export default FilterControls;
