'use client'

import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react'
import { motion } from 'motion/react'
import {
  ArrowLeft,
  Plus,
  Trash2,
  Globe,
  FileSearch,
  FilePlus,
  FileText,
  ExternalLink,
  Brain,
  ChevronDown,
  ChevronUp,
  HelpCircle,
  Mail,
  ImageIcon,
  Presentation,
  Pencil,
  Check,
  Eye,
  Search,
  Settings,
  Clock,
  Activity,
  Sparkles,
  Loader2,
  BookOpen,
  LifeBuoy,
  ListChecks,
} from 'lucide-react'
import { HierarchicalNotebookSelector } from '@/components/hierarchical-notebook-selector'
import { toast } from 'sonner'
import { useLanguage } from '@/lib/i18n'
import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'

type AgentType = 'scraper' | 'researcher' | 'monitor' | 'custom' | 'slide-generator' | 'excalidraw-generator' | 'task-extractor'

function FieldHelp({ tooltip }: { tooltip: string }) {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <button type="button" className="inline-flex items-center ml-1 text-muted-foreground/40 hover:text-muted-foreground transition-colors">
          <HelpCircle className="w-3.5 h-3.5" />
        </button>
      </TooltipTrigger>
      <TooltipContent side="right" className="max-w-xs text-balance">
        {tooltip}
      </TooltipContent>
    </Tooltip>
  )
}

const typeIcons: Record<string, typeof Globe> = {
  scraper: Globe,
  researcher: Search,
  monitor: Eye,
  custom: Settings,
  'slide-generator': Presentation,
  'excalidraw-generator': Pencil,
  'task-extractor': ListChecks,
}

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'],
  'slide-generator': ['generate_pptx'],
  'excalidraw-generator': ['generate_excalidraw'],
  'task-extractor': ['note_search', 'note_read', 'task_extract', 'note_create'],
}

const SLIDE_GENERATOR_THEME_VALUES = [
  'modern_wellness',
  'business_authority',
  'nature_outdoors',
  'vintage_academic',
  'soft_creative',
  'bohemian',
  'vibrant_tech',
  'craft_artisan',
  'tech_night',
  'education_charts',
  'forest_eco',
  'elegant_fashion',
  'art_food',
  'luxury_mystery',
  'pure_tech_blue',
  'coastal_coral',
  'vibrant_orange_mint',
  'platinum_white_gold',
] as const

interface AgentDetailViewProps {
  agent?: {
    id: string
    name: string
    description?: string | null
    type?: string | null
    role: string
    sourceUrls?: string | null
    sourceNotebookId?: string | null
    sourceNoteIds?: string | null
    targetNotebookId?: string | null
    frequency: string
    isEnabled: boolean
    tools?: string | null
    maxSteps?: number
    notifyEmail?: boolean
    includeImages?: boolean
    scheduledTime?: string | null
    scheduledDay?: number | null
    timezone?: string | null
    slideTheme?: string | null
    slideStyle?: string | null
    lastRun: string | Date | null
    nextRun?: string | Date | null
    createdAt: string | Date
    _count: { actions: number }
    actions: { id: string; status: string; createdAt: string | Date }[]
  } | null
  notebooks: { id: string; name: string; icon?: string | null; parentId?: string | null }[]
  onSave: (data: FormData) => Promise<void>
  onBack: () => void
  onOpenLogs: (agentId: string, agentName: string) => void
  onOpenHelp: () => void
  isNew?: boolean
}

