'use client'

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

export default function AppearanceSettingsPage() {
  const { t } = useLanguage()
  const [theme, setTheme] = useState('auto')
  const [fontSize, setFontSize] = useState('medium')

  // Load settings on mount
  useEffect(() => {
    async function loadSettings() {
      try {
        const [aiSettings, userSettings] = await Promise.all([
          getAISettings(),
          getUserSettings()
        ])
        if (aiSettings.fontSize) setFontSize(aiSettings.fontSize)
        if (userSettings.theme) setTheme(userSettings.theme)
      } catch (error) {
        console.error('Error loading settings:', error)
      }
    }
    loadSettings()
  }, [])

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

    await updateUserSettings({ theme: value as 'light' | 'dark' | 'auto' })
  }

  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 updateAISettings({ 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: '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>
    </div>
  )
}