import React, { useState, useMemo } from "react";
import { ThemeProvider, CssBaseline, Switch, Box } from "@mui/material";
import Dashboard from "./Components/Layout/Dashboard";
import LoginModal from "./Components/UI/LoginModal";
import { lightTheme, darkTheme } from "./Style/theme";
import Logo from './assets/images/logo.svg?react';  // Импорт как компонента

function App() {
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const [showLoginModal, setShowLoginModal] = useState(true);
    const [isDarkMode, setIsDarkMode] = useState(
        window.matchMedia("(prefers-color-scheme: dark)").matches
    );

    const theme = useMemo(() => (isDarkMode ? darkTheme : lightTheme), [isDarkMode]);

    const handleLogin = () => {
        setIsAuthenticated(true);
        setShowLoginModal(false);
    };

    return (
        <ThemeProvider theme={theme}>
            <CssBaseline />
            {!isAuthenticated && showLoginModal ? (
                <>
                    {/* Логотип */}
                    <Box
                        component="div"
                        sx={{
                            position: "fixed",
                            top: 24,
                            left: "50%",    // Сдвигаем начало логотипа в центр
                            transform: "translateX(-50%)", // Смещаем назад на половину ширины логотипа
                            zIndex: 1200,
                            '& svg': {
                                width: 400,
                                height: 'auto'
                            }
                        }}
                    >
                        <Logo />
                    </Box>

                    <LoginModal
                        onLogin={handleLogin}
                        onClose={() => setShowLoginModal(false)}
                    />
                </>
            ) : (
                <Box sx={{
                    display: "flex",
                    height: "100vh",
                    overflow: "hidden",
                    bgcolor: "background.default",
                    color: "text.primary"
                }}>
                    <Dashboard />
                    <Box sx={{ position: "absolute", top: 10, right: 10 }}>
                        <Switch checked={isDarkMode} onChange={() => setIsDarkMode((prev) => !prev)} />
                    </Box>
                </Box>
            )}
        </ThemeProvider>
    );
}

export default App;