'use client'

/**
 * Agent Form Component
 * Simplified form for creating and editing agents.
 * Novice-friendly: hides system prompt and tools behind "Advanced mode".
 */

import { useState, useMemo, useRef } from 'react'
import { X, Plus, Trash2, Globe, FileSearch, FilePlus, FileText, ExternalLink, Brain, ChevronDown, ChevronUp, HelpCircle, Mail, ImageIcon } from 'lucide-react'
import { toast } from 'sonner'
import { useLanguage } from '@/lib/i18n'
import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'

// --- Types ---

type AgentType = 'scraper' | 'researcher' | 'monitor' | 'custom'

/** Small "?" tooltip shown next to form labels */
function FieldHelp({ tooltip }: { tooltip: string }) {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <button type="button" className="inline-flex items-center ml-1 text-slate-300 hover:text-slate-500 transition-colors">
          <HelpCircle className="w-3.5 h-3.5" />
        </button>
      </TooltipTrigger>
      <TooltipContent side="right" className="max-w-xs text-balance">
        {tooltip}
      </TooltipContent>
    </Tooltip>
  )
}

interface AgentFormProps {
  agent?: {
    id: string
    name: string
    description?: string | null
    type?: string | null
    role: string
    sourceUrls?: string | null
    sourceNotebookId?: string | null
    targetNotebookId?: string | null
    frequency: string
    tools?: string | null
    maxSteps?: number
    notifyEmail?: boolean
    includeImages?: boolean
  } | null
  notebooks: { id: string; name: string; icon?: string | null }[]
  onSave: (data: FormData) => Promise<void>
  onCancel: () => void
}

// --- Tool presets per type ---
const TOOL_PRESETS: Record<string, string[]> = {
  scraper: ['web_scrape', 'note_create', 'memory_search'],
  researcher: ['web_search', 'web_scrape', 'note_search', 'note_create', 'memory_search'],
  monitor: ['note_search', 'note_read', 'note_create', 'memory_search'],
  custom: ['memory_search'],
}

// --- Component ---

