453 lines
17 KiB
TypeScript
453 lines
17 KiB
TypeScript
import React, { useState, useCallback } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { UploadCloud, File, Sheet, Loader2, CheckCircle, Sparkles, Wand2, BarChart3, X, AlertCircle } from 'lucide-react';
|
|
import { generateSyntheticCsv } from '../utils/syntheticDataGenerator';
|
|
import { TierKey } from '../types';
|
|
import toast, { Toaster } from 'react-hot-toast';
|
|
import clsx from 'clsx';
|
|
|
|
interface DataUploaderEnhancedProps {
|
|
selectedTier: TierKey;
|
|
onAnalysisReady: () => void;
|
|
isAnalyzing: boolean;
|
|
}
|
|
|
|
type UploadStatus = 'idle' | 'generating' | 'uploading' | 'success';
|
|
|
|
const formatFileSize = (bytes: number, decimals = 2) => {
|
|
if (bytes === 0) return '0 Bytes';
|
|
const k = 1024;
|
|
const dm = decimals < 0 ? 0 : decimals;
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
|
};
|
|
|
|
const DataUploaderEnhanced: React.FC<DataUploaderEnhancedProps> = ({
|
|
selectedTier,
|
|
onAnalysisReady,
|
|
isAnalyzing
|
|
}) => {
|
|
const [file, setFile] = useState<File | null>(null);
|
|
const [sheetUrl, setSheetUrl] = useState('');
|
|
const [status, setStatus] = useState<UploadStatus>('idle');
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
|
|
const isActionInProgress = status === 'generating' || status === 'uploading' || isAnalyzing;
|
|
|
|
const resetState = (clearAll: boolean = true) => {
|
|
setStatus('idle');
|
|
if (clearAll) {
|
|
setFile(null);
|
|
setSheetUrl('');
|
|
}
|
|
};
|
|
|
|
const handleDataReady = (message: string) => {
|
|
setStatus('success');
|
|
toast.success(message, {
|
|
icon: '✅',
|
|
duration: 3000,
|
|
});
|
|
};
|
|
|
|
const handleFileChange = (selectedFile: File | null) => {
|
|
resetState();
|
|
if (selectedFile) {
|
|
const allowedTypes = [
|
|
'text/csv',
|
|
'application/vnd.ms-excel',
|
|
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
|
];
|
|
if (allowedTypes.includes(selectedFile.type) ||
|
|
selectedFile.name.endsWith('.csv') ||
|
|
selectedFile.name.endsWith('.xlsx') ||
|
|
selectedFile.name.endsWith('.xls')) {
|
|
setFile(selectedFile);
|
|
setSheetUrl('');
|
|
toast.success(`Archivo "${selectedFile.name}" cargado correctamente`, {
|
|
icon: '📄',
|
|
});
|
|
} else {
|
|
toast.error('Tipo de archivo no válido. Sube un CSV o Excel.', {
|
|
icon: '❌',
|
|
});
|
|
setFile(null);
|
|
}
|
|
}
|
|
};
|
|
|
|
const onDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (!isActionInProgress) setIsDragging(true);
|
|
}, [isActionInProgress]);
|
|
|
|
const onDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setIsDragging(false);
|
|
}, []);
|
|
|
|
const onDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setIsDragging(false);
|
|
if (isActionInProgress) return;
|
|
const droppedFile = e.dataTransfer.files && e.dataTransfer.files[0];
|
|
handleFileChange(droppedFile);
|
|
}, [isActionInProgress]);
|
|
|
|
const handleGenerateSyntheticData = () => {
|
|
resetState();
|
|
setStatus('generating');
|
|
toast.loading('Generando datos sintéticos...', { id: 'generating' });
|
|
|
|
setTimeout(() => {
|
|
const csvData = generateSyntheticCsv(selectedTier);
|
|
toast.dismiss('generating');
|
|
handleDataReady('¡Datos Sintéticos Generados!');
|
|
}, 2000);
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
if (!file && !sheetUrl) {
|
|
toast.error('Por favor, sube un archivo o introduce una URL de Google Sheet.', {
|
|
icon: '⚠️',
|
|
});
|
|
return;
|
|
}
|
|
resetState(false);
|
|
setStatus('uploading');
|
|
toast.loading('Procesando datos...', { id: 'uploading' });
|
|
|
|
setTimeout(() => {
|
|
toast.dismiss('uploading');
|
|
handleDataReady('¡Datos Recibidos!');
|
|
}, 2000);
|
|
};
|
|
|
|
const renderMainButton = () => {
|
|
if (status === 'success') {
|
|
return (
|
|
<motion.button
|
|
onClick={onAnalysisReady}
|
|
disabled={isAnalyzing}
|
|
whileHover={{ scale: isAnalyzing ? 1 : 1.02 }}
|
|
whileTap={{ scale: isAnalyzing ? 1 : 0.98 }}
|
|
className="w-full flex items-center justify-center gap-2 text-white px-6 py-4 rounded-xl transition-all shadow-lg hover:shadow-xl bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 disabled:opacity-75 disabled:cursor-not-allowed font-semibold text-lg"
|
|
>
|
|
{isAnalyzing ? (
|
|
<>
|
|
<Loader2 className="animate-spin" size={24} />
|
|
Analizando...
|
|
</>
|
|
) : (
|
|
<>
|
|
<BarChart3 size={24} />
|
|
Ver Dashboard de Diagnóstico
|
|
</>
|
|
)}
|
|
</motion.button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<motion.button
|
|
onClick={handleSubmit}
|
|
disabled={isActionInProgress || (!file && !sheetUrl)}
|
|
whileHover={{ scale: isActionInProgress || (!file && !sheetUrl) ? 1 : 1.02 }}
|
|
whileTap={{ scale: isActionInProgress || (!file && !sheetUrl) ? 1 : 0.98 }}
|
|
className="w-full flex items-center justify-center gap-2 text-white px-6 py-4 rounded-xl transition-all shadow-lg hover:shadow-xl bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 disabled:opacity-50 disabled:cursor-not-allowed font-semibold text-lg"
|
|
>
|
|
{status === 'uploading' ? (
|
|
<>
|
|
<Loader2 className="animate-spin" size={24} />
|
|
Procesando...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Wand2 size={24} />
|
|
Generar Análisis
|
|
</>
|
|
)}
|
|
</motion.button>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Toaster position="top-right" />
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="bg-white rounded-xl shadow-lg p-8"
|
|
>
|
|
<div className="mb-8">
|
|
<motion.span
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
className="text-blue-600 font-semibold mb-1 block"
|
|
>
|
|
Paso 2
|
|
</motion.span>
|
|
<motion.h2
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="text-3xl font-bold text-slate-900"
|
|
>
|
|
Sube tus Datos y Ejecuta el Análisis
|
|
</motion.h2>
|
|
<motion.p
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: 0.2 }}
|
|
className="text-slate-600 mt-2"
|
|
>
|
|
Usa una de las siguientes opciones para enviarnos tus datos para el análisis.
|
|
</motion.p>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
{/* Drag & Drop Area */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ delay: 0.3 }}
|
|
onDragOver={onDragOver}
|
|
onDragLeave={onDragLeave}
|
|
onDrop={onDrop}
|
|
className={clsx(
|
|
'relative border-2 border-dashed rounded-xl p-12 text-center transition-all duration-300',
|
|
isDragging && 'border-blue-500 bg-blue-50 scale-105 shadow-lg',
|
|
!isDragging && 'border-slate-300 bg-slate-50 hover:border-slate-400',
|
|
isActionInProgress && 'opacity-50 cursor-not-allowed'
|
|
)}
|
|
>
|
|
<input
|
|
type="file"
|
|
id="file-upload"
|
|
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
|
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
|
|
onChange={(e) => handleFileChange(e.target.files ? e.target.files[0] : null)}
|
|
disabled={isActionInProgress}
|
|
/>
|
|
<label htmlFor="file-upload" className="cursor-pointer flex flex-col items-center justify-center">
|
|
<motion.div
|
|
animate={isDragging ? { scale: 1.2, rotate: 5 } : { scale: 1, rotate: 0 }}
|
|
transition={{ type: 'spring', stiffness: 300 }}
|
|
>
|
|
<UploadCloud className={clsx(
|
|
"w-16 h-16 mb-4",
|
|
isDragging ? "text-blue-500" : "text-slate-400"
|
|
)} />
|
|
</motion.div>
|
|
<span className="font-semibold text-lg text-blue-600 mb-1">
|
|
Haz clic para subir un fichero
|
|
</span>
|
|
<span className="text-slate-500">o arrástralo aquí</span>
|
|
<p className="text-sm text-slate-400 mt-3 bg-white px-4 py-2 rounded-full">
|
|
CSV, XLSX, o XLS
|
|
</p>
|
|
</label>
|
|
</motion.div>
|
|
|
|
{/* File Preview */}
|
|
<AnimatePresence>
|
|
{status !== 'uploading' && status !== 'success' && file && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
className="flex items-center justify-between gap-3 p-4 bg-blue-50 border-2 border-blue-200 text-slate-800 rounded-xl"
|
|
>
|
|
<div className="flex items-center gap-3 min-w-0 flex-1">
|
|
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<File className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div className="flex flex-col min-w-0">
|
|
<span className="font-semibold text-sm truncate">{file.name}</span>
|
|
<span className="text-xs text-slate-500">{formatFileSize(file.size)}</span>
|
|
</div>
|
|
</div>
|
|
<motion.button
|
|
whileHover={{ scale: 1.1 }}
|
|
whileTap={{ scale: 0.9 }}
|
|
onClick={() => {
|
|
setFile(null);
|
|
toast('Archivo eliminado', { icon: '🗑️' });
|
|
}}
|
|
className="w-8 h-8 flex items-center justify-center rounded-lg bg-red-100 hover:bg-red-200 text-red-600 transition-colors flex-shrink-0"
|
|
>
|
|
<X size={18} />
|
|
</motion.button>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{/* Uploading Progress */}
|
|
<AnimatePresence>
|
|
{status === 'uploading' && file && (
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.95 }}
|
|
className="p-6 bg-blue-50 border-2 border-blue-200 rounded-xl"
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<File className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div className="flex-grow">
|
|
<div className="flex justify-between items-center mb-2">
|
|
<span className="font-semibold text-sm text-blue-900 truncate">{file.name}</span>
|
|
<span className="text-xs text-blue-700">{formatFileSize(file.size)}</span>
|
|
</div>
|
|
<div className="w-full bg-blue-200 rounded-full h-3 overflow-hidden">
|
|
<motion.div
|
|
className="h-full bg-gradient-to-r from-blue-600 to-blue-500 rounded-full"
|
|
initial={{ width: '0%' }}
|
|
animate={{ width: '100%' }}
|
|
transition={{ duration: 2, ease: 'easeInOut' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
<div className="flex items-center text-slate-400">
|
|
<hr className="w-full border-slate-300" />
|
|
<span className="px-4 font-medium text-sm">O</span>
|
|
<hr className="w-full border-slate-300" />
|
|
</div>
|
|
|
|
{/* Generate Synthetic Data - DESTACADO */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ delay: 0.4 }}
|
|
className="relative overflow-hidden rounded-xl bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-600 p-1"
|
|
>
|
|
<div className="bg-white rounded-lg p-6 text-center">
|
|
<div className="flex items-center justify-center mb-3">
|
|
<Sparkles className="text-fuchsia-600 w-8 h-8" />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-slate-900 mb-2">
|
|
🎭 Prueba con Datos de Demo
|
|
</h3>
|
|
<p className="text-sm text-slate-600 mb-4">
|
|
Explora el diagnóstico sin necesidad de datos reales. Generamos un dataset completo para ti.
|
|
</p>
|
|
<motion.button
|
|
onClick={handleGenerateSyntheticData}
|
|
disabled={isActionInProgress}
|
|
whileHover={{ scale: isActionInProgress ? 1 : 1.05 }}
|
|
whileTap={{ scale: isActionInProgress ? 1 : 0.95 }}
|
|
className="flex items-center justify-center gap-2 w-full bg-gradient-to-r from-fuchsia-600 to-purple-600 text-white px-6 py-4 rounded-lg hover:from-fuchsia-700 hover:to-purple-700 transition-all shadow-lg hover:shadow-xl disabled:opacity-75 disabled:cursor-not-allowed font-semibold text-lg"
|
|
>
|
|
{status === 'generating' ? (
|
|
<>
|
|
<Loader2 className="animate-spin" size={24} />
|
|
Generando...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Sparkles size={24} />
|
|
Generar Datos Sintéticos
|
|
</>
|
|
)}
|
|
</motion.button>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<div className="flex items-center text-slate-400">
|
|
<hr className="w-full border-slate-300" />
|
|
<span className="px-4 font-medium text-sm">O</span>
|
|
<hr className="w-full border-slate-300" />
|
|
</div>
|
|
|
|
{/* Google Sheets URL */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.5 }}
|
|
className="relative"
|
|
>
|
|
<Sheet className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
|
|
<input
|
|
type="url"
|
|
placeholder="Pega la URL de tu Google Sheet aquí"
|
|
value={sheetUrl}
|
|
onChange={(e) => {
|
|
resetState();
|
|
setSheetUrl(e.target.value);
|
|
setFile(null);
|
|
}}
|
|
disabled={isActionInProgress}
|
|
className="w-full pl-12 pr-4 py-4 border-2 border-slate-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition disabled:bg-slate-100 text-sm"
|
|
/>
|
|
</motion.div>
|
|
|
|
{/* Google Sheets Preview */}
|
|
<AnimatePresence>
|
|
{status !== 'uploading' && status !== 'success' && sheetUrl && !file && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
className="flex items-center justify-between gap-3 p-4 bg-green-50 border-2 border-green-200 text-green-800 rounded-xl"
|
|
>
|
|
<div className="flex items-center gap-3 min-w-0 flex-1">
|
|
<Sheet className="w-6 h-6 flex-shrink-0" />
|
|
<span className="font-medium text-sm truncate">{sheetUrl}</span>
|
|
</div>
|
|
<motion.button
|
|
whileHover={{ scale: 1.1 }}
|
|
whileTap={{ scale: 0.9 }}
|
|
onClick={() => {
|
|
setSheetUrl('');
|
|
toast('URL eliminada', { icon: '🗑️' });
|
|
}}
|
|
className="w-8 h-8 flex items-center justify-center rounded-lg bg-red-100 hover:bg-red-200 text-red-600 transition-colors flex-shrink-0"
|
|
>
|
|
<X size={18} />
|
|
</motion.button>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{/* Success Message */}
|
|
<AnimatePresence>
|
|
{status === 'success' && (
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.9 }}
|
|
className="flex items-center justify-center gap-3 p-6 bg-green-50 border-2 border-green-200 text-green-800 rounded-xl"
|
|
>
|
|
<CheckCircle className="w-8 h-8 flex-shrink-0" />
|
|
<span className="font-bold text-lg">¡Listo para analizar!</span>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{/* Main Action Button */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.6 }}
|
|
>
|
|
{renderMainButton()}
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DataUploaderEnhanced;
|