@props([
    'goalAmount' => 0,
    'raisedAmount' => 0,
    'size' => 'md',
    'showAmount' => true,
    'animate' => true
])

@php
    // Prevent division by zero
    $progressPercentage = $goalAmount > 0 ? min(round(($raisedAmount / $goalAmount) * 100), 100) : 0;
    
    // Define height classes based on size
    $progressHeight = [
        'sm' => 'h-1.5',
        'md' => 'h-2',
        'lg' => 'h-3',
    ];
    
    // Format currency with proper internationalization
    $formatCurrency = function($amount) {
        return '$' . number_format($amount, 0, '.', ',');
    };
    
    // Generate unique ID for this progress bar
    $progressId = 'progress-' . md5($goalAmount . $raisedAmount . uniqid());
@endphp

<div class="w-full space-y-2" data-testid="donation-progress">
    <div class="relative {{ $progressHeight[$size] }} bg-muted rounded-full overflow-hidden" id="{{ $progressId }}">
        <progress
            value="{{ $progressPercentage }}"
            max="100"
            class="sr-only"
            aria-label="{{ $progressPercentage }}% of the goal amount raised">
            {{ $progressPercentage }}%
        </progress>
        <div class="progress-indicator absolute h-full bg-primary rounded-full" style="width: 0%"></div>
    </div>
    
    @if($showAmount)
        <div class="flex justify-between items-center text-sm">
            <span class="text-muted-foreground">
                <span class="font-medium text-foreground">{{ $formatCurrency($raisedAmount) }}</span> raised
            </span>
            <span class="text-muted-foreground">
                Goal: <span class="font-medium text-foreground">{{ $formatCurrency($goalAmount) }}</span>
            </span>
        </div>
    @endif
</div>

@if($animate)
@once
<script>
    // Use IIFE to avoid global scope pollution
    (function() {
        // Use Intersection Observer API for better performance
        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.1
        };
        
        const handleIntersection = (entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const progressBar = entry.target;
                    const indicator = progressBar.querySelector('.progress-indicator');
                    
                    if (indicator) {
                        // Use requestAnimationFrame for smoother animation
                        requestAnimationFrame(() => {
                            indicator.style.transition = 'width 1s ease-out';
                            indicator.style.width = '{{ $progressPercentage }}%';
                        });
                    }
                    
                    // Stop observing after animation
                    observer.unobserve(progressBar);
                }
            });
        };
        
        // Create observer once and reuse
        let progressObserver;
        
        // Initialize on DOM content loaded
        const initializeProgressBars = () => {
            if (!progressObserver) {
                progressObserver = new IntersectionObserver(handleIntersection, observerOptions);
            }
            
            // Get all progress bars including the current one
            document.querySelectorAll('[id^="progress-"]').forEach(progressBar => {
                progressObserver.observe(progressBar);
            });
        };
        
        // Initialize when DOM is ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initializeProgressBars);
        } else {
            initializeProgressBars();
        }
    })();
</script>
@endonce
@endif