Spaces:

ivanoctaviogaitansantos
/

batcodeexpert

Running

File size: 20,074 Bytes

aa14606

import React, { useState, useRef, useEffect } from 'react';
import { 
  Code, Terminal, FileCode, Play, CheckCircle, XCircle, AlertTriangle, 
  Lightbulb, Settings, Copy, Download, Upload, Sparkles, Sun, Moon,
  FileText, Zap, GitBranch, Bug, Wrench, ArrowRight, Eye, EyeOff,
  Share2, RefreshCw, Wand2, Languages, Send, ClipboardCheck, Loader2
} from 'lucide-react';

const languages = {
  python: { name: 'Python', ext: '.py', icon: '🐍', example: 'def hello_world():\n    print("¡Hola mundo!")\n    return True' },
  javascript: { name: 'JavaScript', ext: '.js', icon: '📜', example: 'function helloWorld() {\n    console.log("¡Hola mundo!");\n    return true;\n}' },
  java: { name: 'Java', ext: '.java', icon: '☕', example: 'public class HelloWorld {\n    public static void main(String[] args) {\n        System.out.println("¡Hola mundo!");\n    }\n}' },
  cpp: { name: 'C++', ext: '.cpp', icon: '⚡', example: '#include <iostream>\nint main() {\n    std::cout << "¡Hola mundo!" << std::endl;\n    return 0;\n}' },
  html: { name: 'HTML', ext: '.html', icon: '🌐', example: '<!DOCTYPE html>\n<html>\n<head>\n    <title>Mi página</title>\n</head>\n<body>\n    <h1>¡Hola mundo!</h1>\n</body>\n</html>' },
  css: { name: 'CSS', ext: '.css', icon: '🎨', example: 'body {\n    font-family: Arial, sans-serif;\n    background-color: #f0f0f0;\n    margin: 0;\n    padding: 20px;\n}' },
  react: { name: 'React JSX', ext: '.jsx', icon: '⚛️', example: 'import React from "react";\n\nfunction HelloWorld() {\n    return <h1>¡Hola mundo!</h1>;\n}\n\nexport default HelloWorld;' }
};

