Actualizar aceptar.html

aceptar.html

@@ -29,42 +29,43 @@
                 <div class="flex justify-between items-start border-b border-slate-50 pb-4">
                     <div>
                         <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Gremio</p>
-                        <p id="guild" class="font-black text-blue-600 uppercase text-lg">--</p>
+                        <p id="guild" class="font-black text-blue-600 uppercase text-lg leading-tight">--</p>
                     </div>
-                    <div class="text-right">
+                    <div class="text-right shrink-0 ml-4">
                         <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Referencia</p>
-                        <p id="ref" class="font-bold text-slate-700">--</p>
+                        <p id="ref" class="font-bold text-slate-700 text-sm">--</p>
                     </div>
                 </div>
 
-                <div class="space-y-4">
+                <div class="space-y-5">
                     <div class="flex items-start gap-3">
-                        <div class="bg-slate-100 p-2 rounded-lg text-slate-500">
+                        <div class="bg-indigo-50 p-2.5 rounded-xl text-indigo-500 shrink-0">
                             <i data-lucide="map-pin" class="w-5 h-5"></i>
                         </div>
-                        <div>
+                        <div class="min-w-0">
-                            <p class="text-[10px] font-black text-slate-400 uppercase">Ubicación / CP</p>
+                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-0.5">Ubicación / CP</p>
-                            <p id="location" class="font-bold text-slate-800 uppercase">--</p>
+                            <p id="location-street" class="font-bold text-slate-800 uppercase text-sm truncate">--</p>
+                            <p id="location-city" class="text-xs text-slate-500 font-medium mt-0.5">--</p>
                         </div>
                     </div>
 
                     <div class="flex items-start gap-3">
-                        <div class="bg-slate-100 p-2 rounded-lg text-slate-500">
+                        <div class="bg-rose-50 p-2.5 rounded-xl text-rose-500 shrink-0">
-                            <i data-lucide="align-left" class="w-5 h-5"></i>
+                            <i data-lucide="alert-circle" class="w-5 h-5"></i>
                         </div>
                         <div>
-                            <p class="text-[10px] font-black text-slate-400 uppercase">Descripción del Daño</p>
+                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-0.5">Resumen del Siniestro</p>
-                            <p id="desc" class="text-sm text-slate-600 leading-relaxed font-medium">--</p>
+                            <p id="desc" class="text-sm text-slate-700 leading-snug font-bold uppercase">--</p>
                         </div>
                     </div>
                 </div>
             </div>
 
             <div class="grid grid-cols-2 gap-4 pt-4">
-                <button onclick="respond('reject')" class="btn-animate bg-white border-2 border-slate-200 text-slate-500 font-black py-4 rounded-2xl uppercase text-xs tracking-widest hover:bg-slate-50">
+                <button onclick="respond('reject')" class="btn-animate bg-white border-2 border-slate-200 text-slate-500 font-black py-4 rounded-2xl uppercase text-xs tracking-widest hover:bg-slate-50 shadow-sm">
                     Rechazar
                 </button>
-                <button onclick="respond('accept')" class="btn-animate bg-green-600 text-white font-black py-4 rounded-2xl uppercase text-xs tracking-widest shadow-lg shadow-green-200 hover:bg-green-700">
+                <button onclick="respond('accept')" class="btn-animate bg-emerald-600 text-white font-black py-4 rounded-2xl uppercase text-xs tracking-widest shadow-lg shadow-emerald-200 hover:bg-emerald-700">
                     Aceptar Trabajo
                 </button>
             </div>
@@ -74,11 +75,14 @@
             <i data-lucide="clock-alert" class="w-20 h-20 text-slate-300 mx-auto mb-6"></i>
             <h2 class="text-2xl font-black text-slate-800 uppercase">¡Lo sentimos!</h2>
             <p id="error-msg" class="text-slate-500 text-base mt-3 font-medium">Este enlace ha caducado o el servicio ya ha sido asignado a otro compañero.</p>
-            <button onclick="window.close()" class="mt-10 text-blue-600 font-bold uppercase text-sm tracking-widest">Cerrar ventana</button>
+            <button onclick="window.close()" class="mt-10 bg-slate-100 px-6 py-3 rounded-full text-slate-600 font-bold uppercase text-xs tracking-widest active:scale-95 transition-transform">Cerrar ventana</button>
         </div>
 
         <div id="loading" class="flex-1 flex items-center justify-center">
-            <i data-lucide="loader-2" class="w-8 h-8 animate-spin text-blue-600"></i>
+            <div class="text-center">
+                <i data-lucide="loader-2" class="w-8 h-8 animate-spin text-blue-600 mx-auto mb-3"></i>
+                <p class="text-xs font-bold text-slate-400 uppercase tracking-widest animate-pulse">Obteniendo datos...</p>
+            </div>
         </div>
 
     </div>
@@ -97,6 +101,32 @@
             lucide.createIcons();
         });
 
