'use client'

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

export default function GeneralSettingsPage() {
  const { t } = useLanguage()
  const [language, setLanguage] = useState('auto')
  const [emailNotifications, setEmailNotifications] = useState(false)
  const [desktopNotifications, setDesktopNotifications] = useState(false)
  const [anonymousAnalytics, setAnonymousAnalytics] = useState(false)

  // Load settings on mount
  useEffect(() => {
    async function loadSettings() {
      try {
        const settings = await getAISettings()
        if (settings.preferredLanguage) setLanguage(settings.preferredLanguage)
        if (settings.emailNotifications !== undefined) setEmailNotifications(settings.emailNotifications)
        if (settings.desktopNotifications !== undefined) setDesktopNotifications(settings.desktopNotifications)
        if (settings.anonymousAnalytics !== undefined) setAnonymousAnalytics(settings.anonymousAnalytics)
      } catch (error) {
        console.error('Error loading settings:', error)
      }
    }
    loadSettings()
  }, [])

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

  const handleEmailNotificationsChange = async (enabled: boolean) => {
    setEmailNotifications(enabled)
    await updateAISettings({ emailNotifications: enabled })
  }

  const handleDesktopNotificationsChange = async (enabled: boolean) => {
    setDesktopNotifications(enabled)
    await updateAISettings({ desktopNotifications: enabled })
  }

  const handleAnonymousAnalyticsChange = async (enabled: boolean) => {
    setAnonymousAnalytics(enabled)
    await updateAISettings({ anonymousAnalytics: enabled })
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold mb-2">General Settings</h1>
        <p className="text-gray-600 dark:text-gray-400">
          Configure basic application preferences
        </p>
      </div>

      <SettingsSection
        title="Language & Region"
        icon={<span className="text-2xl">🌍</span>}
        description="Choose your preferred language and regional settings"
      >
        <SettingSelect
          label="Language"
          description="Select interface language"
          value={language}
          options={[
            { value: 'auto', label: 'Auto-detect' },
            { 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="Notifications"
        icon={<span className="text-2xl">🔔</span>}
        description="Manage how and when you receive notifications"
      >
        <SettingToggle
          label="Email Notifications"
          description="Receive email updates about your notes"
          checked={emailNotifications}
          onChange={handleEmailNotificationsChange}
        />
        <SettingToggle
          label="Desktop Notifications"
          description="Show notifications in your browser"
          checked={desktopNotifications}
          onChange={handleDesktopNotificationsChange}
        />
      </SettingsSection>

      <SettingsSection
        title="Privacy"
        icon={<span className="text-2xl">🔒</span>}
        description="Control your privacy settings"
      >
        <SettingToggle
          label="Anonymous Analytics"
          description="Help improve app with anonymous usage data"
          checked={anonymousAnalytics}
          onChange={handleAnonymousAnalyticsChange}
        />
      </SettingsSection>
    </div>
  )
}