import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 
import { Helmet } from 'react-helmet';
import './App.css';
import Header from './components/header';
import Home from './pages/home';
import Login from './pages/login';
import Register from './pages/register';
import JoinGame from './pages/joinGame';
import StartGame from './pages/startGame';
import Profile from './pages/profile';
import { UserProvider } from './context/UserContext.jsx';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [popupMessage, setPopupMessage] = useState('');

  const showPopup = (message) => {
    setPopupMessage(message);
    setTimeout(() => setPopupMessage(''), 3000);
  };

  return (
    <UserProvider>
      <meta name="DND Master" content="WoW. A description."/>
      <Router>
        <div>
        <Helmet>
            <title>DND Master</title>
          </Helmet>
          {popupMessage && <div className="popup">{popupMessage}</div>}    
          <Header isLoggedIn={isLoggedIn} />

          <Routes>
            <Route
              path="/"
              element={<Home isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} />}
            />
            <Route
              path="/login"
              element={<Login setIsLoggedIn={setIsLoggedIn} />}
            />
            <Route
              path="/register"
              element={<Register setIsLoggedIn={(status) => {
                setIsLoggedIn(status);
                showPopup('User registered successfully!');
              }} />}
            />
            <Route
              path="/joinGame"
              element={<JoinGame isLoggedIn={isLoggedIn} />}
            />
            <Route
              path="/startGame"
              element={<StartGame isLoggedIn={isLoggedIn} />}
            />
            <Route
              path="/profile"
              element={<Profile isLoggedIn={isLoggedIn} />}
            />
          </Routes>
        </div>
      </Router>
    </UserProvider>
  );
}

export default App;