{% comment %}
This template contains the Alpine.js store for managing filter state in the moderation dashboard
{% endcomment %}

<script>
document.addEventListener('alpine:init', () => {
    Alpine.store('filters', {
        active: [],
        
        init() {
            this.updateActiveFilters();
            
            // Listen for filter changes
            window.addEventListener('filter-changed', () => {
                this.updateActiveFilters();
            });
        },

        updateActiveFilters() {
            const urlParams = new URLSearchParams(window.location.search);
            this.active = [];

            // Submission Type
            if (urlParams.has('submission_type')) {
                this.active.push({
                    name: 'submission_type',
                    label: 'Submission',
                    value: this.getSubmissionTypeLabel(urlParams.get('submission_type'))
                });
            }

            // Type
            if (urlParams.has('type')) {
                this.active.push({
                    name: 'type',
                    label: 'Type',
                    value: this.getTypeLabel(urlParams.get('type'))
                });
            }

            // Content Type
            if (urlParams.has('content_type')) {
                this.active.push({
                    name: 'content_type',
                    label: 'Content',
                    value: this.getContentTypeLabel(urlParams.get('content_type'))
                });
            }
        },

        getSubmissionTypeLabel(value) {
            const labels = {
                'text': 'Text',
                'photo': 'Photo'
            };
            return labels[value] || value;
        },

        getTypeLabel(value) {
            const labels = {
                'CREATE': 'New',
                'EDIT': 'Edit'
            };
            return labels[value] || value;
        },

        getContentTypeLabel(value) {
            const labels = {
                'park': 'Parks',
                'ride': 'Rides',
                'company': 'Companies'
            };
            return labels[value] || value;
        },

        get hasActiveFilters() {
            return this.active.length > 0;
        },

        clear() {
            const form = document.querySelector('form[hx-get]');
            if (form) {
                form.querySelectorAll('select').forEach(select => {
                    select.value = '';
                });
                form.dispatchEvent(new Event('change'));
            }
        },

        // Accessibility Helpers
        announceFilterChange() {
            const message = this.hasActiveFilters 
                ? `Applied filters: ${this.active.map(f => f.label + ': ' + f.value).join(', ')}`
                : 'All filters cleared';
                
            const announcement = document.createElement('div');
            announcement.setAttribute('role', 'status');
            announcement.setAttribute('aria-live', 'polite');
            announcement.className = 'sr-only';
            announcement.textContent = message;
            
            document.body.appendChild(announcement);
            setTimeout(() => announcement.remove(), 1000);
        }
    });
});

// Watch for filter changes and update URL params
document.addEventListener('filter-changed', (e) => {
    const form = e.target.closest('form');
    if (!form) return;

    const formData = new FormData(form);
    const params = new URLSearchParams();
    
    for (let [key, value] of formData.entries()) {
        if (value) {
            params.append(key, value);
        }
    }

    // Update URL without page reload
    const newUrl = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
    window.history.pushState({}, '', newUrl);

    // Announce changes for screen readers
    Alpine.store('filters').announceFilterChange();
});
</script>