// 이 파일이 하는 일: 앱의 라우팅(주소 → 페이지 연결)과 공통 레이아웃(상단 네비게이션)을 정의한다.
// /login 이외의 모든 페이지는 로그인해야 볼 수 있고, /mentor는 MENTOR 역할만 접근 가능하다.
//
// 학습 포인트: 코스 라우트는 여기 일일이 쓰지 않는다 — courseCatalog.jsx의 데이터를 .map으로 돌려
// 자동 생성한다. 코스가 100개가 되어도 이 파일은 그대로다.
import { Suspense } from 'react';
import { Routes, Route, NavLink, Navigate, Outlet } from 'react-router-dom';
import { useAuth } from './AuthContext';
import { ALL_COURSES } from './courseCatalog';
import CourseShell from './components/CourseShell';
import LoginPage from './pages/LoginPage';
import SignupPage from './pages/SignupPage';
import FindAccountPage from './pages/FindAccountPage';
import DashboardPage from './pages/DashboardPage';
import LearnHubPage from './pages/LearnHubPage';
import DocsPage from './pages/DocsPage';
import DocViewerPage from './pages/DocViewerPage';
import AssignmentsPage from './pages/AssignmentsPage';
import SetupGuidePage from './pages/SetupGuidePage';
import ChangePasswordPage from './pages/ChangePasswordPage';
import MyProfilePage from './pages/MyProfilePage';
import QuizPage from './pages/QuizPage';
import CodingPage from './pages/CodingPage';
import CodingProblemPage from './pages/CodingProblemPage';
import MentorPage from './pages/MentorPage';

// 학습 포인트: "로그인 필요" 가드 컴포넌트.
// Outlet 자리에 자식 라우트가 렌더링되며, 비로그인이면 /login으로 돌려보낸다.
function RequireAuth() {
  const { user, loading } = useAuth();
  if (loading) {
    // /auth/me 확인이 끝나기 전 — 아무것도 판단하지 말고 잠깐 기다린다.
    return <div className="container muted">불러오는 중...</div>;
  }
  if (!user) {
    return <Navigate to="/login" replace />;
  }
  return <Outlet />;
}

// 학습 포인트: 역할(role) 가드. 학생이 /mentor 주소를 직접 쳐도 대시보드로 돌려보낸다.
// 단, 진짜 보안은 서버(API)가 담당한다 — 프론트 가드는 UX용 안내일 뿐이다.
function RequireMentor() {
  const { user } = useAuth();
  if (user?.role !== 'MENTOR') {
    return <Navigate to="/" replace />;
  }
  return <Outlet />;
}

