feat: Implement Telegram Bot and AI Settings

app/api/proxy/models/route.ts

@@ -0,0 +1,48 @@
+import { NextResponse } from 'next/server'
+
+export async function POST(request: Request) {
+    try {
+        const { endpoint, token } = await request.json()
+
+        if (!endpoint || !token) {
+            return NextResponse.json({ success: false, error: 'Faltan datos' }, { status: 400 })
+        }
+
+        // Try standard /v1/models endpoint
+        // If user provided "https://api.example.com/v1", we append "/models"
+        let targetUrl = endpoint
+        if (targetUrl.endsWith('/')) {
+            targetUrl = `${targetUrl}v1/models`
+        } else if (!targetUrl.endsWith('/models')) {
+            targetUrl = `${targetUrl}/v1/models`
+        }
+
+        const response = await fetch(targetUrl, {
+            method: 'GET',
+            headers: {
+                'Authorization': `Bearer ${token}`,
+                'x-api-key': token
+            }
+        })
+
+        if (!response.ok) {
+            const text = await response.text()
+            return NextResponse.json({ success: false, error: text }, { status: response.status })
+        }
+
+        const data = await response.json()
+        // Normalizing response: OpenAI/Anthropic usually return { data: [{ id: 'model-name' }, ...] }
+
+        let models: string[] = []
+        if (Array.isArray(data.data)) {
+            models = data.data.map((m: any) => m.id)
+        } else if (Array.isArray(data)) {
+            models = data.map((m: any) => m.id || m.model || m)
+        }
+
+        return NextResponse.json({ success: true, models })
+
+    } catch (error: any) {
+        return NextResponse.json({ success: false, error: error.message }, { status: 500 })
+    }
+}

app/api/settings/route.ts

@@ -0,0 +1,48 @@
+import { NextResponse } from 'next/server'
+import fs from 'fs'
+import path from 'path'
+import { AppSettings } from '@/lib/types'
+
+const SETTINGS_FILE = path.join(process.cwd(), 'server-settings.json')
+
+const DEFAULT_SETTINGS: AppSettings = {
+    telegram: {
+        botToken: '',
+        chatId: '',
+    },
+    aiProviders: [],
+}
+
+export async function GET() {
+    try {
+        if (!fs.existsSync(SETTINGS_FILE)) {
+            return NextResponse.json(DEFAULT_SETTINGS)
+        }
+        const data = fs.readFileSync(SETTINGS_FILE, 'utf8')
+        const settings = JSON.parse(data)
+        return NextResponse.json(settings)
+    } catch (error) {
+        console.error('Error reading settings:', error)
+        return NextResponse.json(DEFAULT_SETTINGS, { status: 500 })
+    }
+}
+
+export async function POST(request: Request) {
+    try {
+        const body = await request.json()
+        // Basic validation could go here
+        const settings: AppSettings = {
+            telegram: {
+                botToken: body.telegram?.botToken || '',
+                chatId: body.telegram?.chatId || ''
+            },
+            aiProviders: Array.isArray(body.aiProviders) ? body.aiProviders : []
+        }
+
+        fs.writeFileSync(SETTINGS_FILE, JSON.stringify(settings, null, 2))
+        return NextResponse.json({ success: true, settings })
+    } catch (error) {
+        console.error('Error saving settings:', error)
+        return NextResponse.json({ success: false, error: 'Failed to save settings' }, { status: 500 })
+    }
+}

app/api/test/ai/route.ts

