import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import { useState, useEffect } from 'react';
import LoginForm from './components/LoginForm';
//import RegisterForm from './components/RegisterForm';
import Md5Tool from './components/Md5Tool';
import HasherTool from './components/HasherTool';
import Base64Tool from './components/Base64Tool';
import JwtDecoderTool from './components/JwtDecoderTool';
import PasswordGenTool from './components/PasswordGenTool';
import TimestampTool from './components/TimestampTool';
import TextDiffTool from './components/TextDiffTool';
import QrCodeTool from './components/QrCodeTool';
import MarkdownTool from './components/MarkdownTool';
import ColorConverterTool from './components/ColorConverterTool';
import JsonFormatterTool from './components/JsonFormatterTool';
import RegexTesterTool from './components/RegexTesterTool';
import HashVerifierTool from './components/HashVerifierTool';
import UrlTool from './components/UrlTool';
import StringUtilsTool from './components/StringUtilsTool';
import CronExplainerTool from './components/CronExplainerTool';
import IpCalcTool from './components/IpCalcTool';
import LoremIpsumTool from './components/LoremIpsumTool';
import CsvViewerTool from './components/CsvViewerTool';
import NotesTool from './components/NotesTool';
import NavBar from './components/NavBar';
import ToolOverview from './components/ToolOverview';
import AdminDashboard from './components/AdminDashboard';
import ErrorBoundary from './components/ErrorBoundary';


import './css/base.css';
import './css/buttons.css';
import './css/dark.css';
import './css/light.css';
import './css/menu.css';
import './css/admin.css';


function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(localStorage.getItem('token') !== null);
  const [role, setRole] = useState(localStorage.getItem('role'));

  useEffect(() => {
    const sync = () => {
      setIsLoggedIn(localStorage.getItem('token') !== null);
      setRole(localStorage.getItem('role'));
    };
    window.addEventListener('storage', sync);
    return () => window.removeEventListener('storage', sync);
  }, []);

  return (
    <ErrorBoundary>
      <BrowserRouter>
        <NavBar />
          <Routes>
            <Route path="/" element={isLoggedIn ? <ToolOverview /> : <Navigate to="/login" />} />
            <Route path="/login" element={<LoginForm />} />
            {/*<Route path="/register" element={<RegisterForm />} />*/}
            <Route path="/tools/md5"       element={isLoggedIn ? <Md5Tool />        : <Navigate to="/login" />} />
            <Route path="/tools/hasher"    element={isLoggedIn ? <HasherTool />     : <Navigate to="/login" />} />
            <Route path="/tools/base64"    element={isLoggedIn ? <Base64Tool />     : <Navigate to="/login" />} />
            <Route path="/tools/jwt"       element={isLoggedIn ? <JwtDecoderTool /> : <Navigate to="/login" />} />
            <Route path="/tools/password"  element={isLoggedIn ? <PasswordGenTool />: <Navigate to="/login" />} />
            <Route path="/tools/timestamp" element={isLoggedIn ? <TimestampTool />  : <Navigate to="/login" />} />
            <Route path="/tools/textdiff"  element={isLoggedIn ? <TextDiffTool />        : <Navigate to="/login" />} />
            <Route path="/tools/qrcode"   element={isLoggedIn ? <QrCodeTool />         : <Navigate to="/login" />} />
            <Route path="/tools/markdown" element={isLoggedIn ? <MarkdownTool />        : <Navigate to="/login" />} />
            <Route path="/tools/color"    element={isLoggedIn ? <ColorConverterTool />  : <Navigate to="/login" />} />
            <Route path="/tools/json"     element={isLoggedIn ? <JsonFormatterTool />   : <Navigate to="/login" />} />
            <Route path="/tools/regex"      element={isLoggedIn ? <RegexTesterTool />     : <Navigate to="/login" />} />
            <Route path="/tools/hashverify" element={isLoggedIn ? <HashVerifierTool />  : <Navigate to="/login" />} />
            <Route path="/tools/url"        element={isLoggedIn ? <UrlTool />           : <Navigate to="/login" />} />
            <Route path="/tools/string"     element={isLoggedIn ? <StringUtilsTool />   : <Navigate to="/login" />} />
            <Route path="/tools/cron"       element={isLoggedIn ? <CronExplainerTool /> : <Navigate to="/login" />} />
            <Route path="/tools/ipcalc"     element={isLoggedIn ? <IpCalcTool />        : <Navigate to="/login" />} />
            <Route path="/tools/lorem"      element={isLoggedIn ? <LoremIpsumTool />    : <Navigate to="/login" />} />
            <Route path="/tools/csv"        element={isLoggedIn ? <CsvViewerTool />     : <Navigate to="/login" />} />
            <Route path="/tools/notes"      element={isLoggedIn ? <NotesTool />         : <Navigate to="/login" />} />
            <Route
              path="/admin"
              element={
                isLoggedIn && role === 'admin'
                  ? <AdminDashboard />
                  : <Navigate to="/" />
              }
            />
          </Routes>
      </BrowserRouter>
    </ErrorBoundary>
  );
}

export default App;