feat: tính năng chia sẻ khẩn cấp

frontend/src/components/AddPhotoModal.tsx

@@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react';
 import { X, Upload, Image as ImageIcon, Loader2 } from 'lucide-react';
 import { useNotification } from '@/hooks/useNotification';
 import { useTourStore } from '@/store/useTourStore';
+import { processImageModeration } from '@/hooks/useImageModeration';
 
 interface AddPhotoModalProps {
   isOpen: boolean;
@@ -14,6 +15,7 @@ export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, t
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [previews, setPreviews] = useState<string[]>([]);
   const [isUploading, setIsUploading] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const notify = useNotification();
   const fetchTour = useTourStore(state => state.fetchTour);
@@ -26,34 +28,52 @@ export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, t
       const newValidFiles: File[] = [];
       const newValidPreviews: string[] = [];
 
-      for (const file of files) {
-        // 1. Kiểm tra cơ bản: Tệp có dung lượng hay không
-        if (!file || file.size === 0) {
-          notify({ title: 'Lỗi tệp', message: `Tệp ${file.name} trống hoặc không khả dụng.`, type: 'error' });
-          continue;
+      setIsProcessing(true);
+      notify({ title: 'Đang kiểm duyệt...', message: 'Đang kiểm tra và lọc hình ảnh của bạn...', type: 'info' });
+
+      try {
+        for (const file of files) {
+          // 1. Kiểm tra cơ bản: Tệp có dung lượng hay không
+          if (!file || file.size === 0) {
+            notify({ title: 'Lỗi tệp', message: `Tệp ${file.name} trống hoặc không khả dụng.`, type: 'error' });
+            continue;
+          }
+
+          // 2. Chạy kiểm duyệt hình ảnh
+          const moderationResult = await processImageModeration(file);
+          if (moderationResult.blocked) {
+            notify({ title: 'Ảnh bị từ chối', message: `Ảnh ${file.name} chứa nội dung không phù hợp và bị chặn.`, type: 'error' });
+            continue;
+          }
+
+          const processedFile = moderationResult.file;
+          const previewUrl = URL.createObjectURL(processedFile);
+
+          // 3. Kiểm tra tính toàn vẹn: Thử load ảnh vào bộ nhớ để xác nhận file "tồn tại" và đọc được
+          const isValidImage = await new Promise<boolean>((resolve) => {
+            const img = new Image();
+            img.onload = () => resolve(true);
+            img.onerror = () => resolve(false);
+            img.src = previewUrl;
+          });
+
+          if (isValidImage) {
+            newValidFiles.push(processedFile);
+            newValidPreviews.push(previewUrl);
+          } else {
+            URL.revokeObjectURL(previewUrl); // Thu hồi ngay nếu không hợp lệ
+            notify({ title: 'Lỗi ảnh', message: `Không thể đọc nội dung ảnh: ${file.name}. Vui lòng kiểm tra lại file.`, type: 'error' });
+          }
         }
 
-        const previewUrl = URL.createObjectURL(file);
-
-        // 2. Kiểm tra tính toàn vẹn: Thử load ảnh vào bộ nhớ để xác nhận file "tồn tại" và đọc được
-        const isValidImage = await new Promise<boolean>((resolve) => {
-          const img = new Image();
-          img.onload = () => resolve(true);
-          img.onerror = () => resolve(false);
-          img.src = previewUrl;
-        });
-
-        if (isValidImage) {
-          newValidFiles.push(file);
-          newValidPreviews.push(previewUrl);
-        } else {
-          URL.revokeObjectURL(previewUrl); // Thu hồi ngay nếu không hợp lệ
-          notify({ title: 'Lỗi ảnh', message: `Không thể đọc nội dung ảnh: ${file.name}. Vui lòng kiểm tra lại file.`, type: 'error' });
-        }
+        setSelectedFiles(prev => [...prev, ...newValidFiles]);
+        setPreviews(prev => [...prev, ...newValidPreviews]);
+      } catch (err) {
+        console.error('File checking error:', err);
+        notify({ title: 'Lỗi', message: 'Lỗi trong quá trình kiểm duyệt ảnh.', type: 'error' });
+      } finally {
+        setIsProcessing(false);
       }
-
-      setSelectedFiles(prev => [...prev, ...newValidFiles]);
-      setPreviews(prev => [...prev, ...newValidPreviews]);
     }
   };
 
@@ -130,6 +150,7 @@ export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, t
     }
   };
 
+
   return (
     <div className="fixed inset-0 z-[2500] flex items-center justify-center p-4">
       <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={onClose} />
@@ -177,10 +198,19 @@ export const AddPhotoModal: React.FC<AddPhotoModalProps> = ({ isOpen, onClose, t
           )}
 
           <button 
-            disabled={isUploading || selectedFiles.length === 0}
+            disabled={isUploading || isProcessing || selectedFiles.length === 0}
             className="w-full py-4 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 text-white font-black uppercase tracking-widest rounded-2xl flex items-center justify-center gap-2 shadow-lg shadow-blue-100 transition-all active:scale-95"
           >
-            {isUploading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Xác nhận tải lên'}
+            {isUploading ? (
+              <Loader2 className="w-5 h-5 animate-spin" />
+            ) : isProcessing ? (
+              <>
+                <Loader2 className="w-5 h-5 animate-spin" />
+                Đang xử lý ảnh...
+              </>
+            ) : (
+              'Xác nhận tải lên'
+            )}
           </button>
         </form>
       </div>