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

frontend/src/pages/LandingPage.tsx

@@ -2,6 +2,9 @@ import React, { useState, useRef, useEffect } from 'react';
 import { LogIn, Compass, Map as MapIcon, Camera } from 'lucide-react';
 import { LoginModal } from '../components/LoginModal';
 import { useNotification } from '@/hooks/useNotification';
+import { processImageModeration } from '../hooks/useImageModeration';
+import { useTranslation } from '../hooks/useTranslation';
+import { useTheme } from '../hooks/useTheme';
 
 interface LandingPageProps {
   onContinue?: () => void;
@@ -41,8 +44,11 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const notify = useNotification();
+  const { t, lang, changeLanguage } = useTranslation();
+  const { theme, changeTheme } = useTheme();
 
   const [publicPhotos, setPublicPhotos] = useState<any[]>([]);
+  const [trustedUsers, setTrustedUsers] = useState<any[]>([]);
   const [currentBgIndex, setCurrentBgIndex] = useState(0);
   const [bg1, setBg1] = useState('/background.avif');
   const [bg2, setBg2] = useState('');
@@ -87,8 +93,21 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
     }
   };
 
+  const fetchTrustedUsers = async () => {
+    try {
+      const res = await fetch('/api/v1/users/trusted');
+      if (res.ok) {
+        const data = await res.json();
+        setTrustedUsers(data);
+      }
+    } catch (e) {
+      console.error('Lỗi khi tải thành viên uy tín:', e);
+    }
+  };
+
   useEffect(() => {
     fetchPublicPhotos();
+    fetchTrustedUsers();
   }, []);
 
   useEffect(() => {
@@ -106,6 +125,14 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
     notify({ title: 'Đang xử lý...', message: 'Vui lòng chờ trong giây lát.', type: 'info' });
   
     try {
+      // 0. Kiểm duyệt ả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' });
+        return;
+      }
+      const processedFile = moderationResult.file;
+
       // Lấy tọa độ hiện tại của người dùng với cơ chế chống treo (Promise.race)
       const location = await Promise.race([
         new Promise<GeolocationPosition | null>((resolve) => {
@@ -138,7 +165,7 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
   
       // 2. Tải ảnh lên
       const formData = new FormData();
-      formData.append('images', file);
+      formData.append('images', processedFile);
       if (location) {
         formData.append('latitude', location.coords.latitude.toString());
         formData.append('longitude', location.coords.longitude.toString());
@@ -247,20 +274,99 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
       `}</style>
 
       {/* Top Bar - Thanh điều hướng trên cùng */}
-      <div className="absolute top-0 left-0 right-0 z-20 p-4 pt-[calc(1rem+env(safe-area-inset-top,0px))] flex justify-between items-center">
+      <div className="absolute top-0 left-0 right-0 z-20 p-4 pt-[calc(1rem+env(safe-area-inset-top,0px))] flex justify-between items-center bg-gradient-to-b from-slate-950/40 to-transparent">
         <div className="flex items-center gap-2 text-white drop-shadow-lg">
           <Compass className="w-8 h-8" />
-          <span className="text-xl font-black tracking-tighter uppercase hidden sm:block">Travel Planner</span>
+          <span className="text-xl font-black tracking-tighter uppercase hidden sm:block">YoTrip</span>
+        </div>
+        
+        <div className="flex items-center gap-3">
+          {/* Language Selector */}
+          <select
+            value={lang}
+            onChange={(e) => changeLanguage(e.target.value as any)}
+            className="bg-black/40 hover:bg-black/60 border border-white/20 text-white rounded-full px-3 py-1.5 text-xs font-bold focus:outline-none backdrop-blur-md cursor-pointer"
+          >
+            <option value="vi" className="text-black">Tiếng Việt</option>
+            <option value="en" className="text-black">English</option>
+            <option value="zh" className="text-black">中文</option>
+          </select>
+
+          {/* Theme Selector */}
+          <select
+            value={theme}
+            onChange={(e) => changeTheme(e.target.value as any)}
+            className="bg-black/40 hover:bg-black/60 border border-white/20 text-white rounded-full px-3 py-1.5 text-xs font-bold focus:outline-none backdrop-blur-md cursor-pointer"
+          >
+            <option value="light" className="text-black">{t('themeLight') || 'Sáng'}</option>
+            <option value="dark" className="text-black">{t('themeDark') || 'Tối'}</option>
+            <option value="system" className="text-black">{t('themeSystem') || 'Hệ thống'}</option>
+          </select>
+
+          <button 
+            onClick={() => setIsLoginModalOpen(true)}
+            className="flex items-center justify-center gap-2 bg-white/15 backdrop-blur-md text-white font-bold py-2 px-4 rounded-full border border-white/25 hover:bg-white/25 transition-all shadow-md active:scale-95"
+          >
+            <LogIn className="w-4 h-4" />
+            <span className="text-sm">{t('login')}</span>
+          </button>
         </div>
-        <button 
-          onClick={() => setIsLoginModalOpen(true)}
-          className="flex items-center justify-center gap-2 bg-white/10 backdrop-blur-md text-white font-bold py-2 px-4 rounded-full border border-white/20 hover:bg-white/20 transition-all"
-        >
-          <LogIn className="w-4 h-4" />
-          <span className="text-sm">Đăng nhập</span>
-        </button>
       </div>
 
+      {/* Floating Trusted Leaderboard Panel (Left Side on Desktop) */}
+      <div className="absolute left-6 top-24 bottom-36 z-20 hidden md:flex flex-col w-72 bg-slate-900/60 backdrop-blur-md border border-white/10 rounded-[32px] p-5 text-white overflow-hidden shadow-2xl animate-in slide-in-from-left duration-500">
+        <h3 className="text-base font-black flex items-center gap-2 mb-3 border-b border-white/10 pb-2">
+          🏆 {t('trustedMembers')}
+        </h3>
+        <div className="flex-1 overflow-y-auto space-y-3 pr-1 no-scrollbar">
+          {trustedUsers.length === 0 ? (
+            <div className="text-xs text-white/50 italic py-4">Chưa có đánh giá nào.</div>
+          ) : (
+            trustedUsers.map((u, idx) => (
+              <div key={idx} className="flex items-center gap-3 bg-white/5 hover:bg-white/10 p-2.5 rounded-2xl border border-white/5 transition-all">
+                <div className="relative">
+                  <div className="w-10 h-10 rounded-full bg-slate-800 border border-white/10 flex items-center justify-center font-bold overflow-hidden">
+                    {u.avatar ? (
+                      <img src={u.avatar} alt="Avatar" className="w-full h-full object-cover" />
+                    ) : (
+                      <span>{u.name.charAt(0)}</span>
+                    )}
+                  </div>
+                  <span className="absolute -top-1 -left-1 bg-amber-500 text-[10px] text-white font-black px-1.5 py-0.5 rounded-full border border-slate-950">
+                    {idx + 1}
+                  </span>
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="text-xs font-bold truncate">{u.name}</div>
+                  <div className="flex items-center gap-1.5 mt-0.5">
+                    <span className="text-[10px] text-amber-400 font-bold">★ {u.averageScore}</span>
+                    <span className="text-[9px] text-white/40 font-semibold">({u.ratingCount})</span>
+                  </div>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Mobile Only: Trusted Members Top Bar */}
+      {trustedUsers.length > 0 && (
+        <div className="absolute top-24 left-4 right-4 z-20 md:hidden flex flex-col gap-1 bg-slate-950/45 backdrop-blur-sm p-2 rounded-2xl border border-white/5">
+          <span className="text-[9px] font-black uppercase tracking-wider text-white/70 px-1">
+            🏆 {t('trustedMembers')}
+          </span>
+          <div className="flex gap-2 overflow-x-auto no-scrollbar py-0.5">
+            {trustedUsers.slice(0, 5).map((u, idx) => (
+              <div key={idx} className="flex items-center gap-1.5 bg-slate-950/60 border border-white/10 px-2.5 py-1 rounded-full shrink-0">
+                <span className="text-[9px] font-bold text-amber-400">#{idx + 1}</span>
+                <span className="text-[10px] font-bold text-white truncate max-w-[70px]">{u.name}</span>
+                <span className="text-[9px] text-amber-400 font-bold">★ {u.averageScore}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
       {/* Body: Animation người lữ hành */}
       <div className="absolute inset-0 flex items-center justify-center z-10" >
         {/* Kích hoạt click vào file input để chọn hoặc chụp ảnh */}
@@ -279,20 +385,24 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
 
       {/* Community Gallery Previews */}
       {publicPhotos.length > 0 && (
-        <div className="absolute bottom-[calc(7rem+env(safe-area-inset-bottom,0px))] left-0 right-0 z-20 px-4 flex flex-col items-center gap-2">
+        <div className="absolute bottom-[calc(7.5rem+env(safe-area-inset-bottom,0px))] left-0 right-0 z-20 px-4 flex flex-col items-center gap-2">
           <span className="text-xs font-bold uppercase tracking-wider text-white/70 drop-shadow-md">
-            Khoảnh khắc từ cộng đồng ({publicPhotos.length})
+            {t('momentsTitle')} ({publicPhotos.length})
           </span>
           <div className="flex gap-3 overflow-x-auto max-w-full no-scrollbar pb-2 px-4 justify-center">
             {publicPhotos.slice(0, 8).map((photo, index) => (
               <button
                 key={photo.id}
                 onClick={() => setCurrentBgIndex(index)}
-                className={`relative w-14 h-14 rounded-xl overflow-hidden border-2 transition-all active:scale-95 shrink-0 ${
-                  currentBgIndex === index ? 'border-emerald-500 scale-110 shadow-lg' : 'border-white/20 hover:border-white/50'
+                className={`relative w-14 h-14 rounded-xl overflow-hidden transition-all active:scale-95 shrink-0 shadow-inner bg-slate-800 ${
+                  currentBgIndex === index ? 'scale-110 shadow-lg' : 'hover:scale-105'
                 }`}
               >
                 <img src={photo.imageUrl} alt="Community thumbnail" className="w-full h-full object-cover" />
+                {/* Border Overlay absolute to prevent border clipping or corner overlap */}
+                <div className={`absolute inset-0 rounded-xl border-2 pointer-events-none transition-colors ${
+                  currentBgIndex === index ? 'border-emerald-500' : 'border-white/20'
+                }`} />
               </button>
             ))}
           </div>
@@ -310,13 +420,21 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSign
       )}
 
       {/* Bottom Bar - Nút hành động chính */}
-      <div className="absolute bottom-[calc(2rem+env(safe-area-inset-bottom,0px))] left-1/2 -translate-x-1/2 z-20 w-full px-4">
+      <div className="absolute bottom-[calc(1.5rem+env(safe-area-inset-bottom,0px))] left-1/2 -translate-x-1/2 z-20 w-full px-4 flex flex-col sm:flex-row gap-3 items-center justify-center max-w-lg">
         <button 
           onClick={onGoToMap}
-          className="w-full max-w-md mx-auto flex items-center justify-center gap-3 bg-white/20 backdrop-blur-lg text-white font-bold py-4 px-8 rounded-2xl transition-all shadow-2xl border border-white/30 hover:bg-white/30 active:scale-95"
+          className="w-full flex items-center justify-center gap-3 bg-emerald-600/90 text-white font-bold py-3.5 px-6 rounded-2xl transition-all shadow-2xl border border-emerald-500/30 hover:bg-emerald-500 hover:scale-[1.02] active:scale-95 text-sm"
         >
           <MapIcon className="w-5 h-5" />
-          Khám phá các hành trình du lịch
+          {t('exploreToursBtn')}
+        </button>
+
+        <button 
+          onClick={() => fileInputRef.current?.click()}
+          className="w-full flex items-center justify-center gap-3 bg-white/20 backdrop-blur-lg text-white font-bold py-3.5 px-6 rounded-2xl transition-all shadow-2xl border border-white/30 hover:bg-white/30 hover:scale-[1.02] active:scale-95 text-sm"
+        >
+          <Camera className="w-5 h-5" />
+          {t('quickCamera')}
         </button>
       </div>