MOPC-Portal/src/components/settings/ai-settings-form.tsx

'use client'

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { toast } from 'sonner'
import { Cog, Loader2, Zap, AlertCircle, RefreshCw, SlidersHorizontal } from 'lucide-react'
import { trpc } from '@/lib/trpc/client'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Switch } from '@/components/ui/switch'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Skeleton } from '@/components/ui/skeleton'
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

const formSchema = z.object({
  ai_enabled: z.boolean(),
  ai_provider: z.string(),
  ai_model: z.string(),
  ai_send_descriptions: z.boolean(),
  openai_api_key: z.string().optional(),
  openai_base_url: z.string().optional(),
})

type FormValues = z.infer<typeof formSchema>

interface AISettingsFormProps {
  settings: {
    ai_enabled?: string
    ai_provider?: string
    ai_model?: string
    ai_send_descriptions?: string
    openai_api_key?: string
    openai_base_url?: string
  }
}

export function AISettingsForm({ settings }: AISettingsFormProps) {
  const utils = trpc.useUtils()

  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      ai_enabled: settings.ai_enabled === 'true',
      ai_provider: settings.ai_provider || 'openai',
      ai_model: settings.ai_model || 'gpt-4o',
      ai_send_descriptions: settings.ai_send_descriptions === 'true',
      openai_api_key: '',
      openai_base_url: settings.openai_base_url || '',
    },
  })

  // Fetch available models from OpenAI API
  const {
    data: modelsData,
    isLoading: modelsLoading,
    error: modelsError,
    refetch: refetchModels,
  } = trpc.settings.listAIModels.useQuery(undefined, {
    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
    retry: false,
  })

  const updateSettings = trpc.settings.updateMultiple.useMutation({
    onSuccess: () => {
      toast.success('AI settings saved successfully')
      utils.settings.getByCategory.invalidate({ category: 'AI' })
    },
    onError: (error) => {
      toast.error(`Failed to save settings: ${error.message}`)
    },
  })

  const testConnection = trpc.settings.testAIConnection.useMutation({
    onSuccess: (result) => {
      if (result.success) {
        toast.success(`AI connection successful! Model: ${result.model || result.modelTested}`)
        // Refetch models after successful API key save/test
        refetchModels()
      } else {
        toast.error(`Connection failed: ${result.error}`)
      }
    },
    onError: (error) => {
      toast.error(`Test failed: ${error.message}`)
    },
  })

  const onSubmit = (data: FormValues) => {
    const settingsToUpdate = [
      { key: 'ai_enabled', value: String(data.ai_enabled) },
      { key: 'ai_provider', value: data.ai_provider },
      { key: 'ai_model', value: data.ai_model },
      { key: 'ai_send_descriptions', value: String(data.ai_send_descriptions) },
    ]

    // Only update API key if a new value was entered
    if (data.openai_api_key && data.openai_api_key.trim()) {
      settingsToUpdate.push({ key: 'openai_api_key', value: data.openai_api_key })
    }

    // Save base URL (empty string clears it)
    settingsToUpdate.push({ key: 'openai_base_url', value: data.openai_base_url?.trim() || '' })

    updateSettings.mutate({ settings: settingsToUpdate })
  }

  // Group models by category for better display
  type ModelInfo = { id: string; name: string; isReasoning: boolean; category: string }
  const groupedModels = modelsData?.models?.reduce<Record<string, ModelInfo[]>>(
    (acc, model) => {
      const category = model.category
      if (!acc[category]) acc[category] = []
      acc[category].push(model)
      return acc
    },
    {}
  )

  const categoryLabels: Record<string, string> = {
    'gpt-5+': 'GPT-5+ Series (Latest)',
    'gpt-4o': 'GPT-4o Series',
    'gpt-4': 'GPT-4 Series',
    'gpt-3.5': 'GPT-3.5 Series',
    reasoning: 'Reasoning Models (o1, o3, o4)',
    other: 'Other Models',
  }

  const categoryOrder = ['gpt-5+', 'gpt-4o', 'gpt-4', 'gpt-3.5', 'reasoning', 'other']

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        <FormField
          control={form.control}
          name="ai_enabled"
          render={({ field }) => (
            <FormItem className="flex items-center justify-between rounded-lg border p-4">
              <div className="space-y-0.5">
                <FormLabel className="text-base">Enable AI Features</FormLabel>
                <FormDescription>
                  Use AI to suggest optimal jury-project assignments
                </FormDescription>
              </div>
              <FormControl>
                <Switch
                  checked={field.value}
                  onCheckedChange={field.onChange}
                />
              </FormControl>
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="ai_provider"
          render={({ field }) => (
            <FormItem>
              <FormLabel>AI Provider</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="Select provider" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="openai">OpenAI</SelectItem>
                </SelectContent>
              </Select>
              <FormDescription>
                AI provider for smart assignment suggestions
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="openai_api_key"
          render={({ field }) => (
            <FormItem>
              <FormLabel>API Key</FormLabel>
              <FormControl>
                <Input
                  type="password"
                  placeholder={settings.openai_api_key ? '••••••••' : 'Enter API key'}
                  {...field}
                />
              </FormControl>
              <FormDescription>
                Your OpenAI API key. Leave blank to keep the existing key.
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="openai_base_url"
          render={({ field }) => (
            <FormItem>
              <FormLabel>API Base URL (Optional)</FormLabel>
              <FormControl>
                <Input
                  placeholder="https://api.openai.com/v1"
                  {...field}
                />
              </FormControl>
              <FormDescription>
                Custom base URL for OpenAI-compatible providers. Leave blank for OpenAI.
                Use <code className="text-xs bg-muted px-1 rounded">https://openrouter.ai/api/v1</code> for OpenRouter (access Claude, Gemini, Llama, etc.)
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="ai_model"
          render={({ field }) => (
            <FormItem>
              <div className="flex items-center justify-between">
                <FormLabel>Model</FormLabel>
                {modelsData?.success && (
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    onClick={() => refetchModels()}
                    className="h-6 px-2 text-xs"
                  >
                    <RefreshCw className="mr-1 h-3 w-3" />
                    Refresh
                  </Button>
                )}
              </div>

              {modelsLoading ? (
                <Skeleton className="h-10 w-full" />
              ) : modelsError || !modelsData?.success ? (
                <div className="space-y-2">
                  <Alert variant="destructive">
                    <AlertCircle className="h-4 w-4" />
                    <AlertDescription>
                      {modelsError?.message || modelsData?.error || 'Failed to load models. Save your API key first and test the connection.'}
                    </AlertDescription>
                  </Alert>
                  <Input
                    value={field.value}
                    onChange={(e) => field.onChange(e.target.value)}
                    placeholder="Enter model ID manually (e.g., gpt-4o)"
                  />
                </div>
              ) : (
                <Select onValueChange={field.onChange} value={field.value}>
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Select model" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    {categoryOrder
                      .filter((cat) => groupedModels?.[cat]?.length)
                      .map((category) => (
                        <SelectGroup key={category}>
                          <SelectLabel className="text-xs font-semibold text-muted-foreground">
                            {categoryLabels[category] || category}
                          </SelectLabel>
                          {groupedModels?.[category]?.map((model) => (
                            <SelectItem key={model.id} value={model.id}>
                              <div className="flex items-center gap-2">
                                {model.isReasoning && (
                                  <SlidersHorizontal className="h-3 w-3 text-purple-500" />
                                )}
                                <span>{model.name}</span>
                              </div>
                            </SelectItem>
                          ))}
                        </SelectGroup>
                      ))}
                  </SelectContent>
                </Select>
              )}
              <FormDescription>
                {form.watch('ai_model')?.startsWith('o') ? (
                  <span className="flex items-center gap-1 text-purple-600">
                    <SlidersHorizontal className="h-3 w-3" />
                    Reasoning model - optimized for complex analysis tasks
                  </span>
                ) : (
                  'OpenAI model to use for AI features'
                )}
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="ai_send_descriptions"
          render={({ field }) => (
            <FormItem className="flex items-center justify-between rounded-lg border p-4">
              <div className="space-y-0.5">
                <FormLabel className="text-base">Send Project Descriptions</FormLabel>
                <FormDescription>
                  Include anonymized project descriptions in AI requests for better matching
                </FormDescription>
              </div>
              <FormControl>
                <Switch
                  checked={field.value}
                  onCheckedChange={field.onChange}
                />
              </FormControl>
            </FormItem>
          )}
        />

        <div className="flex gap-2">
          <Button
            type="submit"
            disabled={updateSettings.isPending}
          >
            {updateSettings.isPending ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Saving...
              </>
            ) : (
              <>
                <Cog className="mr-2 h-4 w-4" />
                Save AI Settings
              </>
            )}
          </Button>
          <Button
            type="button"
            variant="outline"
            onClick={() => testConnection.mutate()}
            disabled={testConnection.isPending}
          >
            {testConnection.isPending ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Testing...
              </>
            ) : (
              <>
                <Zap className="mr-2 h-4 w-4" />
                Test Connection
              </>
            )}
          </Button>
        </div>
      </form>
    </Form>
  )
}