feat: cho phép người dùng chọn tọa độ trên bản đồ khi sửa ảnh

frontend/src/components/PublicPhotoModal.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { X, Send, MessageSquare, User, Loader2, Calendar, MapPin, Download, Edit } from 'lucide-react';
 import { io } from 'socket.io-client';
+import { CoordinateSelectModal } from './CoordinateSelectModal';
 
 interface Comment {
   id: string;
@@ -58,6 +59,7 @@ export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
   const [editLat, setEditLat] = useState<number | ''>('');
   const [editLng, setEditLng] = useState<number | ''>('');
   const [isSavingEdit, setIsSavingEdit] = useState(false);
+  const [isMapOpen, setIsMapOpen] = useState(false);
 
   const checkCurrentUser = () => {
     const userStr = localStorage.getItem('user');
@@ -382,6 +384,17 @@ export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
                       />
                     </div>
                   </div>
+
+                  <div className="flex justify-start">
+                    <button
+                      type="button"
+                      onClick={() => setIsMapOpen(true)}
+                      className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-800 hover:bg-slate-750 border border-slate-700/50 text-slate-300 hover:text-white rounded-xl text-[10px] font-bold transition-all"
+                    >
+                      <MapPin className="w-3.5 h-3.5 text-rose-500" />
+                      Chọn trên bản đồ
+                    </button>
+                  </div>
                 </div>
 
                 <div className="flex justify-end gap-2 mt-2">
@@ -571,6 +584,17 @@ export const PublicPhotoModal: React.FC<PublicPhotoModalProps> = ({
         </div>
 
       </div>
+
+      <CoordinateSelectModal
+        isOpen={isMapOpen}
+        onClose={() => setIsMapOpen(false)}
+        initialLat={typeof editLat === 'number' ? editLat : undefined}
+        initialLng={typeof editLng === 'number' ? editLng : undefined}
+        onSelect={(lat, lng) => {
+          setEditLat(lat);
+          setEditLng(lng);
+        }}
+      />
     </div>
   );
 };