@props([
    'profile',
    'relatedProfiles' => [],
    'currency' => null,
    'currencySymbol' => null
])

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
        <!-- Profile Image Section -->
        <div class="relative aspect-[4/3] md:aspect-auto md:h-full">
            <div class="absolute inset-0 bg-muted/50 flex items-center justify-center" id="loading-placeholder-detail">
                <div class="w-12 h-12 rounded-full border-2 border-primary/30 border-t-primary animate-spin" aria-label="Loading profile image"></div>
            </div>
            
            <img
                src="{{ $profile->profile_image_url }}"
                alt="{{ $profile->name }}, {{ $profile->age }} years old from {{ $profile->location }}"
                class="w-full h-full object-cover transition-all duration-700 opacity-0"
                id="profile-image-detail"
                loading="eager"
                width="600"
                height="450"
            />
            
            @if($profile->featured)
                <div class="absolute top-4 left-4 inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
                    Featured
                </div>
            @endif
        </div>
        
        <!-- Profile Info Section -->
        <div class="p-6 md:p-8 flex flex-col">
            <div class="mb-4">
                <div class="flex items-center justify-between mb-2">
                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">{{ $profile->name }}</h1>
                    <span class="text-sm font-medium px-3 py-1 bg-gray-100 rounded-full">{{ $profile->age }} years</span>
                </div>
                
                <div class="flex items-center text-sm text-gray-600 mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
                        <circle cx="12" cy="10" r="3" />
                    </svg>
                    <span>{{ $profile->location }}</span>
                </div>
                
                <h2 class="text-xl font-semibold text-gray-900 mb-3">{{ $profile->title }}</h2>
                
                <p class="text-gray-600 mb-6">
                    {{ \Illuminate\Support\Str::limit($profile->story, 250) }}
                    @if(strlen($profile->story) > 250)
                        <button type="button" class="text-primary font-medium hover:text-primary/80 focus:outline-none" id="read-more-btn">
                            Read more
                        </button>
                    @endif
                </p>
            </div>
            
            <!-- Donation Progress -->
            <div class="mb-6">
                <div class="w-full space-y-3" data-testid="donation-progress">
                    <div class="flex justify-between items-center text-sm mb-1">
                        <span class="font-medium text-gray-900">Donation Progress</span>
                        <span class="text-gray-600">{{ number_format($profile->progress_percentage, 0) }}% Complete</span>
                    </div>
                    
                    <div class="relative h-2.5 bg-muted rounded-full overflow-hidden" id="progress-detail">
                        <progress
                            value="{{ $profile->progress_percentage }}"
                            max="100"
                            class="sr-only"
                            aria-label="{{ $profile->progress_percentage }}% of the goal amount raised">
                            {{ $profile->progress_percentage }}%
                        </progress>
                        <div class="progress-indicator absolute h-full bg-primary rounded-full" style="width: 0%"></div>
                    </div>
                    
                    <div class="flex justify-between items-center">
                        <div>
                            <span class="block text-sm text-gray-600">Raised</span>
                            <span class="text-xl font-bold text-gray-900">{{ $profile->formatted_raised }}</span>
                        </div>
                        <div class="text-right">
                            <span class="block text-sm text-gray-600">Goal</span>
                            <span class="text-xl font-bold text-gray-900">{{ $profile->formatted_goal }}</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Needs Section -->
            @if($profile->needs && $profile->needs->count() > 0)
                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-3">Specific Needs</h3>
                    <ul class="space-y-2">
                        @foreach($profile->needs as $need)
                            <li class="flex items-start">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary mr-2 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="9" cy="7" r="4"></circle>
                                    <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                </svg>
                                <span class="text-gray-700">{{ $need->description }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif
            
            <!-- Donation Button -->
            <div class="mt-auto">
                <a href="{{ route('donate', ['elderly_id' => $profile->id]) }}"
                   class="w-full inline-flex items-center justify-center rounded-full px-6 py-3 bg-primary text-white font-medium shadow-sm hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
                    </svg>
                    Donate Now
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Full Story Modal -->
<div id="story-modal" class="fixed inset-0 bg-black/50 z-50 items-center justify-center p-4 hidden" style="display: none;">
    <div class="bg-white rounded-xl max-w-2xl w-full max-h-[80vh] overflow-y-auto">
        <div class="p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-xl font-bold text-gray-900">{{ $profile->name }}'s Story</h3>
                <button type="button" id="close-modal-btn" class="text-gray-500 hover:text-gray-700">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M18 6 6 18"></path>
                        <path d="m6 6 12 12"></path>
                    </svg>
                </button>
            </div>
            <div class="prose max-w-none">
                <p>{{ $profile->story }}</p>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Handle profile image loading
        const profileImage = document.getElementById('profile-image-detail');
        const placeholder = document.getElementById('loading-placeholder-detail');
        
        if (profileImage) {
            profileImage.addEventListener('load', function() {
                this.classList.remove('opacity-0');
                this.classList.add('opacity-100');
                
                if (placeholder) placeholder.classList.add('hidden');
            });
            
            profileImage.addEventListener('error', function() {
                this.classList.remove('opacity-0');
                this.classList.add('opacity-100');
                
                if (placeholder) placeholder.classList.add('hidden');
                
                // Set fallback image on error
                if (this.src !== '{{ asset("images/placeholder.jpg") }}') {
                    this.src = '{{ asset("images/placeholder.jpg") }}';
                }
            });
        }
        
        // Initialize progress bar animation
        const progressBar = document.getElementById('progress-detail');
        if (progressBar) {
            const indicator = progressBar.querySelector('.progress-indicator');
            if (indicator) {
                // Use IntersectionObserver for better performance
                const observer = new IntersectionObserver(function(entries) {
                    entries.forEach(function(entry) {
                        if (entry.isIntersecting) {
                            requestAnimationFrame(() => {
                                indicator.style.transition = 'width 1s ease-out';
                                indicator.style.width = '{{ $profile->progress_percentage }}%';
                            });
                            observer.unobserve(progressBar);
                        }
                    });
                }, { threshold: 0.1 });
                
                observer.observe(progressBar);
            }
        }
        
        // Handle read more functionality
        const readMoreBtn = document.getElementById('read-more-btn');
        const storyModal = document.getElementById('story-modal');
        const closeModalBtn = document.getElementById('close-modal-btn');
        
        if (readMoreBtn && storyModal) {
            readMoreBtn.addEventListener('click', function() {
                storyModal.classList.remove('hidden');
                storyModal.classList.add('flex');
                document.body.classList.add('overflow-hidden');
            });
            
            closeModalBtn.addEventListener('click', function() {
                storyModal.classList.add('hidden');
                storyModal.classList.remove('flex');
                document.body.classList.remove('overflow-hidden');
            });
            
            // Close modal when clicking outside
            storyModal.addEventListener('click', function(e) {
                if (e.target === storyModal) {
                    storyModal.classList.add('hidden');
                    storyModal.classList.remove('flex');
                    document.body.classList.remove('overflow-hidden');
                }
            });
            
            // Close modal with Escape key
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && !storyModal.classList.contains('hidden')) {
                    storyModal.classList.add('hidden');
                    storyModal.classList.remove('flex');
                    document.body.classList.remove('overflow-hidden');
                }
            });
        }
    });
</script>
@endpush