// NotesSearchFilter Component
// Advanced multi-criteria filtering for notes

function NotesSearchFilter({ metadata, activeFilters, onFilterChange }) {
    const [localFilters, setLocalFilters] = useState(activeFilters || {
        subject: null,
        group: null,
        timeline: null
    });

    const timelineOptions = [
        { value: 'today', label: '📅 Today', emoji: '📅' },
        { value: 'yesterday', label: '📆 Yesterday', emoji: '📆' },
        { value: 'this_week', label: '📊 This Week', emoji: '📊' },
        { value: 'this_month', label: '📈 This Month', emoji: '📈' },
        { value: 'older', label: '📚 Older', emoji: '📚' }
    ];

    const updateFilter = (key, value) => {
        const newFilters = { ...localFilters, [key]: value };
        setLocalFilters(newFilters);
        if (onFilterChange) {
            onFilterChange(newFilters);
        }
    };

    const clearFilters = () => {
        const emptyFilters = { subject: null, group: null, timeline: null };
        setLocalFilters(emptyFilters);
        if (onFilterChange) {
            onFilterChange(emptyFilters);
        }
    };

    const getActiveFilterCount = () => {
        return Object.values(localFilters).filter(Boolean).length;
    };

    const removeFilter = (key) => {
        updateFilter(key, null);
    };

    return (
        <div style={{
            background: 'var(--card-bg)',
            border: '1px solid var(--border-color)',
            borderRadius: '12px',
            padding: '1.5rem',
            marginBottom: '1.5rem',
            boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
        }}>
            {/* Header */}
            <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                marginBottom: '1.5rem'
            }}>
                <h3 style={{
                    fontSize: '1rem',
                    fontWeight: '600',
                    margin: 0,
                    display: 'flex',
                    alignItems: 'center',
                    gap: '0.5rem'
                }}>
                    {/* 🔍 */}
                    {getActiveFilterCount() > 0 && (
                        <span style={{
                            background: 'var(--primary)',
                            color: 'white',
                            borderRadius: '12px',
                            padding: '0.125rem 0.5rem',
                            fontSize: '0.75rem',
                            fontWeight: '600'
                        }}>
                            {getActiveFilterCount()}
                        </span>
                    )}
                </h3>

                {getActiveFilterCount() > 0 && (
                    <button
                        onClick={clearFilters}
                        style={{
                            background: 'none',
                            border: 'none',
                            color: 'var(--primary)',
                            cursor: 'pointer',
                            fontSize: '0.875rem',
                            fontWeight: '500',
                            padding: '0.25rem 0.5rem',
                            borderRadius: '0.375rem'
                        }}
                        onMouseEnter={(e) => e.target.style.background = 'var(--primary-light)'}
                        onMouseLeave={(e) => e.target.style.background = 'none'}
                    >
                        Clear All
                    </button>
                )}
            </div>

            {/* Subject and Group Dropdowns */}
            <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
                gap: '1rem',
                marginBottom: '1rem'
            }}>
                {/* Subject Filter */}
                <div>
                    <label style={{
                        display: 'block',
                        fontSize: '0.875rem',
                        fontWeight: '600',
                        marginBottom: '0.5rem',
                        color: 'var(--text-primary)'
                    }}>
                        📚 Subject
                    </label>
                    <select
                        value={localFilters.subject || ''}
                        onChange={(e) => updateFilter('subject', e.target.value || null)}
                        className="form-input"
                        style={{
                            width: '100%',
                            background: 'var(--bg-secondary)',
                            color: 'var(--text-primary)'
                        }}
                    >
                        <option value="">All Subjects</option>
                        {metadata?.subjects?.map(subject => (
                            <option key={subject} value={subject}>{subject}</option>
                        ))}
                    </select>
                </div>

                {/* Group Filter */}
                <div>
                    <label style={{
                        display: 'block',
                        fontSize: '0.875rem',
                        fontWeight: '600',
                        marginBottom: '0.5rem',
                        color: 'var(--text-primary)'
                    }}>
                        📁 Group
                    </label>
                    <select
                        value={localFilters.group || ''}
                        onChange={(e) => updateFilter('group', e.target.value || null)}
                        className="form-input"
                        style={{
                            width: '100%',
                            background: 'var(--bg-secondary)',
                            color: 'var(--text-primary)'
                        }}
                    >
                        <option value="">All Groups</option>
                        {metadata?.groups?.map(group => (
                            <option key={group} value={group}>{group}</option>
                        ))}
                    </select>
                </div>
            </div>

            {/* Timeline Pills */}
            <div>
                <label style={{
                    display: 'block',
                    fontSize: '0.875rem',
                    fontWeight: '600',
                    marginBottom: '0.75rem',
                    color: 'var(--text-primary)'
                }}>
                    ⏰ Timeline
                </label>
                <div style={{
                    display: 'flex',
                    flexWrap: 'wrap',
                    gap: '0.5rem'
                }}>
                    {timelineOptions.map(option => (
                        <button
                            key={option.value}
                            onClick={() => updateFilter('timeline',
                                localFilters.timeline === option.value ? null : option.value
                            )}
                            style={{
                                padding: '0.5rem 1rem',
                                border: `2px solid ${localFilters.timeline === option.value ? 'var(--primary)' : 'var(--border-color)'}`,
                                background: localFilters.timeline === option.value ? 'var(--primary-light)' : 'var(--bg-secondary)',
                                color: localFilters.timeline === option.value ? 'var(--primary)' : 'var(--text-primary)',
                                borderRadius: '20px',
                                cursor: 'pointer',
                                fontSize: '0.875rem',
                                fontWeight: localFilters.timeline === option.value ? '600' : '400',
                                transition: 'all 0.2s',
                                whiteSpace: 'nowrap'
                            }}
                            onMouseEnter={(e) => {
                                if (localFilters.timeline !== option.value) {
                                    e.target.style.borderColor = 'var(--primary)';
                                    e.target.style.background = 'var(--primary-light)';
                                }
                            }}
                            onMouseLeave={(e) => {
                                if (localFilters.timeline !== option.value) {
                                    e.target.style.borderColor = 'var(--border-color)';
                                    e.target.style.background = 'var(--bg-secondary)';
                                }
                            }}
                        >
                            {option.emoji} {option.label.replace(option.emoji + ' ', '')}
                        </button>
                    ))}
                </div>
            </div>

            {/* Active Filters Display */}
            {getActiveFilterCount() > 0 && (
                <div style={{
                    marginTop: '1.5rem',
                    paddingTop: '1rem',
                    borderTop: '1px solid var(--border-color)'
                }}>
                    <div style={{
                        fontSize: '0.75rem',
                        fontWeight: '600',
                        color: 'var(--text-secondary)',
                        marginBottom: '0.5rem',
                        textTransform: 'uppercase',
                        letterSpacing: '0.05em'
                    }}>
                        Active Filters
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
                        {localFilters.subject && (
                            <span style={{
                                display: 'inline-flex',
                                alignItems: 'center',
                                gap: '0.5rem',
                                background: 'var(--primary-light)',
                                color: 'var(--primary)',
                                padding: '0.25rem 0.75rem',
                                borderRadius: '12px',
                                fontSize: '0.875rem',
                                fontWeight: '500'
                            }}>
                                📚 {localFilters.subject}
                                <button
                                    onClick={() => removeFilter('subject')}
                                    style={{
                                        background: 'none',
                                        border: 'none',
                                        color: 'var(--primary)',
                                        cursor: 'pointer',
                                        padding: '0',
                                        fontSize: '1rem',
                                        lineHeight: '1'
                                    }}
                                >
                                    ×
                                </button>
                            </span>
                        )}

                        {localFilters.group && (
                            <span style={{
                                display: 'inline-flex',
                                alignItems: 'center',
                                gap: '0.5rem',
                                background: 'var(--success-light)',
                                color: 'var(--success)',
                                padding: '0.25rem 0.75rem',
                                borderRadius: '12px',
                                fontSize: '0.875rem',
                                fontWeight: '500'
                            }}>
                                📁 {localFilters.group}
                                <button
                                    onClick={() => removeFilter('group')}
                                    style={{
                                        background: 'none',
                                        border: 'none',
                                        color: 'var(--success)',
                                        cursor: 'pointer',
                                        padding: '0',
                                        fontSize: '1rem',
                                        lineHeight: '1'
                                    }}
                                >
                                    ×
                                </button>
                            </span>
                        )}

                        {localFilters.timeline && (
                            <span style={{
                                display: 'inline-flex',
                                alignItems: 'center',
                                gap: '0.5rem',
                                background: 'var(--warning-light)',
                                color: 'var(--warning)',
                                padding: '0.25rem 0.75rem',
                                borderRadius: '12px',
                                fontSize: '0.875rem',
                                fontWeight: '500'
                            }}>
                                ⏰ {timelineOptions.find(t => t.value === localFilters.timeline)?.label.replace(/^.+ /, '')}
                                <button
                                    onClick={() => removeFilter('timeline')}
                                    style={{
                                        background: 'none',
                                        border: 'none',
                                        color: 'var(--warning)',
                                        cursor: 'pointer',
                                        padding: '0',
                                        fontSize: '1rem',
                                        lineHeight: '1'
                                    }}
                                >
                                    ×
                                </button>
                            </span>
                        )}
                    </div>
                </div>
            )}
        </div>
    );
}

// Export to global scope
window.NotesSearchFilter = NotesSearchFilter;