oxios 1.10.1

Oxios Agent OS — Agent Operating System powered by oxi-sdk
import { Save, Settings } from 'lucide-react'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import { useKnowledgeConfig, useKnowledgeConfigUpdate } from '@/hooks/use-knowledge'
import type { KnowledgeConfig } from '@/types/knowledge'

export function KnowledgeSettings() {
  const { t } = useTranslation()
  const { data: config, isLoading } = useKnowledgeConfig()
  const updateConfig = useKnowledgeConfigUpdate()
  const [form, setForm] = useState<Partial<KnowledgeConfig>>({})

  useEffect(() => {
    if (config) setForm(config)
  }, [config])

  if (isLoading)
    return <div className="p-6 text-muted-foreground">{t('knowledge.loadingSettings')}</div>

  const handleSave = async () => {
    await updateConfig.mutateAsync(form)
  }

  const update = (key: keyof KnowledgeConfig, value: unknown) => {
    setForm((prev) => ({ ...prev, [key]: value }))
  }

  return (
    <div className="p-4 sm:p-6 space-y-6 max-w-2xl mx-auto">
      <h2 className="text-lg font-semibold flex items-center gap-2">
        <Settings className="h-5 w-5" />
        {t('knowledge.title')} {t('common.settings')}
      </h2>

      <Card>
        <CardHeader>
          <CardTitle className="text-sm">{t('knowledge.general')}</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 sm:grid-cols-3 items-center gap-2 sm:gap-4">
            <label className="text-sm text-muted-foreground">{t('knowledge.language')}</label>
            <Input
              value={form.language ?? ''}
              onChange={(e) => update('language', e.target.value)}
              className="sm:col-span-2"
            />
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-3 items-center gap-2 sm:gap-4">
            <label className="text-sm text-muted-foreground">{t('knowledge.timezone')}</label>
            <Input
              value={form.timezone ?? ''}
              onChange={(e) => update('timezone', e.target.value)}
              className="sm:col-span-2"
            />
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-3 items-center gap-2 sm:gap-4">
            <label className="text-sm text-muted-foreground">{t('knowledge.mode')}</label>
            <Input
              value={form.mode ?? ''}
              onChange={(e) => update('mode', e.target.value)}
              className="sm:col-span-2"
              placeholder="chat, full, tasks, notes, journal"
            />
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-3 items-center gap-2 sm:gap-4">
            <label className="text-sm text-muted-foreground">{t('knowledge.pomodoro')}</label>
            <Input
              type="number"
              value={form.pomodoro_duration_in_minutes ?? 25}
              onChange={(e) => update('pomodoro_duration_in_minutes', Number(e.target.value))}
              className="sm:col-span-2"
            />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-sm">{t('knowledge.features')}</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <label className="text-sm">{t('knowledge.twoEmojisEnabled')}</label>
            <Switch
              checked={form.two_emojis_enabled ?? false}
              onCheckedChange={(v) => update('two_emojis_enabled', v)}
            />
          </div>
          <div className="flex items-center justify-between">
            <label className="text-sm">{t('knowledge.quickHabitsEnabled')}</label>
            <Switch
              checked={form.quick_habits_enabled ?? false}
              onCheckedChange={(v) => update('quick_habits_enabled', v)}
            />
          </div>
        </CardContent>
      </Card>

      <Button onClick={handleSave} disabled={updateConfig.isPending}>
        <Save className="h-4 w-4 mr-2" />
        {updateConfig.isPending ? t('knowledge.saving') : t('knowledge.save')}
      </Button>
    </div>
  )
}