@@ -0,0 +1,59 @@
+import { NextResponse } from 'next/server'
+
+export async function POST(request: Request) {
+    try {
+        const { endpoint, token, model } = await request.json()
+
+        if (!endpoint || !token) {
+            return NextResponse.json(
+                { success: false, error: 'Faltan credenciales (Endpoint o Token)' },
+                { status: 400 }
+            )
+        }
+
+        // Prepare target URL
+        let targetUrl = endpoint
+        if (!targetUrl.endsWith('/messages') && !targetUrl.endsWith('/chat/completions')) {
+            targetUrl = targetUrl.endsWith('/') ? `${targetUrl}v1/messages` : `${targetUrl}/v1/messages`
+        }
+
+        const start = Date.now()
+
+        // Payload for Anthropic /v1/messages
+        const body = {
+            model: model || "gpt-3.5-turbo", // Fallback if no model selected
+            messages: [{ role: "user", content: "Ping" }],
+            max_tokens: 10
+        }
+
+        const response = await fetch(targetUrl, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-api-key': token,
+                'anthropic-version': '2023-06-01',
+                'Authorization': `Bearer ${token}`
+            },
+            body: JSON.stringify(body)
+        })
+
+        const duration = Date.now() - start
+
+        if (!response.ok) {
+            const text = await response.text()
+            return NextResponse.json(
+                { success: false, error: `Error ${response.status}: ${text.slice(0, 100)}` },
+                { status: response.status }
+            )
+        }
+
+        return NextResponse.json({ success: true, latency: duration })
+
+    } catch (error: any) {
+        console.error('AI Test Error:', error)
+        return NextResponse.json(
+            { success: false, error: error.message || 'Error de conexión' },
+            { status: 500 }
+        )
+    }
+}

app/api/test/telegram/route.ts

@@ -0,0 +1,45 @@
+import { NextResponse } from 'next/server'
+
+export async function POST(request: Request) {
+    try {
+        const { botToken, chatId } = await request.json()
+
+        if (!botToken || !chatId) {
+            return NextResponse.json(
+                { success: false, error: 'Faltan credenciales (Token o Chat ID)' },
+                { status: 400 }
+            )
+        }
+
+        const message = "🤖 *Prueba de Conexión*\n\n¡Hola! Si lees esto, tu bot de Finanzas está correctamente configurado. 🚀"
+
+        const url = `https://api.telegram.org/bot${botToken}/sendMessage`
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                chat_id: chatId,
+                text: message,
+                parse_mode: 'Markdown'
+            })
+        })
+
+        const data = await response.json()
+
+        if (!data.ok) {
+            return NextResponse.json(
+                { success: false, error: data.description || 'Error desconocido de Telegram' },
+                { status: 500 }
+            )
+        }
+
+        return NextResponse.json({ success: true, data })
+
+    } catch (error: any) {
+        console.error('Telegram Test Error:', error)
+        return NextResponse.json(
+            { success: false, error: error.message || 'Error interno del servidor' },
+            { status: 500 }
+        )
+    }
+}

app/globals.css

@@ -46,31 +46,7 @@
   --radius: 0.5rem;
 }
 
