@php
    use App\Models\InterfaceSetting;
    // Persisted per-user theme row (blank instance if none yet).
    $s = auth()->check() ? InterfaceSetting::firstOrNew(['user_id' => auth()->id()]) : new InterfaceSetting();
    $dbSettings = [
        'tabler-theme'            => $s->theme,
        'tabler-theme-primary'    => $s->theme_primary,
        'tabler-theme-base-light' => $s->theme_base_light,
        'tabler-theme-base-dark'  => $s->theme_base_dark,
        'tabler-theme-radius'     => $s->theme_radius,
        'tabler-theme-font'       => $s->theme_font,
        'custom-theme-primary'    => $s->custom_primary,
        'custom-theme-secondary'  => $s->custom_secondary,
    ];
@endphp
<script>
    document.addEventListener('DOMContentLoaded', () => {
        // DB → localStorage (source of truth for the front-end theme keys).
        const DB = @json($dbSettings);
        Object.entries(DB).forEach(([k, v]) => { if (v !== null && v !== '') localStorage.setItem(k, v); });

        const hexToRgb = (hex) => {
            const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return m ? `${parseInt(m[1], 16)}, ${parseInt(m[2], 16)}, ${parseInt(m[3], 16)}` : null;
        };

        const applyTheme = (theme) => {
            const baseLight = localStorage.getItem('tabler-theme-base-light') || 'stone';
            const baseDark  = localStorage.getItem('tabler-theme-base-dark') || 'slate';
            let eff = theme;
            if (theme === 'system') eff = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

            localStorage.setItem('tabler-theme', theme);
            const root = document.documentElement;
            root.setAttribute('data-bs-theme', eff);
            root.setAttribute('data-bs-theme-base', eff === 'dark' ? baseDark : baseLight);
            root.setAttribute('data-bs-theme-primary', localStorage.getItem('tabler-theme-primary') || 'emerald');

            const font = localStorage.getItem('tabler-theme-font');
            if (font) root.setAttribute('data-bs-theme-font', font);

            const radius = localStorage.getItem('tabler-theme-radius');
            if (radius) root.style.setProperty('--tblr-border-radius', radius + 'rem');

            const cp = localStorage.getItem('custom-theme-primary');
            if (cp) { root.style.setProperty('--tblr-primary', cp); root.style.setProperty('--tblr-primary-rgb', hexToRgb(cp)); }
            else    { root.style.removeProperty('--tblr-primary'); root.style.removeProperty('--tblr-primary-rgb'); }

            const cs = localStorage.getItem('custom-theme-secondary');
            if (cs) { root.style.setProperty('--tblr-secondary', cs); root.style.setProperty('--tblr-secondary-rgb', hexToRgb(cs)); }
        };

        applyTheme(localStorage.getItem('tabler-theme') || 'light');

        document.querySelectorAll('.toggle-theme, #foa-theme-toggle').forEach((el) => {
            el.addEventListener('click', (e) => {
                e.preventDefault();
                const current = document.documentElement.getAttribute('data-bs-theme') || 'light';
                applyTheme(current === 'dark' ? 'light' : 'dark');
            });
        });
    });
</script>