'use client'

import { useState } from 'react'
import { Switch } from '@/components/ui/switch'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { Label } from '@/components/ui/label'
import { updateAISettings } from '@/app/actions/ai-settings'
import { DemoModeToggle } from '@/components/demo-mode-toggle'
import { toast } from 'sonner'
import { Loader2, Sparkles, Brain, Languages, Tag, History, Wand2 } from 'lucide-react'
import { useLanguage } from '@/lib/i18n'

interface AISettingsPanelProps {
  initialSettings: {
    titleSuggestions: boolean
    semanticSearch: boolean
    paragraphRefactor: boolean
    memoryEcho: boolean
    memoryEchoFrequency: 'daily' | 'weekly' | 'custom'
    aiProvider: 'auto' | 'openai' | 'ollama'
    preferredLanguage: 'auto' | 'en' | 'fr' | 'es' | 'de' | 'fa' | 'it' | 'pt' | 'ru' | 'zh' | 'ja' | 'ko' | 'ar' | 'hi' | 'nl' | 'pl'
    demoMode: boolean
    languageDetection: boolean
    autoLabeling: boolean
    noteHistory: boolean
    noteHistoryMode: 'manual' | 'auto'
  }
}

export function AISettingsPanel({ initialSettings }: AISettingsPanelProps) {
  const [settings, setSettings] = useState(initialSettings)
  const [isPending, setIsPending] = useState(false)
  const { t } = useLanguage()

  const handleToggle = async (feature: string, value: boolean) => {
    setSettings(prev => ({ ...prev, [feature]: value }))
    try {
      setIsPending(true)
      await updateAISettings({ [feature]: value })
      toast.success(t('aiSettings.saved'))
    } catch {
      toast.error(t('aiSettings.error'))
      setSettings(initialSettings)
    } finally {
      setIsPending(false)
    }
  }

  const handleFrequencyChange = async (value: 'daily' | 'weekly' | 'custom') => {
    setSettings(prev => ({ ...prev, memoryEchoFrequency: value }))
    try {
      setIsPending(true)
      await updateAISettings({ memoryEchoFrequency: value })
      toast.success(t('aiSettings.saved'))
    } catch {
      toast.error(t('aiSettings.error'))
      setSettings(initialSettings)
    } finally {
      setIsPending(false)
    }
  }

  const handleDemoModeToggle = async (enabled: boolean) => {
    setSettings(prev => ({ ...prev, demoMode: enabled }))
    try {
      setIsPending(true)
      await updateAISettings({ demoMode: enabled })
    } catch {
      toast.error(t('aiSettings.error'))
      setSettings(initialSettings)
      throw new Error()
    } finally {
      setIsPending(false)
    }
  }

  const features = [
    {
      key: 'titleSuggestions',
      icon: Wand2,
      name: t('titleSuggestions.available').replace('💡 ', ''),
      description: t('aiSettings.titleSuggestionsDesc'),
      value: settings.titleSuggestions,
    },
    {
      key: 'paragraphRefactor',
      icon: Sparkles,
      name: t('aiSettings.aiNote'),
      description: t('aiSettings.aiNoteDesc'),
      value: settings.paragraphRefactor,
    },
    {
      key: 'memoryEcho',
      icon: Brain,
      name: t('memoryEcho.title'),
      description: t('memoryEcho.dailyInsight'),
      value: settings.memoryEcho,
    },
    {
      key: 'languageDetection',
      icon: Languages,
      name: t('aiSettings.languageDetection'),
      description: t('aiSettings.languageDetectionDesc'),
      value: settings.languageDetection ?? true,
    },
    {
      key: 'autoLabeling',
      icon: Tag,
      name: t('aiSettings.autoLabeling'),
      description: t('aiSettings.autoLabelingDesc'),
      value: settings.autoLabeling ?? true,
    },
    {
      key: 'noteHistory',
      icon: History,
      name: t('aiSettings.noteHistory'),
      description: t('aiSettings.noteHistoryDesc'),
      value: settings.noteHistory ?? false,
    },
  ]

  return (
    <div className="space-y-8">
      {isPending && (
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <Loader2 className="h-4 w-4 animate-spin" />
          {t('aiSettings.saving')}
        </div>
      )}

      {/* Feature toggles as cards */}
      <div>
        <h2 className="text-base font-semibold text-foreground mb-4">{t('aiSettings.features')}</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {features.map(({ key, icon: Icon, name, description, value }) => (
            <div
              key={key}
              className="bg-card rounded-lg border border-border p-5 shadow-sm flex items-start justify-between gap-4"
            >
              <div className="flex items-start gap-3">
                <div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0 mt-0.5">
                  <Icon className="h-4 w-4" />
                </div>
                <div>
                  <p className="text-sm font-medium text-foreground">{name}</p>
                  <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
                </div>
              </div>
              <button
                type="button"
                role="switch"
                aria-checked={value}
                onClick={() => handleToggle(key, !value)}
                className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary/30 mt-0.5 ${value ? 'bg-primary' : 'bg-muted-foreground/30'}`}
              >
                <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${value ? 'translate-x-6' : 'translate-x-1'}`} />
              </button>
            </div>
          ))}
        </div>
      </div>

      {/* Memory Echo frequency — shown when enabled */}
      {settings.memoryEcho && (
        <div className="bg-card rounded-lg border border-border p-5 shadow-sm">
          <h3 className="text-sm font-semibold text-foreground mb-1">{t('aiSettings.frequency')}</h3>
          <p className="text-xs text-muted-foreground mb-4">{t('aiSettings.frequencyDesc')}</p>
          <RadioGroup value={settings.memoryEchoFrequency} onValueChange={handleFrequencyChange} className="space-y-2">
            {[
              { value: 'daily', label: t('aiSettings.frequencyDaily') },
              { value: 'weekly', label: t('aiSettings.frequencyWeekly') },
            ].map((opt) => (
              <div key={opt.value} className="flex items-center space-x-2">
                <RadioGroupItem value={opt.value} id={`freq-${opt.value}`} />
                <Label htmlFor={`freq-${opt.value}`} className="font-normal text-sm cursor-pointer">{opt.label}</Label>
              </div>
            ))}
          </RadioGroup>
        </div>
      )}

      {/* Note History mode — shown when enabled */}
      {settings.noteHistory && (
        <div className="bg-card rounded-lg border border-border p-5 shadow-sm">
          <h3 className="text-sm font-semibold text-foreground mb-1">{t('notes.historyMode')}</h3>
          <RadioGroup
            value={settings.noteHistoryMode ?? 'manual'}
            onValueChange={(value) => {
              const mode = value as 'manual' | 'auto'
              setSettings(s => ({ ...s, noteHistoryMode: mode }))
              updateAISettings({ noteHistoryMode: mode }).then(() => toast.success(t('settings.settingsSaved')))
            }}
            className="space-y-3 mt-3"
          >
            {[
              { value: 'manual', label: t('notes.historyModeManual'), desc: t('notes.historyModeManualDesc') },
              { value: 'auto', label: t('notes.historyModeAuto'), desc: t('notes.historyModeAutoDesc') },
            ].map((opt) => (
              <div key={opt.value} className="flex items-start gap-2">
                <RadioGroupItem value={opt.value} id={`history-${opt.value}`} className="mt-0.5" />
                <div>
                  <Label htmlFor={`history-${opt.value}`} className="text-sm font-medium cursor-pointer">{opt.label}</Label>
                  <p className="text-xs text-muted-foreground">{opt.desc}</p>
                </div>
              </div>
            ))}
          </RadioGroup>
        </div>
      )}

      {/* Demo Mode */}
      <DemoModeToggle demoMode={settings.demoMode} onToggle={handleDemoModeToggle} />
    </div>
  )
}