-@theme inline {
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
+
 
 /* Base Styles */
 html {

app/settings/page.tsx

@@ -0,0 +1,369 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Save, Plus, Trash2, Bot, MessageSquare, Key, Link as LinkIcon, Lock, Send, CheckCircle2, XCircle, Loader2, Sparkles, Box } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { AIServiceConfig, AppSettings } from '@/lib/types'
+
+export default function SettingsPage() {
+    const [loading, setLoading] = useState(true)
+    const [saving, setSaving] = useState(false)
+    const [settings, setSettings] = useState<AppSettings>({
+        telegram: { botToken: '', chatId: '' },
+        aiProviders: []
+    })
+    const [message, setMessage] = useState<{ text: string, type: 'success' | 'error' } | null>(null)
+
+    // Test loading states
+    const [testingTelegram, setTestingTelegram] = useState(false)
+    const [testingAI, setTestingAI] = useState<string | null>(null)
+    const [detectingModels, setDetectingModels] = useState<string | null>(null)
+    const [availableModels, setAvailableModels] = useState<Record<string, string[]>>({})
+
+    useEffect(() => {
+        fetch('/api/settings')
+            .then(res => res.json())
+            .then(data => {
+                setSettings(data)
+                setLoading(false)
+            })
+            .catch(err => {
+                console.error(err)
+                setLoading(false)
+                setMessage({ text: 'Error cargando configuración', type: 'error' })
+            })
+    }, [])
+
+    const handleSave = async () => {
+        setSaving(true)
+        setMessage(null)
+        try {
+            const res = await fetch('/api/settings', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(settings)
+            })
+
+            if (!res.ok) throw new Error('Error saving')
+
+            setMessage({ text: 'Configuración guardada correctamente', type: 'success' })
+        } catch (err) {
+            setMessage({ text: 'Error al guardar la configuración', type: 'error' })
+        } finally {
+            setSaving(false)
+        }
+    }
+
+    const testTelegram = async () => {
+        setTestingTelegram(true)
+        setMessage(null)
+        try {
+            const res = await fetch('/api/test/telegram', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(settings.telegram)
+            })
+            const data = await res.json()
+
+            if (data.success) {
+                setMessage({ text: 'Mensaje de prueba enviado con éxito ✅', type: 'success' })
+            } else {
+                setMessage({ text: `Error: ${data.error}`, type: 'error' })
+            }
+        } catch (err: any) {
+            setMessage({ text: 'Error de conexión al probar Telegram', type: 'error' })
+        } finally {
+            setTestingTelegram(false)
+        }
+    }
+
+    const testAI = async (provider: AIServiceConfig) => {
+        setTestingAI(provider.id)
+        setMessage(null)
+        try {
+            const res = await fetch('/api/test/ai', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(provider)
+            })
+            const data = await res.json()
+
+            if (data.success) {
+                setMessage({ text: `Conexión exitosa con ${provider.model || provider.name} (${data.latency}ms) ✅`, type: 'success' })
+            } else {
+                setMessage({ text: `Error con ${provider.name}: ${data.error}`, type: 'error' })
+            }
+        } catch (err) {
+            setMessage({ text: 'Error al conectar con el proveedor', type: 'error' })
+        } finally {
+            setTestingAI(null)
+        }
+    }
+
+    const detectModels = async (provider: AIServiceConfig) => {
+        setDetectingModels(provider.id)
+        setMessage(null)
+        try {
+            const res = await fetch('/api/proxy/models', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ endpoint: provider.endpoint, token: provider.token })
+            })
+            const data = await res.json()
+
+            if (data.success && data.models.length > 0) {
+                setAvailableModels(prev => ({ ...prev, [provider.id]: data.models }))
+                // Auto select first if none selected
+                if (!provider.model) {
+                    updateProvider(provider.id, 'model', data.models[0])
+                }
+                setMessage({ text: `Se detectaron ${data.models.length} modelos ✅`, type: 'success' })
+            } else {
+                setMessage({ text: `No se pudieron detectar modelos. Ingrésalo manualmente.`, type: 'error' })
+            }
+        } catch (err) {
+            console.error(err)
+            setMessage({ text: 'Error al consultar modelos', type: 'error' })
+        } finally {
+            setDetectingModels(null)
+        }
+    }
+
+    const addProvider = () => {
+        if (settings.aiProviders.length >= 3) return
+        setSettings(prev => ({
+            ...prev,
+            aiProviders: [
+                ...prev.aiProviders,
+                { id: crypto.randomUUID(), name: '', endpoint: '', token: '', model: '' }
+            ]
+        }))
+    }
+
+    const removeProvider = (id: string) => {
+        setSettings(prev => ({
+            ...prev,
+            aiProviders: prev.aiProviders.filter(p => p.id !== id)
+        }))
+    }
+
+    const updateProvider = (id: string, field: keyof AIServiceConfig, value: string) => {
+        setSettings(prev => ({
+            ...prev,
+            aiProviders: prev.aiProviders.map(p =>
+                p.id === id ? { ...p, [field]: value } : p
+            )
+        }))
+    }
+
+    if (loading) return <div className="p-8 text-center text-slate-400">Cargando configuración...</div>
+
+    return (
+        <div className="max-w-4xl mx-auto space-y-8 pb-10">
+
+            <div className="flex items-center justify-between">
+                <div>
+                    <h1 className="text-2xl font-bold text-white">Configuración</h1>
+                    <p className="text-slate-400 text-sm">Gestiona la integración con Telegram e Inteligencia Artificial.</p>
+                </div>
+                <button
+                    onClick={handleSave}
+                    disabled={saving}
+                    className="flex items-center gap-2 px-6 py-2 bg-emerald-500 hover:bg-emerald-400 text-white rounded-lg transition shadow-lg shadow-emerald-500/20 font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                    <Save size={18} />
+                    {saving ? 'Guardando...' : 'Guardar Cambios'}
+                </button>
+            </div>
+
+            {message && (
+                <div className={cn(
+                    "p-4 rounded-lg text-sm font-medium border flex items-center gap-2 animate-in fade-in slide-in-from-top-2",
+                    message.type === 'success' ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-400" : "bg-red-500/10 border-red-500/20 text-red-400"
+                )}>
+                    {message.type === 'success' ? <CheckCircle2 size={18} /> : <XCircle size={18} />}
+                    {message.text}
+                </div>
+            )}
+
+            {/* Telegram Configuration */}
+            <section className="space-y-4">
+                <div className="flex items-center justify-between text-white border-b border-slate-800 pb-2">
+                    <div className="flex items-center gap-2">
+                        <Bot className="text-cyan-400" />
+                        <h2 className="text-lg font-semibold">Telegram Bot</h2>
+                    </div>
+                    <button
+                        onClick={testTelegram}
+                        disabled={testingTelegram || !settings.telegram.botToken || !settings.telegram.chatId}
+                        className="text-xs flex items-center gap-1.5 bg-cyan-500/10 hover:bg-cyan-500/20 text-cyan-400 border border-cyan-500/20 px-3 py-1.5 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                        {testingTelegram ? <Loader2 size={14} className="animate-spin" /> : <Send size={14} />}
+                        Probar Envío
+                    </button>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6 bg-slate-900 border border-slate-800 rounded-xl">
+                    <div className="space-y-2">
+                        <label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-2">
+                            <Key size={12} /> Bot Token
+                        </label>
+                        <input
+                            type="text"
+                            placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"
+                            value={settings.telegram.botToken}
+                            onChange={(e) => setSettings({ ...settings, telegram: { ...settings.telegram, botToken: e.target.value } })}
+                            className="w-full px-4 py-3 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white font-mono text-sm outline-none transition-all placeholder:text-slate-700"
+                        />
+                        <p className="text-[10px] text-slate-500">El token que te da @BotFather.</p>
+                    </div>
+
+                    <div className="space-y-2">
+                        <label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-2">
+                            <MessageSquare size={12} /> Chat ID
+                        </label>
+                        <input
+                            type="text"
+                            placeholder="123456789"
+                            value={settings.telegram.chatId}
+                            onChange={(e) => setSettings({ ...settings, telegram: { ...settings.telegram, chatId: e.target.value } })}
+                            className="w-full px-4 py-3 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white font-mono text-sm outline-none transition-all placeholder:text-slate-700"
+                        />
+                        <p className="text-[10px] text-slate-500">Tu ID numérico de Telegram (o el ID del grupo).</p>
+                    </div>
+                </div>
+            </section>
+
+            {/* AI Providers Configuration */}
+            <section className="space-y-4">
+                <div className="flex items-center justify-between text-white border-b border-slate-800 pb-2">
+                    <div className="flex items-center gap-2">
+                        <Bot className="text-purple-400" />
+                        <h2 className="text-lg font-semibold">Proveedores de IA</h2>
+                    </div>
+                    <button
+                        onClick={addProvider}
+                        disabled={settings.aiProviders.length >= 3}
+                        className="text-xs flex items-center gap-1 bg-slate-800 hover:bg-slate-700 text-slate-200 px-3 py-1.5 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                        <Plus size={14} /> Agregar Provider ({settings.aiProviders.length}/3)
+                    </button>
+                </div>
+
+                <div className="space-y-4">
+                    {settings.aiProviders.length === 0 && (
+                        <div className="p-8 text-center text-slate-500 border border-dashed border-slate-800 rounded-xl">
+                            No hay proveedores de IA configurados. Agrega uno para empezar.
+                        </div>
+                    )}
+
+                    {settings.aiProviders.map((provider, index) => (
+                        <div key={provider.id} className="p-6 bg-slate-900 border border-slate-800 rounded-xl relative group">
+                            <div className="flex justify-between items-start mb-4">
+                                <h3 className="text-sm font-semibold text-slate-300 bg-slate-950 inline-block px-3 py-1 rounded-md border border-slate-800">
+                                    Provider #{index + 1}
+                                </h3>
+                                <div className="flex gap-2">
+                                    <button
+                                        onClick={() => testAI(provider)}
+                                        disabled={testingAI === provider.id || !provider.endpoint || !provider.token || !provider.model}
+                                        className={cn("text-xs flex items-center gap-1 bg-slate-800 hover:bg-slate-700 text-purple-300 border border-purple-500/20 px-2 py-1.5 rounded-lg transition disabled:opacity-50", !provider.model && "opacity-50")}
+                                        title="Verificar conexión"
+                                    >
+                                        {testingAI === provider.id ? <Loader2 size={12} className="animate-spin" /> : <LinkIcon size={12} />}
+                                        Test
+                                    </button>
+                                    <button
+                                        onClick={() => removeProvider(provider.id)}
+                                        className="text-slate-500 hover:text-red-400 transition-colors p-1.5 hover:bg-red-500/10 rounded-lg"
+                                        title="Eliminar"
+                                    >
+                                        <Trash2 size={16} />
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div className="grid grid-cols-1 gap-4">
+                                <div className="space-y-2">
+                                    <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Nombre</label>
+                                    <input
+                                        type="text"
+                                        placeholder="Ej: MiniMax, Z.ai"
+                                        value={provider.name}
+                                        onChange={(e) => updateProvider(provider.id, 'name', e.target.value)}
+                                        className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 text-white text-sm outline-none"
+                                    />
+                                </div>
+
+                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                    <div className="space-y-2">
+                                        <label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-2">
+                                            <LinkIcon size={12} /> Endpoint URL
+                                        </label>
+                                        <input
+                                            type="text"
+                                            placeholder="https://api.example.com/v1"
+                                            value={provider.endpoint}
+                                            onChange={(e) => updateProvider(provider.id, 'endpoint', e.target.value)}
+                                            className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 text-white font-mono text-sm outline-none"
+                                        />
+                                    </div>
+                                    <div className="space-y-2">
+                                        <label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-2">
+                                            <Lock size={12} /> API Key / Token
+                                        </label>
+                                        <input
+                                            type="password"
+                                            placeholder="sk-..."
+                                            value={provider.token}
+                                            onChange={(e) => updateProvider(provider.id, 'token', e.target.value)}
+                                            className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 text-white font-mono text-sm outline-none"
+                                        />
+                                    </div>
+                                </div>
+
+                                {/* Model Selection */}
+                                <div className="space-y-2">
+                                    <div className="flex justify-between items-center">
+                                        <label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-2">
+                                            <Box size={12} /> Model
+                                        </label>
+                                        <button
+                                            onClick={() => detectModels(provider)}
+                                            disabled={detectingModels === provider.id || !provider.endpoint || !provider.token}
+                                            className="text-[10px] flex items-center gap-1 text-cyan-400 hover:text-cyan-300 disabled:opacity-50"
+                                        >
+                                            {detectingModels === provider.id ? <Loader2 size={10} className="animate-spin" /> : <Sparkles size={10} />}
+                                            Auto Detectar
+                                        </button>
+                                    </div>
+                                    {availableModels[provider.id] ? (
+                                        <select
+                                            value={provider.model || ''}
+                                            onChange={(e) => updateProvider(provider.id, 'model', e.target.value)}
+                                            className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 text-white text-sm outline-none"
+                                        >
+                                            <option value="" disabled>Selecciona un modelo</option>
+                                            {availableModels[provider.id].map(m => (
+                                                <option key={m} value={m}>{m}</option>
+                                            ))}
+                                        </select>
+                                    ) : (
+                                        <input
+                                            type="text"
+                                            placeholder="Ej: gpt-3.5-turbo, glm-4"
+                                            value={provider.model || ''}
+                                            onChange={(e) => updateProvider(provider.id, 'model', e.target.value)}
+                                            className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 text-white font-mono text-sm outline-none"
+                                        />
+                                    )}
+                                </div>
+
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </section>
+        </div>
+    )
+}