'use client'

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Checkbox } from '@/components/ui/checkbox'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { updateSystemConfig, testSMTP } from '@/app/actions/admin-settings'
import { toast } from 'sonner'
import { useState, useEffect } from 'react'
import Link from 'next/link'
import { TestTube, ExternalLink } from 'lucide-react'

type AIProvider = 'ollama' | 'openai' | 'custom'

interface AvailableModels {
  tags: string[]
  embeddings: string[]
}

const MODELS_2026 = {
  ollama: {
    tags: ['llama3:latest', 'llama3.2:latest', 'granite4:latest', 'mistral:latest', 'mixtral:latest', 'phi3:latest', 'gemma2:latest', 'qwen2:latest'],
    embeddings: ['embeddinggemma:latest', 'mxbai-embed-large:latest', 'nomic-embed-text:latest']
  },
  openai: {
    tags: ['gpt-4o', 'gpt-4o-mini', 'gpt-4-turbo', 'gpt-4', 'gpt-3.5-turbo'],
    embeddings: ['text-embedding-3-small', 'text-embedding-3-large', 'text-embedding-ada-002']
  },
  custom: {
    tags: ['gpt-4o-mini', 'gpt-4o', 'claude-3-haiku', 'claude-3-sonnet', 'llama-3.1-8b'],
    embeddings: ['text-embedding-3-small', 'text-embedding-3-large', 'text-embedding-ada-002']
  }
}

