const CRMApp = () => {
    const [currentUser, setCurrentUser] = React.useState(null);
    const [authChecking, setAuthChecking] = React.useState(true);

    React.useEffect(() => {
        const token = getToken();
        if (!token) { setAuthChecking(false); return; }
        api.me()
            .then(data => { setCurrentUser(data.user); })
            .catch(() => { clearToken(); })
            .finally(() => setAuthChecking(false));
    }, []);

    const handleLogin  = (user) => setCurrentUser(user);
    const handleLogout = () => { clearToken(); setCurrentUser(null); };

    if (authChecking) {
        return (
            <div className="login-screen">
                <div style={{ color: 'white', fontSize: '1rem', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
                    <i className="fas fa-spinner fa-spin"></i> Loading…
                </div>
            </div>
        );
    }

    if (!currentUser) return <LoginScreen onLogin={handleLogin} />;

    return <MainApp currentUser={currentUser} onLogout={handleLogout} />;
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(CRMApp));