{{-- resources/views/components/dark-mode-toggle.blade.php --}}
<div x-data="themeSwitcher()" x-init="init()" class="w-full">
    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
        {{ __('admin.dark_mode_toggle') }}
    </label>
    <div class="relative flex items-center justify-center p-1 bg-gray-100 dark:bg-slate-900 rounded-md">
        <button @click="setTheme('light')"
            :class="theme === 'light' ? 'bg-white text-indigo-600 shadow-sm' :
                'text-gray-500 dark:text-slate-400 hover:text-gray-800 dark:hover:text-white'"
            class="relative z-10 w-full py-1 text-xs rounded-md transition-colors"
            aria-label="{{ __('admin.dark_mode_light') }}">
            {{ __('admin.dark_mode_light') }}
        </button>
        <button @click="setTheme('dark')"
            :class="theme === 'dark' ? 'bg-slate-700 text-white' :
                'text-gray-500 dark:text-slate-400 hover:text-gray-800 dark:hover:text-white'"
            class="relative z-10 w-full py-1 text-xs rounded-md transition-colors"
            aria-label="{{ __('admin.dark_mode_dark') }}">
            {{ __('admin.dark_mode_dark') }}
        </button>
        <button @click="setTheme('system')"
            :class="theme === 'system' ? 'bg-white text-indigo-600 shadow-sm dark:bg-slate-700 dark:text-white' :
                'text-gray-500 dark:text-slate-400 hover:text-gray-800 dark:hover:text-white'"
            class="relative z-10 w-full py-1 text-xs rounded-md transition-colors"
            aria-label="{{ __('admin.dark_mode_system') }}">
            {{ __('admin.dark_mode_system') }}
        </button>
    </div>
</div>

@push('scripts')
    <script>
        function themeSwitcher() {
            return {
                theme: 'system',
                init() {
                    // Get theme from the immediate script or localStorage
                    this.theme = window.initialTheme || localStorage.getItem('theme') || 'system';

                    // Watch for theme changes and apply them
                    this.$watch('theme', (newTheme) => {
                        localStorage.setItem('theme', newTheme);
                        this.applyTheme(newTheme);
                    });

                    // Listen for system theme changes
                    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
                        if (this.theme === 'system') {
                            this.applyTheme('system');
                        }
                    });
                },
                setTheme(newTheme) {
                    this.theme = newTheme;
                },
                applyTheme(theme) {
                    const shouldBeDark = theme === 'dark' ||
                        (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);

                    if (shouldBeDark) {
                        document.documentElement.classList.add('dark');
                    } else {
                        document.documentElement.classList.remove('dark');
                    }
                }
            }
        }
    </script>
@endpush