Momento/memento-note/components/agents/agent-templates.tsx

'use client'

import { useState } from 'react'
import {
  Globe,
  Search,
  Eye,
  Settings,
  Plus,
  Loader2,
  Presentation,
  Pencil,
} from 'lucide-react'
import { toast } from 'sonner'
import { useLanguage } from '@/lib/i18n'

interface AgentTemplatesProps {
  onInstalled: () => void
  existingAgentNames: string[]
}

const templateConfig = [
  { id: 'veilleAI', type: 'scraper', roleKey: 'agents.defaultRoles.scraper', urls: [
    'https://www.theverge.com/rss/ai-artificial-intelligence/index.xml',
    'https://techcrunch.com/category/artificial-intelligence/feed/',
    'https://feeds.arstechnica.com/arstechnica/technology-lab',
    'https://www.technologyreview.com/feed/',
    'https://www.wired.com/feed/',
    'https://korben.info/feed',
  ], frequency: 'weekly' },
  { id: 'veilleTech', type: 'scraper', roleKey: 'agents.defaultRoles.scraper', urls: [
    'https://news.ycombinator.com/rss',
    'https://dev.to/feed',
    'https://www.producthunt.com/feed',
  ], frequency: 'daily' },
  { id: 'veilleDev', type: 'scraper', roleKey: 'agents.defaultRoles.scraper', urls: [
    'https://dev.to/feed/tag/javascript',
    'https://dev.to/feed/tag/typescript',
    'https://dev.to/feed/tag/react',
  ], frequency: 'weekly' },
  { id: 'surveillant', type: 'monitor', roleKey: 'agents.defaultRoles.monitor', urls: [], frequency: 'weekly' },
  { id: 'chercheur', type: 'researcher', roleKey: 'agents.defaultRoles.researcher', urls: [], frequency: 'manual' },
  { id: 'slideGenerator', type: 'slide-generator', roleKey: 'agents.defaultRoles.slideGenerator', urls: [], frequency: 'manual' },
  { id: 'excalidrawGenerator', type: 'excalidraw-generator', roleKey: 'agents.defaultRoles.excalidrawGenerator', urls: [], frequency: 'manual' },
] as const

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

export function AgentTemplates({ onInstalled, existingAgentNames }: AgentTemplatesProps) {
  const { t } = useLanguage()
  const [installingId, setInstallingId] = useState<string | null>(null)

  const handleInstall = async (tpl: typeof templateConfig[number]) => {
    setInstallingId(tpl.id)
    try {
      const { createAgent } = await import('@/app/actions/agent-actions')
      const nameKey = `agents.templates.${tpl.id}.name` as const
      const descKey = `agents.templates.${tpl.id}.description` as const
      const baseName = t(nameKey)
      let resolvedName = baseName
      if (existingAgentNames.includes(baseName)) {
        let n = 2
        while (existingAgentNames.includes(`${baseName} ${n}`)) n++
        resolvedName = `${baseName} ${n}`
      }
      await createAgent({
        name: resolvedName,
        description: t(descKey),
        type: tpl.type,
        role: t(tpl.roleKey),
        sourceUrls: tpl.urls.length > 0 ? [...tpl.urls] : undefined,
        frequency: tpl.frequency,
        tools: tpl.type === 'scraper'
          ? ['web_scrape', 'note_create']
          : tpl.type === 'researcher'
            ? ['web_search', 'web_scrape', 'note_search', 'note_create']
            : tpl.type === 'monitor'
              ? ['note_search', 'note_read', 'note_create']
              : tpl.type === 'slide-generator'
                ? ['note_search', 'note_read', 'generate_pptx']
                : tpl.type === 'excalidraw-generator'
                  ? ['note_search', 'note_read', 'generate_excalidraw']
                  : [],
      })
      toast.success(t('agents.toasts.installSuccess', { name: resolvedName }))
      onInstalled()
    } catch {
      toast.error(t('agents.toasts.installError'))
    } finally {
      setInstallingId(null)
    }
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {templateConfig.map(tpl => {
        const Icon = typeIcons[tpl.type] || Settings
        const isInstalling = installingId === tpl.id
        const nameKey = `agents.templates.${tpl.id}.name`
        const descKey = `agents.templates.${tpl.id}.description`

        return (
          <div
            key={tpl.id}
            className="bg-card/40 border border-dashed border-border rounded-2xl p-6 group cursor-pointer hover:bg-card hover:border-foreground/20 transition-all"
          >
            <div className="w-8 h-8 rounded-lg bg-muted flex items-center justify-center text-muted-foreground group-hover:bg-foreground group-hover:text-background mb-4 transition-all">
              <Icon className="w-4 h-4" />
            </div>
            <h4 className="text-[13px] font-bold text-foreground mb-2">{t(nameKey)}</h4>
            <p className="text-xs text-muted-foreground leading-relaxed mb-4">{t(descKey)}</p>
            <button
              onClick={() => handleInstall(tpl)}
              disabled={isInstalling}
              className="text-[11px] font-bold uppercase tracking-widest text-foreground hover:opacity-60 transition-opacity flex items-center gap-2 disabled:opacity-50"
            >
              {isInstalling ? (
                <>
                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
                  {t('agents.templates.installing')}
                </>
              ) : (
                <>
                  <Plus className="w-3.5 h-3.5" />
                  {t('agents.templates.install')}
                </>
              )}
            </button>
          </div>
        )
      })}
    </div>
  )
}