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

'use client'

import { useState } from 'react'
import { SettingsSection, SettingSelect } from '@/components/settings'
import { updateAISettings } from '@/app/actions/ai-settings'
import { updateUserSettings } from '@/app/actions/user-settings'
import { useLanguage } from '@/lib/i18n'
import { toast } from 'sonner'

interface AppearanceSettingsClientProps {
  initialFontSize: string
  initialTheme: string
  initialNotesViewMode: 'masonry' | 'tabs'
  initialCardSizeMode?: 'variable' | 'uniform'
  initialFontFamily?: string
}

export function AppearanceSettingsClient({ initialFontSize, initialTheme, initialNotesViewMode, initialCardSizeMode = 'variable', initialFontFamily = 'inter' }: AppearanceSettingsClientProps) {
  const { t } = useLanguage()
  const [theme, setTheme] = useState(initialTheme || 'light')
  const [fontSize, setFontSize] = useState(initialFontSize || 'medium')
  const [notesViewMode, setNotesViewMode] = useState<'masonry' | 'tabs'>(initialNotesViewMode)
  const [cardSizeMode, setCardSizeMode] = useState<'variable' | 'uniform'>(initialCardSizeMode)
  const [fontFamily, setFontFamily] = useState(initialFontFamily)

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

    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 {
      root.setAttribute('data-theme', value)
      if (['midnight'].includes(value)) root.classList.add('dark')
    }

    await updateUserSettings({ theme: value as 'light' | 'dark' | 'auto' })
    toast.success(t('settings.settingsSaved') || 'Saved')
  }

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

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

    await updateAISettings({ fontSize: value as any })
    toast.success(t('settings.settingsSaved') || 'Saved')
  }

  const handleNotesViewChange = async (value: string) => {
    const mode = value === 'tabs' ? 'tabs' : 'masonry'
    setNotesViewMode(mode)
    await updateAISettings({ notesViewMode: mode })
    toast.success(t('settings.settingsSaved') || 'Saved')
  }

  const handleCardSizeModeChange = async (value: string) => {
    const mode = value === 'uniform' ? 'uniform' : 'variable'
    setCardSizeMode(mode)
    localStorage.setItem('card-size-mode', mode)
    await updateUserSettings({ cardSizeMode: mode })
    toast.success(t('settings.settingsSaved') || 'Saved')
  }

  const handleFontFamilyChange = async (value: string) => {
    const font = value === 'system' ? 'system' : 'inter'
    setFontFamily(font)
    localStorage.setItem('font-family', font)
    const root = document.documentElement
    if (font === 'system') {
      root.classList.add('font-system')
    } else {
      root.classList.remove('font-system')
    }
    await updateAISettings({ fontFamily: font })
    toast.success(t('settings.settingsSaved') || 'Saved')
  }

  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('appearance.selectTheme')}
          value={theme}
          options={[
            { value: 'light', label: t('settings.themeLight') },
            { value: 'dark', label: t('settings.themeDark') },
            { value: 'sepia', label: 'Sepia' },
            { value: 'midnight', label: 'Midnight' },
            { 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>

      <SettingsSection
        title={t('appearance.fontFamilyLabel') || 'Font Family'}
        icon={<span className="text-2xl">🔤</span>}
        description={t('appearance.fontFamilyDescription') || 'Choose the font used throughout the app'}
      >
        <SettingSelect
          label={t('appearance.fontFamilyLabel') || 'Font Family'}
          description={t('appearance.selectFontFamily') || 'Inter is optimized for readability, System uses your OS native font'}
          value={fontFamily}
          options={[
            { value: 'inter', label: 'Inter' },
            { value: 'system', label: t('appearance.fontSystem') || 'System Default' },
          ]}
          onChange={handleFontFamilyChange}
        />
      </SettingsSection>

      <SettingsSection
        title={t('appearance.notesViewLabel')}
        icon={<span className="text-2xl">📋</span>}
        description={t('appearance.notesViewDescription')}
      >
        <SettingSelect
          label={t('appearance.notesViewLabel')}
          description={t('appearance.notesViewDescription')}
          value={notesViewMode}
          options={[
            { value: 'masonry', label: t('appearance.notesViewMasonry') },
            { value: 'tabs', label: t('appearance.notesViewTabs') },
          ]}
          onChange={handleNotesViewChange}
        />
      </SettingsSection>

      <SettingsSection
        title={t('settings.cardSizeMode')}
        icon={<span className="text-2xl">📐</span>}
        description={t('settings.cardSizeModeDescription')}
      >
        <SettingSelect
          label={t('settings.cardSizeMode')}
          description={t('settings.selectCardSizeMode')}
          value={cardSizeMode}
          options={[
            { value: 'variable', label: t('settings.cardSizeVariable') },
            { value: 'uniform', label: t('settings.cardSizeUniform') },
          ]}
          onChange={handleCardSizeModeChange}
        />
      </SettingsSection>
    </div>
  )
}