feat: xem ảnh theo cấu trúc của lightroom

frontend/src/pages/TourDetailPage.tsx

@@ -188,7 +188,7 @@ export const TourDetailPage = ({ onBack, tourId, isPublicView = false }: { onBac
   const [editingLocation, setEditingLocation] = useState<any>(null);
   const [selectedMember, setSelectedMember] = useState<any>(null);
   const [isMemberDetailOpen, setIsMemberDetailOpen] = useState(false);
-  const [selectedPhoto, setSelectedPhoto] = useState<any | null>(null);
+  const [selectedPhotoForDisplay, setSelectedPhotoForDisplay] = useState<any | null>(null); // New state for large photo display
   const currentUserId = useMemo(() => {
     const token = localStorage.getItem('token');
     if (!token) return null;
@@ -208,7 +208,34 @@ export const TourDetailPage = ({ onBack, tourId, isPublicView = false }: { onBac
   const [tagsInput, setTagsInput] = useState<string[]>(currentTour?.tags ?? []);
   const [customTag, setCustomTag] = useState('');
   const availableTags = ['Văn hóa', 'Mạo hiểm', 'Nghỉ dưỡng', 'Thư giãn', 'Ẩm thực', 'Khám phá', 'Gia đình'];
+  const [selectedLegIdForPhoto, setSelectedLegIdForPhoto] = useState<string | 'all'>('all'); // Keep this state
 
+  // Memoized filtered photos based on selectedLegIdForPhoto
+  const filteredPhotos = useMemo(() => {
+    if (!currentTour?.photos) return [];
+    let photosToFilter = currentTour.photos;
+
+    if (selectedLegIdForPhoto !== 'all') {
+      const targetLeg = legs.find(l => l.id === selectedLegIdForPhoto);
+      if (targetLeg) {
+        const locationIdsInLeg = targetLeg.locations.map((loc: any) => loc.id);
+        // Filter photos that have a locationId and that locationId is in the current leg
+        photosToFilter = photosToFilter.filter((p: any) => p.locationId && locationIdsInLeg.includes(p.locationId));
+      } else {
+        photosToFilter = []; // If leg not found, no photos
+      }
+    }
+    return photosToFilter;
+  }, [currentTour?.photos, selectedLegIdForPhoto, legs]);
+
+  // Effect to set initial selected photo for display or reset if current one is no longer in filtered list
+  useEffect(() => {
+    if (filteredPhotos.length > 0 && !selectedPhotoForDisplay) {
+      setSelectedPhotoForDisplay(filteredPhotos[0]);
+    } else if (selectedPhotoForDisplay && !filteredPhotos.some(p => p.id === selectedPhotoForDisplay.id)) {
+      setSelectedPhotoForDisplay(filteredPhotos.length > 0 ? filteredPhotos[0] : null);
+    }
+  }, [filteredPhotos, selectedPhotoForDisplay]);
   const [isCommentModalOpen, setIsCommentModalOpen] = useState(false);
   const [commentLocationId, setCommentLocationId] = useState('');
   const [commentLocationName, setCommentLocationName] = useState('');
@@ -256,8 +283,8 @@ export const TourDetailPage = ({ onBack, tourId, isPublicView = false }: { onBac
       if (!response.ok) throw new Error('Không thể xóa ảnh');
 
       notify({ title: 'Thành công', message: 'Đã xóa ảnh.', type: 'success' });
-      fetchTour(tourId);
-      setSelectedPhoto(null);
+      fetchTour(tourId); // Re-fetch tour to update photo list
+      setSelectedPhotoForDisplay(null); // Reset selected photo after deletion
     } catch (error) {
       notify({ title: 'Lỗi', message: 'Không thể xóa ảnh. Vui lòng thử lại.', type: 'error' });
     }
@@ -341,6 +368,28 @@ export const TourDetailPage = ({ onBack, tourId, isPublicView = false }: { onBac
     // Fetch tour details when tourId changes or public view status changes
     if (tourId) { isPublicView ? fetchPublicTourDetails(tourId) : fetchTour(tourId); }
   }, [tourId, isPublicView, userRole]); // Add tourId to dependencies
+
+  // New useEffect to manage initial photo display when currentTour or legs change
+  useEffect(() => {
+    if (currentTour && currentTour.photos && currentTour.photos.length > 0) {
+      // If there are photos, and no leg is selected, default to 'all' and first photo
+      if (selectedLegIdForPhoto === 'all' && !selectedPhotoForDisplay) {
+        setSelectedPhotoForDisplay(currentTour.photos[0]);
+      } else if (selectedLegIdForPhoto !== 'all') {
+        // If a specific leg is selected, try to find a photo for that leg
+        const targetLeg = legs.find(l => l.id === selectedLegIdForPhoto);
+        if (targetLeg) {
+          const locationIdsInLeg = targetLeg.locations.map((loc: any) => loc.id);
+          const photosInLeg = currentTour.photos.filter((p: any) => p.locationId && locationIdsInLeg.includes(p.locationId));
+          if (photosInLeg.length > 0 && !selectedPhotoForDisplay) {
+            setSelectedPhotoForDisplay(photosInLeg[0]);
+          } else if (selectedPhotoForDisplay && !photosInLeg.some(p => p.id === selectedPhotoForDisplay.id)) {
+            setSelectedPhotoForDisplay(photosInLeg.length > 0 ? photosInLeg[0] : null);
+          }
+        }
+      }
+    }
+  }, [currentTour, legs, selectedLegIdForPhoto, selectedPhotoForDisplay]);
   const [mapZoom] = useState(initialViewState?.zoom || 13);
 
   // Memoize danh sách tọa độ để MapTourBounds không bị trigger thừa
@@ -985,45 +1034,103 @@ export const TourDetailPage = ({ onBack, tourId, isPublicView = false }: { onBac
           )}
 
           {activeTab === 'photo' && (
-            <div className="grid grid-cols-3 gap-2 animate-in fade-in">
-              {currentTour?.photos && currentTour.photos.length > 0 ? (
-                currentTour.photos.map((photo: any) => {
-                  const isUploader = currentUserId === photo.uploaderId;
-                  return (
-                    <div 
-                      key={photo.id} 
-                      onClick={() => setSelectedPhoto(photo)}
-                      className="aspect-square bg-gray-200 rounded-2xl overflow-hidden relative group border border-white shadow-sm cursor-pointer"
+            <div className="animate-in fade-in">
+              {/* Main container for the new layout */}
+              <div className="flex flex-col md:flex-row gap-4">
+                {/* Left Column: Leg List */}
+                <div className="md:w-1/4 bg-white rounded-2xl shadow-lg border border-gray-100 p-4 flex-shrink-0">
+                  <h3 className="text-sm font-bold text-gray-800 mb-3">Chặng của Tour</h3>
+                  <div className="space-y-2">
+                    <button
+                      onClick={() => {
+                        setSelectedLegIdForPhoto('all');
+                        setSelectedPhotoForDisplay(null); // Reset selected photo when changing leg
+                      }}
+                      className={`w-full text-left px-3 py-2 rounded-xl text-xs font-bold transition-all ${
+                        selectedLegIdForPhoto === 'all' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                      }`}
                     >
-                      <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors z-10" />
+                      Tất cả ảnh
+                    </button>
+                    {legs.map(leg => (
+                      <button
+                        key={leg.id}
+                        onClick={() => {
+                          setSelectedLegIdForPhoto(leg.id);
+                          setSelectedPhotoForDisplay(null); // Reset selected photo when changing leg
+                        }}
+                        className={`w-full text-left px-3 py-2 rounded-xl text-xs font-bold transition-all ${
+                          selectedLegIdForPhoto === leg.id ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                        }`}
+                      >
+                        Chặng {leg.sequence}: {leg.note || 'Không ghi chú'}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Right Column: Large Photo Display */}
+                <div className="md:flex-1 bg-white rounded-2xl shadow-lg border border-gray-100 p-4 flex flex-col items-center justify-center min-h-[300px]">
+                  {selectedPhotoForDisplay ? (
+                    <div className="relative w-full h-full flex items-center justify-center">
                       <img
-                        src={photo.imageUrl} 
-                        alt="Tour photo"
-                        className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
+                        src={selectedPhotoForDisplay.imageUrl}
+                        alt="Selected Tour Photo"
+                        className="max-w-full max-h-[calc(100vh-200px)] object-contain rounded-xl shadow-md"
                       />
-                      {isUploader && !isPublicView && (
+                      {/* Optional: Add delete button for the large photo */}
+                      {currentUserId === selectedPhotoForDisplay.uploaderId && !isPublicView && (
                         <button
                           onClick={(e) => {
                             e.stopPropagation();
-                            handleDeletePhoto(photo.id);
+                            handleDeletePhoto(selectedPhotoForDisplay.id);
                           }}
-                          className="absolute top-2 right-2 p-1.5 bg-red-500/80 backdrop-blur-sm text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity z-20 hover:bg-red-600"
+                          className="absolute top-4 right-4 p-2 bg-red-500/80 backdrop-blur-sm text-white rounded-full shadow-lg hover:bg-red-600 transition-colors"
+                          title="Xóa ảnh này"
                         >
-                          <Trash2 className="w-4 h-4" />
+                          <Trash2 className="w-5 h-5" />
                         </button>
                       )}
                     </div>
-                  );
-                })
-              ) : (
-                <div className="col-span-3 py-24 text-center bg-white rounded-[40px] border-2 border-dashed border-gray-100 animate-in zoom-in-95">
-                  <div className="w-20 h-20 bg-gray-50 rounded-3xl flex items-center justify-center mx-auto mb-6">
-                    <ImageIcon className="w-10 h-10 text-gray-200" />
-                  </div>
-                  <h4 className="text-lg font-bold text-gray-400">Khoảnh khắc trống</h4>
-                  <p className="text-sm text-gray-300 mt-2 max-w-[200px] mx-auto">Hãy là người đầu tiên chia sẻ những hình ảnh tuyệt vời của chuyến đi này!</p>
+                  ) : (
+                    <div className="text-center text-gray-400">
+                      <ImageIcon className="w-16 h-16 mx-auto mb-4" />
+                      <p className="text-lg font-medium">Chọn một ảnh để xem chi tiết</p>
+                    </div>
+                  )}
                 </div>
-              )}
+              </div>
+
+              {/* Bottom Row: Thumbnails */}
+              <div className="mt-4 bg-white rounded-2xl shadow-lg border border-gray-100 p-4">
+                <h3 className="text-sm font-bold text-gray-800 mb-3">
+                  {selectedLegIdForPhoto === 'all' ? 'Tất cả ảnh' : `Ảnh của Chặng ${legs.find(l => l.id === selectedLegIdForPhoto)?.sequence || ''}`}
+                </h3>
+                {filteredPhotos.length > 0 ? (
+                  <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3 overflow-x-auto pb-2">
+                    {filteredPhotos.map((photo: any) => (
+                      <div
+                        key={photo.id}
+                        onClick={() => setSelectedPhotoForDisplay(photo)}
+                        className={`aspect-square bg-gray-200 rounded-xl overflow-hidden relative group border-2 ${
+                          selectedPhotoForDisplay?.id === photo.id ? 'border-blue-500' : 'border-transparent'
+                        } hover:border-blue-300 transition-all cursor-pointer`}
+                      >
+                        <img
+                          src={photo.imageUrl}
+                          alt="Thumbnail"
+                          className="w-full h-full object-cover"
+                        />
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="py-10 text-center text-gray-400">
+                    <ImageIcon className="w-12 h-12 mx-auto mb-3" />
+                    <p className="text-md font-medium">Chưa có ảnh nào cho chặng này.</p>
+                  </div>
+                )}
+              </div>
             </div>
           )}