@php
    use Illuminate\Support\Facades\Storage;

    $preparedSlides = collect($slides)->map(function ($slide) {
        $slide['image_url'] = $slide['image'] ? Storage::url($slide['image']) : null;
        return $slide;
    })->values();
@endphp

@if($showModal && count($slides) > 0)
    <div class="onboarding-modal"
         x-data="paymenterOnboarding({
            open: @entangle('showModal').live,
            currentSlide: @entangle('currentSlide').live,
            slides: @js($preparedSlides),
            componentId: '{{ $this->getId() }}',
            showBackdrop: @json($this->showBackdrop)
         })"
         x-init="init()">
        <div x-show="open"
             x-transition.opacity
             class="fixed inset-0 z-50 flex items-center justify-center px-4 py-6 sm:py-10"
             style="display: flex !important;">

            <div class="absolute inset-0 transition-opacity duration-300"
                 :class="showBackdrop ? 'bg-black/70' : 'bg-black/40'"
                 @click="finish()"></div>

            <div class="relative w-full max-w-xl bg-background-secondary border border-neutral rounded-2xl shadow-2xl overflow-hidden min-h-[400px]"
                 style="display: block !important;"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 scale-90"
                 x-transition:enter-end="opacity-100 scale-100"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 scale-100"
                 x-transition:leave-end="opacity-0 scale-90">

                <!-- Image Section -->
                <div x-show="slides[currentSlide] && slides[currentSlide].image_url" 
                     class="w-full h-56 overflow-hidden">
                    <img :src="slides[currentSlide]?.image_url || ''"
                         :alt="slides[currentSlide]?.title || ''"
                         class="w-full h-full object-cover">
                </div>

                <!-- Content Section -->
                <div class="p-6 space-y-3">
                    <!-- Show content when slides exist -->
                    <div x-show="slides.length > 0 && slides[currentSlide]">
                        <h3 class="text-primary-100 text-xl font-semibold"
                            x-text="slides[currentSlide]?.title">Loading...</h3>
                        <p class="text-base/80 text-sm leading-6"
                           x-text="slides[currentSlide]?.description">Please wait...</p>
                    </div>
                    
                    <!-- Show error message when no slides -->
                    <div x-show="slides.length === 0" class="text-center py-8">
                        <div class="flex flex-col items-center gap-4">
                            <svg class="w-16 h-16 text-error" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                            </svg>
                            <div>
                                <h3 class="text-xl font-semibold text-error mb-2">Setup Required</h3>
                                <p class="text-base/80 text-sm max-w-md">
                                    The onboarding system needs to be configured. Please ensure:
                                </p>
                                <ul class="text-left text-sm text-base/70 mt-3 space-y-2 max-w-md mx-auto">
                                    <li>1. Database migrations have been run</li>
                                    <li>2. Onboarding slides have been created in the admin panel</li>
                                </ul>
                                <p class="text-xs text-base/60 mt-4">
                                    Run: <code class="bg-gray-800 px-2 py-1 rounded">php artisan migrate</code>
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Debug Info -->
                    <div class="mt-4 p-2 bg-gray-800 rounded text-xs border border-gray-700">
                        <p class="text-gray-400 font-semibold mb-2">🔍 Debug Info:</p>
                        <div class="space-y-1">
                            <p class="text-gray-300">Current Slide: <span class="text-yellow-400" x-text="currentSlide ?? 'undefined'">?</span></p>
                            <p class="text-gray-300">Total Slides: <span class="text-yellow-400" x-text="slides?.length ?? 0">?</span></p>
                            <p class="text-gray-300">Has Data: <span class="text-yellow-400" x-text="(slides?.length > 0 && slides[currentSlide]) ? 'Yes ✓' : 'No ✗'">?</span></p>
                            <p class="text-gray-300">Slide Title: <span class="text-yellow-400" x-text="slides[currentSlide]?.title || 'N/A'">?</span></p>
                            <p class="text-gray-300">Alpine Loaded: <span class="text-green-400">Yes ✓</span></p>
                        </div>
                    </div>
                </div>

                <!-- Progress Dots -->
                <div x-show="slides.length > 0" class="flex justify-center gap-2 px-6 pb-4">
                    <template x-for="(slide, index) in slides" :key="'dot-' + slide.id">
                        <div class="h-1.5 rounded-full transition-all duration-300"
                             :class="currentSlide === index ? 'w-6 bg-primary' : 'w-1.5 bg-neutral'"></div>
                    </template>
                </div>

                <!-- Navigation Buttons -->
                <div x-show="slides.length > 0" class="flex items-center justify-between px-6 pb-6">
                    <button @click="previous()"
                            :disabled="currentSlide === 0"
                            class="text-sm font-medium text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                        </svg>
                        {{ __('Back') }}
                    </button>

                    <button @click="next()"
                            class="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-md">
                        <span x-text="currentSlide === slides.length - 1 ? 'Finish' : 'Next'">Next</span>
                        <svg x-show="currentSlide !== slides.length - 1"
                             class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </button>
                </div>
                
                <!-- Close button when no slides -->
                <div x-show="slides.length === 0" class="flex justify-center px-6 pb-6">
                    <button @click="finish()"
                            class="inline-flex items-center gap-2 px-6 py-2 text-sm font-medium text-white bg-error hover:bg-error/90 rounded-md">
                        Close Setup Message
                    </button>
                </div>
            </div>
        </div>
    </div>

    @once
        <script>
            function paymenterOnboarding(config) {
                console.log('🎯 Onboarding Modal Initialized', config);
                return {
                    open: config.open,
                    currentSlide: config.currentSlide,
                    slides: config.slides ?? [],
                    showBackdrop: config.showBackdrop ?? false,
                    componentId: config.componentId,
                    init() {
                        console.log('🚀 Alpine.js Init Called');
                        console.log('📊 Slides:', this.slides);
                        console.log('📍 Current Slide:', this.currentSlide);
                        console.log('🔓 Open:', this.open);
                        
                        this.$watch('open', value => {
                            document.documentElement.style.overflow = value ? 'hidden' : '';
                        });

                        if (this.open) {
                            document.documentElement.style.overflow = 'hidden';
                        }
                    },
                    get activeSlide() {
                        return this.slides[this.currentSlide] ?? null;
                    },
                    primaryActionLabel(index) {
                        const isLast = index === this.slides.length - 1;
                        if (isLast) {
                            return 'Finish';
                        }
                        return (this.slides[index]?.is_guided ?? false) ? 'Continue' : 'Next';
                    },
                    previous() {
                        if (this.currentSlide <= 0) {
                            return;
                        }
                        this.currentSlide--;
                        this.callLivewire('previousSlide');
                    },
                    next() {
                        if (this.currentSlide >= this.slides.length - 1) {
                            this.finish();
                            return;
                        }
                        this.currentSlide++;
                        this.callLivewire('nextSlide');
                    },
                    finish() {
                        this.callLivewire('finish');
                    },
                    callLivewire(method) {
                        if (!method || !window.Livewire) {
                            return;
                        }
                        const component = window.Livewire.find(this.componentId);
                        if (component) {
                            component.call(method);
                        }
                    }
                };
            }
        </script>
    @endonce
@endif