import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import ResponsiveAppBar from './components/ResponsiveAppBar';
import ShipmentView from './pages/ShipmentView';
import HomePage from './pages/HomeView';
import ResultsView from './pages/ResultsView';
import PlanningView from './pages/PlanningView';
import Modal from './components/Modal';
import AddressManager from './pages/AddressManagerView';
import ContactsManager from './pages/ContactsManagerView';
import LoginView from './pages/LoginView';
import ProtectedRoute from './components/ProtectedRoute';

const App: React.FC = () => {
    const [openAddressManager, setOpenAddressManager] = useState(false);
    const [openContactsManager, setOpenContactsManager] = useState(false);

    const handleOpenAddressManager = () => {
        setOpenAddressManager(true);
    };

    const handleCloseAddressManager = () => {
        setOpenAddressManager(false);
    };

    const handleOpenContactsManager = () => {
        setOpenContactsManager(true);
    };

    const handleCloseContactsManager = () => {
        setOpenContactsManager(false);
    };

    return (
        <Router>
            <ResponsiveAppBar
                onOpenAddressManager={handleOpenAddressManager}
                onOpenContactsManager={handleOpenContactsManager}
            />
            <Routes>
                <Route path="/login" element={<LoginView />} />
                <Route path="/" element={<ProtectedRoute element={<HomePage />} />} />
                <Route path="/shipments" element={<ProtectedRoute element={<ShipmentView />} />} />
                <Route path="/planning" element={<ProtectedRoute element={<PlanningView />} />} />
                <Route path="/results" element={<ProtectedRoute element={<ResultsView />} />} />
                {/* Other routes as necessary */}
            </Routes>
            <Modal open={openAddressManager} onClose={handleCloseAddressManager} title="Address Management">
                <AddressManager />
            </Modal>
            <Modal open={openContactsManager} onClose={handleCloseContactsManager} title="Contacts Management">
                <ContactsManager />
            </Modal>
        </Router>
    );
};

export default App;