export function AgentForm({ agent, notebooks, onSave, onCancel }: AgentFormProps) {
  const { t } = useLanguage()
  const [name, setName] = useState(agent?.name || '')
  const [description, setDescription] = useState(agent?.description || '')
  const [type, setType] = useState<AgentType>((agent?.type as AgentType) || 'scraper')
  const [role, setRole] = useState(agent?.role || '')
  const [urls, setUrls] = useState<string[]>(() => {
    if (agent?.sourceUrls) {
      try { return JSON.parse(agent.sourceUrls) } catch { return [''] }
    }
    return ['']
  })
  const [sourceNotebookId, setSourceNotebookId] = useState(agent?.sourceNotebookId || '')
  const [targetNotebookId, setTargetNotebookId] = useState(agent?.targetNotebookId || '')
  const [frequency, setFrequency] = useState(agent?.frequency || 'manual')
  const [selectedTools, setSelectedTools] = useState<string[]>(() => {
    if (agent?.tools) {
      try {
        const parsed = JSON.parse(agent.tools)
        if (parsed.length > 0) return parsed
      } catch { /* fall through to presets */ }
    }
    // New agent or old agent with empty tools: use preset defaults
    const defaultType = (agent?.type as AgentType) || 'scraper'
    return TOOL_PRESETS[defaultType] || []
  })
  const [maxSteps, setMaxSteps] = useState(agent?.maxSteps || 10)
  const [notifyEmail, setNotifyEmail] = useState(agent?.notifyEmail || false)
  const [includeImages, setIncludeImages] = useState(agent?.includeImages || false)
  const [isSaving, setIsSaving] = useState(false)
  const [showAdvanced, setShowAdvanced] = useState(() => {
    // Auto-open advanced if editing an agent with custom tools or custom prompt
    if (agent?.tools) {
      try {
        const tools = JSON.parse(agent.tools)
        if (tools.length > 0) return true
      } catch { /* ignore */ }
    }
    // Also open if agent has a custom role (instructions)
    if (agent?.role && agent.role.trim().length > 0) return true
    return false
  })

  // Tool definitions
  const availableTools = useMemo(() => [
    { id: 'web_search', icon: Globe, labelKey: 'agents.tools.webSearch', external: true },
    { id: 'web_scrape', icon: ExternalLink, labelKey: 'agents.tools.webScrape', external: true },
    { id: 'note_search', icon: FileSearch, labelKey: 'agents.tools.noteSearch', external: false },
    { id: 'note_read', icon: FileText, labelKey: 'agents.tools.noteRead', external: false },
    { id: 'note_create', icon: FilePlus, labelKey: 'agents.tools.noteCreate', external: false },
    { id: 'url_fetch', icon: ExternalLink, labelKey: 'agents.tools.urlFetch', external: false },
    { id: 'memory_search', icon: Brain, labelKey: 'agents.tools.memorySearch', external: false },
  ], [])

  // Track previous type to detect user-initiated type changes
  const prevTypeRef = useRef(type)

  // When user explicitly changes type (not on mount), reset tools to presets
  if (prevTypeRef.current !== type) {
    prevTypeRef.current = type
    // This is a user-initiated type change, not a mount
    // We queue the state update to happen after render
    setSelectedTools(TOOL_PRESETS[type] || [])
    setRole('')
  }

  const addUrl = () => setUrls([...urls, ''])
  const removeUrl = (index: number) => setUrls(urls.filter((_, i) => i !== index))
  const updateUrl = (index: number, value: string) => {
    const newUrls = [...urls]
    newUrls[index] = value
    setUrls(newUrls)
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!name.trim()) {
      toast.error(t('agents.form.nameRequired'))
      return
    }

    setIsSaving(true)
    try {
      const formData = new FormData()
      formData.set('name', name.trim())
      formData.set('description', description.trim())
      formData.set('type', type)
      formData.set('role', role || t(`agents.defaultRoles.${type}`))
      formData.set('frequency', frequency)
      formData.set('targetNotebookId', targetNotebookId)

      if (type === 'monitor') {
        formData.set('sourceNotebookId', sourceNotebookId)
      }

      const validUrls = urls.filter(u => u.trim())
      if (validUrls.length > 0) {
        formData.set('sourceUrls', JSON.stringify(validUrls))
      }

      formData.set('tools', JSON.stringify(selectedTools))
      formData.set('maxSteps', String(maxSteps))
      formData.set('notifyEmail', String(notifyEmail))
      formData.set('includeImages', String(includeImages))

      await onSave(formData)
    } catch {
      toast.error(t('agents.toasts.saveError'))
    } finally {
      setIsSaving(false)
    }
  }

  const showSourceNotebook = type === 'monitor'

  const agentTypes: { value: AgentType; labelKey: string; descKey: string }[] = [
    { value: 'researcher', labelKey: 'agents.types.researcher', descKey: 'agents.typeDescriptions.researcher' },
    { value: 'scraper', labelKey: 'agents.types.scraper', descKey: 'agents.typeDescriptions.scraper' },
    { value: 'monitor', labelKey: 'agents.types.monitor', descKey: 'agents.typeDescriptions.monitor' },
    { value: 'custom', labelKey: 'agents.types.custom', descKey: 'agents.typeDescriptions.custom' },
  ]

  return (
    <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
        {/* Header — editable agent name */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-100">
          <input
            type="text"
            value={name}
            onChange={e => setName(e.target.value)}
            className="text-lg font-semibold text-slate-800 bg-transparent border-none outline-none focus:ring-0 p-0 flex-1 placeholder:text-slate-300"
            placeholder={t('agents.form.namePlaceholder')}
            required
          />
          <button onClick={onCancel} className="p-1 rounded-md hover:bg-slate-100 ml-3">
            <X className="w-5 h-5 text-slate-400" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="p-6 space-y-5">
          {/* Agent Type */}
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-2">{t('agents.form.agentType')}<FieldHelp tooltip={t('agents.help.tooltips.agentType')} /></label>
            <div className="grid grid-cols-2 gap-2">
              {agentTypes.map(at => (
                <button
                  key={at.value}
                  type="button"
                  onClick={() => setType(at.value)}
                  className={`
                    text-left px-3 py-2.5 rounded-lg border-2 transition-all text-sm
                    ${type === at.value
                      ? 'border-primary bg-primary/5 text-primary font-medium'
                      : 'border-slate-200 text-slate-600 hover:border-slate-300'}
                  `}
                >
                  <div className="font-medium">{t(at.labelKey)}</div>
                  <div className="text-xs text-slate-400 mt-0.5">{t(at.descKey)}</div>
                </button>
              ))}
            </div>
          </div>

          {/* Research Topic (researcher only) — replaces Description for this type */}
          {type === 'researcher' && (
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('agents.form.researchTopic')}<FieldHelp tooltip={t('agents.help.tooltips.researchTopic')} /></label>
              <input
                type="text"
                value={description}
                onChange={e => setDescription(e.target.value)}
                className="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"
                placeholder={t('agents.form.researchTopicPlaceholder')}
              />
            </div>
          )}

          {/* Description (for non-researcher types) */}
          {type !== 'researcher' && (
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('agents.form.description')}<FieldHelp tooltip={t('agents.help.tooltips.description')} /></label>
              <input
                type="text"
                value={description}
                onChange={e => setDescription(e.target.value)}
                className="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"
                placeholder={t('agents.form.descriptionPlaceholder')}
              />
            </div>
          )}

          {/* URLs (scraper and custom only — researcher uses search, not URLs) */}
          {(type === 'scraper' || type === 'custom') && (
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1.5">
                {t('agents.form.urlsLabel')}<FieldHelp tooltip={t('agents.help.tooltips.urls')} />
              </label>
              <div className="space-y-2">
                {urls.map((url, i) => (
                  <div key={i} className="flex gap-2">
                    <input
                      type="url"
                      value={url}
                      onChange={e => updateUrl(i, e.target.value)}
                      className="flex-1 px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"
                      placeholder="https://example.com"
                    />
                    {urls.length > 1 && (
                      <button
                        type="button"
                        onClick={() => removeUrl(i)}
                        className="p-2 text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    )}
                  </div>
                ))}
                <button
                  type="button"
                  onClick={addUrl}
                  className="flex items-center gap-1.5 text-xs text-primary hover:text-primary/80 font-medium"
                >
                  <Plus className="w-3.5 h-3.5" />
                  {t('agents.form.addUrl')}
                </button>
              </div>
            </div>
          )}

          {/* Source Notebook (monitor only) */}
          {showSourceNotebook && (
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('agents.form.sourceNotebook')}<FieldHelp tooltip={t('agents.help.tooltips.sourceNotebook')} /></label>
              <select
                value={sourceNotebookId}
                onChange={e => setSourceNotebookId(e.target.value)}
                className="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white"
              >
                <option value="">{t('agents.form.selectNotebook')}</option>
                {notebooks.map(nb => (
                  <option key={nb.id} value={nb.id}>
                    {nb.name}
                  </option>
                ))}
              </select>
            </div>
          )}

          {/* Target Notebook */}
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('agents.form.targetNotebook')}<FieldHelp tooltip={t('agents.help.tooltips.targetNotebook')} /></label>
            <select
              value={targetNotebookId}
              onChange={e => setTargetNotebookId(e.target.value)}
              className="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white"
            >
              <option value="">{t('agents.form.inbox')}</option>
              {notebooks.map(nb => (
                <option key={nb.id} value={nb.id}>
                  {nb.name}
                </option>
              ))}
            </select>
          </div>

          {/* Frequency */}
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('agents.form.frequency')}<FieldHelp tooltip={t('agents.help.tooltips.frequency')} /></label>
            <select
              value={frequency}
              onChange={e => setFrequency(e.target.value)}
              className="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white"
            >
              <option value="manual">{t('agents.frequencies.manual')}</option>
              <option value="hourly">{t('agents.frequencies.hourly')}</option>
              <option value="daily">{t('agents.frequencies.daily')}</option>
              <option value="weekly">{t('agents.frequencies.weekly')}</option>
              <option value="monthly">{t('agents.frequencies.monthly')}</option>
            </select>
          </div>

          {/* Email Notification */}
          <div
            onClick={() => setNotifyEmail(!notifyEmail)}
            className={`flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all ${
              notifyEmail
                ? 'border-primary bg-primary/5'
                : 'border-slate-200 hover:border-slate-300'
            }`}
          >
            <Mail className={`w-4 h-4 flex-shrink-0 ${notifyEmail ? 'text-primary' : 'text-slate-400'}`} />
            <div className="flex-1 min-w-0">
              <div className="text-sm font-medium text-slate-700">{t('agents.form.notifyEmail')}</div>
              <div className="text-xs text-slate-400">{t('agents.form.notifyEmailHint')}</div>
            </div>
            <div className={`w-9 h-5 rounded-full transition-colors flex-shrink-0 ${notifyEmail ? 'bg-primary' : 'bg-slate-200'}`}>
              <div className={`w-4 h-4 bg-white rounded-full shadow-sm transition-transform mt-0.5 ${notifyEmail ? 'translate-x-4.5 ml-0.5' : 'ml-0.5'}`} />
            </div>
          </div>

          {/* Include Images */}
          <div
            onClick={() => setIncludeImages(!includeImages)}
            className={`flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all ${
              includeImages
                ? 'border-primary bg-primary/5'
                : 'border-slate-200 hover:border-slate-300'
            }`}
          >
            <ImageIcon className={`w-4 h-4 flex-shrink-0 ${includeImages ? 'text-primary' : 'text-slate-400'}`} />
            <div className="flex-1 min-w-0">
              <div className="text-sm font-medium text-slate-700">{t('agents.form.includeImages')}</div>
              <div className="text-xs text-slate-400">{t('agents.form.includeImagesHint')}</div>
            </div>
            <div className={`w-9 h-5 rounded-full transition-colors flex-shrink-0 ${includeImages ? 'bg-primary' : 'bg-slate-200'}`}>
              <div className={`w-4 h-4 bg-white rounded-full shadow-sm transition-transform mt-0.5 ${includeImages ? 'translate-x-4.5 ml-0.5' : 'ml-0.5'}`} />
            </div>
          </div>

          {/* Advanced mode toggle */}
          <button
            type="button"
            onClick={() => setShowAdvanced(!showAdvanced)}
            className="flex items-center gap-2 text-sm text-slate-500 hover:text-slate-700 font-medium w-full pt-2 border-t border-slate-100"
          >
            {showAdvanced ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
            {t('agents.form.advancedMode')}
          </button>

          {/* Advanced: System Prompt */}
          {showAdvanced && (
            <>
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">
                  {t('agents.form.instructions')}
                  <FieldHelp tooltip={t('agents.help.tooltips.instructions')} />
                  <span className="text-xs text-slate-400 font-normal ml-1">({t('agents.form.instructionsHint')})</span>
                </label>
                <textarea
                  value={role}
                  onChange={e => setRole(e.target.value)}
                  rows={3}
                  className="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary resize-y min-h-[80px]"
                  placeholder={t('agents.form.instructionsPlaceholder')}
                />
              </div>

              {/* Advanced: Tools */}
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-2">{t('agents.tools.title')}<FieldHelp tooltip={t('agents.help.tooltips.tools')} /></label>
                <div className="grid grid-cols-2 gap-2">
                  {availableTools.map(at => {
                    const Icon = at.icon
                    const isSelected = selectedTools.includes(at.id)
                    return (
                      <button
                        key={at.id}
                        type="button"
                        onClick={() => {
                          setSelectedTools(prev =>
                            isSelected ? prev.filter(t => t !== at.id) : [...prev, at.id]
                          )
                        }}
                        className={`
                          flex items-center gap-2 px-3 py-2 rounded-lg border text-sm transition-all text-left
                          ${isSelected
                            ? 'border-primary bg-primary/5 text-primary font-medium'
                            : 'border-slate-200 text-slate-600 hover:border-slate-300'}
                        `}
                      >
                        <Icon className="w-4 h-4 flex-shrink-0" />
                        <span>{t(at.labelKey)}</span>
                        {at.external && !isSelected && (
                          <span className="ml-auto text-[10px] text-amber-500 bg-amber-50 px-1.5 py-0.5 rounded-full">{t('agents.tools.configNeeded')}</span>
                        )}
                      </button>
                    )
                  })}
                </div>
                {selectedTools.length > 0 && (
                  <p className="text-xs text-slate-400 mt-1.5">
                    {t('agents.tools.selected', { count: selectedTools.length })}
                  </p>
                )}
              </div>

              {/* Advanced: Max Steps */}
              {selectedTools.length > 0 && (
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1.5">
                    {t('agents.tools.maxSteps')}<FieldHelp tooltip={t('agents.help.tooltips.maxSteps')} />
                    <span className="text-slate-400 font-normal ml-1">({maxSteps})</span>
                  </label>
                  <input
                    type="range"
                    min={3}
                    max={25}
                    value={maxSteps}
                    onChange={e => setMaxSteps(Number(e.target.value))}
                    className="w-full accent-primary"
                  />
                  <div className="flex justify-between text-xs text-slate-400">
                    <span>3</span>
                    <span>25</span>
                  </div>
                </div>
              )}
            </>
          )}

          {/* Actions */}
          <div className="flex items-center justify-end gap-3 pt-2">
            <button
              type="button"
              onClick={onCancel}
              className="px-4 py-2 text-sm font-medium text-slate-600 bg-slate-100 rounded-lg hover:bg-slate-200 transition-colors"
            >
              {t('agents.form.cancel')}
            </button>
            <button
              type="submit"
              disabled={isSaving}
              className="px-4 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50"
            >
              {isSaving ? t('agents.form.saving') : agent ? t('agents.form.save') : t('agents.form.create')}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}