861 lines
40 KiB
TypeScript
861 lines
40 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef, useState, useCallback, Suspense } from 'react';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import { Camera, History, VideoOff, Settings, Video, X, MessageCircle } from 'lucide-react';
|
|
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { type Shoe } from '@/lib/shoe-database';
|
|
import { addToHistory, getHistory } from '@/lib/history-storage';
|
|
import ShoeResultsPopup from '@/components/shoe-results-popup';
|
|
import HistorySidebar from '@/components/history-sidebar';
|
|
import { skuIdentificationService } from '@/lib/sku-identification';
|
|
import { fetchProduct, getProductImages, getProductPricing, fetchTestProduct } from '@/lib/product-api';
|
|
|
|
type CameraStatus = 'loading' | 'active' | 'denied' | 'no_devices';
|
|
|
|
function HomePageContent() {
|
|
const searchParams = useSearchParams();
|
|
const isDev = searchParams.get('dev') === 'true';
|
|
|
|
const videoRef = useRef<HTMLVideoElement>(null);
|
|
const [stream, setStream] = useState<MediaStream | null>(null);
|
|
const [cameraStatus, setCameraStatus] = useState<CameraStatus>('loading');
|
|
|
|
const [videoDevices, setVideoDevices] = useState<MediaDeviceInfo[]>([]);
|
|
const [selectedDeviceId, setSelectedDeviceId] = useState<string>('');
|
|
|
|
const [isPopupOpen, setPopupOpen] = useState(false);
|
|
const [isHistoryOpen, setHistoryOpen] = useState(false);
|
|
const [history, setHistory] = useState<Shoe[]>([]);
|
|
const [detectedSKU, setDetectedSKU] = useState<string | null>(null);
|
|
const [isSettingsPanelOpen, setSettingsPanelOpen] = useState(false);
|
|
const [isScanning, setIsScanning] = useState(false);
|
|
const [notFoundMessage, setNotFoundMessage] = useState(false);
|
|
const abortControllerRef = useRef<AbortController | null>(null);
|
|
|
|
// Effect to clean up the stream when component unmounts or stream changes
|
|
useEffect(() => {
|
|
return () => {
|
|
stream?.getTracks().forEach((track) => track.stop());
|
|
};
|
|
}, [stream]);
|
|
|
|
// Effect to assign stream to video when videoRef becomes available
|
|
useEffect(() => {
|
|
if (videoRef.current && stream && cameraStatus === 'active') {
|
|
console.log('Assigning saved stream to video element');
|
|
videoRef.current.srcObject = stream;
|
|
}
|
|
}, [stream, cameraStatus]); // Runs when stream or camera status changes
|
|
|
|
const startStream = useCallback(async (deviceId: string) => {
|
|
// Stop previous stream if it exists
|
|
(videoRef.current?.srcObject as MediaStream)?.getTracks().forEach((track) => track.stop());
|
|
console.log('starting stream....')
|
|
try {
|
|
const newStream = await navigator.mediaDevices.getUserMedia({
|
|
video: { deviceId: deviceId ? { ideal: deviceId } : true },
|
|
});
|
|
|
|
console.log(newStream)
|
|
|
|
// Always save the stream first
|
|
setStream(newStream);
|
|
setCameraStatus('active');
|
|
|
|
if (videoRef.current) {
|
|
// Video element is ready, assign stream immediately
|
|
videoRef.current.srcObject = newStream;
|
|
} else {
|
|
// Video element not ready yet, stream will be assigned when it mounts
|
|
console.log('Video element not ready, stream will be assigned when video mounts');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error starting stream: ', err);
|
|
setCameraStatus('denied');
|
|
}
|
|
}, []);
|
|
|
|
// Effect to automatically initialize camera on app start
|
|
useEffect(() => {
|
|
const initializeCamera = async () => {
|
|
try {
|
|
// Configure DEV mode if URL parameter is present
|
|
skuIdentificationService.setDevMode(isDev);
|
|
|
|
// Load history first
|
|
setHistory(getHistory());
|
|
|
|
// Check if there's a stored preference
|
|
const storedDeviceId = localStorage.getItem('selectedCameraDeviceId');
|
|
|
|
if (storedDeviceId) {
|
|
console.log('✅ Found stored camera preference, attempting to use it...');
|
|
// Step 1: Request permission with stored device
|
|
const permissionStream = await navigator.mediaDevices.getUserMedia({ video: true });
|
|
permissionStream.getTracks().forEach(track => track.stop());
|
|
|
|
// Step 2: Enumerate devices
|
|
const devices = await navigator.mediaDevices.enumerateDevices();
|
|
const videoInputs = devices.filter(d => d.kind === 'videoinput');
|
|
console.log('📹 Available cameras:', videoInputs.map(d => ({ label: d.label, id: d.deviceId })));
|
|
setVideoDevices(videoInputs);
|
|
|
|
if (videoInputs.length === 0) {
|
|
setCameraStatus('no_devices');
|
|
return;
|
|
}
|
|
|
|
// Check if stored device still exists
|
|
const storedDevice = videoInputs.find(d => d.deviceId === storedDeviceId);
|
|
if (storedDevice) {
|
|
console.log('✅ Using stored camera:', storedDevice.label);
|
|
setSelectedDeviceId(storedDevice.deviceId);
|
|
await startStream(storedDevice.deviceId);
|
|
return;
|
|
} else {
|
|
console.log('⚠️ Stored camera not found, will search for back camera');
|
|
}
|
|
}
|
|
|
|
// No stored preference or stored device not found - find back camera
|
|
console.log('🔍 Attempting to open back camera using facingMode: environment');
|
|
|
|
// Step 1: Try to open back camera directly with facingMode
|
|
let backCameraStream: MediaStream;
|
|
try {
|
|
backCameraStream = await navigator.mediaDevices.getUserMedia({
|
|
video: { facingMode: 'environment' }
|
|
});
|
|
console.log('✅ Got stream with facingMode: environment');
|
|
} catch (err) {
|
|
console.log('⚠️ facingMode: environment failed, trying default camera');
|
|
backCameraStream = await navigator.mediaDevices.getUserMedia({ video: true });
|
|
}
|
|
|
|
// Step 2: Get the actual device that was used
|
|
const track = backCameraStream.getVideoTracks()[0];
|
|
const settings = track.getSettings();
|
|
console.log('📸 Camera settings:', {
|
|
deviceId: settings.deviceId,
|
|
facingMode: settings.facingMode,
|
|
label: track.label
|
|
});
|
|
|
|
// Step 3: Enumerate all devices
|
|
const devices = await navigator.mediaDevices.enumerateDevices();
|
|
const videoInputs = devices.filter(d => d.kind === 'videoinput');
|
|
console.log('📹 All cameras:', videoInputs.map(d => ({ label: d.label, id: d.deviceId })));
|
|
setVideoDevices(videoInputs);
|
|
|
|
if (videoInputs.length === 0) {
|
|
backCameraStream.getTracks().forEach(track => track.stop());
|
|
setCameraStatus('no_devices');
|
|
return;
|
|
}
|
|
|
|
// Step 4: Verify if we got the back camera
|
|
let selectedDevice: MediaDeviceInfo | undefined;
|
|
|
|
if (settings.facingMode === 'environment') {
|
|
// Perfect! We got the environment camera
|
|
console.log('✅ Confirmed back camera by facingMode');
|
|
selectedDevice = videoInputs.find(d => d.deviceId === settings.deviceId);
|
|
} else {
|
|
// We might have gotten the front camera, let's search manually
|
|
console.log('⚠️ facingMode is not "environment", searching manually...');
|
|
|
|
// Stop the current stream
|
|
backCameraStream.getTracks().forEach(track => track.stop());
|
|
|
|
// Search by label keywords
|
|
const backCameraKeywords = ['back', 'rear', 'trasera', 'environment', 'posterior'];
|
|
selectedDevice = videoInputs.find(d =>
|
|
backCameraKeywords.some(keyword => d.label.toLowerCase().includes(keyword))
|
|
);
|
|
|
|
if (!selectedDevice && videoInputs.length > 1) {
|
|
// iOS fallback: try index 1 (usually back camera)
|
|
console.log('📱 Trying camera at index 1 for iOS');
|
|
selectedDevice = videoInputs[1];
|
|
}
|
|
}
|
|
|
|
// Fallback to first camera
|
|
if (!selectedDevice) {
|
|
selectedDevice = videoInputs[0];
|
|
console.log('⚠️ Using first camera as fallback');
|
|
}
|
|
|
|
console.log('🎯 Selected camera:', selectedDevice.label, selectedDevice.deviceId);
|
|
setSelectedDeviceId(selectedDevice.deviceId);
|
|
localStorage.setItem('selectedCameraDeviceId', selectedDevice.deviceId);
|
|
|
|
// If we still have the stream from facingMode and it matches, use it
|
|
if (settings.facingMode === 'environment' && settings.deviceId === selectedDevice.deviceId) {
|
|
console.log('♻️ Reusing existing stream');
|
|
setStream(backCameraStream);
|
|
setCameraStatus('active');
|
|
if (videoRef.current) {
|
|
videoRef.current.srcObject = backCameraStream;
|
|
}
|
|
} else {
|
|
// Start fresh stream with selected device
|
|
backCameraStream.getTracks().forEach(track => track.stop());
|
|
await startStream(selectedDevice.deviceId);
|
|
}
|
|
|
|
} catch (err) {
|
|
console.error('❌ Error accessing camera:', err);
|
|
setCameraStatus('denied');
|
|
}
|
|
};
|
|
|
|
initializeCamera();
|
|
}, [startStream]); // Auto-run on mount
|
|
|
|
|
|
const handleCameraChange = (deviceId: string) => {
|
|
console.log('SAVING: ',deviceId)
|
|
setSelectedDeviceId(deviceId);
|
|
localStorage.setItem('selectedCameraDeviceId', deviceId); // Save stable deviceId
|
|
startStream(deviceId);
|
|
};
|
|
|
|
const handleScan = async () => {
|
|
if (!videoRef.current || isScanning) return;
|
|
|
|
// 1. Cancelar petición anterior si existe
|
|
if (abortControllerRef.current) {
|
|
console.log('🚫 Cancelando petición anterior...');
|
|
abortControllerRef.current.abort();
|
|
}
|
|
|
|
// 2. Crear nuevo AbortController para esta petición
|
|
const controller = new AbortController();
|
|
abortControllerRef.current = controller;
|
|
|
|
// 3. Configurar timeout de 30 segundos
|
|
const timeoutId = setTimeout(() => {
|
|
console.log('⏱️ Timeout alcanzado - cancelando petición...');
|
|
controller.abort();
|
|
}, 30000);
|
|
|
|
try {
|
|
setIsScanning(true);
|
|
setNotFoundMessage(false); // Limpiar mensaje anterior
|
|
console.log('📸 Capturando imagen del video...');
|
|
|
|
// Capture frame from video
|
|
const canvas = document.createElement('canvas');
|
|
const ctx = canvas.getContext('2d')!;
|
|
canvas.width = videoRef.current.videoWidth;
|
|
canvas.height = videoRef.current.videoHeight;
|
|
ctx.drawImage(videoRef.current, 0, 0);
|
|
|
|
// Get ImageData
|
|
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
|
|
console.log('🔍 Llamando al servidor Python para identificar SKU...');
|
|
|
|
// Call SKU identification service with abort signal
|
|
const sku = await skuIdentificationService.identifySKU(imageData, controller.signal);
|
|
|
|
// Limpiar timeout si la petición completó antes
|
|
clearTimeout(timeoutId);
|
|
|
|
console.log('\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
|
|
console.log('📦 RESULTADO FINAL DEL SKU:');
|
|
console.log(' SKU retornado:', sku);
|
|
console.log(' Tipo:', typeof sku);
|
|
console.log(' Es null:', sku === null);
|
|
console.log(' Es string vacío:', sku === '');
|
|
console.log(' Es falsy:', !sku);
|
|
console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');
|
|
|
|
if (sku) {
|
|
// SKU encontrado - obtener datos reales del producto
|
|
setDetectedSKU(sku);
|
|
|
|
let shoeWithSKU: Shoe;
|
|
|
|
// 🧪 FLUJO ESPECIAL: Detectar si es un producto de prueba
|
|
if (sku === 'test_product') {
|
|
console.log('🧪 ========== FLUJO DE PRUEBA ACTIVADO ==========');
|
|
console.log('📦 SKU detectado: test_product');
|
|
console.log('✅ Cargando producto genérico desde JSON...');
|
|
|
|
const testProduct = await fetchTestProduct();
|
|
|
|
if (testProduct) {
|
|
const images = getProductImages(testProduct);
|
|
const pricing = getProductPricing(testProduct);
|
|
|
|
shoeWithSKU = {
|
|
id: Date.now().toString(),
|
|
name: testProduct.productName,
|
|
brand: testProduct.brand,
|
|
price: pricing.isAvailable ? pricing.price.toString() : 'No disponible',
|
|
image: images[0] || '/placeholder.jpg',
|
|
sku: sku,
|
|
timestamp: new Date().toISOString()
|
|
};
|
|
|
|
console.log('🧪 Producto de prueba cargado exitosamente');
|
|
} else {
|
|
console.error('❌ Error al cargar producto de prueba, usando fallback');
|
|
shoeWithSKU = {
|
|
id: Date.now().toString(),
|
|
name: 'Producto de Prueba (Error)',
|
|
brand: 'Test',
|
|
price: 'No disponible',
|
|
image: '/placeholder.jpg',
|
|
sku: sku,
|
|
timestamp: new Date().toISOString()
|
|
};
|
|
}
|
|
|
|
console.log('=========================================\n');
|
|
} else {
|
|
// FLUJO NORMAL: Extraer productId y obtener datos reales
|
|
// Extraer productId del SKU (primeros 6 caracteres)
|
|
// Ejemplo: "18047409" → "180474"
|
|
const productId = sku.substring(0, 6);
|
|
console.log(`📝 Extrayendo productId: ${productId} del SKU: ${sku}`);
|
|
|
|
// Intentar obtener datos reales del producto
|
|
try {
|
|
const product = await fetchProduct(productId);
|
|
|
|
if (product) {
|
|
const images = getProductImages(product);
|
|
const pricing = getProductPricing(product);
|
|
|
|
shoeWithSKU = {
|
|
id: Date.now().toString(),
|
|
name: product.productName,
|
|
brand: product.brand,
|
|
price: pricing.isAvailable ? pricing.price.toString() : 'No disponible',
|
|
image: images[0] || '/placeholder.jpg',
|
|
sku: sku,
|
|
timestamp: new Date().toISOString()
|
|
};
|
|
console.log('✅ Datos del producto obtenidos exitosamente');
|
|
} else {
|
|
throw new Error('Product not found');
|
|
}
|
|
} catch (error) {
|
|
console.warn('⚠️ No se pudieron obtener datos del producto, usando fallback:', error);
|
|
// Fallback si falla el fetch
|
|
shoeWithSKU = {
|
|
id: Date.now().toString(),
|
|
name: `Producto ${sku}`,
|
|
brand: 'Identificado por IA',
|
|
price: 'Precio por consultar',
|
|
image: '/placeholder.jpg',
|
|
sku: sku,
|
|
timestamp: new Date().toISOString()
|
|
};
|
|
}
|
|
}
|
|
|
|
const updatedHistory = addToHistory(shoeWithSKU);
|
|
setHistory(updatedHistory);
|
|
|
|
// SOLO abrir popup si hay SKU
|
|
setPopupOpen(true);
|
|
} else {
|
|
// NO encontrado - mostrar mensaje temporal
|
|
console.log('❌ No se encontró zapato');
|
|
setDetectedSKU(null);
|
|
setNotFoundMessage(true);
|
|
|
|
// Ocultar mensaje después de 3 segundos
|
|
setTimeout(() => {
|
|
setNotFoundMessage(false);
|
|
}, 3000);
|
|
}
|
|
|
|
} catch (error) {
|
|
// Limpiar timeout en caso de error
|
|
clearTimeout(timeoutId);
|
|
|
|
// No mostrar error si fue cancelación
|
|
if (error instanceof Error && error.name === 'AbortError') {
|
|
console.log('🚫 Escaneo cancelado');
|
|
return;
|
|
}
|
|
|
|
console.error('❌ Error en identificación:', error);
|
|
setDetectedSKU(null);
|
|
setNotFoundMessage(true);
|
|
|
|
// Ocultar mensaje después de 3 segundos
|
|
setTimeout(() => {
|
|
setNotFoundMessage(false);
|
|
}, 3000);
|
|
} finally {
|
|
setIsScanning(false);
|
|
abortControllerRef.current = null;
|
|
}
|
|
};
|
|
|
|
const handleCancelScan = () => {
|
|
if (abortControllerRef.current) {
|
|
console.log('🚫 Usuario canceló el escaneo');
|
|
abortControllerRef.current.abort();
|
|
setIsScanning(false);
|
|
abortControllerRef.current = null;
|
|
}
|
|
};
|
|
|
|
const handleHistoryItemClick = (shoe: Shoe) => {
|
|
console.log('📜 Click en historial:', shoe.name, '- SKU:', shoe.sku);
|
|
// Update detectedSKU with the shoe's SKU from history
|
|
setDetectedSKU(shoe.sku || null);
|
|
setHistoryOpen(false);
|
|
setPopupOpen(true);
|
|
};
|
|
|
|
|
|
const renderContent = () => {
|
|
switch (cameraStatus) {
|
|
case 'loading':
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-gray-900 via-black to-gray-800">
|
|
{/* Modern Loading Skeleton */}
|
|
<div className="relative w-full h-full">
|
|
{/* Animated Background Gradient */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-900/20 via-purple-900/20 to-gray-900/20"></div>
|
|
|
|
{/* Pulsing Camera Icon */}
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="relative">
|
|
{/* Outer Ring */}
|
|
<div className="w-32 h-32 rounded-full border-4 border-white/20 animate-pulse"></div>
|
|
{/* Middle Ring */}
|
|
<div className="absolute inset-4 w-24 h-24 rounded-full border-2 border-blue-500/40 animate-ping"></div>
|
|
{/* Inner Ring */}
|
|
<div className="absolute inset-8 w-16 h-16 rounded-full border-2 border-white/60 animate-pulse"></div>
|
|
{/* Camera Icon */}
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<Camera size={32} className="text-white animate-pulse" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Loading Text */}
|
|
<div className="absolute bottom-1/3 left-1/2 transform -translate-x-1/2 text-center">
|
|
<div className="mb-4">
|
|
<div className="flex space-x-1 justify-center">
|
|
<div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0s' }}></div>
|
|
<div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
|
|
<div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
|
|
</div>
|
|
</div>
|
|
<h2 className="text-xl font-bold text-white mb-2 animate-pulse">Iniciando Smart Store Asistant: Scan</h2>
|
|
<p className="text-gray-400 animate-pulse">Accediendo a la cámara...</p>
|
|
</div>
|
|
|
|
{/* Skeleton UI Elements */}
|
|
<div className="absolute top-6 left-6 right-6">
|
|
{/* Top Bar Skeleton */}
|
|
<div className="flex justify-between items-center mb-4">
|
|
<div className="w-64 h-12 bg-white/10 rounded-lg animate-pulse"></div>
|
|
<div className="w-12 h-12 bg-white/10 rounded-lg animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Button Skeleton */}
|
|
<div className="absolute bottom-20 left-1/2 transform -translate-x-1/2">
|
|
<div className="w-16 h-16 bg-white/20 rounded-full animate-pulse"></div>
|
|
</div>
|
|
|
|
{/* Particle Effect - Fixed positions to avoid hydration mismatch */}
|
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|
{[
|
|
{ left: 10, top: 20, delay: 0, duration: 2.5 },
|
|
{ left: 80, top: 15, delay: 0.3, duration: 3 },
|
|
{ left: 25, top: 70, delay: 0.8, duration: 2.2 },
|
|
{ left: 90, top: 40, delay: 1.2, duration: 2.8 },
|
|
{ left: 5, top: 85, delay: 0.5, duration: 3.2 },
|
|
{ left: 70, top: 25, delay: 1.5, duration: 2.4 },
|
|
{ left: 40, top: 60, delay: 0.2, duration: 2.9 },
|
|
{ left: 85, top: 75, delay: 1.8, duration: 2.6 },
|
|
{ left: 15, top: 45, delay: 0.7, duration: 3.1 },
|
|
{ left: 60, top: 10, delay: 1.1, duration: 2.3 },
|
|
{ left: 30, top: 90, delay: 0.4, duration: 2.7 },
|
|
{ left: 95, top: 55, delay: 1.6, duration: 2.1 },
|
|
{ left: 50, top: 30, delay: 0.9, duration: 2.8 },
|
|
{ left: 20, top: 65, delay: 0.1, duration: 3.3 },
|
|
{ left: 75, top: 80, delay: 1.3, duration: 2.2 },
|
|
{ left: 35, top: 5, delay: 0.6, duration: 2.9 },
|
|
{ left: 65, top: 50, delay: 1.4, duration: 2.5 },
|
|
{ left: 8, top: 35, delay: 1.7, duration: 3.1 },
|
|
{ left: 88, top: 95, delay: 0.3, duration: 2.4 },
|
|
{ left: 45, top: 22, delay: 1.9, duration: 2.7 }
|
|
].map((particle, i) => (
|
|
<div
|
|
key={i}
|
|
className="absolute w-1 h-1 bg-blue-500/30 rounded-full animate-ping"
|
|
style={{
|
|
left: `${particle.left}%`,
|
|
top: `${particle.top}%`,
|
|
animationDelay: `${particle.delay}s`,
|
|
animationDuration: `${particle.duration}s`,
|
|
}}
|
|
></div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
case 'active':
|
|
return (
|
|
<>
|
|
<video ref={videoRef} autoPlay playsInline muted onCanPlay={() => videoRef.current?.play()} className="h-full w-full object-cover sm:object-contain" />
|
|
|
|
{/* Impuls Logo - Top Left */}
|
|
<div className="absolute top-3 left-4 sm:left-6 z-10 pointer-events-none">
|
|
<img
|
|
src="/Impuls Logo.png"
|
|
alt="Impuls Logo"
|
|
className="h-10 sm:h-12 w-auto opacity-80"
|
|
style={{ filter: 'brightness(0) invert(1)' }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Version Badge - Top Right (for symmetry) */}
|
|
<div className="absolute top-3 right-4 sm:right-6 z-10 pointer-events-none">
|
|
<div className="bg-white/10 backdrop-blur-md border border-white/20 rounded-full px-3 py-1.5 flex items-center gap-2">
|
|
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
|
<span className="text-white/80 text-xs font-medium">v0.0.3</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Simple Camera Frame Overlay - Like Reference Image */}
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
{/* Simple Corner Frames */}
|
|
<div className="absolute inset-0">
|
|
{/* Top Left Corner */}
|
|
<div className="absolute w-8 h-8" style={{ top: '30%', left: '25%' }}>
|
|
<div className="absolute top-0 left-0 w-6 h-0.5 bg-white opacity-80"></div>
|
|
<div className="absolute top-0 left-0 w-0.5 h-6 bg-white opacity-80"></div>
|
|
</div>
|
|
|
|
{/* Top Right Corner */}
|
|
<div className="absolute w-8 h-8" style={{ top: '30%', right: '25%' }}>
|
|
<div className="absolute top-0 right-0 w-6 h-0.5 bg-white opacity-80"></div>
|
|
<div className="absolute top-0 right-0 w-0.5 h-6 bg-white opacity-80"></div>
|
|
</div>
|
|
|
|
{/* Bottom Left Corner */}
|
|
<div className="absolute w-8 h-8" style={{ bottom: '45%', left: '25%' }}>
|
|
<div className="absolute bottom-0 left-0 w-6 h-0.5 bg-white opacity-80"></div>
|
|
<div className="absolute bottom-0 left-0 w-0.5 h-6 bg-white opacity-80"></div>
|
|
</div>
|
|
|
|
{/* Bottom Right Corner */}
|
|
<div className="absolute w-8 h-8" style={{ bottom: '45%', right: '25%' }}>
|
|
<div className="absolute bottom-0 right-0 w-6 h-0.5 bg-white opacity-80"></div>
|
|
<div className="absolute bottom-0 right-0 w-0.5 h-6 bg-white opacity-80"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Center Rotating 3D Shoe Logo */}
|
|
<div className="absolute w-16 h-16" style={{ top: '42.5%', left: '50%', transform: 'translate(-50%, -50%)' }}>
|
|
{/* 3D Rotating Shoe Logo */}
|
|
<div className="relative w-full h-full" style={{
|
|
transformStyle: 'preserve-3d',
|
|
animation: 'rotate3D 6s infinite linear'
|
|
}}>
|
|
{/* Shoe Logo Image */}
|
|
<img
|
|
src="/zapatillas.png"
|
|
alt="Shoe Logo"
|
|
className="absolute inset-0 w-full h-full object-contain opacity-60"
|
|
style={{ filter: 'brightness(0) invert(1)' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 3D Animation Keyframes */}
|
|
<style jsx>{`
|
|
@keyframes rotate3D {
|
|
0% { transform: rotateY(0deg) rotateX(0deg); }
|
|
25% { transform: rotateY(90deg) rotateX(15deg); }
|
|
50% { transform: rotateY(180deg) rotateX(0deg); }
|
|
75% { transform: rotateY(270deg) rotateX(-15deg); }
|
|
100% { transform: rotateY(360deg) rotateX(0deg); }
|
|
}
|
|
`}</style>
|
|
</div>
|
|
|
|
{/* Scanning Indicator - Responsive with safe area */}
|
|
{isScanning && (
|
|
<div className="absolute top-3 sm:top-4 left-1/2 transform -translate-x-1/2 bg-blue-600/90 backdrop-blur-md rounded-lg px-4 py-2 text-white text-xs sm:text-sm font-medium animate-pulse shadow-lg z-20"
|
|
style={{ marginTop: 'max(0.75rem, env(safe-area-inset-top))' }}>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-2 h-2 bg-white rounded-full animate-ping"></div>
|
|
<span>Identificando...</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Not Found Message - Responsive with safe area */}
|
|
{notFoundMessage && (
|
|
<div className="absolute top-3 sm:top-4 left-1/2 transform -translate-x-1/2 bg-red-600/90 backdrop-blur-md rounded-lg px-4 sm:px-6 py-2 sm:py-3 text-white font-medium shadow-lg animate-in fade-in slide-in-from-top-4 duration-300 z-20 max-w-[90vw]"
|
|
style={{ marginTop: 'max(0.75rem, env(safe-area-inset-top))' }}>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-lg sm:text-xl">❌</span>
|
|
<span className="text-xs sm:text-base">Zapato no encontrado</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Settings Panel - Responsive width with safe areas */}
|
|
<div className={`absolute left-0 top-0 bottom-0 w-full max-w-xs sm:max-w-sm bg-black/80 backdrop-blur-xl border-r border-white/20 transform transition-transform duration-500 ease-out z-40 ${
|
|
isSettingsPanelOpen ? 'translate-x-0' : '-translate-x-full'
|
|
}`}>
|
|
<div className="p-4 sm:p-6 h-full flex flex-col"
|
|
style={{
|
|
paddingTop: 'max(1rem, env(safe-area-inset-top))',
|
|
paddingBottom: 'max(1rem, env(safe-area-inset-bottom))'
|
|
}}>
|
|
{/* Panel Header - Responsive */}
|
|
<div className="flex items-center justify-between mb-4 sm:mb-6">
|
|
<h2 className="text-lg sm:text-xl font-bold text-white flex items-center gap-2">
|
|
<Settings size={20} className="sm:w-6 sm:h-6 text-blue-400" />
|
|
<span className="truncate">Configuración</span>
|
|
</h2>
|
|
<button
|
|
onClick={() => setSettingsPanelOpen(false)}
|
|
className="text-white/60 active:text-white transition-colors p-2 min-w-[44px] min-h-[44px] flex items-center justify-center"
|
|
aria-label="Cerrar configuración"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Camera Selection */}
|
|
<div className="mb-6">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Video size={20} className="text-blue-400" />
|
|
<label className="text-white font-medium">Cámara</label>
|
|
</div>
|
|
<Select value={selectedDeviceId} onValueChange={handleCameraChange}>
|
|
<SelectTrigger className="w-full bg-white/10 border-white/20 text-white hover:bg-white/20 transition-colors">
|
|
<SelectValue placeholder="Seleccionar cámara..." />
|
|
</SelectTrigger>
|
|
<SelectContent className="bg-black/90 backdrop-blur-xl border-white/20">
|
|
{videoDevices.map((device) => (
|
|
<SelectItem key={device.deviceId} value={device.deviceId} className="text-white hover:bg-white/20">
|
|
{device.label || `Cámara ${videoDevices.indexOf(device) + 1}`}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Additional Options */}
|
|
<div className="space-y-4 flex-1">
|
|
{/* App Info */}
|
|
<div className="bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-lg p-4 border border-blue-500/20">
|
|
<h3 className="text-white font-medium mb-2">Smart Store Assistant</h3>
|
|
<p className="text-white/70 text-sm">
|
|
Detector inteligente de Calzado con IA avanzada
|
|
</p>
|
|
<div className="mt-3 text-xs text-blue-300">
|
|
v0.0.3 • Powered by Moonshot
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="pt-4 border-t border-white/10">
|
|
<button className="w-full bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-105">
|
|
Guardar Configuración
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Modern Glassmorphism Dock at Bottom - Always 3 buttons for symmetry */}
|
|
<div className={`absolute left-1/2 transform -translate-x-1/2 z-50 transition-all duration-300 ${
|
|
isPopupOpen || isHistoryOpen || isSettingsPanelOpen ? 'opacity-0 translate-y-4 pointer-events-none' : 'opacity-100 translate-y-0'
|
|
}`}
|
|
style={{
|
|
bottom: 'max(0.75rem, env(safe-area-inset-bottom, 0.75rem))'
|
|
}}>
|
|
<div className="relative">
|
|
{/* Dock Container - Responsive padding */}
|
|
<div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-3xl px-4 sm:px-8 py-3 sm:py-4 shadow-2xl">
|
|
<div className="flex items-center gap-4 sm:gap-6">
|
|
|
|
{/* Chatbot Button - Touch optimized (min 44px) */}
|
|
<button
|
|
onClick={() => {
|
|
if (window.$chatwoot) {
|
|
window.$chatwoot.toggle();
|
|
} else {
|
|
console.warn('Chatwoot not loaded yet');
|
|
}
|
|
}}
|
|
className='group relative min-w-[44px] min-h-[44px]'
|
|
aria-label="Abrir chat de soporte"
|
|
>
|
|
<div className="w-11 h-11 sm:w-12 sm:h-12 bg-gradient-to-br from-blue-500/30 to-purple-500/30 rounded-full flex items-center justify-center border border-white/30 active:from-blue-500/60 active:to-purple-500/60 transition-all duration-200 active:scale-95">
|
|
<MessageCircle size={18} className="sm:w-5 sm:h-5 text-white drop-shadow-sm" />
|
|
</div>
|
|
{/* Glow Effect on active */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full blur opacity-0 group-active:opacity-100 transition-opacity duration-200"></div>
|
|
</button>
|
|
|
|
{/* Main Capture/Cancel Button - Touch optimized */}
|
|
<div className="relative min-w-[60px] min-h-[60px]">
|
|
{/* Capture Button */}
|
|
<button
|
|
onClick={handleScan}
|
|
disabled={isScanning}
|
|
className='group relative'
|
|
aria-label={isScanning ? 'Analizando' : 'Detectar Zapato'}
|
|
>
|
|
<div className={`w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-br rounded-full flex items-center justify-center border-2 border-white/40 transition-all duration-300 shadow-2xl ${
|
|
isScanning
|
|
? 'from-blue-500/40 to-purple-500/40 animate-pulse cursor-not-allowed'
|
|
: 'from-red-500/40 to-pink-500/40 active:from-red-500/60 active:to-pink-500/60 active:scale-95'
|
|
}`}>
|
|
<div className="w-10 h-10 sm:w-12 sm:h-12 bg-white/20 rounded-full flex items-center justify-center">
|
|
<Camera size={24} className="sm:w-7 sm:h-7 text-white drop-shadow-lg" />
|
|
</div>
|
|
</div>
|
|
{/* Pulsing Ring - solo cuando NO está escaneando */}
|
|
{!isScanning && (
|
|
<div className="absolute inset-0 rounded-full border-2 border-red-400/50 animate-ping pointer-events-none"></div>
|
|
)}
|
|
</button>
|
|
|
|
{/* Cancel Button Overlay - appears over capture button when scanning */}
|
|
{isScanning && (
|
|
<button
|
|
onClick={handleCancelScan}
|
|
className='absolute inset-0 flex items-center justify-center animate-in fade-in zoom-in duration-300'
|
|
aria-label="Cancelar escaneo"
|
|
>
|
|
<div className="w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-orange-500/90 to-red-500/90 backdrop-blur-sm rounded-full flex items-center justify-center border-2 border-white/40 active:scale-95 transition-transform duration-200 shadow-2xl">
|
|
<X size={28} className="sm:w-8 sm:h-8 text-white drop-shadow-lg" />
|
|
</div>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* History Button - Touch optimized (min 44px) */}
|
|
<button
|
|
onClick={() => setHistoryOpen(true)}
|
|
className='group relative min-w-[44px] min-h-[44px]'
|
|
aria-label="Historial"
|
|
>
|
|
<div className="w-11 h-11 sm:w-12 sm:h-12 bg-gradient-to-br from-green-500/30 to-emerald-500/30 rounded-full flex items-center justify-center border border-white/30 active:from-green-500/60 active:to-emerald-500/60 transition-all duration-200 active:scale-95">
|
|
<History size={18} className="sm:w-5 sm:h-5 text-white drop-shadow-sm" />
|
|
</div>
|
|
{/* Glow Effect on active */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-full blur opacity-0 group-active:opacity-100 transition-opacity duration-200"></div>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dock Shadow/Reflection */}
|
|
<div className="absolute top-full left-1/2 transform -translate-x-1/2 w-full h-4 bg-gradient-to-b from-white/5 to-transparent rounded-b-3xl blur-sm"></div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
case 'no_devices':
|
|
return (
|
|
<div className="flex h-full w-full flex-col items-center justify-center bg-gradient-to-br from-gray-900 via-black to-gray-800">
|
|
<div className="text-center p-8">
|
|
<div className="relative mb-6">
|
|
<div className="w-24 h-24 mx-auto rounded-full bg-red-500/20 flex items-center justify-center mb-4">
|
|
<VideoOff size={48} className="text-red-400" />
|
|
</div>
|
|
<div className="absolute inset-0 w-24 h-24 mx-auto rounded-full border-2 border-red-400/30 animate-ping"></div>
|
|
</div>
|
|
<h1 className="text-2xl font-bold text-white mb-3">No se encontraron cámaras</h1>
|
|
<p className="text-gray-400 text-lg mb-6 max-w-md mx-auto">
|
|
Asegúrate de que tu cámara esté conectada y funcionando correctamente.
|
|
</p>
|
|
<div className="bg-red-500/10 border border-red-500/20 rounded-lg p-4 max-w-sm mx-auto">
|
|
<p className="text-red-300 text-sm">
|
|
💡 Verifica la conexión de tu cámara web o cámara integrada
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
case 'denied':
|
|
return (
|
|
<div className="flex h-full w-full flex-col items-center justify-center bg-gradient-to-br from-gray-900 via-black to-gray-800">
|
|
<div className="text-center p-8">
|
|
<div className="relative mb-6">
|
|
<div className="w-24 h-24 mx-auto rounded-full bg-yellow-500/20 flex items-center justify-center mb-4">
|
|
<Camera size={48} className="text-yellow-400" />
|
|
</div>
|
|
<div className="absolute inset-0 w-24 h-24 mx-auto rounded-full border-2 border-yellow-400/30 animate-pulse"></div>
|
|
</div>
|
|
<h1 className="text-2xl font-bold text-white mb-3">Acceso a la cámara requerido</h1>
|
|
<p className="text-gray-400 text-lg mb-6 max-w-md mx-auto">
|
|
Necesitamos acceso a tu cámara para detectar zapatos.
|
|
</p>
|
|
<div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4 max-w-sm mx-auto mb-4">
|
|
<p className="text-yellow-300 text-sm mb-2">
|
|
🔒 Habilita el permiso de cámara:
|
|
</p>
|
|
<ol className="text-yellow-300/80 text-xs text-left space-y-1">
|
|
<li>1. Haz clic en el ícono de la cámara en la barra de direcciones</li>
|
|
<li>2. Selecciona "Permitir"</li>
|
|
<li>3. Recarga la página</li>
|
|
</ol>
|
|
</div>
|
|
<button
|
|
onClick={() => window.location.reload()}
|
|
className='bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors'
|
|
>
|
|
Recargar página
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
default:
|
|
return (
|
|
<div className="flex h-full w-full flex-col items-center justify-center bg-gray-900 text-white">
|
|
<div className="text-center">
|
|
<VideoOff size={48} className="mb-4 text-gray-500 mx-auto" />
|
|
<h1 className="text-xl font-semibold mb-2">Estado desconocido</h1>
|
|
<p className="text-gray-400">Por favor, recarga la página</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main className="relative h-screen w-screen bg-black overflow-hidden" style={{
|
|
height: '100dvh', // Dynamic viewport height - better for mobile browsers
|
|
paddingBottom: '0' // Override body padding for this container
|
|
}}>
|
|
{renderContent()}
|
|
<ShoeResultsPopup isOpen={isPopupOpen} onOpenChange={setPopupOpen} detectedSKU={detectedSKU} />
|
|
<HistorySidebar isOpen={isHistoryOpen} onOpenChange={setHistoryOpen} history={history} onItemClick={handleHistoryItemClick} />
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<Suspense fallback={<div className="h-screen w-screen bg-black flex items-center justify-center text-white">Loading...</div>}>
|
|
<HomePageContent />
|
|
</Suspense>
|
|
);
|
|
} |