import React, { useState } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import CircularProgress from '@mui/material/CircularProgress';
import Snackbar from '@mui/material/Snackbar';
import Alert from '@mui/material/Alert';
import logo from './Icons/settings-2.svg';
import './App.css';
import IntialSetting from './Components/IntialSetting.js';
import AiPage from './Components/AiPage.js';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/AiPage' element={<AiPage />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  const [showSettings, setShowSettings] = useState(false);
  const [initializing, setInitializing] = useState(false);
  // Snackbar state
  const [snackbar, setSnackbar] = useState({
    open: false,
    message: "",
    severity: "success",
  });

  const handleInitializationStart = () => {
    setInitializing(true);
  };

  // Function to open the snackbar
  const openSnackbar = (message, severity = "success") => {
    setSnackbar({ open: true, message, severity });
  };

  // Function to close the snackbar
  const closeSnackbar = (event, reason) => {
    if (reason === 'clickaway') return;
    setSnackbar(prev => ({ ...prev, open: false }));
  };

  return (
    <div className="App">
      <header className="App-header">
        {initializing ? (
          <>
            <CircularProgress style={{ margin: '20px' }} />
            <p>Initializing the app. This may take a few minutes...</p>
          </>
        ) : (
          <>
            <img 
              src={logo} 
              className="App-logo" 
              alt="logo" 
              onClick={() => setShowSettings(true)}
              style={{ cursor: 'pointer' }}
            />
            <p>Enter the settings to proceed</p>
          </>
        )}

        {/* InitialSetting */}
        {showSettings && (
          <IntialSetting 
            trigger={showSettings} 
            setTrigger={setShowSettings}
            onInitializationStart={handleInitializationStart}
            openSnackbar={openSnackbar}
            closeSnackbar={closeSnackbar}
          />
        )}
      </header>
      
      {/* Render the Snackbar*/}
      <Snackbar
        open={snackbar.open}
        autoHideDuration={snackbar.severity === 'success' ? 3000 : null}
        onClose={closeSnackbar}
        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
      >
        <Alert onClose={closeSnackbar} severity={snackbar.severity} variant="filled" sx={{ width: '100%' }}>
          {snackbar.message}
        </Alert>
      </Snackbar>
    </div>
  );
}

export default App;