Momento/memento-note/components/theme-initializer.tsx

'use client'

import { useEffect } from 'react'

interface ThemeInitializerProps {
    theme?: string
    fontSize?: string
    fontFamily?: string
}

export function ThemeInitializer({ theme, fontSize, fontFamily }: ThemeInitializerProps) {
    useEffect(() => {

        // Helper to apply theme
        const applyTheme = (t?: string) => {

            if (!t) return

            const root = document.documentElement

            // Reset
            root.removeAttribute('data-theme')
            root.classList.remove('dark')

            if (t === 'auto') {
                const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches
                if (systemDark) root.classList.add('dark')
            } else if (t === 'dark') {
                root.classList.add('dark')
            } else if (t === 'light') {
                // Default, nothing needed usually if light is default, but ensuring no 'dark' class
            } else {
                // Named theme
                root.setAttribute('data-theme', t)
                // Check if theme implies dark mode (e.g. midnight)
                if (['midnight'].includes(t)) {
                    root.classList.add('dark')
                }
            }
        }

        // Helper to apply font size
        const applyFontSize = (s?: string) => {
            const size = s || 'medium'

            const fontSizeMap: Record<string, string> = {
                'small': '14px',
                'medium': '16px',
                'large': '18px',
                'extra-large': '20px'
            }

            const fontSizeFactorMap: Record<string, number> = {
                'small': 0.95,
                'medium': 1.0,
                'large': 1.1,
                'extra-large': 1.25
            }

            const root = document.documentElement
            root.style.setProperty('--user-font-size', fontSizeMap[size] || '16px')
            root.style.setProperty('--user-font-size-factor', (fontSizeFactorMap[size] || 1).toString())
        }

        // CRITICAL: Use localStorage as the source of truth (it's always fresh)
        // Server prop may be stale due to caching.
        const localTheme = localStorage.getItem('theme-preference')
        const effectiveTheme = localTheme || theme



        applyTheme(effectiveTheme)

        // Only sync to localStorage if it was empty (first visit after login)
        // NEVER overwrite with server value if localStorage already has a value
        if (!localTheme && theme) {
            localStorage.setItem('theme-preference', theme)
        }

        applyFontSize(fontSize)

        // Apply font family
        const localFontFamily = localStorage.getItem('font-family')
        const effectiveFontFamily = localFontFamily || fontFamily || 'inter'
        const root = document.documentElement
        if (effectiveFontFamily === 'system') {
            root.classList.add('font-system')
        } else {
            root.classList.remove('font-system')
        }
        if (!localFontFamily && fontFamily) {
            localStorage.setItem('font-family', fontFamily)
        }
    }, [theme, fontSize, fontFamily])

    return null
}