import React, { useState } from 'react';
import DeviceGroups from "./pages/DeviceGroups";
import Devices from "./pages/Devices";
import Sidebar from "./Sidebar";
import Dashboard from './pages/Dashboard';
import UserAccount from './pages/UserAccount';  // Импортируем компонент UserAccount
import Login from './pages/Login';  // Импортируем страницу логина
import Connections from './pages/Connections';  // Импортируем страницу подключений
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);  // Статус авторизации
  const [activeTab, setActiveTab] = useState('map'); // По умолчанию активная вкладка "Карта"

  // Функция для выхода из системы
  const handleLogout = () => {
    setIsLoggedIn(false);
  };

  const handleLogin = () => {
    setIsLoggedIn(true);  // Устанавливаем авторизацию
  };

  return (
    <Router>
      <Routes>
        <Route 
          path="/login" 
          element={isLoggedIn ? <Navigate to="/app" /> : <Login onLogin={handleLogin} />}
        />
        <Route 
          path="/app" 
          element={isLoggedIn ? (
            <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
              <div style={{ display: 'flex', flex: 1 }}>
                <Sidebar 
                  onSelectTab={setActiveTab} 
                  activeTab={activeTab} 
                  onLogout={handleLogout}  // Передаем функцию handleLogout через пропс onLogout
                />
                <div style={{ padding: '20px', flex: 1 }}>
                  {activeTab === 'map' && <Dashboard />} {/* Подключаем компонент Dashboard */}
                  {activeTab === 'connection' && <Connections />} {/* Страница подключений */}
                  {activeTab === 'account' && <UserAccount />} {/* Подключаем компонент UserAccount */}
                  {activeTab === 'groups' && <DeviceGroups />}  {/* Группы устройств */}
                  {activeTab === 'devices' && <Devices />}      {/* Устройства */}
                </div>
              </div>
            </div>
          ) : (
            <Navigate to="/login" />
          )}
        />
        {/* Перенаправляем на /login по умолчанию */}
        <Route path="*" element={<Navigate to="/login" />} />
      </Routes>
    </Router>
  );
};

export default App;