'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'

export default function AppearanceSettingsPage() {
  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">Appearance</h1>
        <p className="text-gray-600 dark:text-gray-400">
          Customize look and feel of application
        </p>
      </div>

      <SettingsSection
        title="Theme"
        icon={<span className="text-2xl">🎨</span>}
        description="Choose your preferred color scheme"
      >
        <SettingSelect
          label="Color Scheme"
          description="Select app's visual theme"
          value={theme}
          options={[
            { value: 'light', label: 'Light' },
            { value: 'dark', label: 'Dark' },
            { value: 'sepia', label: 'Sepia' },
            { value: 'midnight', label: 'Midnight' },
            { value: 'auto', label: 'Auto (system)' },
          ]}
          onChange={handleThemeChange}
        />
      </SettingsSection>

      <SettingsSection
        title="Typography"
        icon={<span className="text-2xl">📝</span>}
        description="Adjust text size for better readability"
      >
        <SettingSelect
          label="Font Size"
          description="Adjust size of text throughout app"
          value={fontSize}
          options={[
            { value: 'small', label: 'Small' },
            { value: 'medium', label: 'Medium' },
            { value: 'large', label: 'Large' },
          ]}
          onChange={handleFontSizeChange}
        />
      </SettingsSection>
    </div>
  )
}