import React, { useState, useRef, useEffect } from 'react';
import { Compass, Map as MapIcon, Camera, ShieldAlert, Image as ImageIcon, X } from 'lucide-react';
import { LoginModal } from '../components/LoginModal';
import { ReportBusinessModal } from '../components/ReportBusinessModal';
import { TagSelectModal } from '../components/TagSelectModal';
import { MapProfileDropdown } from '../components/MapProfileDropdown';
import { ProfileSettingsModal } from '../components/ProfileSettingsModal';
import { MyToursModal } from '../components/modals/MyToursModal';
import { PhotoGalleryModal as MyPhotosModal } from '../components/modals/PhotoGalleryModal';
import { LiveChatModal } from '../components/modals/LiveChatModal';
import { FriendsManagerModal } from '../components/modals/FriendsManagerModal';
import { useNotification } from '@/hooks/useNotification';
import { processImageModeration } from '../hooks/useImageModeration';
import { useTranslation } from '../hooks/useTranslation';
import { compressImage } from '../utils/image';

interface LandingPageProps {
  onContinue?: () => void;
  onGoToSignup?: () => void;
  onGoToMap?: () => void;
  onLoginSuccess?: (user: any) => void;
  isInitialSetup?: boolean;
  user?: any;
  onLogout?: () => void;
  onGoToDashboard?: (tab?: 'tours' | 'connections' | 'photos' | 'chats') => void;
  onOpenNavigation?: (payload: any) => void;
}

