Momento/memento-note/app/(main)/settings/appearance/appearance-form.tsx

'use client'

import { useRouter } from 'next/navigation'
import { useState } from 'react'
import { SettingsSection, SettingSelect } from '@/components/settings'
import { updateAISettings as updateAI } from '@/app/actions/ai-settings'
import { updateUserSettings as updateUser } from '@/app/actions/user-settings'
import { useLanguage } from '@/lib/i18n'

interface AppearanceSettingsFormProps {
    initialTheme: string
    initialFontSize: string
}

export function AppearanceSettingsForm({ initialTheme, initialFontSize }: AppearanceSettingsFormProps) {
    const router = useRouter()
    const [theme, setTheme] = useState(initialTheme)
    const [fontSize, setFontSize] = useState(initialFontSize)
    const { t } = useLanguage()

    const handleThemeChange = async (value: string) => {
        setTheme(value)
        localStorage.setItem('theme-preference', value)

        // Instant visual update
        const root = document.documentElement
        root.removeAttribute('data-theme')
        root.classList.remove('dark')

        if (value === 'auto') {
            if (window.matchMedia('(prefers-color-scheme: dark)').matches) root.classList.add('dark')
        } else if (value === 'dark') {
            root.classList.add('dark')
        } else if (value === 'light') {
            root.setAttribute('data-theme', 'light')
        } else {
            root.setAttribute('data-theme', value)
            if (['midnight', 'blue', 'sepia'].includes(value)) root.classList.add('dark')
        }

        // Save to DB (no need for router.refresh - localStorage handles immediate visuals)
        await updateUser({ theme: value as 'light' | 'dark' | 'auto' | 'sepia' | 'midnight' | 'blue' })
    }

    const handleFontSizeChange = async (value: string) => {
        setFontSize(value)

        // Instant visual update
        const fontSizeMap: Record<string, string> = {
            'small': '14px', 'medium': '16px', 'large': '18px', 'extra-large': '20px'
        }
        const root = document.documentElement
        root.style.setProperty('--user-font-size', fontSizeMap[value] || '16px')

        await updateAI({ fontSize: value as any })
    }

    return (
        <div className="space-y-6">
            <div>
                <h1 className="text-3xl font-bold mb-2">{t('appearance.title')}</h1>
                <p className="text-gray-600 dark:text-gray-400">
                    {t('appearance.description')}
                </p>
            </div>

            <SettingsSection
                title={t('settings.theme')}
                icon={<span className="text-2xl">🎨</span>}
                description={t('settings.themeLight') + ' / ' + t('settings.themeDark')}
            >
                <SettingSelect
                    label={t('settings.theme')}
                    description={t('settings.selectLanguage')}
                    value={theme}
                    options={[
                        { value: 'slate', label: t('settings.themeLight') },
                        { value: 'dark', label: t('settings.themeDark') },
                        { value: 'sepia', label: 'Sepia' },
                        { value: 'midnight', label: 'Midnight' },
                        { value: 'blue', label: 'Blue' },
                        { value: 'auto', label: t('settings.themeSystem') },
                    ]}
                    onChange={handleThemeChange}
                />
            </SettingsSection>

            <SettingsSection
                title={t('profile.fontSize')}
                icon={<span className="text-2xl">📝</span>}
                description={t('profile.fontSizeDescription')}
            >
                <SettingSelect
                    label={t('profile.fontSize')}
                    description={t('profile.selectFontSize')}
                    value={fontSize}
                    options={[
                        { value: 'small', label: t('profile.fontSizeSmall') },
                        { value: 'medium', label: t('profile.fontSizeMedium') },
                        { value: 'large', label: t('profile.fontSizeLarge') },
                    ]}
                    onChange={handleFontSizeChange}
                />
            </SettingsSection>
        </div>
    )
}