<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
    <!-- Filter Header -->
    <div class="p-4 border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                    Filters
                </h3>
                @if($activeFiltersCount > 0)
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                        {{ $activeFiltersCount }} active
                    </span>
                @endif
            </div>
            
            <div class="flex items-center space-x-2">
                @if($activeFiltersCount > 0)
                    <button 
                        wire:click="clearAllFilters"
                        class="text-sm text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 font-medium"
                    >
                        Clear All
                    </button>
                @endif
                
                <button 
                    wire:click="toggleAdvancedFilters"
                    class="flex items-center space-x-1 text-sm text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
                >
                    <span>{{ $showAdvancedFilters ? 'Hide' : 'Show' }} Advanced</span>
                    <svg class="w-4 h-4 transform transition-transform {{ $showAdvancedFilters ? 'rotate-180' : '' }}" 
                         fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
            </div>
        </div>
        
        <!-- Active Filters Summary -->
        @if($activeFiltersCount > 0)
            <div class="mt-3 flex flex-wrap gap-2">
                @foreach($this->getFilterSummary() as $filter)
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
                        {{ $filter }}
                    </span>
                @endforeach
            </div>
        @endif
    </div>

    <!-- Basic Filters -->
    <div class="p-4 space-y-4">
        <!-- Categories -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Category
            </label>
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-2">
                @foreach($categories as $category)
                    <button 
                        wire:click="setCategory('{{ $category['value'] }}')"
                        class="flex items-center justify-between p-2 text-sm rounded-lg border transition-colors
                               {{ $selectedCategory === $category['value'] 
                                  ? 'bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-900/20 dark:border-blue-700 dark:text-blue-300' 
                                  : 'bg-white border-gray-200 text-gray-700 hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-600' }}"
                    >
                        <span class="truncate">{{ $category['label'] }}</span>
                        <span class="ml-1 text-xs text-gray-500 dark:text-gray-400">{{ $category['count'] }}</span>
                    </button>
                @endforeach
            </div>
        </div>

        <!-- Status -->
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Status
            </label>
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2">
                @foreach($statuses as $status)
                    <button 
                        wire:click="setStatus('{{ $status['value'] }}')"
                        class="flex items-center justify-between p-2 text-sm rounded-lg border transition-colors
                               {{ $selectedStatus === $status['value'] 
                                  ? 'bg-green-50 border-green-200 text-green-700 dark:bg-green-900/20 dark:border-green-700 dark:text-green-300' 
                                  : 'bg-white border-gray-200 text-gray-700 hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-600' }}"
                    >
                        <span class="truncate">{{ $status['label'] }}</span>
                        <span class="ml-1 text-xs text-gray-500 dark:text-gray-400">{{ $status['count'] }}</span>
                    </button>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Advanced Filters -->
    <div class="transition-all duration-300 {{ $showAdvancedFilters ? 'block' : 'hidden' }}">
        <div class="border-t border-gray-200 dark:border-gray-700 p-4 space-y-4">
            <!-- Manufacturer -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Manufacturer
                </label>
                <select 
                    wire:model.live="selectedManufacturer"
                    wire:change="setManufacturer($event.target.value)"
                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-500 focus:ring-blue-500"
                >
                    <option value="">All Manufacturers</option>
                    @foreach($manufacturers as $manufacturer)
                        <option value="{{ $manufacturer['value'] }}">
                            {{ $manufacturer['label'] }} ({{ $manufacturer['count'] }})
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Park -->
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Park
                </label>
                <select 
                    wire:model.live="selectedPark"
                    wire:change="setPark($event.target.value)"
                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-500 focus:ring-blue-500"
                >
                    <option value="">All Parks</option>
                    @foreach($parks as $park)
                        <option value="{{ $park['value'] }}">
                            {{ $park['label'] }} ({{ $park['count'] }})
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Opening Year Range -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Opening Year (Min)
                    </label>
                    <input 
                        type="number" 
                        wire:model.live="minOpeningYear"
                        wire:change="updateYearRange"
                        min="{{ $yearRange['min'] }}" 
                        max="{{ $yearRange['max'] }}"
                        placeholder="{{ $yearRange['min'] }}"
                        class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-500 focus:ring-blue-500"
                    >
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Opening Year (Max)
                    </label>
                    <input 
                        type="number" 
                        wire:model.live="maxOpeningYear"
                        wire:change="updateYearRange"
                        min="{{ $yearRange['min'] }}" 
                        max="{{ $yearRange['max'] }}"
                        placeholder="{{ $yearRange['max'] }}"
                        class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-500 focus:ring-blue-500"
                    >
                </div>
            </div>

            <!-- Height Requirement Range -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Min Height (cm)
                    </label>
                    <input 
                        type="number" 
                        wire:model.live="minHeight"
                        wire:change="updateHeightRange"
                        min="{{ $heightRange['min'] }}" 
                        max="{{ $heightRange['max'] }}"
                        placeholder="{{ $heightRange['min'] }}"
                        class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-500 focus:ring-blue-500"
                    >
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Max Height (cm)
                    </label>
                    <input 
                        type="number" 
                        wire:model.live="maxHeight"
                        wire:change="updateHeightRange"
                        min="{{ $heightRange['min'] }}" 
                        max="{{ $heightRange['max'] }}"
                        placeholder="{{ $heightRange['max'] }}"
                        class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-500 focus:ring-blue-500"
                    >
                </div>
            </div>

            <!-- Range Indicators -->
            <div class="text-xs text-gray-500 dark:text-gray-400 space-y-1">
                <div>Available years: {{ $yearRange['min'] }} - {{ $yearRange['max'] }}</div>
                <div>Available heights: {{ $heightRange['min'] }}cm - {{ $heightRange['max'] }}cm</div>
            </div>
        </div>
    </div>

    <!-- Mobile-Optimized Filter Actions -->
    <div class="sm:hidden border-t border-gray-200 dark:border-gray-700 p-4">
        <div class="flex space-x-3">
            @if($activeFiltersCount > 0)
                <button 
                    wire:click="clearAllFilters"
                    class="flex-1 px-4 py-2 text-sm font-medium text-red-600 bg-red-50 border border-red-200 rounded-lg hover:bg-red-100 dark:bg-red-900/20 dark:border-red-700 dark:text-red-400 dark:hover:bg-red-900/30"
                >
                    Clear All ({{ $activeFiltersCount }})
                </button>
            @endif
            
            <button 
                wire:click="toggleAdvancedFilters"
                class="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-600"
            >
                {{ $showAdvancedFilters ? 'Hide' : 'Show' }} Advanced
            </button>
        </div>
    </div>

    <!-- Loading State -->
    <div wire:loading.flex class="absolute inset-0 bg-white/75 dark:bg-gray-800/75 items-center justify-center rounded-lg">
        <div class="flex items-center space-x-2 text-gray-600 dark:text-gray-400">
            <svg class="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <span class="text-sm">Updating filters...</span>
        </div>
    </div>
</div>

<!-- Screen-Agnostic Responsive Styles -->
<style>
/* Mobile-first responsive design */
@media (max-width: 320px) {
    .grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

@media (min-width: 480px) {
    .sm\:grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-6 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1440px) {
    .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1920px) {
    .xl\:grid-cols-6 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (min-width: 2560px) {
    .xl\:grid-cols-6 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}

/* Touch-friendly targets for mobile */
@media (max-width: 768px) {
    button, select, input {
        min-height: 44px;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .border { border-width: 0.5px; }
}
</style>