export const LandingPage: React.FC<LandingPageProps> = ({
  onGoToSignup,
  onGoToMap,
  onLoginSuccess,
  user,
  onLogout,
  onOpenNavigation,
}) => {
  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
  const [isProfileSettingsOpen, setIsProfileSettingsOpen] = useState(false);
  const [isMyToursOpen, setIsMyToursOpen] = useState(false);
  const [isMyPhotosOpen, setIsMyPhotosOpen] = useState(false);
  const [isChatOpen, setIsChatOpen] = useState(false);
  const [isFriendsOpen, setIsFriendsOpen] = useState(false);
  const [chatTargetUserId, setChatTargetUserId] = useState<string | null>(null);
  const [isReportModalOpen, setIsReportModalOpen] = useState(false);
  const [isTagsModalOpen, setIsTagsModalOpen] = useState(false);
  const [isPhotoSourceModalOpen, setIsPhotoSourceModalOpen] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const cameraInputRef = useRef<HTMLInputElement>(null);
  const galleryInputRef = useRef<HTMLInputElement>(null);
  const [pendingPhotoFile, setPendingPhotoFile] = useState<File | null>(null);
  const [pendingPhotoLocation, setPendingPhotoLocation] = useState<GeolocationPosition | null>(null);
  const [photoPreviewUrl, setPhotoPreviewUrl] = useState<string>('');
  const notify = useNotification();
  const { t } = useTranslation();

  const [publicPhotos, setPublicPhotos] = useState<any[]>([]);
  const [trustedUsers, setTrustedUsers] = useState<any[]>([]);
  const [blacklist, setBlacklist] = useState<any[]>([]);
  const [currentBgIndex, setCurrentBgIndex] = useState(0);
  const [bg1, setBg1] = useState('/background.avif');
  const [bg2, setBg2] = useState('');
  const [fade1, setFade1] = useState(true);
  const [fade2, setFade2] = useState(false);
  const [activeSlot, setActiveSlot] = useState<1 | 2>(1);

  const isLoggedIn = !!localStorage.getItem('token') && !localStorage.getItem('guest_token');

  useEffect(() => {
    const nextUrl = publicPhotos.length > 0 ? publicPhotos[currentBgIndex]?.imageUrl : '/background.avif';
    if (!nextUrl) return;

    const currentUrl = activeSlot === 1 ? bg1 : bg2;
    if (nextUrl === currentUrl) return;

    if (activeSlot === 1) {
      setBg2(nextUrl);
      setFade2(true);
      setFade1(false);
      setActiveSlot(2);
    } else {
      setBg1(nextUrl);
      setFade1(true);
      setFade2(false);
      setActiveSlot(1);
    }
  }, [currentBgIndex, publicPhotos]);

  const fetchPublicPhotos = async () => {
    try {
      const res = await fetch('/api/v1/public-photos');
      if (res.ok) {
        const data = await res.json();
        const sortedData = data.sort((a: any, b: any) => {
          const likesA = a.metadata?.likedUserIds?.length || 0;
          const likesB = b.metadata?.likedUserIds?.length || 0;
          return likesB - likesA;
        });
        setPublicPhotos(sortedData);
      }
    } catch (e) {
      console.error('Lỗi khi tải ảnh công khai:', e);
    }
  };

  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);
    }
  };

  const fetchBlacklist = async () => {
    try {
      const res = await fetch('/api/v1/reports/blacklist');
      if (res.ok) {
        const data = await res.json();
        setBlacklist(data);
      }
    } catch (e) {
      console.error('Lỗi khi tải blacklist:', e);
    }
  };

  // Update Open Graph meta tags when public photos are fetched
  useEffect(() => {
    if (publicPhotos.length > 0) {
      const mainPhoto = publicPhotos[0];
      const photoUrl = mainPhoto.imageUrl || mainPhoto.originalUrl || '/background.avif';
      const photoTitle = mainPhoto.metadata?.title || 'Travel Planner - Khám phá chuyến đi tuyệt vời';
      const photoDescription = mainPhoto.metadata?.description || `Được chia sẻ bởi ${mainPhoto.uploader?.name || 'một thành viên'}. Khám phá những hành trình tuyệt vời trên Travel Planner.`;

      // Update og:image
      let ogImage = document.querySelector('meta[property="og:image"]');
      if (!ogImage) {
        ogImage = document.createElement('meta');
        ogImage.setAttribute('property', 'og:image');
        document.head.appendChild(ogImage);
      }
      ogImage.setAttribute('content', `https://yotrip.labz.io.vn${photoUrl}`);

      // Update og:title
      let ogTitle = document.querySelector('meta[property="og:title"]');
      if (!ogTitle) {
        ogTitle = document.createElement('meta');
        ogTitle.setAttribute('property', 'og:title');
        document.head.appendChild(ogTitle);
      }
      ogTitle.setAttribute('content', photoTitle);

      // Update og:description
      let ogDescription = document.querySelector('meta[property="og:description"]');
      if (!ogDescription) {
        ogDescription = document.createElement('meta');
        ogDescription.setAttribute('property', 'og:description');
        document.head.appendChild(ogDescription);
      }
      ogDescription.setAttribute('content', photoDescription);

      // Update twitter:image
      let twitterImage = document.querySelector('meta[name="twitter:image"]');
      if (!twitterImage) {
        twitterImage = document.createElement('meta');
        twitterImage.setAttribute('name', 'twitter:image');
        document.head.appendChild(twitterImage);
      }
      twitterImage.setAttribute('content', `https://yotrip.labz.io.vn${photoUrl}`);
    }
  }, [publicPhotos]);

  useEffect(() => {
    fetchPublicPhotos();
    fetchTrustedUsers();
    fetchBlacklist();
  }, []);

  useEffect(() => {
    if (publicPhotos.length <= 1) return;
    const interval = setInterval(() => {
      setCurrentBgIndex((prev) => (prev + 1) % publicPhotos.length);
    }, 12000);
    return () => clearInterval(interval);
  }, [publicPhotos]);

  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    notify({ title: 'Đang xử lý...', message: 'Vui lòng chờ trong giây lát.', type: 'info' });

    try {
      // Nén ảnh trước
      const compressedFile = await compressImage(file);
      // 0. Kiểm duyệt ảnh
      const moderationResult = await processImageModeration(compressedFile);
      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) => {
          if (!navigator.geolocation) {
            resolve(null);
          } else {
            navigator.geolocation.getCurrentPosition(
              (pos) => resolve(pos),
              () => resolve(null),
              { timeout: 4000, enableHighAccuracy: true }
            );
          }
        }),
        new Promise<null>((resolve) => setTimeout(() => resolve(null), 4500))
      ]);

      // Lưu file và location vào state pending, hiển thị modal tags
      setPendingPhotoFile(processedFile);
      setPendingPhotoLocation(location);

      // Tạo preview URL cho ảnh
      const previewUrl = URL.createObjectURL(processedFile);
      setPhotoPreviewUrl(previewUrl);

      setIsTagsModalOpen(true);
    } catch (error: any) {
      notify({ title: 'Lỗi', message: error.message, type: 'error' });
    } finally {
      // Reset input để có thể chọn lại cùng 1 file
      if (event.target) event.target.value = '';
    }
  };

  const handleConfirmTags = async (selectedTags: string[]) => {
    if (!pendingPhotoFile) return;

    setIsTagsModalOpen(false);
    notify({ title: 'Đang tải lên...', message: 'Vui lòng chờ trong giây lát.', type: 'info' });

    try {
      // 1. Kiểm tra xem người dùng đã đăng nhập chưa
      const token = localStorage.getItem('token');
      const guestToken = localStorage.getItem('guest_token');
      const isRealUser = token && !guestToken;

      let uploadToken = token;

      // 2. Nếu là khách, tạo tài khoản khách và lấy token
      if (!isRealUser) {
        let currentGuestToken = guestToken;
        let guestUser = JSON.parse(localStorage.getItem('guest_user') || 'null');

        if (!currentGuestToken) {
          const guestRes = await fetch('/api/v1/auth/create-guest', { method: 'POST' });
          if (!guestRes.ok) throw new Error('Không thể tạo phiên khách.');
          const guestData = await guestRes.json();
          currentGuestToken = guestData.access_token;
          guestUser = guestData.user;
          localStorage.setItem('guest_token', currentGuestToken!);
          localStorage.setItem('guest_user', JSON.stringify(guestUser));
        }
        uploadToken = currentGuestToken;
      }

      // 3. Tải ảnh lên
      const formData = new FormData();
      formData.append('images', pendingPhotoFile);
      if (pendingPhotoLocation) {
        formData.append('latitude', pendingPhotoLocation.coords.latitude.toString());
        formData.append('longitude', pendingPhotoLocation.coords.longitude.toString());
      }
      // Thêm tags vào formData
      if (selectedTags.length > 0) {
        formData.append('tags', JSON.stringify(selectedTags));
      }

      let uploadRes = await fetch('/api/v1/photos/upload-anonymous', {
        method: 'POST',
        headers: { 'Authorization': `Bearer ${uploadToken!}` },
        body: formData,
      });

      if (uploadRes.status === 401 && !isRealUser) {
        console.warn('Guest token invalid or expired. Creating a new guest user and retrying...');
        localStorage.removeItem('guest_token');
        localStorage.removeItem('guest_user');

        const guestRes = await fetch('/api/v1/auth/create-guest', { method: 'POST' });
        if (!guestRes.ok) throw new Error('Không thể tạo lại phiên khách.');
        const guestData = await guestRes.json();
        const newGuestToken = guestData.access_token;
        const guestUser = guestData.user;
        localStorage.setItem('guest_token', newGuestToken!);
        localStorage.setItem('guest_user', JSON.stringify(guestUser));

        uploadRes = await fetch('/api/v1/photos/upload-anonymous', {
          method: 'POST',
          headers: { 'Authorization': `Bearer ${newGuestToken!}` },
          body: formData,
        });
      }

      if (!uploadRes.ok) {
        const errorData = await uploadRes.json();
        throw new Error(errorData.message || 'Tải ảnh thất bại.');
      }

      notify({ title: 'Thành công!', message: 'Ảnh của bạn đã được tải lên.', type: 'success' });

      // Xóa pendingInviteToken và parameter token khỏi URL để tránh tự động chuyển sang JoinTourPage
      localStorage.removeItem('pendingInviteToken');
      const url = new URL(window.location.href);
      url.searchParams.delete('token');
      window.history.replaceState({}, '', url.toString());

      // Cập nhật lại danh sách ảnh lập tức
      await fetchPublicPhotos();
      setCurrentBgIndex(0);

      // Xóa pending data
      setPendingPhotoFile(null);
      setPendingPhotoLocation(null);
      if (photoPreviewUrl) {
        URL.revokeObjectURL(photoPreviewUrl);
        setPhotoPreviewUrl('');
      }
    } catch (error: any) {
      notify({ title: 'Lỗi', message: error.message, type: 'error' });
      // Cleanup on error too
      setPendingPhotoFile(null);
      setPendingPhotoLocation(null);
      if (photoPreviewUrl) {
        URL.revokeObjectURL(photoPreviewUrl);
        setPhotoPreviewUrl('');
      }
    }
  };


  return (
    <div className="h-dvh w-full overflow-hidden font-sans bg-[var(--background)] relative">
      {/* Background Image with Horizontal Panning */}
      <div className="absolute inset-0 z-0">
        {/* Active image for panning */}
        <div className={`absolute inset-0 image-pan-container ${activeSlot === 1 && fade1 ? 'block' : 'hidden'}`}>
          {bg1 && (
            <img
              key={bg1}
              src={bg1}
              draggable="false"
              onContextMenu={(e) => { if (!isLoggedIn) e.preventDefault(); }}
              onDragStart={(e) => { if (!isLoggedIn) e.preventDefault(); }}
              className={`h-full image-pan-element ${!isLoggedIn ? 'select-none pointer-events-none' : ''
                }`}
              alt="Travel Background 1"
            />
          )}
        </div>
        <div className={`absolute inset-0 image-pan-container ${activeSlot === 2 && fade2 ? 'block' : 'hidden'}`}>
          {bg2 && (
            <img
              key={bg2}
              src={bg2}
              draggable="false"
              onContextMenu={(e) => { if (!isLoggedIn) e.preventDefault(); }}
              onDragStart={(e) => { if (!isLoggedIn) e.preventDefault(); }}
              className={`h-full image-pan-element ${!isLoggedIn ? 'select-none pointer-events-none' : ''
                }`}
              alt="Travel Background 2"
            />
          )}
        </div>
      </div>

      {/* Style for horizontal panning */}
      <style>{`
        .image-pan-container {
          width: 100%;
          height: 100%;
          overflow-x: auto;
          overflow-y: hidden;
          scroll-behavior: smooth;
          -webkit-overflow-scrolling: touch;
        }
        .image-pan-container::-webkit-scrollbar {
          display: none;
        }
        .image-pan-container {
          -ms-overflow-style: none;
          scrollbar-width: none;
        }
        .image-pan-element {
          width: auto;
          max-width: none !important;
          height: 100%;
          display: block;
          min-width: 100%;
        }
      `}</style>

      {/* Swipe Indicator Arrows - for image switching */}
      {publicPhotos.length > 1 && (
        <>
          <button
            onClick={() => setCurrentBgIndex((prev) => (prev - 1 + publicPhotos.length) % publicPhotos.length)}
            className="absolute left-4 top-1/2 -translate-y-1/2 z-10 p-2 bg-black/30 hover:bg-black/50 backdrop-blur-md rounded-full text-white transition-all md:hidden"
            aria-label="Previous photo"
          >
            <span className="text-xl">‹</span>
          </button>
          <button
            onClick={() => setCurrentBgIndex((prev) => (prev + 1) % publicPhotos.length)}
            className="absolute right-4 top-1/2 -translate-y-1/2 z-10 p-2 bg-black/30 hover:bg-black/50 backdrop-blur-md rounded-full text-white transition-all md:hidden"
            aria-label="Next photo"
          >
            <span className="text-xl">›</span>
          </button>
        </>
      )}

      {/* Photo Progress Dots */}
      {publicPhotos.length > 1 && (
        <div className="absolute bottom-20 left-1/2 -translate-x-1/2 z-10 flex gap-1.5">
          {publicPhotos.slice(0, 20).map((_, idx) => (
            <button
              key={idx}
              onClick={() => setCurrentBgIndex(idx)}
              className={`w-2 h-2 rounded-full transition-all ${currentBgIndex === idx
                  ? 'bg-emerald-500 w-6'
                  : 'bg-white/40 hover:bg-white/60'
                }`}
            />
          ))}
        </div>
      )}

      {/* Top Bar - Thanh điều hướng trên cùng */}
      <div className="absolute top-0 left-0 right-0 z-20 p-3 sm:p-4 pt-[calc(0.75rem+env(safe-area-inset-top,0px))] sm: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-1.5 sm:gap-2 text-white drop-shadow-lg">
          <Compass className="w-7 h-7 sm:w-8 sm:h-8" />
          <span className="text-lg sm:text-xl font-black tracking-tighter uppercase hidden sm:block">YoTrip</span>
        </div>

        <div className="flex items-center gap-3 pointer-events-auto">
          {user && !localStorage.getItem('guest_token') && (
            <button
              onClick={() => {
                setChatTargetUserId(null);
                setIsChatOpen(true);
              }}
              className="w-11 h-11 bg-slate-900 border border-slate-800 rounded-full flex items-center justify-center shadow-xl hover:bg-slate-805 text-slate-300 hover:text-white transition-all active:scale-95 cursor-pointer shrink-0 relative group"
              title="Trò chuyện trực tiếp"
            >
              <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 group-hover:scale-105 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
              <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-blue-500 rounded-full" />
            </button>
          )}
          <MapProfileDropdown
            user={user}
            onLogout={onLogout}
            onOpenSettings={() => setIsProfileSettingsOpen(true)}
            onOpenCreateTour={() => onGoToMap?.()}
            onOpenReport={() => setIsReportModalOpen(true)}
            onOpenLogin={() => setIsLoginModalOpen(true)}
            onOpenMyPhotos={() => setIsMyPhotosOpen(true)}
            onOpenMyTours={() => setIsMyToursOpen(true)}
            onOpenFriends={() => setIsFriendsOpen(true)}
          />
        </div>
      </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>

      {/* Floating Blacklist Panel (Right Side on Desktop) */}
      <div className="absolute right-6 top-24 bottom-36 z-10 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-right duration-500 animate-out duration-300">
        <h3 className="text-base font-black flex items-center gap-2 mb-3 border-b border-white/10 pb-2 text-red-400">
          <ShieldAlert className="w-5 h-5 text-red-500" /> {t('blacklistTitle')}
        </h3>
        <div className="flex-1 overflow-y-auto space-y-3 pr-1 no-scrollbar">
          {blacklist.length === 0 ? (
            <div className="text-xs text-white/50 italic py-4 text-center">{t('emptyBlacklist')}</div>
          ) : (
            blacklist.map((item, idx) => (
              <div key={idx} className="flex flex-col gap-1.5 bg-white/5 hover:bg-white/10 p-3 rounded-2xl border border-white/5 transition-all text-left">
                <div className="flex items-start justify-between gap-2">
                  <div className="text-xs font-bold text-red-300 truncate flex-1">{item.name}</div>
                  <span className="text-[8px] bg-red-950/80 text-red-400 border border-red-900/50 px-1.5 py-0.5 rounded font-black shrink-0">
                    {item.type}
                  </span>
                </div>
                {item.address && (
                  <div className="text-[10px] text-white/60 truncate">{item.address}</div>
                )}
                {item.phone && (
                  <div className="text-[10px] text-white/40">SĐT: {item.phone}</div>
                )}
                <div className="text-[10px] text-red-400/90 italic bg-red-950/30 p-1.5 rounded-lg border border-red-950/40">
                  Lý do: {item.reason}
                </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>
      )}

      {/* Input chọn file ẩn để chụp/chọn ảnh */}
      <input
        type="file"
        ref={fileInputRef}
        onChange={handleFileChange}
        accept="image/*"
        capture="environment"
        className="hidden"
      />

      {/* Camera input - capture="environment" for rear camera */}
      <input
        type="file"
        ref={cameraInputRef}
        onChange={handleFileChange}
        accept="image/*"
        capture="environment"
        className="hidden"
      />

      {/* Gallery input - no capture attribute for file picker */}
      <input
        type="file"
        ref={galleryInputRef}
        onChange={handleFileChange}
        accept="image/*"
        className="hidden"
      />

      {/* Unified Bottom Container: Gallery thumbnails on top, action buttons below */}
      <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 items-center gap-4 max-w-md">
        {/* Community Gallery Previews */}
        {publicPhotos.length > 0 && (
          <div className="w-full flex flex-col items-center gap-2">
            <span className="text-[10px] font-black uppercase tracking-wider text-white/75 drop-shadow-md">
              {t('momentsTitle')} ({publicPhotos.length})
            </span>
            <div className="flex gap-3 overflow-x-auto max-w-full no-scrollbar pb-1 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 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"
                    draggable="false"
                    onContextMenu={(e) => { if (!isLoggedIn) e.preventDefault(); }}
                    onDragStart={(e) => { if (!isLoggedIn) e.preventDefault(); }}
                    className={`w-full h-full object-cover ${!isLoggedIn ? 'select-none pointer-events-none' : ''
                      }`}
                  />
                  {/* Border Overlay absolute to prevent border clipping or corner overlap */}
                  {/* Inset by 1.5px so it does not get clipped by parent overflow-hidden border */}
                  <div className={`absolute inset-[1.5px] rounded-[10px] border-2 pointer-events-none transition-colors ${currentBgIndex === index ? 'border-emerald-500' : 'border-white/20'
                    }`} />
                </button>
              ))}
            </div>
          </div>
        )}

        {/* Buttons */}
        <div className="w-full flex gap-3 items-center justify-center">
          <button
            onClick={onGoToMap}
            className="flex-1 flex items-center justify-center gap-2 bg-emerald-600/90 hover:bg-emerald-500 text-white font-bold py-3.5 rounded-2xl transition-all shadow-2xl border border-emerald-500/30 active:scale-95 text-xs sm:text-sm whitespace-nowrap"
          >
            <MapIcon className="w-4.5 h-4.5" />
            <span>{t('shortExplore') || 'Khám phá'}</span>
          </button>

          <button
            onClick={() => setIsPhotoSourceModalOpen(true)}
            className="flex-1 flex items-center justify-center gap-2 bg-white/20 backdrop-blur-lg hover:bg-white/30 text-white font-bold py-3.5 rounded-2xl transition-all shadow-2xl border border-white/30 active:scale-95 text-xs sm:text-sm whitespace-nowrap"
          >
            <Camera className="w-4.5 h-4.5" />
            <span>{t('shortCamera') || 'Chụp ảnh'}</span>
          </button>
        </div>

        <style>{`
          .no-scrollbar::-webkit-scrollbar {
            display: none;
          }
          .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
          }
        `}</style>
      </div>

      {/* Login Modal Component */}
      <LoginModal
        isOpen={isLoginModalOpen}
        onClose={() => setIsLoginModalOpen(false)}
        onSwitchToSignup={onGoToSignup}
        onLoginSuccess={onLoginSuccess}
      />

      {/* Report Business Modal */}
      <ReportBusinessModal
        isOpen={isReportModalOpen}
        onClose={() => setIsReportModalOpen(false)}
      />

      {/* Tag Select Modal */}
      <TagSelectModal
        isOpen={isTagsModalOpen}
        onClose={() => {
          setIsTagsModalOpen(false);
          setPendingPhotoFile(null);
          setPendingPhotoLocation(null);
          if (photoPreviewUrl) {
            URL.revokeObjectURL(photoPreviewUrl);
            setPhotoPreviewUrl('');
          }
        }}
        onConfirm={handleConfirmTags}
        photoUrl={photoPreviewUrl}
      />

      {/* Photo Source Selection Modal */}
      {isPhotoSourceModalOpen && (
        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
          <div className="bg-[var(--surface)] rounded-3xl shadow-2xl max-w-sm w-full overflow-hidden animate-in fade-in zoom-in-95 duration-200">
            {/* Header */}
            <div className="bg-gradient-to-r from-blue-600 to-blue-500 px-6 py-6 flex items-center justify-between">
              <h2 className="text-xl font-bold text-white">Chụp hoặc tải ảnh</h2>
              <button
                onClick={() => setIsPhotoSourceModalOpen(false)}
                className="p-1.5 hover:bg-white/20 rounded-full transition-colors"
              >
                <X className="w-5 h-5 text-white" />
              </button>
            </div>

            {/* Content */}
            <div className="p-6 space-y-3">
              {/* Camera Button */}
              <button
                onClick={() => {
                  setIsPhotoSourceModalOpen(false);
                  cameraInputRef.current?.click();
                }}
                className="w-full flex items-center gap-4 p-4 bg-[var(--background)] hover:bg-[var(--background-alt)] border border-[var(--border)] rounded-2xl transition-all active:scale-95"
              >
                <div className="flex-shrink-0 p-3 bg-blue-100 rounded-full">
                  <Camera className="w-6 h-6 text-blue-600" />
                </div>
                <div className="flex-1 text-left">
                  <div className="font-bold text-[var(--text-primary)]">Chụp ảnh bằng camera</div>
                  <div className="text-sm text-[var(--text-muted)]">Dùng camera thiết bị của bạn</div>
                </div>
              </button>

              {/* Gallery Button */}
              <button
                onClick={() => {
                  setIsPhotoSourceModalOpen(false);
                  galleryInputRef.current?.click();
                }}
                className="w-full flex items-center gap-4 p-4 bg-[var(--background)] hover:bg-[var(--background-alt)] border border-[var(--border)] rounded-2xl transition-all active:scale-95"
              >
                <div className="flex-shrink-0 p-3 bg-emerald-100 rounded-full">
                  <ImageIcon className="w-6 h-6 text-emerald-600" />
                </div>
                <div className="flex-1 text-left">
                  <div className="font-bold text-[var(--text-primary)]">Tải ảnh từ thư viện</div>
                  <div className="text-sm text-[var(--text-muted)]">Chọn ảnh từ thiết bị của bạn</div>
                </div>
              </button>
            </div>
          </div>
        </div>
      )}
      {/* Profile Settings Modal */}
      <ProfileSettingsModal
        isOpen={isProfileSettingsOpen}
        onClose={() => setIsProfileSettingsOpen(false)}
        user={user}
        onSaveSuccess={onLoginSuccess}
      />

      {/* My Tours Modal */}
      <MyToursModal
        isOpen={isMyToursOpen}
        onClose={() => setIsMyToursOpen(false)}
        user={user}
        onViewTour={(tourId) => {
          if (onGoToMap) {
            localStorage.setItem('viewTourOnLand', tourId);
            onGoToMap();
          }
        }}
        onOpenNavigation={onOpenNavigation}
      />

      {/* My Photos Modal */}
      <MyPhotosModal
        isOpen={isMyPhotosOpen}
        onClose={() => setIsMyPhotosOpen(false)}
        user={user}
      />

      {/* Live Chat Modal */}
      <LiveChatModal
        isOpen={isChatOpen}
        onClose={() => setIsChatOpen(false)}
        user={user}
        defaultChatUserId={chatTargetUserId}
      />

      {/* Friends Manager Modal */}
      <FriendsManagerModal
        isOpen={isFriendsOpen}
        onClose={() => setIsFriendsOpen(false)}
        user={user}
        onOpenChatWithUser={(userId) => {
          setChatTargetUserId(userId);
          setIsChatOpen(true);
        }}
      />
    </div>
  );
};