fix: tìm kiếm địa điểm với cách gõ tên trên bản đồ

frontend/src/components/AddLocationModal.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { format, parseISO } from 'date-fns';
 import { X, MapPin, Loader2, Clock, Map as MapIcon, Navigation, Search } from 'lucide-react';
-import { useTourStore } from '@/store/useTourStore.js';
+import { useTourStore } from '@/store/useTourStore';
 import { MapContainer, TileLayer, Marker, useMapEvents, useMap } from 'react-leaflet';
 import L from 'leaflet';
 
@@ -79,6 +79,7 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
   });
   const [isLoading, setIsLoading] = useState(false);
   const [searchResults, setSearchResults] = useState<any[]>([]);
+  const [hasNoResults, setHasNoResults] = useState(false);
   const [isSearching, setIsSearching] = useState(false);
   const searchTimeout = useRef<any>(null);
   
@@ -121,6 +122,12 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
     }
   }, [initialLegId, editingLocation, isOpen]);
 
+  // Memoize tọa độ để tránh việc bản đồ tự động reset tâm khi re-render (ví dụ khi gõ tìm kiếm)
+  const currentCoords = useMemo<[number, number]>(
+    () => [formData.latitude, formData.longitude],
+    [formData.latitude, formData.longitude]
+  );
+
   // Tự động cập nhật vị trí bản đồ theo chặng được chọn (Lấy điểm cuối của chặng đó làm tham chiếu)
   useEffect(() => {
     if (isOpen && !editingLocation && formData.legId && !formData.name) {
@@ -155,15 +162,23 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
     if (query.trim().length < 2) {
       setSearchResults([]);
       setIsSearching(false);
+      setHasNoResults(false);
       return;
     }
 
     setIsSearching(true);
+    setHasNoResults(false);
     searchTimeout.current = setTimeout(async () => {
       try {
-        const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=8&addressdetails=1&accept-language=vi`);
+        // Loại bỏ countrycodes=vn để tìm kiếm rộng hơn, thêm namedetails=1 để lấy tên chính xác
+        const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=15&addressdetails=1&namedetails=1&accept-language=vi`, {
+          headers: {
+            'Accept-Language': 'vi'
+          }
+        });
         const data = await res.json();
         setSearchResults(data);
+        setHasNoResults(data.length === 0);
       } catch (e) {
         console.error("Lỗi tìm kiếm địa điểm:", e);
       } finally {
@@ -175,9 +190,12 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
   const selectSearchResult = (result: any) => {
     const lat = parseFloat(result.lat);
     const lon = parseFloat(result.lon);
+    // Ưu tiên lấy tên từ namedetails nếu có, nếu không lấy phần đầu của display_name
+    const locationName = result.namedetails?.name || result.display_name.split(',')[0];
+    
     setFormData(prev => ({
       ...prev,
-      name: result.display_name.split(',')[0],
+      name: locationName,
       address: result.display_name,
       latitude: lat,
       longitude: lon
@@ -297,10 +315,10 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
 
         {/* Mini Map Picker */}
         <div className="h-48 w-full rounded-2xl overflow-hidden mb-6 border border-gray-100 relative shadow-inner group">
-          <MapContainer center={[formData.latitude, formData.longitude]} zoom={13} className="h-full w-full">
+          <MapContainer center={currentCoords} zoom={13} className="h-full w-full">
             <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
-            <Marker position={[formData.latitude, formData.longitude]} />
-            <MapPicker center={[formData.latitude, formData.longitude]} onPick={handlePickLocation} />
+            <Marker position={currentCoords} />
+            <MapPicker center={currentCoords} onPick={handlePickLocation} />
           </MapContainer>
           <div className="absolute bottom-2 left-2 z-[1000] bg-white/90 backdrop-blur-sm px-2 py-1 rounded-lg text-[10px] font-black text-gray-500 shadow-sm border border-gray-100">
             CHUỘT PHẢI ĐỂ CHỌN VỊ TRÍ
@@ -318,7 +336,7 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
           </button>
         )}
 
-        <form onSubmit={handleSubmit} className="space-y-4" onClick={() => setSearchResults([])}>
+        <form onSubmit={handleSubmit} className="space-y-4">
           <div className="relative">
             <label className="block text-sm font-bold text-gray-700 mb-1">Tên địa điểm</label>
             <div className="relative group">
@@ -333,7 +351,7 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
                 {isSearching ? (
                   <Loader2 className="w-4 h-4 animate-spin text-blue-500" />
                 ) : formData.name ? (
-                  <button type="button" onClick={() => { setFormData({...formData, name: ''}); setSearchResults([]); }} className="hover:text-red-500 transition-colors">
+                  <button type="button" onClick={() => { setFormData({...formData, name: ''}); setSearchResults([]); setHasNoResults(false); }} className="hover:text-red-500 transition-colors">
                     <X className="w-4 h-4 text-gray-400" />
                   </button>
                 ) : (
@@ -342,19 +360,32 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
               </div>
             </div>
             
-            {searchResults.length > 0 && (
-              <div className="absolute z-[3100] left-0 right-0 mt-2 bg-white border border-gray-100 rounded-2xl shadow-2xl overflow-hidden max-h-64 overflow-y-auto animate-in slide-in-from-top-2 duration-200">
-                {searchResults.map((result, idx) => (
-                  <button
-                    key={idx}
-                    type="button"
-                    onClick={(e) => { e.preventDefault(); e.stopPropagation(); selectSearchResult(result); }}
-                    className="w-full text-left px-4 py-3 hover:bg-blue-50 border-b border-gray-50 last:border-0 transition-all flex flex-col gap-0.5"
-                  >
-                    <div className="font-bold text-sm text-gray-900 line-clamp-1">{result.display_name.split(',')[0]}</div>
-                    <div className="text-[10px] text-gray-500 line-clamp-2 leading-tight">{result.display_name}</div>
-                  </button>
-                ))}
+            {(searchResults.length > 0 || hasNoResults) && (
+              <div className="absolute z-[5000] left-0 right-0 mt-2 bg-white border border-gray-200 rounded-2xl shadow-2xl overflow-hidden max-h-64 overflow-y-auto animate-in slide-in-from-top-2 duration-200">
+                {hasNoResults ? (
+                  <div className="px-4 py-6 text-center text-gray-400 text-sm italic">
+                    Không tìm thấy địa điểm nào phù hợp...
+                  </div>
+                ) : (
+                  searchResults.map((result, idx) => (
+                    <button
+                      key={idx}
+                      type="button"
+                      onClick={(e) => { e.preventDefault(); e.stopPropagation(); selectSearchResult(result); }}
+                      className="w-full text-left px-4 py-3 hover:bg-blue-50 border-b border-gray-50 last:border-0 transition-all flex flex-col gap-0.5"
+                    >
+                      <div className="flex items-center justify-between gap-2">
+                        <div className="font-bold text-sm text-gray-900 line-clamp-1">
+                          {result.namedetails?.name || result.display_name.split(',')[0]}
+                        </div>
+                        {result.type && (
+                          <span className="text-[9px] font-black uppercase text-blue-400 bg-blue-50 px-1.5 py-0.5 rounded border border-blue-100 shrink-0">{result.type}</span>
+                        )}
+                      </div>
+                      <div className="text-[10px] text-gray-500 line-clamp-2 leading-tight">{result.display_name}</div>
+                    </button>
+                  ))
+                )}
               </div>
             )}
           </div>