@if($config['widgets']['loading_screen'] ?? true)
<div id="loadingScreen" data-widget="loading_screen" class="fixed inset-0 z-[9999] flex items-center justify-center bg-light-primaryBg dark:bg-dark-primaryBg">
    <div class="flex flex-col items-center gap-6">
        @if($config['widgets']['loading_show_logo'] ?? true)
            @php
                $logoLight = $config['appearance']['logo_light'] ?? false;
                $logoDark = $config['appearance']['logo_dark'] ?? false;
            @endphp
            @if($logoLight || $logoDark)
                @if($logoLight)
                    <img src="{{ asset($logoLight) }}" alt="Logo" class="h-20 max-w-48 object-contain dark:hidden">
                @endif
                @if($logoDark)
                    <img src="{{ asset($logoDark) }}" alt="Logo" class="h-20 max-w-48 object-contain hidden dark:block">
                @elseif($logoLight)
                    <img src="{{ asset($logoLight) }}" alt="Logo" class="h-20 max-w-48 object-contain hidden dark:block">
                @endif
            @endif
        @endif

        @php
            $animation = $config['widgets']['loading_animation'] ?? 'spinner';
        @endphp

        @if($animation === 'spinner')
            <div class="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
        @elseif($animation === 'dots')
            <div class="flex gap-2">
                <div class="w-3 h-3 bg-primary rounded-full animate-bounce [animation-delay:0ms]"></div>
                <div class="w-3 h-3 bg-primary rounded-full animate-bounce [animation-delay:150ms]"></div>
                <div class="w-3 h-3 bg-primary rounded-full animate-bounce [animation-delay:300ms]"></div>
            </div>
        @elseif($animation === 'progress')
            <div class="w-48 h-2 bg-light-tertiaryBg dark:bg-dark-tertiaryBg rounded-full overflow-hidden">
                <div id="progressBar" class="h-full bg-primary rounded-full transition-all duration-300 w-0"></div>
            </div>
        @elseif($animation === 'pulse')
            <div class="w-12 h-12 bg-primary rounded-full animate-ping"></div>
        @endif

        @if($config['widgets']['loading_show_heading'] ?? true)
            <h2 class="text-xl font-semibold text-light-primaryText dark:text-dark-primaryText">{{ $config['widgets']['loading_heading'] ?? 'Loading...' }}</h2>
        @endif

        @if($config['widgets']['loading_show_subtext'] ?? false)
            <p class="text-sm text-light-secondaryText dark:text-dark-secondaryText">{{ $config['widgets']['loading_subtext'] ?? 'Please wait...' }}</p>
        @endif
    </div>
</div>

<style>
    body.loaded #loadingScreen {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
</style>

<script>
    // Apply theme immediately to prevent flash
    (function() {
        const savedTheme = localStorage.getItem('darkMode');
        if (savedTheme) {
            if (savedTheme === 'dark') {
                document.documentElement.classList.add('dark');
            }
        } else {
            const defaultTheme = '{{ $config['general']['default_mode'] ?? 'light' }}';
            if (defaultTheme === 'dark') {
                document.documentElement.classList.add('dark');
            }
        }
        // Make body visible immediately
        document.body.style.visibility = 'visible';
    })();
    
    const progressBar = document.getElementById('progressBar');
    if (progressBar) {
        let progress = 0;
        const interval = setInterval(() => {
            progress += Math.random() * 8 + 5;
            if (progress >= 95) {
                progress = 95;
                clearInterval(interval);
            }
            progressBar.style.width = progress + '%';
        }, 20);
    }
    
    window.addEventListener('load', () => {
        if (progressBar) progressBar.style.width = '100%';
        setTimeout(() => {
            document.body.classList.add('loaded');
        }, 500);
    });
</script>
@endif