Keep/keep-notes/app/(main)/settings/ai/page-new.tsx

'use client'

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

export default function AISettingsPage() {
  const { t } = useLanguage()
  const [apiKey, setApiKey] = useState('')

  // Mock settings state - in real implementation, load from server
  const [settings, setSettings] = useState({
    titleSuggestions: true,
    semanticSearch: true,
    paragraphRefactor: true,
    memoryEcho: true,
    memoryEchoFrequency: 'daily' as 'daily' | 'weekly' | 'custom',
    aiProvider: 'auto' as 'auto' | 'openai' | 'ollama',
    preferredLanguage: 'auto' as 'auto' | 'en' | 'fr' | 'es' | 'de' | 'fa' | 'it' | 'pt' | 'ru' | 'zh' | 'ja' | 'ko' | 'ar' | 'hi' | 'nl' | 'pl',
    demoMode: false
  })

  const handleToggle = async (feature: string, value: boolean) => {
    setSettings(prev => ({ ...prev, [feature]: value }))
    try {
      await updateAISettings({ [feature]: value })
    } catch (error) {
      console.error('Error updating setting:', error)
      toast.error('Failed to save setting')
      setSettings(settings) // Revert on error
    }
  }

  const handleFrequencyChange = async (value: 'daily' | 'weekly' | 'custom') => {
    setSettings(prev => ({ ...prev, memoryEchoFrequency: value }))
    try {
      await updateAISettings({ memoryEchoFrequency: value })
    } catch (error) {
      console.error('Error updating frequency:', error)
      toast.error('Failed to save setting')
    }
  }

  const handleProviderChange = async (value: 'auto' | 'openai' | 'ollama') => {
    setSettings(prev => ({ ...prev, aiProvider: value }))
    try {
      await updateAISettings({ aiProvider: value })
    } catch (error) {
      console.error('Error updating provider:', error)
      toast.error('Failed to save setting')
    }
  }

  const handleApiKeyChange = async (value: string) => {
    setApiKey(value)
    // TODO: Implement API key persistence
    console.log('API Key:', value)
  }

  return (
    <div className="container mx-auto py-10 px-4 max-w-6xl">
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Sidebar Navigation */}
        <aside className="lg:col-span-1">
          <SettingsNav />
        </aside>

        {/* Main Content */}
        <main className="lg:col-span-3 space-y-6">
          <div>
            <h1 className="text-3xl font-bold mb-2">AI Settings</h1>
            <p className="text-gray-600 dark:text-gray-400">
              Configure AI-powered features and preferences
            </p>
          </div>

          {/* AI Provider */}
          <SettingsSection
            title="AI Provider"
            icon={<span className="text-2xl">🤖</span>}
            description="Choose your preferred AI service provider"
          >
            <SettingSelect
              label="Provider"
              description="Select which AI service to use"
              value={settings.aiProvider}
              options={[
                {
                  value: 'auto',
                  label: 'Auto-detect',
                  description: 'Ollama when available, OpenAI fallback'
                },
                {
                  value: 'ollama',
                  label: 'Ollama (Local)',
                  description: '100% private, runs locally on your machine'
                },
                {
                  value: 'openai',
                  label: 'OpenAI',
                  description: 'Most accurate, requires API key'
                },
              ]}
              onChange={handleProviderChange}
            />

            {settings.aiProvider === 'openai' && (
              <SettingInput
                label="API Key"
                description="Your OpenAI API key (stored securely)"
                value={apiKey}
                type="password"
                placeholder="sk-..."
                onChange={handleApiKeyChange}
              />
            )}
          </SettingsSection>

          {/* Feature Toggles */}
          <SettingsSection
            title="AI Features"
            icon={<span className="text-2xl">✨</span>}
            description="Enable or disable AI-powered features"
          >
            <SettingToggle
              label="Title Suggestions"
              description="Suggest titles for untitled notes after 50+ words"
              checked={settings.titleSuggestions}
              onChange={(checked) => handleToggle('titleSuggestions', checked)}
            />

            <SettingToggle
              label="Semantic Search"
              description="Search by meaning, not just keywords"
              checked={settings.semanticSearch}
              onChange={(checked) => handleToggle('semanticSearch', checked)}
            />

            <SettingToggle
              label="Paragraph Reformulation"
              description="AI-powered text improvement options"
              checked={settings.paragraphRefactor}
              onChange={(checked) => handleToggle('paragraphRefactor', checked)}
            />

            <SettingToggle
              label="Memory Echo"
              description="Daily proactive note connections and insights"
              checked={settings.memoryEcho}
              onChange={(checked) => handleToggle('memoryEcho', checked)}
            />

            {settings.memoryEcho && (
              <SettingSelect
                label="Memory Echo Frequency"
                description="How often to analyze note connections"
                value={settings.memoryEchoFrequency}
                options={[
                  { value: 'daily', label: 'Daily' },
                  { value: 'weekly', label: 'Weekly' },
                  { value: 'custom', label: 'Custom' },
                ]}
                onChange={handleFrequencyChange}
              />
            )}
          </SettingsSection>

          {/* Demo Mode */}
          <SettingsSection
            title="Demo Mode"
            icon={<span className="text-2xl">🎭</span>}
            description="Test AI features without using real AI calls"
          >
            <SettingToggle
              label="Enable Demo Mode"
              description="Use mock AI responses for testing and demonstrations"
              checked={settings.demoMode}
              onChange={(checked) => handleToggle('demoMode', checked)}
            />
          </SettingsSection>
        </main>
      </div>
    </div>
  )
}