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";
import axios from "axios";

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 savedToken = localStorage.getItem('access_token');

                // Если есть токен, но нет пользователя - делаем запрос к серверу
                if (savedToken && !localStorage.getItem('user')) {
                    const authStatus = await checkAuth();
                    handleAuthResponse(authStatus);
                    return;
                }

                // Если есть сохраненный пользователь
                const savedUser = JSON.parse(localStorage.getItem('user'));
                if (savedUser && savedToken) {
                    // Если у сохраненного пользователя нет роли - запрашиваем свежие данные
                    if (!savedUser.role) {
                        const authStatus = await checkAuth();
                        handleAuthResponse(authStatus);
                    } else {
                        setAuthState({
                            isAuthenticated: true,
                            isLoading: false,
                            user: savedUser
                        });
                        setShowLoginModal(false);
                    }
                    return;
                }

                // Стандартная проверка авторизации
                const authStatus = await checkAuth();
                handleAuthResponse(authStatus);
            } catch (error) {
                console.error('Auth verification error:', error);
                handleAuthFailure();
            }
        };


        const handleAuthResponse = (authStatus) => {
            if (authStatus.isAuthenticated && authStatus.user?.role) {
                const userToSave = {
                    id: authStatus.user.id,
                    login: authStatus.user.login,
                    role: authStatus.user.role
                };

                console.log('Saving user:', userToSave);
                localStorage.setItem('user', JSON.stringify(userToSave));

                setAuthState({
                    isAuthenticated: true,
                    isLoading: false,
                    user: userToSave
                });
                setShowLoginModal(false);
            } else {
                handleAuthFailure();
            }
        };
        const handleAuthFailure = () => {
            localStorage.removeItem('user');
            localStorage.removeItem('access_token');
            setAuthState({
                isAuthenticated: false,
                isLoading: false,
                user: null
            });
            setShowLoginModal(true);
        };

        verifyAuth();
    }, []);

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

    const handleLogout = async () => {
        try {
            const token = localStorage.getItem('access_token');

            if (!token) {
                // Если нет токена - просто очищаем данные
                cleanup();
                return;
            }

            try {
                await axios.post('/api/auth/logout', {}, {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    }
                });
            } finally {
                cleanup();
            }

        } catch (error) {
            console.error('Logout error:', error);
            cleanup();
        }
    };

    function cleanup() {
        localStorage.removeItem('access_token');
        localStorage.removeItem('user');
        setAuthState({
            isAuthenticated: false,
            isLoading: false,
            user: null,
        });
        setShowLoginModal(true);
    }
    // Полноэкранный лоадер во время проверки авторизации
    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;