'use client'

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

interface GeneralSettingsClientProps {
  initialSettings: {
    preferredLanguage: string
    emailNotifications: boolean
    desktopNotifications: boolean
  }
}

export function GeneralSettingsClient({ initialSettings }: GeneralSettingsClientProps) {
  const { t, setLanguage: setContextLanguage } = useLanguage()
  const router = useRouter()
  const [language, setLanguage] = useState(initialSettings.preferredLanguage || 'auto')
  const [emailNotifications, setEmailNotifications] = useState(initialSettings.emailNotifications ?? false)
  const [desktopNotifications, setDesktopNotifications] = useState(initialSettings.desktopNotifications ?? false)

  const handleLanguageChange = async (value: string) => {
    setLanguage(value)
    await updateAISettings({ preferredLanguage: value as any })

    if (value === 'auto') {
      localStorage.removeItem('user-language')
      toast.success(t('settings.languageAuto') || 'Language set to Auto')
    } else {
      localStorage.setItem('user-language', value)
      setContextLanguage(value as any)
      toast.success(t('profile.languageUpdateSuccess') || 'Language updated')
    }

    setTimeout(() => router.refresh(), 300)
  }

  const handleEmailNotificationsChange = async (enabled: boolean) => {
    setEmailNotifications(enabled)
    await updateAISettings({ emailNotifications: enabled })
    toast.success(t('settings.settingsSaved') || 'Saved')
  }

  const handleDesktopNotificationsChange = async (enabled: boolean) => {
    setDesktopNotifications(enabled)
    await updateAISettings({ desktopNotifications: enabled })
    toast.success(t('settings.settingsSaved') || 'Saved')
  }

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

      <SettingsSection
        title={t('settings.language')}
        icon={<span className="text-2xl">🌍</span>}
        description={t('profile.languagePreferencesDescription')}
      >
        <SettingSelect
          label={t('settings.language')}
          description={t('settings.selectLanguage')}
          value={language}
          options={[
            { value: 'auto', label: t('profile.autoDetect') },
            { value: 'en', label: 'English' },
            { value: 'fr', label: 'Français' },
            { value: 'es', label: 'Español' },
            { value: 'de', label: 'Deutsch' },
            { value: 'fa', label: 'فارسی' },
            { value: 'it', label: 'Italiano' },
            { value: 'pt', label: 'Português' },
            { value: 'ru', label: 'Русский' },
            { value: 'zh', label: '中文' },
            { value: 'ja', label: '日本語' },
            { value: 'ko', label: '한국어' },
            { value: 'ar', label: 'العربية' },
            { value: 'hi', label: 'हिन्दी' },
            { value: 'nl', label: 'Nederlands' },
            { value: 'pl', label: 'Polski' },
          ]}
          onChange={handleLanguageChange}
        />
      </SettingsSection>

      <SettingsSection
        title={t('settings.notifications')}
        icon={<span className="text-2xl">🔔</span>}
        description={t('settings.notificationsDesc')}
      >
        <SettingToggle
          label={t('settings.emailNotifications')}
          description={t('settings.emailNotificationsDesc')}
          checked={emailNotifications}
          onChange={handleEmailNotificationsChange}
        />
        <SettingToggle
          label={t('settings.desktopNotifications')}
          description={t('settings.desktopNotificationsDesc')}
          checked={desktopNotifications}
          onChange={handleDesktopNotificationsChange}
        />
      </SettingsSection>
    </div>
  )
}