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 Games from './pages/games.jsx';
import GameMasterPage from './pages/gameMasterPage.jsx';
import CreateItem from './pages/createItem.jsx';
import CreateCharacter from './pages/createCharacter.jsx';
import CreateNpc from './pages/createNpc.jsx';
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="P&P-Master" content="WoW. A description." />
      <Router>
        <div>
          <Helmet>
            <title>P&P-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} />}
            />
            <Route
              path='/games/:gameId/master'
              element={<GameMasterPage isLoggedIn={isLoggedIn} />}
            />
            <Route
              path='/games/:gameId'
              element={<Games isLoggedIn={isLoggedIn} />}
            />
            <Route
              path='/create-Character'
              element={<CreateCharacter isLoggedIn={isLoggedIn} />}
            />
            <Route
              path='/create-item'
              element={<CreateItem isLoggedIn={isLoggedIn} />}
            />
            <Route
              path='/create-npc'
              element={<CreateNpc isLoggedIn={isLoggedIn} />}
            />

          </Routes>
        </div>
      </Router>
    </UserProvider>
  );
}

export default App;