import { Route } from 'react-router-dom';

// 퍼블리시 레이아웃 컴포넌트
import WrapComponent from './layouts/WrapComponent';
import HeaderComponent from './layouts/HeaderComponent';
import SideComponent from './layouts/SideComponent';
import MainComponent from './layouts/MainComponent';

// 퍼블리시 페이지 컴포넌트
import Panel1Component from './pages/Panel1Component';
import Panel2Component from './pages/Panel2Component';
import Panel3Component from './pages/Panel3Component';
import Panel4Component from './pages/Panel4Component';
import Panel5Component from './pages/Panel5Component';
import Panel6Component from './pages/Panel6Component';
import Panel7Component from './pages/Panel7Component';
import Panel8Component from './pages/Panel8Component';

/**
 * 퍼블리시 라우트 정의
 * - /publish/* 하위에서 퍼블리시 파일들을 미리볼 수 있음
 */
const PublishRoutes = (
  <>
    {/* 기본 페이지 - 전체 레이아웃 미리보기 */}
    <Route index element={<PublishHome />} />

    {/* 개별 패널 미리보기 */}
    <Route path="panel1/*" element={<Panel1Wrapper />} />
    <Route path="panel2/*" element={<Panel2Wrapper />} />
    <Route path="panel3/*" element={<Panel3Wrapper />} />
    <Route path="panel4/*" element={<Panel4Wrapper />} />
    <Route path="panel5/*" element={<Panel5Wrapper />} />
    <Route path="panel6/*" element={<Panel6Wrapper />} />
    <Route path="panel7/*" element={<Panel7Wrapper />} />
    <Route path="panel8/*" element={<Panel8Wrapper />} />

    {/* 전체 레이아웃 (원본 구조 그대로) */}
    <Route path="full/*" element={<WrapComponent />} />
  </>
);

// 퍼블리시 홈
function PublishHome() {
  return (
    <div className="publish-home">
      <h1>퍼블리시 미리보기</h1>
      <p>좌측 메뉴에서 확인할 페이지를 선택하세요.</p>
      <div className="publish-info">
        <h2>폴더 구조</h2>
        <pre>
{`src/publish/
├── _incoming/     # 새 퍼블리시 파일 (원본)
├── layouts/       # 레이아웃 컴포넌트
├── pages/         # 페이지 컴포넌트
└── components/    # 공통 컴포넌트`}
        </pre>
        <h2>병합 방법</h2>
        <ol>
          <li>새 퍼블리시 파일을 <code>_incoming/</code> 폴더에 복사</li>
          <li>Claude에게 병합 요청</li>
          <li>변경사항 확인 후 적용</li>
        </ol>
      </div>
    </div>
  );
}

// 패널 래퍼 컴포넌트들
function Panel1Wrapper() {
  return (
    <div className="panel-wrapper">
      <Panel1Component isOpen={true} onToggle={() => {}} />
    </div>
  );
}

function Panel2Wrapper() {
  return (
    <div className="panel-wrapper">
      <Panel2Component isOpen={true} onToggle={() => {}} />
    </div>
  );
}

function Panel3Wrapper() {
  return (
    <div className="panel-wrapper">
      <Panel3Component isOpen={true} onToggle={() => {}} />
    </div>
  );
}

function Panel4Wrapper() {
  return (
    <div className="panel-wrapper">
      <Panel4Component isOpen={true} onToggle={() => {}} />
    </div>
  );
}

function Panel5Wrapper() {
  return (
    <div className="panel-wrapper">
      <Panel5Component isOpen={true} onToggle={() => {}} />
    </div>
  );
}

function Panel6Wrapper() {
  return (
    <div className="panel-wrapper">
      <Panel6Component isOpen={true} onToggle={() => {}} />
    </div>
  );
}

function Panel7Wrapper() {
  return (
    <div className="panel-wrapper">
      <Panel7Component isOpen={true} onToggle={() => {}} />
    </div>
  );
}

function Panel8Wrapper() {
  return (
    <div className="panel-wrapper">
      <Panel8Component isOpen={true} onToggle={() => {}} />
    </div>
  );
}

export default PublishRoutes;
