import React, { useEffect } from 'react';
import { Routes, Route, useLocation, useNavigate } from 'react-router-dom';
import { SettingsProvider, useSettings } from './contexts/SettingsContext.jsx';
import { NoticesProvider } from './contexts/NoticesContext.jsx';
import HeaderNav from './components/HeaderNav.jsx';
import NoticeBanner from './components/NoticeBanner.jsx';
import FloatingSaveBar from './components/FloatingSaveBar.jsx';
import Dashboard from './pages/Dashboard.jsx';
import Setting from './pages/Setting.jsx';
import SetupWizard from './pages/SetupWizard.jsx';

const MainLayout = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const { isSetupComplete } = useSettings();
  const isSetup = location.pathname === '/setup';

  useEffect(() => {
    const isSetupPageAttribute = document.getElementById('wposgs_dashboard')?.getAttribute('data-page') === 'setup';
    if ((isSetupComplete === false || isSetupPageAttribute) && location.pathname !== '/setup') {
      navigate('/setup', { replace: true });
    }
  }, [isSetupComplete, location.pathname, navigate]);

  return (
    <div className="osgsw-wrapper osgsw-ui">
      {!isSetup && <HeaderNav />}
      {!isSetup && <NoticeBanner />}
      <main className="osgsw-content">
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/settings" element={<Setting />} />
          <Route path="/setup" element={<SetupWizard />} />
        </Routes>
      </main>
      {!isSetup && <FloatingSaveBar />}
    </div>
  );
};

const App = () => {
  return (
    <SettingsProvider>
      <NoticesProvider>
        <MainLayout />
      </NoticesProvider>
    </SettingsProvider>
  );
};

export default App;