{# Rating component that can be used across different templates #}
{% load static %}
{% load booking_filters %}

<div class="rating d-inline-flex align-items-center" 
     {% if aria_label %}aria-label="{{ aria_label }}"{% endif %}
     {% if not show_rating %}aria-hidden="true"{% endif %}>
    <div class="stars" {% if show_rating %}role="img"{% endif %}>
        {% with ''|center:5 as range %}
            {% for _ in range %}
                {% if forloop.counter <= rating|default:0 %}
                    <i class="fas fa-star{% if animate %} animate__animated animate__rubberBand{% endif %}" 
                       style="--star-delay: {{ forloop.counter|multiply:0.1 }}s"
                       {% if show_rating %}
                           aria-label="{{ forloop.counter }} star"
                       {% endif %}>
                    </i>
                {% else %}
                    <i class="far fa-star"
                       {% if show_rating %}
                           aria-label="{{ forloop.counter }} star"
                       {% endif %}>
                    </i>
                {% endif %}
            {% endfor %}
        {% endwith %}
    </div>
    
    {% if show_count and count > 0 %}
        <span class="ms-2 small text-muted" {% if not show_rating %}aria-hidden="true"{% endif %}>
            ({{ count|default:0 }})
        </span>
    {% endif %}
    
    {% if not show_rating %}
        <span class="visually-hidden">
            {% if rating %}{{ rating }} out of 5 stars{% else %}No rating{% endif %}
            {% if show_count and count > 0 %}({{ count }} rating{{ count|pluralize:"s" }}){% endif %}
        </span>
    {% endif %}
</div>

<style>
.rating {
    --star-size: 1rem;
    --star-color: #ffc107;
    --star-spacing: 0.1rem;
    line-height: 1;
}

.rating .stars {
    display: inline-flex;
    align-items: center;
}

.rating i {
    font-size: var(--star-size);
    color: var(--star-color);
    margin-right: var(--star-spacing);
    transition: transform 0.2s ease, color 0.2s ease;
}

.rating i:last-child {
    margin-right: 0;
}

.rating.sm {
    --star-size: 0.8rem;
}

.rating.lg {
    --star-size: 1.25rem;
}

.rating.xl {
    --star-size: 1.5rem;
}

/* Animation for stars */
@keyframes rubberBand {
    from {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

.animate__rubberBand {
    animation-name: rubberBand;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

/* Hover effect */
.rating.interactive i {
    cursor: pointer;
}

.rating.interactive i:hover,
.rating.interactive i:hover ~ i {
    color: #e4a30b;
}

.rating.interactive i.active {
    color: var(--star-color);
}

/* Responsive adjustments */
@media (max-width: 575.98px) {
    .rating {
        --star-size: 0.9rem;
    }
    
    .rating.sm {
        --star-size: 0.7rem;
    }
    
    .rating.lg {
        --star-size: 1.1rem;
    }
    
    .rating.xl {
        --star-size: 1.3rem;
    }
    
    .rating .stars {
        flex-wrap: wrap;
    }
}
</style>

{% if interactive %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Make rating interactive if needed
    document.querySelectorAll('.rating.interactive').forEach(ratingEl => {
        const stars = ratingEl.querySelectorAll('i');
        const input = ratingEl.querySelector('input[type="hidden"]');
        
        stars.forEach((star, index) => {
            // Set initial active state
            if (index < Math.floor(parseFloat(ratingEl.dataset.rating || 0))) {
                star.classList.add('active');
            }
            
            // Click handler
            star.addEventListener('click', () => {
                const value = index + 1;
                stars.forEach((s, i) => {
                    s.classList.toggle('active', i <= index);
                    s.classList.toggle('fas', i <= index);
                    s.classList.toggle('far', i > index);
                });
                
                if (input) {
                    input.value = value;
                }
                
                // Dispatch custom event
                ratingEl.dispatchEvent(new CustomEvent('rating:change', {
                    detail: { rating: value },
                    bubbles: true
                }));
            });
            
            // Hover effects
            star.addEventListener('mouseenter', () => {
                if (!ratingEl.classList.contains('readonly')) {
                    stars.forEach((s, i) => {
                        s.classList.toggle('active', i <= index);
                    });
                }
            });
            
            star.addEventListener('mouseleave', () => {
                if (!ratingEl.classList.contains('readonly')) {
                    const currentRating = parseFloat(ratingEl.dataset.rating || 0);
                    stars.forEach((s, i) => {
                        s.classList.toggle('active', i < currentRating);
                    });
                }
            });
        });
    });
});
</script>
{% endif %}