// app/components/admin/CommonComponents/TableFilters.tsx
'use client';

import { useState, useEffect } from 'react';
import { FilterConfig, FilterValues } from '@/types/admin-table';

interface TableFiltersProps {
  filters: FilterConfig[];
  onFilterChange: (filters: FilterValues) => void;
  initialValues?: FilterValues;
  className?: string;
  showApplyButton?: boolean;
  showResetButton?: boolean;
}

export default function TableFilters({
  filters,
  onFilterChange,
  initialValues = {},
  className = '',
  showApplyButton = true,
  showResetButton = true,
}: TableFiltersProps) {
  const [localFilters, setLocalFilters] = useState<FilterValues>(initialValues);
  const [appliedFilters, setAppliedFilters] = useState<FilterValues>(initialValues);

  useEffect(() => {
    setLocalFilters(initialValues);
    setAppliedFilters(initialValues);
  }, [initialValues]);

  const handleFilterChange = (key: string, value: string) => {
    setLocalFilters(prev => ({ ...prev, [key]: value }));
    if (!showApplyButton) {
      onFilterChange({ ...localFilters, [key]: value });
    }
  };

  const handleApply = () => {
    setAppliedFilters(localFilters);
    onFilterChange(localFilters);
  };

  const handleReset = () => {
    const resetValues: FilterValues = {};
    filters.forEach(filter => {
      resetValues[filter.key] = '';
    });
    setLocalFilters(resetValues);
    setAppliedFilters(resetValues);
    onFilterChange(resetValues);
  };

  const hasChanges = JSON.stringify(localFilters) !== JSON.stringify(appliedFilters);

  const renderFilterInput = (filter: FilterConfig) => {
    const commonClasses = "block w-full px-3 py-2 border border-var-border rounded-xl focus:ring-2 focus:ring-var-primary focus:border-var-primary bg-var-input text-var-text placeholder-var-text-muted transition-colors duration-200";

    switch (filter.type) {
      case 'search':
        return (
          <div className="relative">
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg className="h-4 w-4 text-var-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
            </div>
            <input
              type="text"
              id={filter.key}
              placeholder={filter.placeholder || `Search by ${filter.label.toLowerCase()}...`}
              value={localFilters[filter.key] || ''}
              onChange={(e) => handleFilterChange(filter.key, e.target.value)}
              className={`${commonClasses} pl-10`}
            />
          </div>
        );

      case 'select':
        return (
          <select
            id={filter.key}
            value={localFilters[filter.key] || ''}
            onChange={(e) => handleFilterChange(filter.key, e.target.value)}
            className={commonClasses}
          >
            <option value="">All {filter.label}</option>
            {filter.options?.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        );

      case 'date':
        return (
          <input
            type="date"
            id={filter.key}
            value={localFilters[filter.key] || ''}
            onChange={(e) => handleFilterChange(filter.key, e.target.value)}
            className={commonClasses}
          />
        );

      case 'date-range':
        return (
          <div className="flex items-center space-x-2">
            <input
              type="date"
              id={`${filter.key}-from`}
              placeholder="From"
              value={localFilters[`${filter.key}_from`] || ''}
              onChange={(e) => handleFilterChange(`${filter.key}_from`, e.target.value)}
              className={commonClasses}
            />
            <span className="text-var-text-muted">to</span>
            <input
              type="date"
              id={`${filter.key}-to`}
              placeholder="To"
              value={localFilters[`${filter.key}_to`] || ''}
              onChange={(e) => handleFilterChange(`${filter.key}_to`, e.target.value)}
              className={commonClasses}
            />
          </div>
        );

      default:
        return null;
    }
  };

  return (
    <div className={`space-y-4 ${className}`}>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        {filters.map((filter) => (
          <div key={filter.key}>
            <label htmlFor={filter.key} className="block text-sm font-medium text-var-text mb-1">
              {filter.label}
            </label>
            {renderFilterInput(filter)}
          </div>
        ))}
      </div>

      {(showApplyButton || showResetButton) && (
        <div className="flex items-center space-x-3 pt-2">
          {showApplyButton && (
            <button
              onClick={handleApply}
              disabled={!hasChanges}
              className="px-4 py-2 bg-var-primary text-white font-medium rounded-xl hover:bg-var-primary-hover transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Apply Filters
            </button>
          )}
          
          {showResetButton && (
            <button
              onClick={handleReset}
              className="px-4 py-2 bg-var-surface-hover text-var-text-secondary font-medium rounded-xl hover:bg-var-surface transition-colors duration-200"
            >
              Reset
            </button>
          )}
        </div>
      )}
    </div>
  );
}