{% extends 'base/base.html' %}
{% load static %}
{% load ride_tags %}

{% block title %}
    {% if park %}
        Rides at {{ park.name }} - ThrillWiki
    {% else %}
        All Rides - ThrillWiki
    {% endif %}
{% endblock %}

{% block content %}
<div class="container px-4 mx-auto">
    <div class="flex flex-col items-start justify-between gap-4 mb-6 md:flex-row md:items-center">
        <div>
            {% if park %}
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Rides at {{ park.name }}</h1>
                <a href="{% url 'parks:park_detail' park.slug %}" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
                    Back to {{ park.name }}
                </a>
            {% else %}
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white">All Rides</h1>
            {% endif %}
        </div>
        {% if user.is_authenticated %}
            {% if park %}
                <a href="{% url 'parks:rides:ride_create' park.slug %}" class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                    </svg>
                    Add Ride
                </a>
            {% endif %}
        {% endif %}
    </div>

    <!-- Quick Filters -->
    <div class="flex flex-wrap items-center gap-3 pb-4 mb-4">
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Quick Filters:</span>
        {% for filter in quick_filters %}
            <button 
                hx-get="{% if park %}{% url 'parks:rides:ride_list' park.slug %}{% else %}{% url 'rides:global_ride_list' %}{% endif %}"
                hx-include="[name='search']"
                hx-target="#rides-grid"
                hx-push-url="true"
                hx-vals='{{ filter.params|safe }}'
                hx-indicator=".loading-indicator"
                class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-full hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700">
                <i class="mr-2 fa {{ filter.icon }}"></i>
                {{ filter.name }}
            </button>
        {% endfor %}
        <!-- Enhanced Loading Indicator -->
        <div class="loading-indicator htmx-indicator">
            <svg viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></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>Updating results...</span>
            <span class="loading-timestamp text-xs opacity-75"></span>
        </div>
    </div>

    <!-- Filters -->
    <div class="p-4 mb-6 bg-white rounded-lg shadow dark:bg-gray-800" x-data="{ showAdvanced: localStorage.getItem('showAdvancedFilters') === 'true' }">
        <!-- Active Filters -->
        {% if current_filters.search or current_filters.category or current_filters.status %}
            <div class="flex flex-wrap items-center gap-2 mb-4 -mt-2">
                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Active Filters:</span>
                {% for name, value in current_filters.items %}
                    {% if value %}
                        <button
                            hx-get="{% if park %}{% url 'parks:rides:ride_list' park.slug %}{% else %}{% url 'rides:global_ride_list' %}{% endif %}"
                            hx-include="form"
                            hx-target="#rides-grid"
                            hx-push-url="true"
                            @click="$dispatch('clear-filter', '{{ name }}')"
                            class="inline-flex items-center px-2 py-1 text-sm bg-blue-100 border border-blue-200 rounded-full dark:bg-blue-900 dark:border-blue-800">
                            <span class="mr-1">{{ name|title }}: {{ value }}</span>
                            <i class="text-gray-500 fa fa-times dark:text-gray-400"></i>
                        </button>
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}

        <form class="grid grid-cols-1 gap-4"
              x-data
              hx-get="{% if park %}{% url 'parks:rides:ride_list' park.slug %}{% else %}{% url 'rides:global_ride_list' %}{% endif %}"
              x-init="$watch('showAdvanced', value => { if (!value) window.scrollTo({ top: 0, behavior: 'smooth' }) })"
              hx-trigger="change from:select, input[type='number'] delay:500ms, input[type='text'] changed delay:300ms, search"
              hx-target="#rides-grid"
              hx-push-url="true"
              hx-indicator=".htmx-indicator"
              @reset.prevent="$dispatch('clear-filters'); localStorage.removeItem('rideFilters')"
              @clear-filters.window="$el.reset(); htmx.trigger(this, 'change')"
              @filter-changed.window="htmx.trigger(this, 'change')">
            <!-- Search Input -->
            <div class="md:col-span-2">
                <div x-data="rideSearch" class="relative">
                    <label for="search" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                        Search by name, park, or description
                    </label>
                    <input type="text" 
                           name="search" 
                           id="search"
                           x-model="searchQuery"
                           @input="handleInput"
                           @focus="handleInput"
                           @keydown="handleKeydown"
                           class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                           placeholder="Example: steel coaster at universal"
                           :value="searchQuery"
                           x-init="searchQuery = '{{ current_filters.search }}'"
                           autocomplete="off">
                    <div class="absolute w-full mt-1 bg-white rounded-lg shadow-lg dark:bg-gray-800" 
                         id="search-suggestions"
                         x-show="showSuggestions"
                         x-cloak>
                    </div>
                </div>
            </div>

            <!-- Basic Filters -->
            <div class="md:col-span-2">
                <label for="category" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Ride Type</label>
                <select name="category" id="category" 
                        class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                    <option value="">All Categories</option>
                    <option value="RC" {% if current_filters.category == 'RC' %}selected{% endif %}>Roller Coaster</option>
                    <option value="DR" {% if current_filters.category == 'DR' %}selected{% endif %}>Dark Ride</option>
                    <option value="FR" {% if current_filters.category == 'FR' %}selected{% endif %}>Flat Ride</option>
                    <option value="WR" {% if current_filters.category == 'WR' %}selected{% endif %}>Water Ride</option>
                    <option value="TR" {% if current_filters.category == 'TR' %}selected{% endif %}>Transport</option>
                    <option value="OT" {% if current_filters.category == 'OT' %}selected{% endif %}>Other</option>
                </select>
            </div>

            <div class="md:col-span-2">
                <label for="status" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Operating Status</label>
                <select name="status" id="status" 
                        class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                    <option value="">All Statuses</option>
                    <option value="OPERATING" {% if current_filters.status == 'OPERATING' %}selected{% endif %}>Operating</option>
                    <option value="CLOSED_TEMP" {% if current_filters.status == 'CLOSED_TEMP' %}selected{% endif %}>Temporarily Closed</option>
                    <option value="CLOSED_PERM" {% if current_filters.status == 'CLOSED_PERM' %}selected{% endif %}>Permanently Closed</option>
                    <option value="UNDER_CONSTRUCTION" {% if current_filters.status == 'UNDER_CONSTRUCTION' %}selected{% endif %}>Under Construction</option>
                    <option value="DEMOLISHED" {% if current_filters.status == 'DEMOLISHED' %}selected{% endif %}>Demolished</option>
                    <option value="RELOCATED" {% if current_filters.status == 'RELOCATED' %}selected{% endif %}>Relocated</option>
                </select>
            </div>

            <!-- Advanced Filters Toggle -->
            <div class="flex items-center justify-between md:col-span-6">
                <button type="button" 
                        @click="showAdvanced = !showAdvanced; localStorage.setItem('showAdvancedFilters', showAdvanced)"
                        class="flex items-center text-sm text-gray-600 dark:text-gray-400">
                    <span x-text="showAdvanced ? 'Hide Advanced Filters' : 'Show Advanced Filters'"></span>
                    <i class="ml-1 fa" :class="showAdvanced ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
                </button>
            </div>

            <!-- Advanced Filters -->
            <div x-show="showAdvanced" 
                 x-cloak 
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 transform -translate-y-2"
                 x-transition:enter-end="opacity-100 transform translate-y-0"
                 class="grid grid-cols-1 gap-4 md:grid-cols-6 md:col-span-6">
                <div class="md:col-span-2">
                    <label for="manufacturer" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Manufacturer</label>
                    <select name="manufacturer" id="manufacturer" 
                            class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        <option value="">All Manufacturers</option>
                        {% for mfr in manufacturers %}
                            <option value="{{ mfr.id }}" {% if current_filters.manufacturer == mfr.id %}selected{% endif %}>
                                {{ mfr.name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="md:col-span-2">
                    <label for="track_material" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Track Material</label>
                    <select name="track_material" id="track_material" 
                            class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        <option value="">All Materials</option>
                        <option value="STEEL" {% if current_filters.track_material == 'STEEL' %}selected{% endif %}>Steel</option>
                        <option value="WOOD" {% if current_filters.track_material == 'WOOD' %}selected{% endif %}>Wood</option>
                        <option value="HYBRID" {% if current_filters.track_material == 'HYBRID' %}selected{% endif %}>Hybrid</option>
                    </select>
                </div>
                <div class="md:col-span-2">
                    <label for="coaster_type" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Coaster Type</label>
                    <select name="coaster_type" id="coaster_type" 
                            class="w-full border-gray-300 rounded-lg form-select dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        <option value="">All Types</option>
                        <option value="SITDOWN" {% if current_filters.coaster_type == 'SITDOWN' %}selected{% endif %}>Sit Down</option>
                        <option value="INVERTED" {% if current_filters.coaster_type == 'INVERTED' %}selected{% endif %}>Inverted</option>
                        <option value="FLYING" {% if current_filters.coaster_type == 'FLYING' %}selected{% endif %}>Flying</option>
                        <option value="STANDUP" {% if current_filters.coaster_type == 'STANDUP' %}selected{% endif %}>Stand Up</option>
                        <option value="WING" {% if current_filters.coaster_type == 'WING' %}selected{% endif %}>Wing</option>
                        <option value="DIVE" {% if current_filters.coaster_type == 'DIVE' %}selected{% endif %}>Dive</option>
                        <option value="FAMILY" {% if current_filters.coaster_type == 'FAMILY' %}selected{% endif %}>Family</option>
                        <option value="WILD_MOUSE" {% if current_filters.coaster_type == 'WILD_MOUSE' %}selected{% endif %}>Wild Mouse</option>
                        <option value="SPINNING" {% if current_filters.coaster_type == 'SPINNING' %}selected{% endif %}>Spinning</option>
                        <option value="FOURTH_DIMENSION" {% if current_filters.coaster_type == 'FOURTH_DIMENSION' %}selected{% endif %}>4th Dimension</option>
                    </select>
                </div>

                <!-- Stats Filters -->
                <div class="md:col-span-2">
                    <label for="min_height" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Min Height (ft)</label>
                    <input type="number" name="min_height" id="min_height" 
                           value="{{ current_filters.min_height }}"
                           class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                </div>
                <div class="md:col-span-2">