import { useEffect, useState } from 'react';
import { api, getToken, setToken } from './api.js';
import Login from './components/Login.jsx';
import Dashboard from './components/Dashboard.jsx';

export default function App() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  // При загрузке: если есть токен — проверяем его и подтягиваем пользователя.
  useEffect(() => {
    if (!getToken()) {
      setLoading(false);
      return;
    }
    api('/auth/me')
      .then((data) => setUser(data.user))
      .catch(() => setToken(null))
      .finally(() => setLoading(false));
  }, []);

  function handleLogin(token, loggedUser) {
    setToken(token);
    setUser(loggedUser);
  }

  function handleLogout() {
    setToken(null);
    setUser(null);
  }

  if (loading) {
    return <div className="center muted">Загрузка…</div>;
  }

  return user
    ? <Dashboard user={user} onLogout={handleLogout} />
    : <Login onLogin={handleLogin} />;
}