export function AdminSettingsForm({ config }: { config: Record<string, string> }) {
  const [isSaving, setIsSaving] = useState(false)
  const [isTesting, setIsTesting] = useState(false)

  // Local state for Checkbox
  const [allowRegister, setAllowRegister] = useState(config.ALLOW_REGISTRATION !== 'false')
  const [smtpSecure, setSmtpSecure] = useState(config.SMTP_SECURE === 'true')
  const [smtpIgnoreCert, setSmtpIgnoreCert] = useState(config.SMTP_IGNORE_CERT === 'true')

  // AI Provider state - separated for tags and embeddings
  const [tagsProvider, setTagsProvider] = useState<AIProvider>((config.AI_PROVIDER_TAGS as AIProvider) || 'ollama')
  const [embeddingsProvider, setEmbeddingsProvider] = useState<AIProvider>((config.AI_PROVIDER_EMBEDDING as AIProvider) || 'ollama')

  // Sync state with config when server revalidates
  useEffect(() => {
    setAllowRegister(config.ALLOW_REGISTRATION !== 'false')
    setSmtpSecure(config.SMTP_SECURE === 'true')
    setSmtpIgnoreCert(config.SMTP_IGNORE_CERT === 'true')
    setTagsProvider((config.AI_PROVIDER_TAGS as AIProvider) || 'ollama')
    setEmbeddingsProvider((config.AI_PROVIDER_EMBEDDING as AIProvider) || 'ollama')
  }, [config])

  const handleSaveSecurity = async (formData: FormData) => {
    setIsSaving(true)
    const data = {
      ALLOW_REGISTRATION: allowRegister ? 'true' : 'false',
    }

    const result = await updateSystemConfig(data)
    setIsSaving(false)

    if (result.error) {
      toast.error('Failed to update security settings')
    } else {
      toast.success('Security Settings updated')
    }
  }

  const handleSaveAI = async (formData: FormData) => {
    setIsSaving(true)
    const data: Record<string, string> = {}

    // Tags provider configuration
    const tagsProv = formData.get('AI_PROVIDER_TAGS') as AIProvider
    data.AI_PROVIDER_TAGS = tagsProv
    data.AI_MODEL_TAGS = formData.get('AI_MODEL_TAGS') as string

    if (tagsProv === 'ollama') {
      data.OLLAMA_BASE_URL = formData.get('OLLAMA_BASE_URL_TAGS') as string
    } else if (tagsProv === 'openai') {
      data.OPENAI_API_KEY = formData.get('OPENAI_API_KEY') as string
    } else if (tagsProv === 'custom') {
      data.CUSTOM_OPENAI_API_KEY = formData.get('CUSTOM_OPENAI_API_KEY_TAGS') as string
      data.CUSTOM_OPENAI_BASE_URL = formData.get('CUSTOM_OPENAI_BASE_URL_TAGS') as string
    }

    // Embeddings provider configuration
    const embedProv = formData.get('AI_PROVIDER_EMBEDDING') as AIProvider
    data.AI_PROVIDER_EMBEDDING = embedProv
    data.AI_MODEL_EMBEDDING = formData.get('AI_MODEL_EMBEDDING') as string

    if (embedProv === 'ollama') {
      data.OLLAMA_BASE_URL = formData.get('OLLAMA_BASE_URL_EMBEDDING') as string
    } else if (embedProv === 'openai') {
      data.OPENAI_API_KEY = formData.get('OPENAI_API_KEY') as string
    } else if (embedProv === 'custom') {
      data.CUSTOM_OPENAI_API_KEY = formData.get('CUSTOM_OPENAI_API_KEY_EMBEDDING') as string
      data.CUSTOM_OPENAI_BASE_URL = formData.get('CUSTOM_OPENAI_BASE_URL_EMBEDDING') as string
    }

    const result = await updateSystemConfig(data)
    setIsSaving(false)

    if (result.error) {
      toast.error('Failed to update AI settings')
    } else {
      toast.success('AI Settings updated')
      setTagsProvider(tagsProv)
      setEmbeddingsProvider(embedProv)
    }
  }

  const handleSaveSMTP = async (formData: FormData) => {
    setIsSaving(true)
    const data = {
      SMTP_HOST: formData.get('SMTP_HOST') as string,
      SMTP_PORT: formData.get('SMTP_PORT') as string,
      SMTP_USER: formData.get('SMTP_USER') as string,
      SMTP_PASS: formData.get('SMTP_PASS') as string,
      SMTP_FROM: formData.get('SMTP_FROM') as string,
      SMTP_IGNORE_CERT: smtpIgnoreCert ? 'true' : 'false',
      SMTP_SECURE: smtpSecure ? 'true' : 'false',
    }

    const result = await updateSystemConfig(data)
    setIsSaving(false)

    if (result.error) {
      toast.error('Failed to update SMTP settings')
    } else {
      toast.success('SMTP Settings updated')
    }
  }

  const handleTestEmail = async () => {
    setIsTesting(true)
    try {
      const result: any = await testSMTP()
      if (result.success) {
        toast.success('Test email sent successfully!')
      } else {
        toast.error(`Failed: ${result.error}`)
      }
    } catch (e: any) {
      toast.error(`Error: ${e.message}`)
    } finally {
      setIsTesting(false)
    }
  }

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Security Settings</CardTitle>
          <CardDescription>Manage access control and registration policies.</CardDescription>
        </CardHeader>
        <form action={handleSaveSecurity}>
          <CardContent className="space-y-4">
            <div className="flex items-center space-x-2">
              <Checkbox
                id="ALLOW_REGISTRATION"
                checked={allowRegister}
                onCheckedChange={(c) => setAllowRegister(!!c)}
              />
              <label
                htmlFor="ALLOW_REGISTRATION"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                Allow Public Registration
              </label>
            </div>
            <p className="text-xs text-muted-foreground">
              If disabled, new users can only be added by an Administrator via the User Management page.
            </p>
          </CardContent>
          <CardFooter>
            <Button type="submit" disabled={isSaving}>Save Security Settings</Button>
          </CardFooter>
        </form>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>AI Configuration</CardTitle>
          <CardDescription>Configure AI providers for auto-tagging and semantic search. Use different providers for optimal performance.</CardDescription>
        </CardHeader>
        <form action={handleSaveAI}>
          <CardContent className="space-y-6">
            {/* Tags Generation Section */}
            <div className="space-y-4 p-4 border rounded-lg bg-blue-50/50 dark:bg-blue-950/20">
              <h3 className="text-base font-semibold flex items-center gap-2">
                <span className="text-blue-600">🏷️</span> Tags Generation Provider
              </h3>
              <p className="text-xs text-muted-foreground">AI provider for automatic tag suggestions. Recommended: Ollama (free, local).</p>

              <div className="space-y-2">
                <Label htmlFor="AI_PROVIDER_TAGS">Provider</Label>
                <select
                  id="AI_PROVIDER_TAGS"
                  name="AI_PROVIDER_TAGS"
                  value={tagsProvider}
                  onChange={(e) => setTagsProvider(e.target.value as AIProvider)}
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                >
                  <option value="ollama">🦙 Ollama (Local & Free)</option>
                  <option value="openai">🤖 OpenAI (GPT-5, GPT-4)</option>
                  <option value="custom">🔧 Custom OpenAI-Compatible</option>
                </select>
              </div>

              {/* Ollama Tags Config */}
              {tagsProvider === 'ollama' && (
                <div className="space-y-3">
                  <div className="space-y-2">
                    <Label htmlFor="OLLAMA_BASE_URL_TAGS">Base URL</Label>
                    <Input id="OLLAMA_BASE_URL_TAGS" name="OLLAMA_BASE_URL_TAGS" defaultValue={config.OLLAMA_BASE_URL || 'http://localhost:11434'} placeholder="http://localhost:11434" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="AI_MODEL_TAGS_OLLAMA">Model</Label>
                    <select
                      id="AI_MODEL_TAGS_OLLAMA"
                      name="AI_MODEL_TAGS"
                      defaultValue={config.AI_MODEL_TAGS || 'granite4:latest'}
                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                    >
                      {MODELS_2026.ollama.tags.map((model) => (
                        <option key={model} value={model}>{model}</option>
                      ))}
                    </select>
                    <p className="text-xs text-muted-foreground">Select an Ollama model installed on your system</p>
                  </div>
                </div>
              )}

              {/* OpenAI Tags Config */}
              {tagsProvider === 'openai' && (
                <div className="space-y-3">
                  <div className="space-y-2">
                    <Label htmlFor="OPENAI_API_KEY">API Key</Label>
                    <Input id="OPENAI_API_KEY" name="OPENAI_API_KEY" type="password" defaultValue={config.OPENAI_API_KEY || ''} placeholder="sk-..." />
                    <p className="text-xs text-muted-foreground">Your OpenAI API key from <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">platform.openai.com</a></p>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="AI_MODEL_TAGS_OPENAI">Model</Label>
                    <select
                      id="AI_MODEL_TAGS_OPENAI"
                      name="AI_MODEL_TAGS"
                      defaultValue={config.AI_MODEL_TAGS || 'gpt-4o-mini'}
                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                    >
                      {MODELS_2026.openai.tags.map((model) => (
                        <option key={model} value={model}>{model}</option>
                      ))}
                    </select>
                    <p className="text-xs text-muted-foreground"><strong className="text-green-600">gpt-4o-mini</strong> = Best value • <strong className="text-blue-600">gpt-4o</strong> = Best quality</p>
                  </div>
                </div>
              )}

              {/* Custom OpenAI Tags Config */}
              {tagsProvider === 'custom' && (
                <div className="space-y-3">
                  <div className="space-y-2">
                    <Label htmlFor="CUSTOM_OPENAI_BASE_URL_TAGS">Base URL</Label>
                    <Input id="CUSTOM_OPENAI_BASE_URL_TAGS" name="CUSTOM_OPENAI_BASE_URL_TAGS" defaultValue={config.CUSTOM_OPENAI_BASE_URL || ''} placeholder="https://api.example.com/v1" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="CUSTOM_OPENAI_API_KEY_TAGS">API Key</Label>
                    <Input id="CUSTOM_OPENAI_API_KEY_TAGS" name="CUSTOM_OPENAI_API_KEY_TAGS" type="password" defaultValue={config.CUSTOM_OPENAI_API_KEY || ''} placeholder="sk-..." />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="AI_MODEL_TAGS_CUSTOM">Model</Label>
                    <select
                      id="AI_MODEL_TAGS_CUSTOM"
                      name="AI_MODEL_TAGS"
                      defaultValue={config.AI_MODEL_TAGS || 'gpt-4o-mini'}
                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                    >
                      {MODELS_2026.custom.tags.map((model) => (
                        <option key={model} value={model}>{model}</option>
                      ))}
                    </select>
                    <p className="text-xs text-muted-foreground">Common models for OpenAI-compatible APIs</p>
                  </div>
                </div>
              )}
            </div>

            {/* Embeddings Section */}
            <div className="space-y-4 p-4 border rounded-lg bg-green-50/50 dark:bg-green-950/20">
              <h3 className="text-base font-semibold flex items-center gap-2">
                <span className="text-green-600">🔍</span> Embeddings Provider
              </h3>
              <p className="text-xs text-muted-foreground">AI provider for semantic search embeddings. Recommended: OpenAI (best quality).</p>

              <div className="space-y-2">
                <Label htmlFor="AI_PROVIDER_EMBEDDING">Provider</Label>
                <select
                  id="AI_PROVIDER_EMBEDDING"
                  name="AI_PROVIDER_EMBEDDING"
                  value={embeddingsProvider}
                  onChange={(e) => setEmbeddingsProvider(e.target.value as AIProvider)}
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                >
                  <option value="ollama">🦙 Ollama (Local & Free)</option>
                  <option value="openai">🤖 OpenAI (text-embedding-4)</option>
                  <option value="custom">🔧 Custom OpenAI-Compatible</option>
                </select>
              </div>

              {/* Ollama Embeddings Config */}
              {embeddingsProvider === 'ollama' && (
                <div className="space-y-3">
                  <div className="space-y-2">
                    <Label htmlFor="OLLAMA_BASE_URL_EMBEDDING">Base URL</Label>
                    <Input id="OLLAMA_BASE_URL_EMBEDDING" name="OLLAMA_BASE_URL_EMBEDDING" defaultValue={config.OLLAMA_BASE_URL || 'http://localhost:11434'} placeholder="http://localhost:11434" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="AI_MODEL_EMBEDDING_OLLAMA">Model</Label>
                    <select
                      id="AI_MODEL_EMBEDDING_OLLAMA"
                      name="AI_MODEL_EMBEDDING"
                      defaultValue={config.AI_MODEL_EMBEDDING || 'embeddinggemma:latest'}
                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                    >
                      {MODELS_2026.ollama.embeddings.map((model) => (
                        <option key={model} value={model}>{model}</option>
                      ))}
                    </select>
                    <p className="text-xs text-muted-foreground">Select an embedding model installed on your system</p>
                  </div>
                </div>
              )}

              {/* OpenAI Embeddings Config */}
              {embeddingsProvider === 'openai' && (
                <div className="space-y-3">
                  <div className="space-y-2">
                    <Label htmlFor="OPENAI_API_KEY">API Key</Label>
                    <Input id="OPENAI_API_KEY" name="OPENAI_API_KEY" type="password" defaultValue={config.OPENAI_API_KEY || ''} placeholder="sk-..." />
                    <p className="text-xs text-muted-foreground">Your OpenAI API key from <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">platform.openai.com</a></p>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="AI_MODEL_EMBEDDING_OPENAI">Model</Label>
                    <select
                      id="AI_MODEL_EMBEDDING_OPENAI"
                      name="AI_MODEL_EMBEDDING"
                      defaultValue={config.AI_MODEL_EMBEDDING || 'text-embedding-3-small'}
                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                    >
                      {MODELS_2026.openai.embeddings.map((model) => (
                        <option key={model} value={model}>{model}</option>
                      ))}
                    </select>
                    <p className="text-xs text-muted-foreground"><strong className="text-green-600">text-embedding-3-small</strong> = Best value • <strong className="text-blue-600">text-embedding-3-large</strong> = Best quality</p>
                  </div>
                </div>
              )}

              {/* Custom OpenAI Embeddings Config */}
              {embeddingsProvider === 'custom' && (
                <div className="space-y-3">
                  <div className="space-y-2">
                    <Label htmlFor="CUSTOM_OPENAI_BASE_URL_EMBEDDING">Base URL</Label>
                    <Input id="CUSTOM_OPENAI_BASE_URL_EMBEDDING" name="CUSTOM_OPENAI_BASE_URL_EMBEDDING" defaultValue={config.CUSTOM_OPENAI_BASE_URL || ''} placeholder="https://api.example.com/v1" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="CUSTOM_OPENAI_API_KEY_EMBEDDING">API Key</Label>
                    <Input id="CUSTOM_OPENAI_API_KEY_EMBEDDING" name="CUSTOM_OPENAI_API_KEY_EMBEDDING" type="password" defaultValue={config.CUSTOM_OPENAI_API_KEY || ''} placeholder="sk-..." />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="AI_MODEL_EMBEDDING_CUSTOM">Model</Label>
                    <select
                      id="AI_MODEL_EMBEDDING_CUSTOM"
                      name="AI_MODEL_EMBEDDING"
                      defaultValue={config.AI_MODEL_EMBEDDING || 'text-embedding-3-small'}
                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                    >
                      {MODELS_2026.custom.embeddings.map((model) => (
                        <option key={model} value={model}>{model}</option>
                      ))}
                    </select>
                    <p className="text-xs text-muted-foreground">Common embedding models for OpenAI-compatible APIs</p>
                  </div>
                </div>
              )}
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button type="submit" disabled={isSaving}>{isSaving ? 'Saving...' : 'Save AI Settings'}</Button>
            <Link href="/admin/ai-test">
              <Button type="button" variant="outline" className="gap-2">
                <TestTube className="h-4 w-4" />
                Open AI Test Panel
                <ExternalLink className="h-3 w-3" />
              </Button>
            </Link>
          </CardFooter>
        </form>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>SMTP Configuration</CardTitle>
          <CardDescription>Configure email server for password resets.</CardDescription>
        </CardHeader>
        <form action={handleSaveSMTP}>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <label htmlFor="SMTP_HOST" className="text-sm font-medium">Host</label>
                <Input id="SMTP_HOST" name="SMTP_HOST" defaultValue={config.SMTP_HOST || ''} placeholder="smtp.example.com" />
              </div>
              <div className="space-y-2">
                <label htmlFor="SMTP_PORT" className="text-sm font-medium">Port</label>
                <Input id="SMTP_PORT" name="SMTP_PORT" defaultValue={config.SMTP_PORT || '587'} placeholder="587" />
              </div>
            </div>

            <div className="space-y-2">
              <label htmlFor="SMTP_USER" className="text-sm font-medium">Username</label>
              <Input id="SMTP_USER" name="SMTP_USER" defaultValue={config.SMTP_USER || ''} />
            </div>

            <div className="space-y-2">
              <label htmlFor="SMTP_PASS" className="text-sm font-medium">Password</label>
              <Input id="SMTP_PASS" name="SMTP_PASS" type="password" defaultValue={config.SMTP_PASS || ''} />
            </div>

            <div className="space-y-2">
              <label htmlFor="SMTP_FROM" className="text-sm font-medium">From Email</label>
              <Input id="SMTP_FROM" name="SMTP_FROM" defaultValue={config.SMTP_FROM || 'noreply@memento.app'} />
            </div>

            <div className="flex items-center space-x-2">
              <Checkbox
                id="SMTP_SECURE"
                checked={smtpSecure}
                onCheckedChange={(c) => setSmtpSecure(!!c)}
              />
              <label
                htmlFor="SMTP_SECURE"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                Force SSL/TLS (usually for port 465)
              </label>
            </div>

            <div className="flex items-center space-x-2">
              <Checkbox
                id="SMTP_IGNORE_CERT"
                checked={smtpIgnoreCert}
                onCheckedChange={(c) => setSmtpIgnoreCert(!!c)}
              />
              <label
                htmlFor="SMTP_IGNORE_CERT"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-yellow-600"
              >
                Ignore Certificate Errors (Self-hosted/Dev only)
              </label>
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button type="submit" disabled={isSaving}>Save SMTP Settings</Button>
            <Button type="button" variant="secondary" onClick={handleTestEmail} disabled={isTesting}>
              {isTesting ? 'Sending...' : 'Test Email'}
            </Button>
          </CardFooter>
        </form>
      </Card>
    </div>
  )
}