// 공통 레이아웃: 상단 네비게이션 + 페이지 본문
function Layout() {
  const { user, logout } = useAuth();

  return (
    <>
      <header className="topnav">
        <div className="topnav-inner">
          <div className="topnav-logo">
            AWESOMEDEV <span>수습 플랫폼</span>
          </div>
          <nav className="topnav-menu">
            {/* 학습 포인트: NavLink는 현재 주소와 일치하면 isActive=true를 준다.
                CSS의 .active 클래스로 현재 메뉴를 강조한다. */}
            <NavLink to="/" end className={({ isActive }) => (isActive ? 'active' : '')}>
              대시보드
            </NavLink>
            {/* 학습 포인트: end 없이 쓰면 /learn/hardware 같은 하위 경로에서도 메뉴가 활성 표시된다. */}
            <NavLink to="/learn" className={({ isActive }) => (isActive ? 'active' : '')}>
              학습 센터
            </NavLink>
            <NavLink to="/docs" className={({ isActive }) => (isActive ? 'active' : '')}>
              학습 문서
            </NavLink>
            <NavLink to="/assignments" className={({ isActive }) => (isActive ? 'active' : '')}>
              과제
            </NavLink>
            <NavLink to="/coding" className={({ isActive }) => (isActive ? 'active' : '')}>
              코딩 문제
            </NavLink>
            {user?.role === 'MENTOR' && (
              <NavLink to="/mentor" className={({ isActive }) => (isActive ? 'active' : '')}>
                멘토 리뷰
              </NavLink>
            )}
          </nav>
          <div className="topnav-user">
            {/* 학습 포인트: 예전엔 {name}{role==='MENTOR' ? ' 멘토' : ''} 였는데,
                멘토 계정 이름이 "멘토"라서 화면에 "멘토 멘토"로 나왔다.
                이름과 역할은 다른 정보이니 역할은 배지로 분리한다 — 중복도 없어지고 폭도 준다. */}
            <span className="topnav-name">{user?.name}</span>
            {user?.role === 'MENTOR' && <span className="badge badge-primary">멘토</span>}
            {/* 내 정보 — 학생만. (멘토는 인적사항이 없어서 숨긴다) */}
            {user?.role === 'STUDENT' && (
              <NavLink to="/profile" className="btn btn-ghost" title="내 정보">
                👤
              </NavLink>
            )}
            {/* 비밀번호 변경 — 처음 받은 비밀번호를 바꿀 수 있는 통로. 눈에 띄는 곳에 둔다. */}
            <NavLink to="/change-password" className="btn btn-ghost" title="비밀번호 변경">
              🔑
            </NavLink>
            <button className="btn btn-ghost" onClick={logout} title="로그아웃">
              로그아웃
            </button>
          </div>
        </div>
      </header>
      <main className="container">
        {/* 학습 포인트: 코스 페이지들은 lazy(지연 로딩)라서 처음 열 때 파일을 내려받는다.
            그 잠깐 동안 보여줄 대체 화면(fallback)을 Suspense가 담당한다. */}
        <Suspense fallback={<p className="empty">코스를 불러오는 중...</p>}>
          <Outlet />
        </Suspense>
      </main>
    </>
  );
}

export default function App() {
  return (
    <Routes>
      {/* 비로그인 접근 가능 영역: 로그인·회원가입·계정 찾기.
          학습 포인트: 이 라우트들은 RequireAuth 바깥에 있어서 세션 없이도 열린다.
          당연한 얘기 같지만, 회원가입 페이지가 "로그인해야 접근 가능"하면 아무도 가입할 수 없다. */}
      <Route path="/login" element={<LoginPage />} />
      <Route path="/signup" element={<SignupPage />} />
      <Route path="/find-account" element={<FindAccountPage />} />
      {/* 로그인해야 접근 가능한 영역 */}
      <Route element={<RequireAuth />}>
        <Route element={<Layout />}>
          <Route path="/" element={<DashboardPage />} />
          {/* 학습 센터: 허브 + 코스들(카탈로그에서 자동 생성) */}
          <Route path="/learn" element={<LearnHubPage />} />
          {/* 학습 포인트: 코스를 CourseShell로 감싸면 72개 코스 전부에
              하단 "완료" 바가 자동으로 붙는다 — 공통 기능은 감싸는 컴포넌트로. */}
          {ALL_COURSES.map((course) => (
            <Route
              key={course.slug}
              path={`/learn/${course.slug}`}
              element={<CourseShell course={course} />}
            />
          ))}
          {/* 학습 포인트: :slug는 "주소의 이 자리에 오는 값을 변수로 받겠다"는 뜻.
              72개 퀴즈 라우트를 하나로 처리한다 — QuizPage가 useParams()로 꺼내 쓴다. */}
          <Route path="/learn/:slug/quiz" element={<QuizPage />} />
          <Route path="/setup" element={<SetupGuidePage />} />
          <Route path="/change-password" element={<ChangePasswordPage />} />
          <Route path="/profile" element={<MyProfilePage />} />
          <Route path="/docs" element={<DocsPage />} />
          <Route path="/docs/:slug" element={<DocViewerPage />} />
          <Route path="/assignments" element={<AssignmentsPage />} />
          {/* 코딩 문제: 목록 + 문제별 풀이 화면 (:id는 문제 번호) */}
          <Route path="/coding" element={<CodingPage />} />
          <Route path="/coding/:id" element={<CodingProblemPage />} />
          {/* 멘토 전용 영역 */}
          <Route element={<RequireMentor />}>
            <Route path="/mentor" element={<MentorPage />} />
          </Route>
        </Route>
      </Route>
      {/* 그 외 주소는 대시보드로 */}
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  );
}
