import { Routes, Route } from 'react-router-dom';
import { lazy, Suspense } from 'react';

// 구현 영역 - 레이아웃
import MainLayout from './components/layout/MainLayout';
import { ToastContainer } from './components/common/Toast';
import { AlertModalContainer } from './components/common/AlertModal';

// 퍼블리시 영역 (개발 환경에서만 동적 로드)
// 프로덕션 빌드 시 tree-shaking으로 제외됨
const PublishRouter = import.meta.env.DEV
  ? lazy(() =>
      import('./publish').catch(() => ({
        default: () => (
          <div style={{ color: '#fff', padding: '2rem' }}>
            publish 폴더가 없습니다. 퍼블리시 파일을 추가하면 자동으로 활성화됩니다.
          </div>
        ),
      }))
    )
  : null;

export default function App() {
  return (
    <>
    <ToastContainer />
    <AlertModalContainer />
    <Routes>
      {/* =====================
          구현 영역 (메인)
          - 모든 메뉴 경로를 MainLayout으로 처리
      ===================== */}
      <Route path="/*" element={<MainLayout />} />

      {/* =====================
          퍼블리시 영역 (개발 환경 전용)
          /publish/* 로 접근하여 퍼블리시 결과물 미리보기
          프로덕션 빌드 시 이 라우트와 관련 모듈이 제외됨
      ===================== */}
      {/*{import.meta.env.DEV && PublishRouter && (*/}
      {/*  <Route*/}
      {/*    path="/publish/*"*/}
      {/*    element={*/}
      {/*      <Suspense fallback={<div style={{ color: '#fff', padding: '2rem' }}>Loading publish...</div>}>*/}
      {/*        <PublishRouter />*/}
      {/*      </Suspense>*/}
      {/*    }*/}
      {/*  />*/}
      {/*)}*/}
    </Routes>
    </>
  );
}