Sửa lỗi khi click vào dấu + để thêm chặng

AddLocationModal.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { X, MapPin, Loader2, Clock } from 'lucide-react';
 import { useTourStore } from './useTourStore.js';
 
-export const AddLocationModal = ({ isOpen, onClose, tourId }: { isOpen: boolean, onClose: () => void, tourId: string }) => {
+export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId }: { isOpen: boolean, onClose: () => void, tourId: string, initialLegId?: string }) => {
   const [formData, setFormData] = useState({
     name: '',
     address: '',
@@ -14,13 +14,26 @@ export const AddLocationModal = ({ isOpen, onClose, tourId }: { isOpen: boolean,
     plannedEnd: ''
   });
   const [isLoading, setIsLoading] = useState(false);
-  const legs = useTourStore(state => state.legs);
-  const addLocation = useTourStore(state => state.addLocation);
+  
+  // Gom các selector lại để giảm số lượng Hook gọi nội bộ và tăng hiệu năng
+  const { legs, addLocation } = useTourStore();
 
-  if (!isOpen) return null;
+  // 1. Luôn khai báo Hook ở cấp cao nhất, không đặt code logic/return giữa các Hook
+  useEffect(() => {
+    // Chỉ cập nhật nếu giá trị thực sự thay đổi để tránh vòng lặp re-render
+    if (initialLegId && formData.legId !== initialLegId) {
+      setFormData(prev => ({ ...prev, legId: initialLegId }));
+    }
+  }, [initialLegId, isOpen]);
 
-  // Mặc định chọn chặng đầu nếu chưa chọn
+  // 2. Thực hiện các tính toán phụ trợ
   const currentLegId = formData.legId || (legs.length > 0 ? legs[0].id : '');
+  const targetLeg = legs.find(l => l.id === currentLegId);
+  const titleText = initialLegId ? `Thêm địa điểm cho ${targetLeg?.note || `Chặng ${targetLeg?.sequence}`}` : 'Thêm địa điểm mới';
+  const buttonText = initialLegId ? 'Xác nhận thêm vào chặng' : 'Thêm địa điểm';
+
+  // 3. Early return phải nằm SAU tất cả các khai báo Hook
+  if (!isOpen) return null;
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -46,7 +59,7 @@ export const AddLocationModal = ({ isOpen, onClose, tourId }: { isOpen: boolean,
       <div className="relative w-full max-w-lg bg-white rounded-3xl shadow-2xl overflow-hidden p-8 max-h-[90vh] overflow-y-auto">
         <div className="flex justify-between items-center mb-6">
           <h2 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
-            <MapPin className="w-6 h-6 text-blue-600" /> Thêm địa điểm mới
+            <MapPin className="w-6 h-6 text-blue-600" /> {titleText}
           </h2>
           <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
             <X className="w-6 h-6 text-gray-400" />
@@ -103,7 +116,7 @@ export const AddLocationModal = ({ isOpen, onClose, tourId }: { isOpen: boolean,
             </div>
           </div>
           <button disabled={isLoading} className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl flex items-center justify-center gap-2 mt-4">
-            {isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Thêm địa điểm'}
+            {isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : buttonText}
           </button>
         </form>
       </div>