import { useEffect } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { BrowserView, MobileView } from 'react-device-detect';

// 공통 컴포넌트
import { ScrollToTop } from '@/components/common';

// PC 레이아웃
import { Layout as PCLayout } from '@/components/pc';

// Mobile 레이아웃
import { Layout as MobileLayout } from '@/components/mobile';

// 페이지
import { PCHome, MobileHome } from '@/pages/home';
import { PCMembers, MobileMembers } from '@/pages/members';
import { PCSchedule, MobileSchedule } from '@/pages/schedule';

/**
 * PC 환경에서 body에 클래스 추가하는 래퍼
 */
function PCWrapper({ children }) {
  useEffect(() => {
    document.body.classList.add('is-pc');
    return () => document.body.classList.remove('is-pc');
  }, []);
  return children;
}

/**
 * 프로미스나인 팬사이트 메인 앱
 * react-device-detect를 사용한 PC/Mobile 분리
 */
function App() {
  return (
    <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
      <ScrollToTop />

      {/* PC 뷰 */}
      <BrowserView>
        <PCWrapper>
          <Routes>
            {/* 관리자 페이지 (레이아웃 없음) - 추후 추가 */}
            {/* <Route path="/admin" element={<AdminLogin />} /> */}

            {/* 일반 페이지 (레이아웃 포함) */}
            <Route
              path="/*"
              element={
                <PCLayout>
                  <Routes>
                    <Route path="/" element={<PCHome />} />
                    <Route path="/members" element={<PCMembers />} />
                    <Route path="/schedule" element={<PCSchedule />} />
                    {/* 추가 페이지는 Phase 10-11에서 구현 */}
                    {/* <Route path="/album" element={<PCAlbum />} /> */}
                    {/* <Route path="*" element={<PCNotFound />} /> */}
                  </Routes>
                </PCLayout>
              }
            />
          </Routes>
        </PCWrapper>
      </BrowserView>

      {/* Mobile 뷰 */}
      <MobileView>
        <Routes>
          <Route
            path="/"
            element={
              <MobileLayout>
                <MobileHome />
              </MobileLayout>
            }
          />
          <Route
            path="/members"
            element={
              <MobileLayout pageTitle="멤버" noShadow>
                <MobileMembers />
              </MobileLayout>
            }
          />
          <Route
            path="/schedule"
            element={
              <MobileLayout pageTitle="일정" useCustomLayout>
                <MobileSchedule />
              </MobileLayout>
            }
          />
          {/* 추가 페이지는 Phase 10-11에서 구현 */}
          {/* <Route path="/album" element={<MobileLayout pageTitle="앨범"><MobileAlbum /></MobileLayout>} /> */}
        </Routes>
      </MobileView>
    </BrowserRouter>
  );
}

export default App;
