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,
  PCScheduleDetail,
  MobileScheduleDetail,
  PCBirthday,
  MobileBirthday,
} from '@/pages/schedule';
import {
  PCAlbum,
  MobileAlbum,
  PCAlbumDetail,
  MobileAlbumDetail,
  PCTrackDetail,
  MobileTrackDetail,
  PCAlbumGallery,
  MobileAlbumGallery,
} from '@/pages/album';
import { PCNotFound, MobileNotFound } from '@/pages/common';

/**
 * 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 />} />
                    <Route path="/schedule/:id" element={<PCScheduleDetail />} />
                    <Route path="/birthday/:memberName/:year" element={<PCBirthday />} />
                    <Route path="/album" element={<PCAlbum />} />
                    <Route path="/album/:name" element={<PCAlbumDetail />} />
                    <Route path="/album/:name/track/:trackTitle" element={<PCTrackDetail />} />
                    <Route path="/album/:name/gallery" element={<PCAlbumGallery />} />
                    {/* 404 페이지 */}
                    <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>
            }
          />
          <Route path="/schedule/:id" element={<MobileScheduleDetail />} />
          <Route path="/birthday/:memberName/:year" element={<MobileBirthday />} />
          <Route
            path="/album"
            element={
              <MobileLayout pageTitle="앨범">
                <MobileAlbum />
              </MobileLayout>
            }
          />
          <Route
            path="/album/:name"
            element={
              <MobileLayout pageTitle="앨범">
                <MobileAlbumDetail />
              </MobileLayout>
            }
          />
          <Route
            path="/album/:name/track/:trackTitle"
            element={
              <MobileLayout pageTitle="곡 상세">
                <MobileTrackDetail />
              </MobileLayout>
            }
          />
          <Route
            path="/album/:name/gallery"
            element={
              <MobileLayout pageTitle="앨범">
                <MobileAlbumGallery />
              </MobileLayout>
            }
          />
          {/* 404 페이지 */}
          <Route path="*" element={<MobileNotFound />} />
        </Routes>
      </MobileView>
    </BrowserRouter>
  );
}

export default App;