+        // ==========================================
+        // LÓGICA DE RESUMEN INTELIGENTE (IA JS)
+        // ==========================================
+        function smartSummarize(text) {
+            if (!text || text.trim() === "") return "REVISAR AVERÍA";
+            
+            // 1. Quitamos saltos de línea y forzamos minúsculas
+            let clean = text.replace(/(\r\n|\n|\r)/gm, " ").toLowerCase();
+            
+            // 2. Cortamos si detectamos que empiezan las notas administrativas
+            const cutIndex = clean.search(/(\bmo\b|\bm\.o\b|\bmaterial\b|\basegurado\b|\btelefono\b|\burgente\b|\bobservaciones\b)/i);
+            if (cutIndex > 5) clean = clean.substring(0, cutIndex);
+
+            // 3. Separamos por palabras y filtramos las palabras vacías/comunes
+            const stopWords = ['el', 'la', 'los', 'las', 'un', 'una', 'unos', 'unas', 'de', 'del', 'a', 'ante', 'con', 'para', 'por', 'y', 'e', 'o', 'u', 'en', 'que', 'su', 'se', 'ha', 'al', 'es'];
+            
+            let words = clean.replace(/[^\w\sáéíóúüñ]/gi, '').split(/\s+/); // Quitamos comas y puntos
+            let keywords = words.filter(w => w.length > 2 && !stopWords.includes(w));
+            
+            // 4. Tomamos solo las primeras 5 palabras clave
+            if (keywords.length > 5) {
+                return keywords.slice(0, 5).join(' ') + "...";
+            }
+            return keywords.join(' ') || "REVISAR AVERÍA";
+        }
+
         async function loadAssignmentData() {
             try {
                 const res = await fetch(`${API_URL}/public/assignment/${token}`);
@@ -104,11 +134,32 @@
 
                 if (data.ok) {
                     const raw = data.service;
+                    
+                    // 1. GREMIO Y REFERENCIA
                     document.getElementById('guild').innerText = raw["Gremio"] || "Servicio General";
                     document.getElementById('ref').innerText = raw["Expediente"] || "Sin Ref";
-                    document.getElementById('location').innerText = `${raw["Población"] || 'Zona'} (CP: ${raw["Código Postal"] || '---'})`;
-                    document.getElementById('desc').innerText = raw["Descripción"] || "Revisar en el lugar.";
                     
+                    // 2. PROCESADO DE DIRECCIÓN (Solo calle, corta antes del número)
+                    const fullAddress = raw["Dirección"] || raw["DOMICILIO"] || "";
+                    let streetOnly = fullAddress;
+                    
+                    // Busca el primer dígito y corta el string justo antes
+                    const streetMatch = fullAddress.match(/^([^0-9]+)/);
+                    if (streetMatch && streetMatch[1]) {
+                        streetOnly = streetMatch[1].replace(/[,/-]+$/, '').trim(); // Quita comas finales
+                    }
+                    if(!streetOnly) streetOnly = "Dirección Oculta";
+
+                    const city = raw["Población"] || "Ciudad sin especificar";
+                    const cp = raw["Código Postal"] || "---";
+
+                    document.getElementById('location-street').innerText = streetOnly;
+                    document.getElementById('location-city').innerText = `${city} (CP: ${cp})`;
+
+                    // 3. RESUMEN INTELIGENTE
+                    document.getElementById('desc').innerText = smartSummarize(raw["Descripción"]);
+                    
+                    // TEMPORIZADOR
                     if (data.debug) {
                         const limitDate = new Date(data.debug.hora_limite_bd);
                         const timeStr = limitDate.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });
@@ -135,11 +186,10 @@
             if(!confirm(`¿Seguro que quieres ${action === 'accept' ? 'ACEPTAR' : 'RECHAZAR'} este servicio?`)) return;
 
             try {
-                // OCULTAMOS TODO PARA DEJAR LA PANTALLA LIMPIA
                 document.getElementById('top-header').classList.add('hidden');
                 document.getElementById('content').classList.add('hidden');
                 
-                document.getElementById('loading').innerHTML = `<i data-lucide="loader-2" class="w-8 h-8 animate-spin text-blue-600 mt-20"></i>`;
+                document.getElementById('loading').innerHTML = `<div class="text-center mt-20"><i data-lucide="loader-2" class="w-10 h-10 animate-spin text-blue-600 mx-auto mb-3"></i><p class="text-xs font-bold text-slate-400 uppercase tracking-widest animate-pulse">Procesando...</p></div>`;
                 document.getElementById('loading').classList.remove('hidden');
                 lucide.createIcons();
 
@@ -153,9 +203,9 @@
                 if (data.ok) {
                     document.getElementById('loading').innerHTML = `
                         <div class="text-center fade-in mt-20">
-                            <i data-lucide="check-circle-2" class="w-24 h-24 text-green-500 mx-auto mb-6"></i>
+                            <i data-lucide="${action === 'accept' ? 'check-circle-2' : 'x-circle'}" class="w-24 h-24 ${action === 'accept' ? 'text-emerald-500' : 'text-slate-300'} mx-auto mb-6"></i>
                             <h2 class="text-3xl font-black uppercase text-slate-800 tracking-tight">${action === 'accept' ? '¡Asignado!' : 'Rechazado'}</h2>
-                            <p class="text-slate-500 text-base mt-4">${action === 'accept' ? 'Ya puedes verlo en tu lista de servicios.' : 'Gracias por avisar. Turno liberado.'}</p>
+                            <p class="text-slate-500 text-base mt-4">${action === 'accept' ? 'Ya puedes ver todos los datos del cliente en tu aplicación.' : 'Gracias por avisar. Turno liberado para otro compañero.'}</p>
                         </div>
                     `;
                     lucide.createIcons();
@@ -168,12 +218,12 @@
         }
 
         function showError(msg) {
-            // EN CASO DE ERROR TAMBIÉN OCULTAMOS LA CABECERA
             document.getElementById('top-header').classList.add('hidden');
             document.getElementById('loading').classList.add('hidden');
             document.getElementById('content').classList.add('hidden');
             document.getElementById('error-screen').classList.remove('hidden');
             if(msg) document.getElementById('error-msg').innerText = msg;
+            lucide.createIcons();
         }
     </script>
 </body>