import React, { useEffect } from "react";
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import { LoginPage } from "./pages/LoginPage";
import { DashboardPage } from "./pages/DashboardPage";
import { TimerPage } from "./pages/TimerPage";
import { WatcherPage } from "./pages/WatcherPage";
import { AppLayout } from "./components/layout/AppLayout";
import { useAuthStore } from "./store/useAuthStore";

export const App = () => {
  const username = useAuthStore((s) => s.username);
  const check = useAuthStore((s) => s.check);

  useEffect(() => {
    check();
  }, [check]);

  if (!username) {
    return <LoginPage />;
  }

  return (
    <BrowserRouter>
      <AppLayout>
        <Routes>
          <Route path="/" element={<Navigate to="/buffer" replace />} />
          <Route path="/buffer" element={<DashboardPage />} />
          <Route path="/timer" element={<TimerPage />} />
          <Route path="/watcher" element={<WatcherPage />} />
          <Route path="*" element={<Navigate to="/buffer" replace />} />
        </Routes>
      </AppLayout>
    </BrowserRouter>
  );
};
