changes: Display data on result history fixed to get form last view

app/page.tsx

@@ -10,6 +10,7 @@ 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 } from '@/lib/product-api';
 
 type CameraStatus = 'loading' | 'active' | 'denied' | 'no_devices';
 
@@ -267,18 +268,49 @@ function HomePageContent() {
       console.log('📦 SKU result:', sku);
 
       if (sku) {
-        // SKU encontrado - guardar y abrir modal
+        // SKU encontrado - obtener datos reales del producto
         setDetectedSKU(sku);
 
-        const shoeWithSKU: Shoe = {
-          id: Date.now().toString(),
-          name: `Producto ${sku}`,
-          brand: 'Identificado por IA',
-          price: 'Precio por consultar',
-          image: '/placeholder.jpg',
-          sku: sku,
-          timestamp: new Date().toISOString()
-        };
+        // 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
+        let shoeWithSKU: Shoe;
+        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);

components/history-sidebar.tsx

@@ -54,13 +54,17 @@ export default function HistorySidebar({ history, isOpen, onOpenChange, onItemCl
                 <div className="bg-white/5 active:bg-white/15 backdrop-blur-sm border border-white/10 active:border-white/30 rounded-xl p-4 transition-all duration-200 active:scale-[0.98] shadow-md min-h-[60px]">
                   <div className="flex items-center space-x-4">
                     <div className="relative">
-                      <div className="w-14 h-14 rounded-lg overflow-hidden border border-white/20 group-hover:border-white/30 transition-colors">
+                      <div className="w-14 h-14 rounded-lg overflow-hidden border border-white/20 group-hover:border-white/30 transition-colors bg-white/5">
                         <Image
-                          src={shoe.imageUrl || '/placeholder-shoe.png'}
+                          src={shoe.image || shoe.imageUrl || '/placeholder-shoe.png'}
                           alt={shoe.name}
                           width={56}
                           height={56}
                           className="object-cover w-full h-full group-hover:scale-110 transition-transform duration-300"
+                          onError={(e) => {
+                            const target = e.target as HTMLImageElement;
+                            target.src = '/placeholder-shoe.png';
+                          }}
                         />
                       </div>
                     </div>