Keep/keep-notes/components/ai/ai-settings-panel.tsx

'use client'

import { useState } from 'react'
import { Card } from '@/components/ui/card'
import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { updateAISettings } from '@/app/actions/ai-settings'
import { DemoModeToggle } from '@/components/demo-mode-toggle'
import { toast } from 'sonner'
import { Loader2 } 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
  }
}

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) => {
    // Optimistic update
    setSettings(prev => ({ ...prev, [feature]: value }))

    try {
      setIsPending(true)
      await updateAISettings({ [feature]: value })
      toast.success(t('aiSettings.saved'))
    } catch (error) {
      console.error('Error updating setting:', error)
      toast.error(t('aiSettings.error'))
      // Revert on 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 (error) {
      console.error('Error updating frequency:', error)
      toast.error(t('aiSettings.error'))
      setSettings(initialSettings)
    } finally {
      setIsPending(false)
    }
  }

  const handleProviderChange = async (value: 'auto' | 'openai' | 'ollama') => {
    setSettings(prev => ({ ...prev, aiProvider: value }))

    try {
      setIsPending(true)
      await updateAISettings({ aiProvider: value })
      toast.success(t('aiSettings.saved'))
    } catch (error) {
      console.error('Error updating provider:', error)
      toast.error(t('aiSettings.error'))
      setSettings(initialSettings)
    } finally {
      setIsPending(false)
    }
  }

  const handleLanguageChange = async (value: 'auto' | 'en' | 'fr' | 'es' | 'de' | 'fa' | 'it' | 'pt' | 'ru' | 'zh' | 'ja' | 'ko' | 'ar' | 'hi' | 'nl' | 'pl') => {
    setSettings(prev => ({ ...prev, preferredLanguage: value }))

    try {
      setIsPending(true)
      await updateAISettings({ preferredLanguage: value })
      toast.success(t('aiSettings.saved'))
    } catch (error) {
      console.error('Error updating language:', error)
      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 (error) {
      console.error('Error toggling demo mode:', error)
      toast.error(t('aiSettings.error'))
      setSettings(initialSettings)
      throw error
    } finally {
      setIsPending(false)
    }
  }

  return (
    <div className="space-y-6">
      {isPending && (
        <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
          <Loader2 className="h-4 w-4 animate-spin" />
          {t('aiSettings.saving')}
        </div>
      )}

      {/* Feature Toggles */}
      <div className="space-y-4">
        <h2 className="text-xl font-semibold">{t('aiSettings.features')}</h2>

        <FeatureToggle
          name={t('titleSuggestions.available').replace('💡 ', '')}
          description="Suggest titles for untitled notes after 50+ words"
          checked={settings.titleSuggestions}
          onChange={(checked) => handleToggle('titleSuggestions', checked)}
        />

        <FeatureToggle
          name={t('semanticSearch.exactMatch')}
          description={t('semanticSearch.searching')}
          checked={settings.semanticSearch}
          onChange={(checked) => handleToggle('semanticSearch', checked)}
        />

        <FeatureToggle
          name={t('paragraphRefactor.title')}
          description="AI-powered text improvement options"
          checked={settings.paragraphRefactor}
          onChange={(checked) => handleToggle('paragraphRefactor', checked)}
        />

        <FeatureToggle
          name={t('memoryEcho.title')}
          description={t('memoryEcho.dailyInsight')}
          checked={settings.memoryEcho}
          onChange={(checked) => handleToggle('memoryEcho', checked)}
        />

        {settings.memoryEcho && (
          <Card className="p-4 ml-6">
            <Label htmlFor="frequency" className="text-sm font-medium">
              {t('aiSettings.frequency')}
            </Label>
            <p className="text-xs text-gray-500 mb-3">
              How often to analyze note connections
            </p>
            <RadioGroup
              value={settings.memoryEchoFrequency}
              onValueChange={handleFrequencyChange}
            >
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="daily" id="daily" />
                <Label htmlFor="daily" className="font-normal">
                  {t('aiSettings.frequencyDaily')}
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="weekly" id="weekly" />
                <Label htmlFor="weekly" className="font-normal">
                  {t('aiSettings.frequencyWeekly')}
                </Label>
              </div>
            </RadioGroup>
          </Card>
        )}

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

      {/* AI Provider Selection */}
      <Card className="p-4">
        <Label className="text-base font-medium mb-1">{t('aiSettings.provider')}</Label>
        <p className="text-sm text-gray-500 mb-4">
          Choose your preferred AI provider
        </p>

        <RadioGroup
          value={settings.aiProvider}
          onValueChange={handleProviderChange}
        >
          <div className="flex items-start space-x-2 py-2">
            <RadioGroupItem value="auto" id="auto" />
            <div className="grid gap-1.5">
              <Label htmlFor="auto" className="font-medium">
                {t('aiSettings.providerAuto')}
              </Label>
              <p className="text-sm text-gray-500">
                Ollama when available, OpenAI fallback
              </p>
            </div>
          </div>

          <div className="flex items-start space-x-2 py-2">
            <RadioGroupItem value="ollama" id="ollama" />
            <div className="grid gap-1.5">
              <Label htmlFor="ollama" className="font-medium">
                {t('aiSettings.providerOllama')}
              </Label>
              <p className="text-sm text-gray-500">
                100% private, runs locally on your machine
              </p>
            </div>
          </div>

          <div className="flex items-start space-x-2 py-2">
            <RadioGroupItem value="openai" id="openai" />
            <div className="grid gap-1.5">
              <Label htmlFor="openai" className="font-medium">
                {t('aiSettings.providerOpenAI')}
              </Label>
              <p className="text-sm text-gray-500">
                Most accurate, requires API key
              </p>
            </div>
          </div>
        </RadioGroup>
      </Card>
    </div>
  )
}

interface FeatureToggleProps {
  name: string
  description: string
  checked: boolean
  onChange: (checked: boolean) => void
}

function FeatureToggle({ name, description, checked, onChange }: FeatureToggleProps) {
  return (
    <Card className="p-4">
      <div className="flex items-center justify-between">
        <div className="space-y-1">
          <Label className="text-base font-medium">{name}</Label>
          <p className="text-sm text-gray-500">{description}</p>
        </div>
        <Switch
          checked={checked}
          onCheckedChange={onChange}
          disabled={false}
        />
      </div>
    </Card>
  )
}