travelplanning/frontend/src/App.tsx

import React, { useState, useEffect } from 'react';
import { LandingPage } from './pages/LandingPage';
import { ExploreMap } from './pages/ExploreMap';
import { TourDetailPage } from './pages/TourDetailPage';
import { SignupPage } from './pages/SignupPage';
import { MyPhotosPage } from './pages/MyPhotosPage';
import { useTourStore } from './store/useTourStore';
import { ConfirmProvider } from './hooks/useConfirm';
import { NotificationProvider } from './hooks/useNotification';

function App() {
  const params = new URLSearchParams(window.location.search);
  const viewTourId = params.get('viewTour');

  const [user, setUser] = useState<any>(null);
  const [currentPage, setCurrentPage] = useState<'landing' | 'explore' | 'tourDetail' | 'signup' | 'myPhotos'>(viewTourId ? 'tourDetail' : 'landing');
  const [currentTourId, setCurrentTourId] = useState<string | null>(viewTourId);
  const [isPublicTourView, setIsPublicTourView] = useState(!!viewTourId);

  // Lấy action từ store
  const fetchTour = useTourStore(state => state.fetchTour);
  const fetchPublicTourDetails = useTourStore(state => state.fetchPublicTourDetails);

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const viewTourId = params.get('viewTour');

    if (viewTourId) {
      // Không gọi replaceState ngay để tránh mất ID khi component re-render hoặc refresh
    } else {
      // Kiểm tra đăng nhập bình thường nếu không có tham số viewTour
      const token = localStorage.getItem('token');
      const storedUser = localStorage.getItem('user');
      if (token && storedUser) {
        try {
          setUser(JSON.parse(storedUser));
          setCurrentPage('explore'); // Chuyển đến bản đồ khám phá nếu đã đăng nhập
        } catch (e) {
          console.error("Lỗi khi phân tích dữ liệu người dùng từ localStorage", e);
          localStorage.removeItem('token');
          localStorage.removeItem('user');
          setCurrentPage('landing'); // Quay về trang Landing nếu dữ liệu lỗi
        }
      } else {
        setCurrentPage('landing'); // Quay về trang Landing nếu chưa đăng nhập
      }
    }
  }, []); // Chỉ chạy một lần khi component mount

  const handleLoginSuccess = (loggedInUser: any) => {
    setUser(loggedInUser);
    setCurrentPage('explore');
  };

  const handleLogout = () => {
    localStorage.removeItem('token');
    localStorage.removeItem('user');
    setUser(null);
    setCurrentPage('landing');
  };

  const handleViewTour = (tourId: string) => {
    setCurrentTourId(tourId);
    setIsPublicTourView(false); // Không phải chế độ công khai nếu đến từ bản đồ khám phá
    setCurrentPage('tourDetail');
  };

  const handleBackFromTourDetail = () => {
    setCurrentTourId(null);
    setIsPublicTourView(false);
    // Quay về trang khám phá nếu đã đăng nhập, ngược lại quay về Landing
    if (user) {
      setCurrentPage('explore');
    } else {
      setCurrentPage('landing');
    }
  };

  const handleBackFromSignup = () => {
    setCurrentPage('landing');
  };

  const handleSignupSuccess = () => {
    setCurrentPage('landing'); // Quay về trang Landing sau khi đăng ký thành công
  };

  return (
    <ConfirmProvider>
      <NotificationProvider>
      {(() => {
        if (currentPage === 'tourDetail') {
          return (
            <TourDetailPage
              tourId={currentTourId!} 
              onBack={handleBackFromTourDetail}
              isPublicView={isPublicTourView}
            />
          );
        }

        if (currentPage === 'explore') {
          return (
            <ExploreMap 
              onBack={handleBackFromTourDetail} 
              onLogout={handleLogout} 
              user={user} 
              onViewTour={handleViewTour} 
              onOpenMyPhotos={() => setCurrentPage('myPhotos')}
            />
          );
        }

        if (currentPage === 'myPhotos') {
          return (
            <MyPhotosPage onBack={() => setCurrentPage('explore')} />
          );
        }

        if (currentPage === 'signup') {
          return <SignupPage onBack={handleBackFromSignup} onSuccess={handleSignupSuccess} />;
        }

        return <LandingPage onContinue={() => setCurrentPage('explore')} onGoToSignup={() => setCurrentPage('signup')} onGoToMap={() => setCurrentPage('explore')} onLoginSuccess={handleLoginSuccess} isInitialSetup={false} />;
      })()}
      </NotificationProvider>
    </ConfirmProvider>
  );
}

export default App;