const CodeAssistant = () => {
  const [input, setInput] = useState('');
  const [output, setOutput] = useState('');
  const [analysis, setAnalysis] = useState(null);
  const [isProcessing, setIsProcessing] = useState(false);
  const [isDarkMode, setIsDarkMode] = useState(true);
  const [selectedLanguage, setSelectedLanguage] = useState('python');
  const [activeTab, setActiveTab] = useState('input');
  const [showPreview, setShowPreview] = useState(false);
  const [copySuccess, setCopySuccess] = useState('');
  const [conversionMode, setConversionMode] = useState('improve'); // improve, convert, analyze
  
  const fileInputRef = useRef(null);

  // Detectar automáticamente el lenguaje del código
  const detectLanguage = (code) => {
    const patterns = {
      python: [/def\s+\w+/, /import\s+\w+/, /print\s*\(/, /if\s+__name__/, /:\s*$/m],
      javascript: [/function\s+\w+/, /console\.log/, /const\s+|let\s+|var\s+/, /=>\s*/, /document\./],
      java: [/public\s+class/, /System\.out/, /import\s+java/, /public\s+static\s+void\s+main/],
      cpp: [/#include/, /using\s+namespace/, /std::/, /cout\s*<</, /int\s+main/],
      html: [/<!DOCTYPE/, /<html/, /<head/, /<body/, /<div/, /<p>/],
      css: [/\{[^}]*\}/, /\.\w+\s*\{/, /#\w+\s*\{/, /@media/, /:\s*[^;]+;/],
      react: [/import\s+React/, /export\s+default/, /return\s*\(/, /className=/, /<\w+[^>]*>/]
    };

    for (const [lang, regexes] of Object.entries(patterns)) {
      const matches = regexes.filter(regex => regex.test(code)).length;
      if (matches >= 2) return lang;
    }
    
    return 'python'; // default
  };

  // Función principal para procesar código
  const processCode = async () => {
    if (!input.trim()) return;

    setIsProcessing(true);
    setAnalysis(null);
    
    try {
      const detectedLang = detectLanguage(input);
      
      let prompt = '';
      
      switch (conversionMode) {
        case 'improve':
          prompt = `Analiza y mejora el siguiente código. Si es texto plano, conviértelo a ${languages[selectedLanguage].name}. Si ya es código, mejóralo corrigiendo errores, optimizando y aplicando mejores prácticas.

Entrada:
\`\`\`
${input}
\`\`\`

Responde en formato JSON con esta estructura:
{
  "codigo_mejorado": "código corregido y mejorado",
  "lenguaje_detectado": "${detectedLang}",
  "errores_encontrados": ["lista de errores encontrados"],
  "mejoras_aplicadas": ["lista de mejoras aplicadas"],
  "explicacion": "breve explicación de los cambios",
  "es_funcional": true/false,
  "puntuacion_calidad": 0-100
}

IMPORTANTE: Responde SOLO con JSON válido, sin markdown ni explicaciones adicionales.`;
          break;
          
        case 'convert':
          prompt = `Convierte el siguiente código/texto a ${languages[selectedLanguage].name}, manteniendo la funcionalidad y aplicando las mejores prácticas del lenguaje destino.

Entrada:
\`\`\`
${input}
\`\`\`

Responde en formato JSON:
{
  "codigo_convertido": "código convertido a ${languages[selectedLanguage].name}",
  "lenguaje_origen": "${detectedLang}",
  "lenguaje_destino": "${selectedLanguage}",
  "cambios_realizados": ["lista de adaptaciones realizadas"],
  "notas_conversion": "explicación de la conversión"
}

IMPORTANTE: Responde SOLO con JSON válido.`;
          break;
          
        case 'analyze':
          prompt = `Analiza el siguiente código en detalle, identificando errores, problemas de rendimiento, seguridad y mejores prácticas.

Código:
\`\`\`
${input}
\`\`\`

Responde en formato JSON:
{
  "analisis_detallado": "análisis completo del código",
  "errores_sintaxis": ["errores de sintaxis encontrados"],
  "errores_logicos": ["posibles errores lógicos"],
  "mejoras_rendimiento": ["sugerencias de rendimiento"],
  "mejoras_seguridad": ["mejoras de seguridad"],
  "puntuacion": 0-100,
  "recomendaciones": ["recomendaciones generales"]
}

IMPORTANTE: Responde SOLO con JSON válido.`;
          break;
      }

      const response = await fetch("https://api.anthropic.com/v1/messages", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          model: "claude-sonnet-4-20250514",
          max_tokens: 4000,
          messages: [{ role: "user", content: prompt }]
        })
      });

      if (!response.ok) {
        throw new Error(`Error ${response.status}: ${response.statusText}`);
      }

      const data = await response.json();
      let responseText = data.content[0].text;
      
      // Limpiar respuesta para obtener JSON válido
      responseText = responseText.replace(/```json\n?/g, "").replace(/```\n?/g, "").trim();
      
      // Buscar el JSON en la respuesta
      const jsonStart = responseText.indexOf('{');
      const jsonEnd = responseText.lastIndexOf('}');
      if (jsonStart !== -1 && jsonEnd !== -1) {
        responseText = responseText.substring(jsonStart, jsonEnd + 1);
      }
      
      const result = JSON.parse(responseText);
      
      if (conversionMode === 'improve') {
        setOutput(result.codigo_mejorado || result.codigo_convertido || '');
        setAnalysis({
          type: 'improvement',
          language: result.lenguaje_detectado,
          errors: result.errores_encontrados || [],
          improvements: result.mejoras_aplicadas || [],
          explanation: result.explicacion || '',
          functional: result.es_funcional,
          score: result.puntuacion_calidad || 0
        });
      } else if (conversionMode === 'convert') {
        setOutput(result.codigo_convertido || '');
        setAnalysis({
          type: 'conversion',
          sourceLanguage: result.lenguaje_origen,
          targetLanguage: result.lenguaje_destino,
          changes: result.cambios_realizados || [],
          notes: result.notas_conversion || ''
        });
      } else if (conversionMode === 'analyze') {
        setAnalysis({
          type: 'analysis',
          detailed: result.analisis_detallado,
          syntaxErrors: result.errores_sintaxis || [],
          logicErrors: result.errores_logicos || [],
          performance: result.mejoras_rendimiento || [],
          security: result.mejoras_seguridad || [],
          score: result.puntuacion || 0,
          recommendations: result.recomendaciones || []
        });
      }
      
      setActiveTab('output');
      
    } catch (error) {
      console.error('Error processing code:', error);
      setAnalysis({
        type: 'error',
        message: `Error al procesar: ${error.message}`
      });
    } finally {
      setIsProcessing(false);
    }
  };

  // Copiar al portapapeles
  const copyToClipboard = async (text) => {
    try {
      await navigator.clipboard.writeText(text);
      setCopySuccess('¡Copiado!');
      setTimeout(() => setCopySuccess(''), 2000);
    } catch (err) {
      console.error('Error al copiar:', err);
      setCopySuccess('Error al copiar');
    }
  };

  // Cargar archivo
  const handleFileUpload = (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        setInput(e.target.result);
        // Auto-detectar lenguaje por extensión
        const ext = '.' + file.name.split('.').pop().toLowerCase();
        const detectedLang = Object.entries(languages).find(([key, lang]) => lang.ext === ext);
        if (detectedLang) {
          setSelectedLanguage(detectedLang[0]);
        }
      };
      reader.readAsText(file);
    }
  };

  // Descargar código
  const downloadCode = () => {
    const element = document.createElement('a');
    const file = new Blob([output || input], { type: 'text/plain' });
    element.href = URL.createObjectURL(file);
    element.download = `codigo${languages[selectedLanguage]?.ext || '.txt'}`;
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
  };

  // Cargar ejemplo
  const loadExample = () => {
    const example = languages[selectedLanguage]?.example || languages.python.example;
    setInput(example);
  };

  // Limpiar todo
  const clearAll = () => {
    setInput('');
    setOutput('');
    setAnalysis(null);
    setActiveTab('input');
  };

  // Renderizar preview del código (básico)
  const renderPreview = () => {
    const code = output || input;
    
    if (selectedLanguage === 'html' && code.includes('<html')) {
      return (
        <div className="w-full h-96 border rounded-lg overflow-hidden">
          <iframe
            srcDoc={code}
            className="w-full h-full"
            title="HTML Preview"
            sandbox="allow-scripts allow-same-origin"
          />
        </div>
      );
    }
    
    return (
      <div className={`p-4 rounded-lg ${isDarkMode ? 'bg-gray-900' : 'bg-gray-100'}`}>
        <p className={`text-sm ${isDarkMode ? 'text-gray-400' : 'text-gray-600'} mb-2`}>
          Preview no disponible para {languages[selectedLanguage]?.name}
        </p>
        <pre className={`text-xs overflow-auto ${isDarkMode ? 'text-green-400' : 'text-gray-800'}`}>
          {code}
        </pre>
      </div>
    );
  };

  return (
    <div className={`min-h-screen transition-all duration-300 ${isDarkMode ? 'bg-gray-900' : 'bg-gray-50'}`}>
      {/* Header */}
      <div className={`border-b ${isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
        <div className="max-w-7xl mx-auto px-4 py-4">
          <div className="flex justify-between items-center">
            <div className="flex items-center gap-3">
              <div className="flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-r from-purple-500 via-blue-500 to-teal-500">
                <Wand2 className="w-7 h-7 text-white" />
              </div>
              <div>
                <h1 className={`text-3xl font-bold bg-gradient-to-r from-purple-400 via-blue-500 to-teal-400 bg-clip-text text-transparent`}>
                  Asistente Universal de Código IA
                </h1>
                <p className={`text-sm ${isDarkMode ? 'text-gray-400' : 'text-gray-600'}`}>
                  Mejora, convierte y analiza cualquier código o texto automáticamente
                </p>
              </div>
            </div>
            
            <div className="flex items-center gap-2">
              <button
                onClick={() => setIsDarkMode(!isDarkMode)}
                className={`p-2 rounded-lg transition-colors ${isDarkMode ? 'hover:bg-gray-700 text-yellow-400' : 'hover:bg-gray-100 text-gray-700'}`}
              >
                {isDarkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
              </button>
            </div>
          </div>
          
          {/* Controls */}
          <div className="mt-4 flex flex-wrap gap-4 items-center">
            <div className="flex items-center gap-2">
              <label className={`text-sm font-medium ${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`}>
                Modo:
              </label>
              <select
                value={conversionMode}
                onChange={(e) => setConversionMode(e.target.value)}
                className={`px-3 py-1 rounded-md text-sm border ${
                  isDarkMode 
                    ? 'bg-gray-700 text-white border-gray-600' 
                    : 'bg-white text-gray-900 border-gray-300'
                }`}
              >
                <option value="improve">🔧 Mejorar código</option>
                <option value="convert">🔄 Convertir lenguaje</option>
                <option value="analyze">🔍 Analizar código</option>
              </select>
            </div>
            
            <div className="flex items-center gap-2">
              <label className={`text-sm font-medium ${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`}>
                Lenguaje destino:
              </label>
              <select
                value={selectedLanguage}
                onChange={(e) => setSelectedLanguage(e.target.value)}
                className={`px-3 py-1 rounded-md text-sm border ${
                  isDarkMode 
                    ? 'bg-gray-700 text-white border-gray-600' 
                    : 'bg-white text-gray-900 border-gray-300'
                }`}
              >
                {Object.entries(languages).map(([key, lang]) => (
                  <option key={key} value={key}>
                    {lang.icon} {lang.name}
                  </option>
                ))}
              </select>
            </div>
            
            <div className="flex gap-2">
              <button
                onClick={loadExample}
                className={`flex items-center gap-2 px-3 py-1 text-sm rounded-md ${
                  isDarkMode ? 'bg-gray-700 hover:bg-gray-600 text-gray-300' : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
                }`}
              >
                <FileText className="w-4 h-4" />
                Ejemplo
              </button>
              
              <input
                ref={fileInputRef}
                type="file"
                onChange={handleFileUpload}
                className="hidden"
                accept=".py,.js,.java,.cpp,.c,.html,.css,.jsx,.tsx,.txt,.md"
              />
              <button
                onClick={() => fileInputRef.current?.click()}
                className={`flex items-center gap-2 px-3 py-1 text-sm rounded-md ${
                  isDarkMode ? 'bg-gray-700 hover:bg-gray-600 text-gray-300' : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
                }`}
              >
                <Upload className="w-4 h-4" />
                Archivo
              </button>
              
              <button
                onClick={clearAll}
                className={`flex items-center gap-2 px-3 py-1 text-sm rounded-md ${
                  isDarkMode ? 'bg-red-600 hover:bg-red-700 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
                }`}
              >
                <RefreshCw className="w-4 h-4" />
                Limpiar
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto p-6">
        <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
          {/* Panel de entrada */}
          <div className={`rounded-xl shadow-lg ${isDarkMode ? 'bg-gray-800' : 'bg-white'}`}>
            <div className="p-4 border-b border-gray-200 dark:border-gray-700">
              <div className="flex justify-between items-center">
                <h2 className={`text-lg font-semibold flex items-center gap-2 ${isDarkMode ? 'text-white' : 'text-gray-900'}`}>
                  <Terminal className="w-5 h-5" />
                  Entrada de código / texto
                </h2>
                <div className="flex gap-1">
                  <button
                    onClick={() => copyToClipboard(input)}
                    className={`p-2 rounded-md ${isDarkMode ? 'hover:bg-gray-700 text-gray-400' : 'hover:bg-gray-100 text-gray-600'}`}
                    title="Copiar"
                  >
                    <Copy className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => setInput('')}
                    className={`p-2 rounded-md ${isDarkMode ? 'hover:bg-gray-700 text-gray-400' : 'hover:bg-gray-100 text-gray-600'}`}
                    title="Limpiar"
                  >
                    <RefreshCw className="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>
            
            <div className="p-4">
              <textarea
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="Pega tu código aquí, escribe texto para convertir a código, o ingresa código para mejorar..."
                className={`w-full h-96 p-4 rounded-lg border font-mono text-sm resize-none ${
                  isDarkMode 
                    ? 'bg-gray-900 border-gray-700 text-green-400 placeholder-gray-500' 
                    : 'bg-gray-50 border-gray-300 text-gray-900 placeholder-gray-400'
                } focus:ring-2 focus:ring-purple-500 focus:border-transparent`}
                spellCheck={false}
              />
              
              <div className="flex justify-between items-center mt-4">
                <span className={`text-sm ${isDarkMode ? 'text-gray-400' : 'text-gray-600'}`}>
                  {input.length} caracteres | {input.split('\n').length} líneas
                  {input.trim() && (
                    <span className="ml-2 px-2 py-1 bg-purple-500 text-white text-xs rounded-full">
                      {detectLanguage(input)}
                    </span>
                  )}
                </span>
                
                <button
                  onClick={processCode}
                  disabled={isProcessing || !input.trim()}
                  className={`flex items-center gap-2 px-6 py-3 rounded-lg font-medium transition-all ${
                    isProcessing || !input.trim()
                      ? 'bg-gray-500 text-gray-300 cursor-not-allowed'
                      : 'bg-gradient-to-r from-purple-500 via-blue-500 to-teal-500 text-white hover:from-purple-600 hover:via-blue-600 hover:to-teal-600 shadow-lg transform hover:scale-105'
                  }`}
                >
                  {isProcessing ? (
                    <>
                      <Loader2 className="w-5 h-5 animate-spin" />
                      Procesando...
                    </>
                  ) : (
                    <>
                      <Sparkles className="w-5 h-5" />
                      {conversionMode === 'improve' ? 'Mejorar código' : 
                       conversionMode === 'convert' ? 'Convertir código' : 'Analizar código'}
                    </>
                  )}
                </button>
              </div>
            </div>
          </div>

          {/* Panel de salida */}
          <div className={`rounded-xl shadow-lg ${isDarkMode ? 'bg-gray-800' : 'bg-white'}`}>
            {/* Tabs */}
            <div className="flex border-b border-gray-200 dark:border-gray-700">
              <button
                onClick={() => setActiveTab('output')}
                className={`flex-1 px-4 py-3 text-sm font-medium ${
                  activeTab === 'output'