// src/components/ui/FilterPanel.tsx
'use client';

interface FilterField {
  name: string;
  label: string;
  type: 'text' | 'select' | 'date' | 'number';
  placeholder?: string;
  options?: { value: string; label: string }[];
  value: string;
  onChange: (value: string) => void;
}

interface FilterPanelProps {
  fields: FilterField[];
  onApply: () => void;
  onReset: () => void;
  showReset?: boolean;
  applyButtonText?: string;
  resetButtonText?: string;
  className?: string;
}

export default function FilterPanel({
  fields,
  onApply,
  onReset,
  showReset = true,
  applyButtonText = 'Apply Filters',
  resetButtonText = 'Reset',
  className = ''
}: FilterPanelProps) {
  const renderField = (field: FilterField) => {
    switch (field.type) {
      case 'select':
        return (
          <select
            value={field.value}
            onChange={(e) => field.onChange(e.target.value)}
            className="w-full px-3 py-2 rounded-lg border focus:outline-none focus:ring-2"
            style={{
              borderColor: 'var(--color-border)',
              background: 'var(--color-surface-alt)',
              color: 'var(--color-text)'
            }}
          >
            <option value="">{field.placeholder || `All ${field.label}s`}</option>
            {field.options?.map(option => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        );
      
      case 'date':
        return (
          <input
            type="date"
            value={field.value}
            onChange={(e) => field.onChange(e.target.value)}
            className="w-full px-3 py-2 rounded-lg border focus:outline-none focus:ring-2"
            style={{
              borderColor: 'var(--color-border)',
              background: 'var(--color-surface-alt)',
              color: 'var(--color-text)'
            }}
          />
        );
      
      default:
        return (
          <input
            type={field.type}
            value={field.value}
            onChange={(e) => field.onChange(e.target.value)}
            placeholder={field.placeholder}
            className="w-full px-3 py-2 rounded-lg border focus:outline-none focus:ring-2"
            style={{
              borderColor: 'var(--color-border)',
              background: 'var(--color-surface-alt)',
              color: 'var(--color-text)'
            }}
          />
        );
    }
  };
  
  return (
    <div 
      className={`p-4 rounded-lg border ${className}`}
      style={{ 
        borderColor: 'var(--color-border)',
        background: 'var(--color-surface)'
      }}
    >
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        {fields.map((field) => (
          <div key={field.name}>
            <label className="block text-sm font-medium mb-1" style={{ color: 'var(--color-text-secondary)' }}>
              {field.label}
            </label>
            {renderField(field)}
          </div>
        ))}
      </div>
      
      <div className="flex justify-end gap-2 mt-4">
        {showReset && (
          <button
            onClick={onReset}
            className="px-4 py-2 rounded-lg text-sm font-medium transition-all border"
            style={{
              borderColor: 'var(--color-border)',
              color: 'var(--color-text)',
              background: 'var(--color-surface)'
            }}
          >
            {resetButtonText}
          </button>
        )}
        <button
          onClick={onApply}
          className="px-4 py-2 rounded-lg text-sm font-medium transition-all"
          style={{ background: 'var(--color-cta)', color: 'white' }}
        >
          {applyButtonText}
        </button>
      </div>
    </div>
  );
}