import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom';
import Register from './Register';
import Login from './Login';
import StudentDashboard from './StudentDashboard';
import FacilityDashboard from './FacilityDashboard';

function App() {
  const [user, setUser] = useState(null);

  return (
    <Router>
      <div>
        <nav style={{ marginBottom: '20px' }}>
          <Link to="/login" style={{ marginRight: '10px' }}>Login</Link>
          <Link to="/register">Register</Link>
        </nav>
        <Routes>
          <Route
            path="/login"
            element={
              <Login
                onLoginSuccess={(userData) => {
                  setUser(userData);
                  // 動的に遷移（useNavigateはLogin側で使う）
                }}
              />
            }
          />
          <Route path="/register" element={<Register />} />
          <Route
            path="/student"
            element={user ? <StudentDashboard user={user} /> : <div>Unauthorized</div>}
          />
          <Route
            path="/facility"
            element={user ? <FacilityDashboard user={user} /> : <div>Unauthorized</div>}
          />
          <Route path="/" element={<div>Welcome! Please <Link to="/login">login</Link> or <Link to="/register">register</Link>.</div>} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;