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(() => {
    // Tự động xác định địa chỉ IP của Backend dựa trên hostname hiện tại
    const API_BASE = `http://${window.location.hostname}:3001`;

    // Kiểm tra xem hệ thống đã được cài đặt chưa
    fetch(`${API_BASE}/api/v1/auth/status`)
      .then(res => res.ok ? res.json() : Promise.reject())
      .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;