import React, { useState, useMemo, useEffect } from "react";
import { ThemeProvider, CssBaseline, Switch, Box, CircularProgress, Typography } 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';
import { checkAuth } from "./Components/UI/auth";

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

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

    useEffect(() => {
        const verifyAuth = async () => {
            try {
                const authStatus = await checkAuth();
                setAuthState({
                    isAuthenticated: authStatus.isAuthenticated,
                    isLoading: false,
                    user: authStatus.user || null
                });
                setShowLoginModal(!authStatus.isAuthenticated);
            } catch (error) {
                console.error('Auth verification error:', error);
                setAuthState({
                    isAuthenticated: false,
                    isLoading: false,
                    user: null
                });
                setShowLoginModal(true);
            }
        };
        verifyAuth();
    }, []);

    const handleLogin = (userData) => {
        setAuthState({
            isAuthenticated: true,
            isLoading: false,
            user: userData
        });
        setShowLoginModal(false);
    };

    const handleLogout = async () => {
    try {
        await axios.post(`${import.meta.env.VITE_BACK_URL}/api/auth/logout`, null, {
            withCredentials: true, // чтобы отправлялись куки
        });

        localStorage.removeItem('access_token');
        setAuthState({
            isAuthenticated: false,
            isLoading: false,
            user: null,
        });
        setShowLoginModal(true);
    } catch (error) {
        console.error('Logout failed:', error);
    }
};

    // Полноэкранный лоадер во время проверки авторизации
    if (authState.isLoading) {
        return (
            <ThemeProvider theme={theme}>
                <CssBaseline />
                <Box sx={{
                    position: 'fixed',
                    top: 0, left: 0, right: 0, bottom: 0,
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    flexDirection: 'column',
                    zIndex: 9999,
                    bgcolor: 'background.default'
                }}>
                    <CircularProgress />
                    <Typography sx={{ mt: 2 }}>
                        Проверка авторизации...
                    </Typography>
                </Box>
            </ThemeProvider>
        );
    }

    return (
        <ThemeProvider theme={theme}>
            <CssBaseline />
            {!authState.isAuthenticated ? (
                <>
                    <Box sx={{
                        position: "fixed",
                        top: 24,
                        left: "50%",
                        transform: "translateX(-50%)",
                        zIndex: 1200,
                        '& svg': { width: 400, height: 'auto' }
                    }}>
                        <Logo />
                    </Box>
                    <LoginModal
                        open={showLoginModal}
                        onLogin={handleLogin}
                        onClose={() => setShowLoginModal(false)}
                    />
                </>
            ) : (
                <Box sx={{
                    display: "flex",
                    height: "100vh",
                    overflow: "hidden",
                    bgcolor: "background.default"
                }}>
                    <Dashboard
                        user={authState.user}
                        onLogout={handleLogout}
                        isDarkMode={isDarkMode}
                        setIsDarkMode={setIsDarkMode}
                    />
                </Box>
            )}
        </ThemeProvider>
    );
}

export default App;