import React from 'react';
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { DateRangePicker } from './DateRangePicker';

// FilterBar Component
// 
// For violation type filters, you can dynamically populate the options:
// const violationTypeFilter = {
//     ...filterConfigs.violationType,
//     options: [
//         { value: 'all', label: 'All' },
//         ...violationTypes.map(type => ({ 
//             value: type.name || type, 
//             label: type.name || type 
//         }))
//     ]
// };

export function FilterBar({ 
    filters = {}, 
    onFilterChange, 
    filterConfigs = [],
    className = "",
    showSearch = true,
    searchPlaceholder = "Search...",
    searchFields = []
}) {
    const handleFilterChange = (key, value) => {
        if (onFilterChange) {
            onFilterChange({ ...filters, [key]: value });
        }
    };

    const renderFilter = (config) => {
        const { key, type, label, options = [], placeholder, className: configClassName } = config;

        switch (type) {
            case 'select':
                return (
                    <div key={key} className={`w-full md:w-60 sm:w-full ${configClassName || ''}`}>
                        <label className="block text-xs text-gray-600 mb-1 font-sans">{label}</label>
                        <Select 
                            value={filters[key] || 'all'} 
                            onValueChange={(value) => handleFilterChange(key, value)}
                        >
                            <SelectTrigger className="w-full font-sans text-xs md:text-sm sm:text-xs">
                                <SelectValue placeholder={placeholder || label} />
                            </SelectTrigger>
                            <SelectContent>
                                {options.map((option) => (
                                    <SelectItem key={option.value} value={option.value}>
                                        {option.label}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    </div>
                );

            case 'dateRange':
                return (
                    <div key={key} className={`w-full md:w-auto sm:w-full ${configClassName || ''}`}>
                        <DateRangePicker
                            value={filters[key]}
                            onChange={(value) => handleFilterChange(key, value)}
                            className="font-sans text-xs md:text-sm sm:text-xs"
                        />
                    </div>
                );

            case 'input':
                return (
                    <div key={key} className={`w-full md:w-60 sm:w-full ${configClassName || ''}`}>
                        <Input
                            placeholder={placeholder || label}
                            value={filters[key] || ''}
                            onChange={(e) => handleFilterChange(key, e.target.value)}
                            className="font-sans text-xs md:text-sm sm:text-xs"
                        />
                    </div>
                );

            default:
                return null;
        }
    };

    return (
        <div className={`flex flex-col md:flex-row sm:flex-col items-start md:items-center sm:items-start gap-3 md:gap-3 sm:gap-2 ${className}`}>
            {/* Search Bar */}
            {showSearch && (
                <div className="flex-1 max-w-md w-full">
                    <label className="block text-xs text-gray-600 mb-1 font-sans">Search</label>
                    <div className="relative">
                        <svg className="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4 md:w-4 md:h-4 sm:w-3.5 sm:h-3.5 pointer-events-none" 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>
                        <Input
                            placeholder={searchPlaceholder}
                            value={filters.search || ''}
                            onChange={(e) => handleFilterChange('search', e.target.value)}
                            className="pl-8 font-sans text-xs md:text-sm sm:text-xs"
                        />
                    </div>
                </div>
            )}

            {/* Dynamic Filters */}
            {filterConfigs.map(renderFilter)}
        </div>
    );
}

// Predefined filter configurations for common use cases
export const filterConfigs = {
    // Police Station filter
    policeStation: {
        key: 'policeStation',
        type: 'select',
        label: 'Police Station',
        placeholder: 'Select Police Station',
        options: [
            { value: 'all', label: 'All' },
            { value: 'Central Police Station', label: 'Central Police Station' },
            { value: 'North Police Station', label: 'North Police Station' },
            { value: 'South Police Station', label: 'South Police Station' },
            { value: 'East Police Station', label: 'East Police Station' },
            { value: 'West Police Station', label: 'West Police Station' }
        ]
    },

    // Status filter
    status: {
        key: 'status',
        type: 'select',
        label: 'Status',
        placeholder: 'Select Status',
        options: [
            { value: 'all', label: 'All' },
            { value: 'New', label: 'New' },
            { value: 'Raised', label: 'Raised' },
            { value: 'Rejected', label: 'Rejected' }
        ]
    },

    // Violation Type filter
    violationType: {
        key: 'violationType',
        type: 'select',
        label: 'Violation Type',
        placeholder: 'Select Violation Type',
        options: [
            { value: 'all', label: 'All' }
            // Options will be populated dynamically from API
        ]
    },

    // Date Range filter
    dateRange: {
        key: 'dateRange',
        type: 'dateRange',
        label: 'Date Range',
        placeholder: 'Select Date Range'
    }
};
