import React, { useState, useEffect } from 'react';
import { LandingPage } from './LandingPage.js';
import { TourDetailPage } from './TourDetailPage.js';
import { ExploreMap } from './ExploreMap.js';
import { SignupPage } from './SignupPage.js';

const App = () => {
  type View = 'landing' | 'explore' | 'detail' | 'signup';
  const [view, setView] = useState<View>('landing');
  const [isInitialSetup, setIsInitialSetup] = useState(false);

  useEffect(() => {
    // Kiểm tra xem hệ thống đã được cài đặt chưa
    fetch('http://localhost:3001/api/v1/auth/status')
      .then(res => res.json())
      .then(data => setIsInitialSetup(data.isInitialSetup))
      .catch(() => setIsInitialSetup(false));
  }, [view]);

  return (
    <div className="app-container">
      {view === 'landing' && (
        <LandingPage 
          isInitialSetup={isInitialSetup}
          onContinue={() => setView('explore')} 
          onGoToSignup={() => setView('signup')} 
          onGoToMap={() => setView('explore')}
        />
      )}

      {view === 'signup' && (
        <SignupPage 
          onBack={() => setView('landing')} 
          onSuccess={() => setView('landing')} 
        />
      )}
      
      {view === 'explore' && (
        <ExploreMap onBack={() => setView('landing')} />
      )}

      {view === 'detail' && (
        <TourDetailPage />
      )}
    </div>
  );
};

export default App;