App.Root = function Root() {
    const [page, setPage] = React.useState(null);
    const [params, setParams] = React.useState({});
    const [user, setUser] = React.useState(null);
    const [showWelcome, setShowWelcome] = React.useState(false);

    // Expose setUser globally so Nav can update after nickname change
    window._setUser = setUser;

    // Fetch user identity on mount
    React.useEffect(() => {
        App.API.get('user?fingerprint=' + App.fingerprint)
            .then(data => {
                setUser(data);
                if (data.isNew) setShowWelcome(true);
            })
            .catch(() => {});
    }, []);

    React.useEffect(() => {
        App.Router.addRoute('/', () => { setPage('dashboard'); setParams({}); });
        App.Router.addRoute('/combos', () => { setPage('combo-library'); setParams({}); });
        App.Router.addRoute('/cars', () => { setPage('cars'); setParams({}); });
        App.Router.addRoute('/tracks', () => { setPage('tracks'); setParams({}); });
        App.Router.addRoute('/create-combo', () => { setPage('create-combo'); setParams({}); });
        App.Router.addRoute('/polls', () => { setPage('poll-list'); setParams({}); });
        App.Router.addRoute('/create-poll', () => { setPage('create-poll'); setParams({}); });
        App.Router.addRoute('/poll/:code', (p) => { setPage('vote-poll'); setParams(p); });
        App.Router.addRoute('/results/:code', (p) => { setPage('poll-results'); setParams(p); });
        App.Router.setNotFound(() => { setPage('not-found'); setParams({}); });
        App.Router.resolve();
    }, []);

    let content;
    switch (page) {
        case 'dashboard': content = <App.Dashboard user={user} />; break;
        case 'combo-library': content = <App.ComboLibrary />; break;
        case 'cars': content = <App.BrowseCars />; break;
        case 'tracks': content = <App.BrowseTracks />; break;
        case 'create-combo': content = <App.CreateCombo />; break;
        case 'poll-list': content = <App.PollList />; break;
        case 'create-poll': content = <App.CreatePoll />; break;
        case 'vote-poll': content = <App.VotePoll code={params.code} />; break;
        case 'poll-results': content = <App.PollResults code={params.code} />; break;
        case 'not-found': content = <div className="page"><h1>Page Not Found</h1><a href="#/">Go Home</a></div>; break;
        default: content = <App.Loading />;
    }

    return (
        <div className="app">
            <App.Nav user={user} page={page} params={params} />
            <main className="main-content">
                {content}
            </main>
            <App.Footer />
            {showWelcome && user && (
                <App.WelcomeModal
                    userId={user.id}
                    onSave={(data) => { setUser(data); setShowWelcome(false); }}
                    onSkip={() => setShowWelcome(false)}
                />
            )}
        </div>
    );
};

// Mount the app
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App.Root />);