@props([
    'id' => 'ajax-filters-status-indicator',
    'filtersId' => null,
    'activeText' => 'Filtry aktywne',
    'inactiveText' => 'Filtry wylaczone',
    'active' => false,
    'wrapperClass' => '',
    'iconClass' => 'fas fa-filter',
])

@php
    $isActive = (bool) $active;
    $filtersIdSafe = trim((string) ($filtersId ?? ''));
@endphp

<span
    id="{{ $id }}"
    class="ajax-filters-status-indicator {{ $wrapperClass }} {{ $isActive ? 'is-active' : 'is-inactive' }}"
    data-active="{{ $isActive ? '1' : '0' }}"
    data-active-text="{{ $activeText }}"
    data-inactive-text="{{ $inactiveText }}"
    data-filters-id="{{ $filtersIdSafe }}"
>
    <span class="ajax-filters-status-dot" aria-hidden="true"></span>
    <i class="{{ $iconClass }} ajax-filters-status-icon" aria-hidden="true"></i>
    <span class="ajax-filters-status-text">{{ $isActive ? $activeText : $inactiveText }}</span>
</span>

<style>
    .ajax-filters-status-indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 999px;
        padding: 0.18rem 0.55rem 0.2rem 0.45rem;
        border: 1px solid #9fc0df;
        background: #eef4fb;
        color: #2f557a;
        font-size: 1rem;
        line-height: 1.1;
        font-weight: 600;
        white-space: nowrap;
    }

    .ajax-filters-status-indicator .ajax-filters-status-dot {
        width: 0.48rem;
        height: 0.48rem;
        border-radius: 50%;
        background: #adb5bd;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
        flex: 0 0 auto;
    }

    .ajax-filters-status-indicator .ajax-filters-status-icon {
        font-size: 1.2rem;
        opacity: 0.92;
    }

    .ajax-filters-status-indicator.is-active {
        background: #e8f7ee;
        border-color: #8fcca9;
        color: #2f6d48;
    }

    .ajax-filters-status-indicator.is-active .ajax-filters-status-dot {
        background: #28a745;
    }

    .ajax-filters-status-indicator.is-inactive {
        background: #f3f6fa;
        border-color: #ccd7e3;
        color: #5f6f82;
    }

    .ajax-filters-status-indicator.is-inactive .ajax-filters-status-dot {
        background: #8f9fb3;
    }
</style>

@if($filtersIdSafe !== '')
    <script>
        (function () {
            var indicatorSelector = '#{{ $id }}';
            var filtersId = '{{ $filtersIdSafe }}';
            var rootSelector = '#' + filtersId;

            function isActiveValue(value) {
                if (value === null || value === undefined) {
                    return false;
                }
                return String(value).trim() !== '';
            }

            function hasAnyActiveFilter(values) {
                return Object.keys(values || {}).some(function (key) {
                    return isActiveValue(values[key]);
                });
            }

            function collectValuesFromDom() {
                var values = {};
                $(rootSelector).find('.ajax-filter-control').each(function (idx) {
                    var $el = $(this);
                    var key = String($el.data('filter-key') || '').trim()
                        || String($el.attr('name') || '').trim()
                        || String($el.attr('id') || '').trim()
                        || ('filter_' + idx);
                    values[key] = ($el.val() == null) ? '' : String($el.val());
                });
                return values;
            }

            function setIndicator(active) {
                var $indicator = $(indicatorSelector);
                if (!$indicator.length) {
                    return;
                }

                var activeText = String($indicator.data('active-text') || 'Filtry aktywne');
                var inactiveText = String($indicator.data('inactive-text') || 'Filtry wylaczone');

                $indicator
                    .toggleClass('is-active', !!active)
                    .toggleClass('is-inactive', !active)
                    .attr('data-active', active ? '1' : '0');

                $indicator.find('.ajax-filters-status-text').text(active ? activeText : inactiveText);
            }

            $(document).on(filtersId + ':statusChanged', function (_event, payload) {
                if (!payload || String(payload.id || '') !== filtersId) {
                    return;
                }
                setIndicator(!!payload.active);
            });

            $(document).on('ajax-filters:statusChanged', function (_event, payload) {
                if (!payload || String(payload.id || '') !== filtersId) {
                    return;
                }
                setIndicator(!!payload.active);
            });

            $(document).on(filtersId + ':changed', function (_event, payload) {
                if (!payload || String(payload.id || '') !== filtersId) {
                    return;
                }
                setIndicator(hasAnyActiveFilter(payload.values || {}));
            });

            $(document).on(filtersId + ':refreshStatus', function () {
                var values = collectValuesFromDom();
                setIndicator(hasAnyActiveFilter(values));
            });

            $(function () {
                var values = collectValuesFromDom();
                setIndicator(hasAnyActiveFilter(values));
                $(document).trigger(filtersId + ':emit');
            });
        })();
    </script>
@endif