export function AgentDetailView({
  agent,
  notebooks,
  onSave,
  onBack,
  onOpenLogs,
  onOpenHelp,
  isNew,
}: AgentDetailViewProps) {
  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 [sourceNoteIds, setSourceNoteIds] = useState<string[]>(() => {
    if (agent?.sourceNoteIds) {
      try { return JSON.parse(agent.sourceNoteIds) } catch { return [] }
    }
    return []
  })
  const [noteOptions, setNoteOptions] = useState<{ id: string; title: string }[]>([])
  const [targetNotebookId, setTargetNotebookId] = useState(agent?.targetNotebookId || '')
  const [frequency, setFrequency] = useState(agent?.frequency || 'manual')
  const [scheduledTime, setScheduledTime] = useState(agent?.scheduledTime || '08:00')
  const [scheduledDay, setScheduledDay] = useState<number>(agent?.scheduledDay ?? 1)
  const [timezone] = useState(() => {
    try { return Intl.DateTimeFormat().resolvedOptions().timeZone } catch { return 'UTC' }
  })
  const [selectedTools, setSelectedTools] = useState<string[]>(() => {
    if (agent?.tools) {
      try {
        const parsed = JSON.parse(agent.tools)
        if (parsed.length > 0) return parsed
      } catch { /* fall through */ }
    }
    return TOOL_PRESETS[(agent?.type as AgentType) || 'scraper'] || []
  })
  const [maxSteps, setMaxSteps] = useState(agent?.maxSteps || 10)
  const [notifyEmail, setNotifyEmail] = useState(agent?.notifyEmail || false)
  const [includeImages, setIncludeImages] = useState(agent?.includeImages || false)
  const [slideTheme, setSlideTheme] = useState(agent?.slideTheme || '')
  const [slideStyle, setSlideStyle] = useState<'soft' | 'sharp' | 'rounded' | 'pill'>(
    (agent?.slideStyle as 'soft' | 'sharp' | 'rounded' | 'pill') || 'soft'
  )
  const [excalidrawStyle, setExcalidrawStyle] = useState<'default' | 'austere' | 'sketch-plus'>(() => {
    if (agent?.slideStyle === 'austere') return 'austere'
    if (agent?.slideStyle === 'sketch-plus') return 'sketch-plus'
    return 'default'
  })
  const [excalidrawType, setExcalidrawType] = useState<'auto' | 'architecture-cloud' | 'flowchart' | 'mindmap' | 'org-chart' | 'timeline' | 'process-map'>(() => {
    const value = (agent?.slideTheme || '').trim()
    if (value === 'auto' || value === 'architecture-cloud' || value === 'mindmap' || value === 'org-chart' || value === 'timeline' || value === 'process-map') return value
    return 'flowchart'
  })
  const [isSaving, setIsSaving] = useState(false)
  const [showAdvanced, setShowAdvanced] = useState(() => {
    if (agent?.tools) {
      try { const tools = JSON.parse(agent.tools); if (tools.length > 0) return true } catch { /* */ }
    }
    if (agent?.role && agent.role.trim().length > 0) return true
    return false
  })

  useEffect(() => {
    if (!sourceNotebookId || (type !== 'slide-generator' && type !== 'excalidraw-generator' && type !== 'monitor')) {
      setNoteOptions([])
      return
    }
    fetch(`/api/notes?notebookId=${sourceNotebookId}&limit=50`)
      .then(r => r.json())
      .then(data => {
        const notes = Array.isArray(data.data) ? data.data : Array.isArray(data) ? data : []
        setNoteOptions(notes.map((n: any) => ({ id: n.id, title: n.title || 'Sans titre' })))
      })
      .catch(() => setNoteOptions([]))
  }, [sourceNotebookId, type])

  const availableTools = useMemo(() => [
    { id: 'web_search', icon: Globe, labelKey: 'agents.tools.webSearch' },
    { id: 'web_scrape', icon: ExternalLink, labelKey: 'agents.tools.webScrape' },
    { id: 'note_search', icon: FileSearch, labelKey: 'agents.tools.noteSearch' },
    { id: 'note_read', icon: FileText, labelKey: 'agents.tools.noteRead' },
    { id: 'note_create', icon: FilePlus, labelKey: 'agents.tools.noteCreate' },
    { id: 'url_fetch', icon: ExternalLink, labelKey: 'agents.tools.urlFetch' },
    { id: 'memory_search', icon: Brain, labelKey: 'agents.tools.memorySearch' },
    { id: 'generate_pptx', icon: Presentation, labelKey: 'agents.tools.generatePptx' },
    { id: 'generate_slides', icon: Presentation, labelKey: 'agents.tools.generateSlides' },
    { id: 'generate_excalidraw', icon: Pencil, labelKey: 'agents.tools.generateExcalidraw' },
  ], [])

  const prevTypeRef = useRef(type)
  if (prevTypeRef.current !== type) {
    prevTypeRef.current = type
    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' || type === 'slide-generator' || type === 'excalidraw-generator') {
        formData.set('sourceNotebookId', sourceNotebookId)
      }
      if (sourceNoteIds.length > 0) {
        formData.set('sourceNoteIds', JSON.stringify(sourceNoteIds))
      }
      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))
      formData.set('scheduledTime', scheduledTime)
      formData.set('scheduledDay', String(scheduledDay))
      formData.set('timezone', timezone)
      if (type === 'slide-generator') {
        if (slideTheme) formData.set('slideTheme', slideTheme)
        formData.set('slideStyle', slideStyle)
      }
      if (type === 'excalidraw-generator') {
        formData.set('slideTheme', excalidrawType)
        formData.set('slideStyle', excalidrawStyle)
      }
      await onSave(formData)
    } catch {
      toast.error(t('agents.toasts.saveError'))
    } finally {
      setIsSaving(false)
    }
  }

  const showSourceNotebook = type === 'monitor' || type === 'slide-generator' || type === 'excalidraw-generator'
  const Icon = typeIcons[type] || Settings

  const frequencyLabel = t(`agents.frequencies.${frequency}`) || frequency
  const successRate = agent?.actions?.length
    ? Math.round((agent.actions.filter(a => a.status === 'success').length / agent.actions.length) * 100 * 10) / 10
    : null

  const sectionTitleCls = 'text-xs font-bold uppercase tracking-[0.3em] text-muted-foreground'
  const cardCls = 'bg-card border border-border rounded-3xl overflow-hidden shadow-sm'
  const labelCls = 'block text-[11px] uppercase tracking-widest font-bold text-muted-foreground'
  const inputCls = 'w-full bg-muted/50 border border-border rounded-xl px-4 py-3 text-sm outline-none focus:ring-1 focus:ring-foreground/10 focus:border-foreground/20 transition-all text-foreground'
  const selectCls = 'w-full bg-muted/50 border border-border rounded-xl px-4 py-3 text-sm outline-none focus:ring-1 focus:ring-foreground/10 focus:border-foreground/20 transition-all cursor-pointer font-medium text-foreground appearance-none'

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className="min-h-full flex flex-col"
    >
      <header className="px-4 sm:px-8 md:px-12 py-5 sm:py-8 md:py-10 border-b border-border bg-background/80 backdrop-blur-md sticky top-0 z-30">
        <div className="flex items-center justify-between max-w-5xl mx-auto">
          <button
            onClick={onBack}
            className="flex items-center gap-3 text-xs font-bold uppercase tracking-widest text-muted-foreground hover:text-foreground transition-colors"
          >
            <ArrowLeft className="w-4 h-4" />
            {t('agents.form.back')}
          </button>
          <div className="flex items-center gap-3">
            <button
              onClick={onOpenHelp}
              className="p-2 text-muted-foreground hover:text-foreground transition-colors"
              title={t('agents.help.title')}
            >
              <LifeBuoy className="w-4 h-4" />
            </button>
            {!isNew && agent && (
              <button
                onClick={() => onOpenLogs(agent.id, agent.name)}
                className="px-5 py-2 text-xs font-bold uppercase tracking-widest border border-border rounded-xl hover:bg-muted transition-all"
              >
                {t('agents.runLog.title')}
              </button>
            )}
            <button
              form="agent-config-form"
              type="submit"
              disabled={isSaving}
              className="px-6 py-2 bg-foreground text-background text-xs font-bold uppercase tracking-widest rounded-xl hover:opacity-90 transition-all shadow-lg shadow-foreground/10 disabled:opacity-50 flex items-center gap-2"
            >
              {isSaving && <Loader2 className="w-3.5 h-3.5 animate-spin" />}
              {isNew ? t('agents.form.create') : t('agents.form.save')}
            </button>
          </div>
        </div>
      </header>

      <div className="flex-1 px-4 sm:px-8 md:px-12 py-8 sm:py-12 md:py-16 max-w-5xl mx-auto w-full space-y-8 sm:space-y-12 md:space-y-16">
        <section className="space-y-8">
          <div className="flex items-end justify-between">
            <div className="space-y-4">
              <div className="flex items-center gap-3">
                <div className="p-4 bg-brand-accent text-white rounded-2xl shadow-xl shadow-brand-accent/10">
                  <Icon className="w-8 h-8" />
                </div>
                <div className="space-y-1">
                  <input
                    type="text"
                    value={name}
                    onChange={e => setName(e.target.value)}
                    className="text-3xl font-memento-serif font-medium text-foreground bg-transparent border-none outline-none placeholder:text-muted-foreground/40 w-full"
                    placeholder={t('agents.form.namePlaceholder')}
                  />
                  <div className="flex items-center gap-3">
                    <span className="text-[10px] font-bold uppercase tracking-widest px-2 py-1 bg-muted text-muted-foreground rounded-md">
                      {isNew ? t('agents.newBadge') : `ID: ${agent?.id?.slice(0, 8)}`}
                    </span>
                    {!isNew && agent?.isEnabled && (
                      <span className="text-[10px] font-bold uppercase tracking-widest px-2 py-1 bg-brand-accent/10 text-brand-accent rounded-md">
                        {t('agents.actions.toggleOn')}
                      </span>
                    )}
                  </div>
                </div>
              </div>
            </div>
            {!isNew && agent && (
              <div className="flex items-center gap-8 text-[12px] uppercase tracking-[0.2em] font-bold text-muted-foreground">
                <div className="flex flex-col items-end gap-1">
                  <span className="opacity-40">{t('agents.status.nextRun')}</span>
                  <span className="text-foreground">{t('agents.metadata.executions', { count: agent._count.actions })}</span>
                </div>
                {successRate !== null && (
                  <div className="flex flex-col items-end gap-1">
                    <span className="opacity-40">Succès</span>
                    <span className="text-brand-accent">{successRate}%</span>
                  </div>
                )}
              </div>
            )}
          </div>
        </section>

        <form id="agent-config-form" onSubmit={handleSubmit}>
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
            <div className="lg:col-span-2 space-y-12">

              <section className="space-y-6">
                <h3 className={sectionTitleCls}>{t('agents.form.agentType')}<FieldHelp tooltip={t('agents.help.tooltips.agentType')} /></h3>
                <div className={cardCls}>
                  <div className="p-8 space-y-8">
                    <div className="grid grid-cols-2 gap-4">
                      {[
                        { value: 'researcher' as AgentType, labelKey: 'agents.types.researcher', descKey: 'agents.typeDescriptions.researcher', icon: Search },
                        { value: 'scraper' as AgentType, labelKey: 'agents.types.scraper', descKey: 'agents.typeDescriptions.scraper', icon: Globe },
                        { value: 'monitor' as AgentType, labelKey: 'agents.types.monitor', descKey: 'agents.typeDescriptions.monitor', icon: Eye },
                        { value: 'custom' as AgentType, labelKey: 'agents.types.custom', descKey: 'agents.typeDescriptions.custom', icon: Settings },
                        { value: 'slide-generator' as AgentType, labelKey: 'agents.types.slideGenerator', descKey: 'agents.typeDescriptions.slideGenerator', icon: Presentation },
                        { value: 'excalidraw-generator' as AgentType, labelKey: 'agents.types.excalidrawGenerator', descKey: 'agents.typeDescriptions.excalidrawGenerator', icon: Pencil },
                        { value: 'task-extractor' as AgentType, labelKey: 'agents.types.taskExtractor', descKey: 'agents.typeDescriptions.taskExtractor', icon: ListChecks },
                      ].map(at => {
                        const TypeIcon = at.icon
                        return (
                          <button
                            key={at.value}
                            type="button"
                            onClick={() => setType(at.value)}
                            className={`p-4 rounded-2xl flex items-center justify-between transition-all cursor-pointer ${
                              type === at.value
                                ? 'border-2 border-foreground bg-muted'
                                : 'border border-border hover:border-foreground/20'
                            }`}
                          >
                            <div className="flex items-center gap-3">
                              <TypeIcon className={`w-4 h-4 ${type === at.value ? 'text-foreground' : 'text-muted-foreground'}`} />
                              <div className="text-left">
                                <div className="text-sm font-medium text-foreground">{t(at.labelKey)}</div>
                                <div className="text-[10px] text-muted-foreground mt-0.5">{t(at.descKey)}</div>
                              </div>
                            </div>
                            <div className={`w-5 h-5 rounded-full flex items-center justify-center ${
                              type === at.value
                                ? 'border-4 border-foreground'
                                : 'border border-border'
                            }`}>
                              {type === at.value && <div className="w-2 h-2 bg-foreground rounded-full" />}
                            </div>
                          </button>
                        )
                      })}
                    </div>
                  </div>
                </div>
              </section>

              <section className="space-y-6">
                <h3 className={sectionTitleCls}>{t('agents.form.configuration')}<FieldHelp tooltip={t('agents.help.tooltips.instructions')} /></h3>
                <div className={cardCls}>
                  <div className="p-8 space-y-8">

                    {type === 'researcher' ? (
                      <div className="space-y-4">
                        <label className={labelCls}>{t('agents.form.researchTopic')}<FieldHelp tooltip={t('agents.help.tooltips.researchTopic')} /></label>
                        <input
                          type="text"
                          value={description}
                          onChange={e => setDescription(e.target.value)}
                          className={inputCls}
                          placeholder={t('agents.form.researchTopicPlaceholder')}
                        />
                      </div>
                    ) : (
                      <div className="space-y-4">
                        <label className={labelCls}>{t('agents.form.description')}<FieldHelp tooltip={t('agents.help.tooltips.description')} /></label>
                        <input
                          type="text"
                          value={description}
                          onChange={e => setDescription(e.target.value)}
                          className={inputCls}
                          placeholder={t('agents.form.descriptionPlaceholder')}
                        />
                      </div>
                    )}

                    {(type === 'scraper' || type === 'custom') && (
                      <div className="space-y-4">
                        <label className={labelCls}>{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={inputCls}
                                placeholder="https://example.com"
                              />
                              {urls.length > 1 && (
                                <button
                                  type="button"
                                  onClick={() => removeUrl(i)}
                                  className="p-2 text-destructive/80 hover:text-destructive hover:bg-destructive/10 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-foreground hover:opacity-60 font-medium"
                          >
                            <Plus className="w-3.5 h-3.5" />
                            {t('agents.form.addUrl')}
                          </button>
                        </div>
                      </div>
                    )}

                    {showSourceNotebook && (
                      <div className="space-y-4">
                        <label className={labelCls}>{t('agents.form.sourceNotebook')}<FieldHelp tooltip={t('agents.help.tooltips.sourceNotebook')} /></label>
                        <HierarchicalNotebookSelector
                          notebooks={notebooks.filter((nb: any) => !nb.trashedAt)}
                          selectedId={sourceNotebookId || null}
                          onSelect={(id) => { setSourceNotebookId(id); setSourceNoteIds([]) }}
                          placeholder={t('agents.form.selectNotebook') || 'Select notebook...'}
                        />
                      </div>
                    )}

                    {(type === 'slide-generator' || type === 'excalidraw-generator') && sourceNotebookId && noteOptions.length > 0 && (
                      <div className="space-y-4">
                        <label className={labelCls}>{t('agents.form.selectNotes')}<FieldHelp tooltip={t('agents.help.tooltips.selectNotes')} /></label>
                        <div className="border border-border rounded-xl max-h-48 overflow-y-auto bg-muted/30">
                          {noteOptions.map(note => {
                            const isSelected = sourceNoteIds.includes(note.id)
                            return (
                              <button
                                key={note.id}
                                type="button"
                                onClick={() => {
                                  setSourceNoteIds(prev =>
                                    isSelected ? prev.filter(id => id !== note.id) : [...prev, note.id]
                                  )
                                }}
                                className={`w-full flex items-center gap-2 px-4 py-2.5 text-sm text-left hover:bg-muted/50 transition-colors ${isSelected ? 'bg-foreground/5' : ''}`}
                              >
                                <div className={`w-4 h-4 rounded border-2 flex items-center justify-center flex-shrink-0 ${isSelected ? 'border-foreground bg-foreground' : 'border-border'}`}>
                                  {isSelected && <Check className="w-3 h-3 text-background" />}
                                </div>
                                <span className={isSelected ? 'text-foreground font-medium' : 'text-foreground'}>{note.title}</span>
                              </button>
                            )
                          })}
                        </div>
                        {sourceNoteIds.length > 0 && (
                          <p className="text-xs text-muted-foreground">{t('agents.form.notesSelected', { count: sourceNoteIds.length })}</p>
                        )}
                      </div>
                    )}

                    {type === 'slide-generator' && (
                      <>
                        <div className="space-y-4">
                          <label className={labelCls}>{t('agents.form.slideTheme')}<FieldHelp tooltip={t('agents.help.tooltips.slideTheme')} /></label>
                          <select value={slideTheme} onChange={e => setSlideTheme(e.target.value)} className={selectCls}>
                            <option value="">{t('agents.form.slideThemeDefault')}</option>
                            {SLIDE_GENERATOR_THEME_VALUES.map(themeId => (
                              <option key={themeId} value={themeId}>{t(`agents.form.slideThemes.${themeId}`)}</option>
                            ))}
                          </select>
                        </div>
                        <div className="space-y-4">
                          <label className={labelCls}>{t('agents.form.slideStyle')}<FieldHelp tooltip={t('agents.help.tooltips.slideStyle')} /></label>
                          <div className="grid grid-cols-2 gap-4">
                            {(['soft', 'sharp', 'rounded', 'pill'] as const).map(s => (
                              <button
                                key={s}
                                type="button"
                                onClick={() => setSlideStyle(s)}
                                className={`p-4 rounded-2xl flex items-center justify-between transition-all cursor-pointer ${
                                  slideStyle === s
                                    ? 'border-2 border-foreground bg-muted'
                                    : 'border border-border hover:border-foreground/20'
                                }`}
                              >
                                <span className={`text-sm font-medium ${slideStyle === s ? 'text-foreground' : 'text-muted-foreground'}`}>
                                  {t(`agents.form.slideStyle${s.charAt(0).toUpperCase() + s.slice(1)}` as any)}
                                </span>
                                <div className={`w-5 h-5 rounded-full flex items-center justify-center ${slideStyle === s ? 'border-4 border-foreground' : 'border border-border'}`}>
                                  {slideStyle === s && <div className="w-2 h-2 bg-foreground rounded-full" />}
                                </div>
                              </button>
                            ))}
                          </div>
                        </div>
                      </>
                    )}

                    {type === 'excalidraw-generator' && (
                      <>
                        <div className="space-y-4">
                          <label className={labelCls}>{t('agents.form.excalidrawDiagramType')}</label>
                          <div className="grid grid-cols-2 gap-3">
                            {([
                              { id: 'auto', labelKey: 'agents.form.excalidrawDiagramTypeAuto' },
                              { id: 'flowchart', labelKey: 'agents.form.excalidrawDiagramTypeFlowchart' },
                              { id: 'mindmap', labelKey: 'agents.form.excalidrawDiagramTypeMindmap' },
                              { id: 'org-chart', labelKey: 'agents.form.excalidrawDiagramTypeOrgChart' },
                              { id: 'timeline', labelKey: 'agents.form.excalidrawDiagramTypeTimeline' },
                              { id: 'process-map', labelKey: 'agents.form.excalidrawDiagramTypeProcessMap' },
                              { id: 'architecture-cloud', labelKey: 'agents.form.excalidrawDiagramTypeArchitectureCloud' },
                            ] as const).map(opt => (
                              <button
                                key={opt.id}
                                type="button"
                                onClick={() => setExcalidrawType(opt.id)}
                                className={`p-3 rounded-xl text-sm text-left transition-all ${
                                  excalidrawType === opt.id
                                    ? 'border-2 border-foreground bg-muted text-foreground font-medium'
                                    : 'border border-border text-muted-foreground hover:border-foreground/20'
                                }`}
                              >
                                {t(opt.labelKey)}
                              </button>
                            ))}
                          </div>
                        </div>
                        <div className="space-y-4">
                          <label className={labelCls}>{t('agents.form.excalidrawDiagramStyle')}</label>
                          <div className="grid grid-cols-3 gap-3">
                            {([
                              { id: 'default', labelKey: 'agents.form.excalidrawDiagramStyleDefault' },
                              { id: 'sketch-plus', labelKey: 'agents.form.excalidrawDiagramStyleSketchPlus' },
                              { id: 'austere', labelKey: 'agents.form.excalidrawDiagramStyleAustere' },
                            ] as const).map(opt => (
                              <button
                                key={opt.id}
                                type="button"
                                onClick={() => setExcalidrawStyle(opt.id)}
                                className={`p-3 rounded-xl text-sm text-left transition-all ${
                                  excalidrawStyle === opt.id
                                    ? 'border-2 border-foreground bg-muted text-foreground font-medium'
                                    : 'border border-border text-muted-foreground hover:border-foreground/20'
                                }`}
                              >
                                {t(opt.labelKey)}
                              </button>
                            ))}
                          </div>
                        </div>
                      </>
                    )}

                    {type !== 'slide-generator' && type !== 'excalidraw-generator' && (
                      <div className="space-y-4">
                        <label className={labelCls}>{t('agents.form.targetNotebook')}<FieldHelp tooltip={t('agents.help.tooltips.targetNotebook')} /></label>
                        <HierarchicalNotebookSelector
                          notebooks={notebooks.filter((nb: any) => !nb.trashedAt)}
                          selectedId={targetNotebookId || null}
                          onSelect={(id) => setTargetNotebookId(id)}
                          placeholder={t('agents.form.inbox') || 'Inbox'}
                        />
                      </div>
                    )}

                    <div className="space-y-4">
                      <label className={labelCls}>{t('agents.form.instructions')}<FieldHelp tooltip={t('agents.help.tooltips.instructions')} /></label>
                      <textarea
                        value={role}
                        onChange={e => setRole(e.target.value)}
                        rows={6}
                        className="w-full bg-muted/50 border border-border rounded-2xl p-6 text-sm outline-none focus:ring-1 focus:ring-foreground/10 focus:border-foreground/20 transition-all font-light leading-relaxed resize-none text-foreground"
                        placeholder={t('agents.form.instructionsPlaceholder')}
                      />
                    </div>
                  </div>
                </div>
              </section>

              {type !== 'slide-generator' && type !== 'excalidraw-generator' && (
              <section className="space-y-6">
                <button
                  type="button"
                  onClick={() => setShowAdvanced(!showAdvanced)}
                  className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground font-bold uppercase tracking-widest w-full pt-2"
                >
                  {showAdvanced ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
                  {t('agents.form.advancedMode')}
                </button>

                {showAdvanced && (
                  <div className={cardCls}>
                    <div className="p-8 space-y-8">
                      <div className="space-y-4">
                        <label className={labelCls}>{t('agents.tools.title')}<FieldHelp tooltip={t('agents.help.tooltips.tools')} /></label>
                        <div className="grid grid-cols-2 gap-3">
                          {availableTools.map(at => {
                            const ToolIcon = 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.5 px-4 py-3 rounded-xl text-sm transition-all text-left ${
                                  isSelected
                                    ? 'border-2 border-foreground bg-muted text-foreground font-medium'
                                    : 'border border-border text-muted-foreground hover:border-foreground/20'
                                }`}
                              >
                                <ToolIcon className="w-4 h-4 flex-shrink-0" />
                                <span>{t(at.labelKey)}</span>
                              </button>
                            )
                          })}
                        </div>
                        {selectedTools.length > 0 && (
                          <p className="text-xs text-muted-foreground mt-1.5">
                            {t('agents.tools.selected', { count: selectedTools.length })}
                          </p>
                        )}
                      </div>

                      {selectedTools.length > 0 && (
                        <div className="space-y-4">
                          <label className={labelCls}>
                            {t('agents.tools.maxSteps')}<FieldHelp tooltip={t('agents.help.tooltips.maxSteps')} />
                            <span className="text-muted-foreground font-normal ml-1">({maxSteps})</span>
                          </label>
                          <input
                            type="range"
                            min={3}
                            max={50}
                            value={maxSteps}
                            onChange={e => setMaxSteps(Number(e.target.value))}
                            className="w-full accent-foreground"
                          />
                          <div className="flex justify-between text-xs text-muted-foreground">
                            <span>3</span>
                            <span>50</span>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </section>
              )}
            </div>

            <div className="space-y-10">
              <section className="space-y-6">
                <h3 className={sectionTitleCls}>{t('agents.form.frequency')}<FieldHelp tooltip={t('agents.help.tooltips.frequency')} /></h3>
                <div className="bg-ink rounded-3xl p-8 space-y-8 text-paper shadow-2xl shadow-ink/20 relative overflow-hidden">
                  <div className="absolute top-0 right-0 p-4 opacity-10">
                    <Clock className="w-24 h-24" />
                  </div>
                  <div className="relative space-y-6">
                    <div className="space-y-2">
                      <span className="text-[10px] uppercase tracking-widest font-bold opacity-60">{t('agents.form.frequency')}</span>
                      <select
                        value={frequency}
                        onChange={e => setFrequency(e.target.value)}
                        className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-lg font-memento-serif italic text-background outline-none cursor-pointer appearance-none"
                      >
                        <option value="manual" className="text-foreground">{t('agents.frequencies.manual')}</option>
                        <option value="hourly" className="text-foreground">{t('agents.frequencies.hourly')}</option>
                        <option value="daily" className="text-foreground">{t('agents.frequencies.daily')}</option>
                        <option value="weekly" className="text-foreground">{t('agents.frequencies.weekly')}</option>
                        <option value="monthly" className="text-foreground">{t('agents.frequencies.monthly')}</option>
                      </select>
                    </div>

                    {frequency !== 'manual' && frequency !== 'hourly' && (
                      <>
                        <div className="h-px bg-white/10" />
                        <div className="space-y-4">
                          {frequency === 'weekly' && (
                            <div className="space-y-2">
                              <span className="text-[10px] uppercase tracking-widest font-bold opacity-60">{t('agents.schedule.dayOfWeek')}</span>
                              <select
                                value={scheduledDay}
                                onChange={e => setScheduledDay(Number(e.target.value))}
                                className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-sm font-bold text-background outline-none cursor-pointer appearance-none"
                              >
                                {[
                                  { value: 0, label: t('agents.schedule.days.mon') },
                                  { value: 1, label: t('agents.schedule.days.tue') },
                                  { value: 2, label: t('agents.schedule.days.wed') },
                                  { value: 3, label: t('agents.schedule.days.thu') },
                                  { value: 4, label: t('agents.schedule.days.fri') },
                                  { value: 5, label: t('agents.schedule.days.sat') },
                                  { value: 6, label: t('agents.schedule.days.sun') },
                                ].map(d => (
                                  <option key={d.value} value={d.value} className="text-foreground">{d.label}</option>
                                ))}
                              </select>
                            </div>
                          )}
                          {frequency === 'monthly' && (
                            <div className="space-y-2">
                              <span className="text-[10px] uppercase tracking-widest font-bold opacity-60">{t('agents.schedule.dayOfMonth')}</span>
                              <select
                                value={scheduledDay}
                                onChange={e => setScheduledDay(Number(e.target.value))}
                                className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-sm font-bold text-background outline-none cursor-pointer appearance-none"
                              >
                                {Array.from({ length: 31 }, (_, i) => i + 1).map(d => (
                                  <option key={d} value={d} className="text-foreground">{d}</option>
                                ))}
                              </select>
                            </div>
                          )}
                          <div className="space-y-2">
                            <span className="text-[10px] uppercase tracking-widest font-bold opacity-60">{t('agents.schedule.time')}</span>
                            <input
                              type="time"
                              value={scheduledTime}
                              onChange={e => setScheduledTime(e.target.value)}
                              className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-sm font-bold text-background outline-none"
                            />
                          </div>
                        </div>
                      </>
                    )}
                  </div>
                </div>
              </section>

              <section className="space-y-6">
                <h3 className={sectionTitleCls}>{t('agents.form.options')}<FieldHelp tooltip={t('agents.help.tooltips.targetNotebook')} /></h3>
                <div className="space-y-3">
                  {type !== 'slide-generator' && type !== 'excalidraw-generator' && (
                    <div
                      onClick={() => setNotifyEmail(!notifyEmail)}
                      className={`flex items-center justify-between p-4 rounded-2xl border cursor-pointer transition-all ${
                        notifyEmail ? 'bg-muted border-foreground/20' : 'bg-card border-border/50'
                      }`}
                    >
                      <div className="flex items-center gap-3">
                        <Mail className={`w-4 h-4 ${notifyEmail ? 'text-foreground' : 'text-muted-foreground'}`} />
                        <div>
                          <p className="text-xs font-bold text-foreground">{t('agents.form.notifyEmail')}</p>
                          <p className="text-[10px] text-muted-foreground">{t('agents.form.notifyEmailHint')}</p>
                        </div>
                      </div>
                      <div className={`relative inline-flex items-center`}>
                        <div className={`w-8 h-4 rounded-full transition-colors ${notifyEmail ? 'bg-foreground' : 'bg-muted-foreground/30'}`}>
                          <span className={`absolute top-0.5 left-[2px] bg-background border border-border rounded-full h-3 w-3 transition-all ${notifyEmail ? 'translate-x-4' : ''}`} />
                        </div>
                      </div>
                    </div>
                  )}

                  {type !== 'slide-generator' && type !== 'excalidraw-generator' && (
                    <div
                      onClick={() => setIncludeImages(!includeImages)}
                      className={`flex items-center justify-between p-4 rounded-2xl border cursor-pointer transition-all ${
                        includeImages ? 'bg-muted border-foreground/20' : 'bg-card border-border/50'
                      }`}
                    >
                      <div className="flex items-center gap-3">
                        <ImageIcon className={`w-4 h-4 ${includeImages ? 'text-foreground' : 'text-muted-foreground'}`} />
                        <div>
                          <p className="text-xs font-bold text-foreground">{t('agents.form.includeImages')}</p>
                          <p className="text-[10px] text-muted-foreground">{t('agents.form.includeImagesHint')}</p>
                        </div>
                      </div>
                      <div className={`relative inline-flex items-center`}>
                        <div className={`w-8 h-4 rounded-full transition-colors ${includeImages ? 'bg-foreground' : 'bg-muted-foreground/30'}`}>
                          <span className={`absolute top-0.5 left-[2px] bg-background border border-border rounded-full h-3 w-3 transition-all ${includeImages ? 'translate-x-4' : ''}`} />
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              </section>

              {!isNew && (
                <section className="pt-6">
                  <button
                    type="button"
                    onClick={async () => {
                      if (!agent || !confirm(t('agents.actions.deleteConfirm', { name: agent.name }))) return
                      try {
                        const { deleteAgent } = await import('@/app/actions/agent-actions')
                        await deleteAgent(agent.id)
                        toast.success(t('agents.toasts.deleted', { name: agent.name }))
                        onBack()
                      } catch {
                        toast.error(t('agents.toasts.deleteError'))
                      }
                    }}
                    className="w-full py-4 border border-destructive/30 text-destructive bg-destructive/5 rounded-2xl text-xs font-bold uppercase tracking-widest hover:bg-destructive/10 transition-colors flex items-center justify-center gap-3"
                  >
                    <Trash2 className="w-4 h-4" />
                    {t('agents.actions.delete')}
                  </button>
                </section>
              )}
            </div>
          </div>
        </form>
      </div>
    </motion.div>
  )
}