// 이 파일이 하는 일: "개발 환경 설치 가이드" — 내 PC에 개발 도구를 처음부터 설치하는 방법을
// 클릭 순서 수준으로 안내하는 정적 페이지. (JDK·PATH·Node·Git·에디터·IntelliJ·프로젝트 실행·커밋/푸시)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.

// 명령어·경로 조각들 — JSX 안에서 중괄호/백틱이 깨지지 않게 문자열로 먼저 만들어 둔다.
const CODE_JAVA_CHECK = `# 명령 프롬프트(cmd)나 PowerShell을 "새로 열고" 입력:
java -version

# 이렇게 나오면 성공!
openjdk version "21.0.x" 2026-xx-xx LTS
OpenJDK Runtime Environment Temurin-21...`;

const CODE_PATH_EXPLAIN = `PATH가 뭐냐면...

터미널에 java 라고 치면, 컴퓨터는 "java라는 프로그램이 어디 있지?" 하고
PATH에 등록된 폴더들을 순서대로 뒤져 봅니다.

PATH에 자바 설치 폴더(bin)가 없으면?
→ "'java'은(는) 내부 또는 외부 명령... 이 아닙니다" 라는 에러가 납니다.
→ 프로그램은 설치돼 있는데 컴퓨터가 못 찾는 상태예요.

그래서 "PATH를 잡는다" = "이 폴더에서 프로그램을 찾아라"라고 알려주는 일입니다.`;

const CODE_NODE_CHECK = `node -v     # v22.x.x 처럼 나오면 성공
npm -v      # 10.x.x 처럼 나오면 성공`;

const CODE_GIT_CONFIG = `# 내가 누군지 git에게 알려주기 (커밋에 이 이름이 기록됩니다)
git config --global user.name "홍길동"
git config --global user.email "hong@example.com"

# 확인
git config --global --list`;

const CODE_RUN = `# 1) 개발용 DB 띄우기 (Docker Desktop이 켜져 있어야 해요)
cd mirim-app
docker compose up -d

# 2) 백엔드 실행 — IntelliJ에서 MirimApplication ▶ 실행 (STEP 6 참고)

# 3) 프론트 실행 (새 터미널에서)
cd frontend
npm install     # 처음 한 번만 — 라이브러리 설치
npm run dev     # http://localhost:5173 접속!`;

const CODE_GIT_FLOW = `# ── 매일 쓰는 Git 흐름 (터미널 버전) ──

git pull                              # 0) 일 시작: 최신 코드 받기
git switch -c feat/empty-state-alarm  # 1) 내 작업 브랜치 만들기

# ... 코드 수정 ...

git status                            # 2) 뭐가 바뀌었나 확인
git add .                             # 3) 커밋할 파일 담기
git commit -m "feat: 알림 목록 빈 상태 화면 추가"
git push -u origin feat/empty-state-alarm   # 4) 서버로 올리기

# 5) Gitea 웹에서 Pull Request 만들기 → 멘토 리뷰 → 머지!`;

const CODE_COMMIT_RULE = `커밋 메시지 규칙 (우리 회사 컨벤션)

feat:  새 기능        예) feat: 과제 검색 기능 추가
fix:   버그 수정      예) fix: 체크리스트 중복 클릭 오류 수정
style: 스타일만 변경  예) style: 버튼 간격 정리
docs:  문서 변경      예) docs: README 실행 방법 보완
chore: 그 외 잡일     예) chore: 불필요한 로그 제거

한 줄로 "무엇을 왜" — 나중에 이력만 봐도 흐름이 보이게!`;

// 학습 포인트: Gitea 주소를 하드코딩하지 않고, 지금 접속한 주소(hostname)를 재사용한다.
const HOST = window.location.hostname;
const GIT_URL = `http://${HOST}:3000`;
const CLONE_URL = `${GIT_URL}/awesomedev/mirim-app.git`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 이렇게 컴포넌트로 뽑는다. props(n, title...)만 바꿔 재사용.
function Step({ n, title, sub, children }) {
  return (
    <section className="step-card" id={`step-${n}`}>
      <div className="step-head">
        <span className="step-num">{n}</span>
        <div>
          <h3>{title}</h3>
          {sub && <span className="step-sub">{sub}</span>}
        </div>
      </div>
      <div className="step-body">{children}</div>
    </section>
  );
}

function Code({ children }) {
  return <pre className="code-block"><code>{children}</code></pre>;
}

// 메뉴 클릭 경로를 [File] → [Settings] 처럼 보여주는 부품
function Path({ items }) {
  return (
    <span>
      {items.map((item, i) => (
        <span key={item}>
          <span className="kbd">{item}</span>
          {i < items.length - 1 && <span className="muted"> → </span>}
        </span>
      ))}
    </span>
  );
}

const STEPS = [
  { n: 1, label: 'JDK 21' },
  { n: 2, label: 'PATH' },
  { n: 3, label: 'Node.js' },
  { n: 4, label: 'Git' },
  { n: 5, label: 'VS Code · Docker' },
  { n: 6, label: 'IntelliJ 설치' },
  { n: 7, label: 'IntelliJ + Git 연결' },
  { n: 8, label: '프로젝트 실행' },
  { n: 9, label: '커밋과 푸시' },
];

export default function SetupGuidePage() {
  return (
    <div>
      {/* 히어로: 이 페이지가 뭘 해주는지 한눈에 */}
      <div className="hero">
        <div className="eyebrow">Setup Guide</div>
        <h1>내 PC를 개발자의 PC로<br />만드는 9단계</h1>
        <p>
          순서대로 따라 하면 됩니다. 막히면 <strong>30분 룰</strong> — 혼자 30분 해보고,
          안 되면 멘토에게 물어보세요. 설치에서 막힌 것 자체가 좋은 질문 재료예요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 2~3시간</span>
          <span className="chip">Windows 기준</span>
          <span className="chip">디자이너는 STEP 3·4·5만</span>
        </div>
      </div>

      {/* 단계 바로가기 */}
      <nav className="pill-nav">
        {STEPS.map((s) => (
          <a key={s.n} href={`#step-${s.n}`}>
            <b>{s.n}</b>
            {s.label}
          </a>
        ))}
      </nav>

      <Step n={1} title="자바(JDK 21) 설치" sub="백엔드(Spring Boot)의 심장">
        <ol className="olist">
          <li>브라우저에서 <strong>adoptium.net</strong> 접속 → 큰 다운로드 버튼(<strong>Temurin 21 LTS</strong>, Windows x64 .msi) 클릭</li>
          <li>받은 .msi 파일 실행 → 계속 <span className="kbd">다음</span></li>
          <li>
            <strong>제일 중요한 화면!</strong> "Custom Setup" 단계에서{' '}
            <strong>Set JAVA_HOME variable</strong>과 <strong>Add to PATH</strong>를 클릭해{' '}
            <em>"Will be installed on local hard drive"</em>로 바꾸기 — 이러면 PATH 설정을 설치기가 대신 해줘요
          </li>
          <li>설치 완료 후, <strong>열려 있던 터미널을 모두 닫고 새로 열어서</strong> 확인:</li>
        </ol>
        <Code>{CODE_JAVA_CHECK}</Code>
        <div className="tip">
          <b>왜 터미널을 새로 여나요?</b> PATH 같은 환경 변수는 터미널이 <strong>켜질 때</strong> 읽혀요.
          설치 전에 열어둔 터미널은 새 설정을 모릅니다.
        </div>
      </Step>

      <Step n={2} title="PATH가 뭐길래? — 손으로 직접 잡아보기" sub="java -version이 안 될 때">
        <Code>{CODE_PATH_EXPLAIN}</Code>
        <p>설치기에서 체크를 놓쳤다면 직접 잡습니다:</p>
        <ol className="olist">
          <li><Path items={['⊞ 시작', '"환경 변수" 검색', '시스템 환경 변수 편집']} /> 클릭</li>
          <li>아래쪽 <span className="kbd">환경 변수(N)...</span> 버튼 클릭</li>
          <li>
            시스템 변수에서 <span className="kbd">새로 만들기</span> → 변수 이름 <span className="icode">JAVA_HOME</span> /
            변수 값 <span className="icode">C:\Program Files\Eclipse Adoptium\jdk-21.0.x-hotspot</span>
            <span className="muted"> (실제 설치 폴더를 탐색기로 확인해서 적어요)</span>
          </li>
          <li>시스템 변수 목록에서 <span className="kbd">Path</span> 선택 → <span className="kbd">편집</span> → <span className="kbd">새로 만들기</span> → <span className="icode">%JAVA_HOME%\bin</span> 입력 → 전부 확인</li>
          <li>터미널 새로 열고 <span className="icode">java -version</span> 다시 확인!</li>
        </ol>
        <div className="tip">
          <b>%JAVA_HOME%\bin의 의미</b> — "JAVA_HOME 변수에 적힌 폴더 안의 bin 폴더".
          bin 안에 java.exe 같은 실행 파일이 들어 있어요.
        </div>
      </Step>

      <Step n={3} title="Node.js 설치" sub="프론트엔드(React)의 엔진">
        <ol className="olist">
          <li><strong>nodejs.org</strong> 접속 → 초록색 <strong>LTS</strong> 버튼으로 다운로드</li>
          <li>설치 파일 실행 → 전부 기본값으로 <span className="kbd">Next</span> (Node는 PATH를 자동으로 잡아줘요)</li>
          <li>터미널 새로 열고 확인:</li>
        </ol>
        <Code>{CODE_NODE_CHECK}</Code>
      </Step>

      <Step n={4} title="Git 설치 + 첫 설정" sub="협업의 시작">
        <ol className="olist">
          <li><strong>git-scm.com</strong> 접속 → Download for Windows</li>
          <li>설치 옵션이 많이 나오는데 <strong>전부 기본값</strong>으로 <span className="kbd">Next</span> 해도 충분해요</li>
          <li>설치 후 터미널에서 <span className="icode">git --version</span> 확인</li>
          <li>내가 누군지 등록 — 커밋마다 이 이름이 남아요:</li>
        </ol>
        <Code>{CODE_GIT_CONFIG}</Code>
        <div className="warn">
          <b>먼저 할 일</b> — 우리 Git 서버(Gitea) <a href={GIT_URL} target="_blank" rel="noreferrer"><strong>{GIT_URL}</strong></a>에
          접속해서 <strong>회원가입</strong>하고, 아이디를 멘토에게 알려 주세요. 다음 단계들에서 이 계정을 씁니다.
        </div>
      </Step>

      <Step n={5} title="VS Code · Docker Desktop 설치" sub="프론트 에디터 + 개발용 DB">
        <ol className="olist">
          <li><strong>VS Code</strong> (code.visualstudio.com) 설치 — 프론트엔드(React) 작업용. 확장(Extensions)에서 <strong>Korean Language Pack</strong>, <strong>ES7+ React snippets</strong> 추천</li>
          <li><strong>Docker Desktop</strong> (docker.com) 설치 — 개발용 DB(PostgreSQL)를 띄울 때 필요해요. 설치 후 재부팅 한 번</li>
        </ol>
      </Step>

      <Step n={6} title="IntelliJ IDEA 설치" sub="백엔드(Java·Spring) 에디터 — 무료 Community 버전">
        <ol className="olist">
          <li><strong>jetbrains.com/idea</strong> 접속 → 아래로 스크롤해 <strong>IntelliJ IDEA Community Edition</strong>(무료) 다운로드 <span className="muted">(위쪽 Ultimate는 유료 — 우리는 Community로 충분해요)</span></li>
          <li>설치 중 옵션 화면에서 <strong>Add "bin" folder to the PATH</strong>, <strong>.java 연결</strong> 체크 추천 → <span className="kbd">Next</span> → 설치 후 재부팅</li>
          <li>첫 실행 → 테마 고르기(아무거나) → 시작 화면이 나오면 성공</li>
          <li>
            <strong>JDK 지정 확인</strong> — 프로젝트를 연 뒤(다음 단계){' '}
            <Path items={['File', 'Project Structure', 'Project']} /> 에서 <strong>SDK가 21</strong>인지 확인.
            비어 있으면 <span className="kbd">Add SDK</span> → <span className="kbd">JDK...</span> → STEP 1에서 설치한 폴더 선택
          </li>
          <li>
            <strong>실행해 보기</strong> — 좌측 파일 트리에서 <span className="icode">backend/src/.../MirimApplication.java</span> 열고,
            클래스 옆 <strong>초록 ▶ 버튼</strong> 클릭 → 아래 콘솔에 "Started MirimApplication"이 뜨면 백엔드가 켜진 거예요!
          </li>
        </ol>
        <div className="tip">
          <b>Maven이 뭘 하고 있는 거죠?</b> 프로젝트를 처음 열면 IntelliJ가 우측 하단에서 한참 뭔가를 내려받아요.
          <span className="icode">pom.xml</span>에 적힌 라이브러리들을 자동으로 설치하는 중이니 기다려 주세요 (처음 한 번만 오래 걸려요).
        </div>
      </Step>

      <Step n={7} title="IntelliJ에서 Git 연결하기" sub="클론부터 커밋·푸시까지 IDE 안에서">
        <p><strong>① 프로젝트 클론 (처음 한 번)</strong></p>
        <ol className="olist">
          <li>IntelliJ 시작 화면에서 <span className="kbd">Clone Repository</span> 클릭 <span className="muted">(이미 다른 프로젝트가 열려 있으면 <Path items={['File', 'New', 'Project from Version Control...']} />)</span></li>
          <li>URL에 <span className="icode">{CLONE_URL}</span> 입력 → Directory 확인 → <span className="kbd">Clone</span></li>
          <li>로그인 창이 뜨면 <strong>Gitea 아이디/비밀번호</strong>(STEP 4에서 가입한 계정) 입력 — 한 번 입력하면 IntelliJ가 기억해요</li>
          <li>"Trust Project?" 물으면 <span className="kbd">Trust Project</span></li>
        </ol>
        <p><strong>② 브랜치 만들기</strong></p>
        <ol className="olist">
          <li>우측 하단(또는 좌측 상단)의 <strong>브랜치 이름(main)</strong> 클릭 → <span className="kbd">New Branch</span> → 이름 입력 (예: <span className="icode">feat/my-first-fix</span>) → <span className="kbd">Create</span></li>
        </ol>
        <p><strong>③ 커밋하고 푸시하기</strong></p>
        <ol className="olist">
          <li>코드를 수정하면 파일 이름이 <strong>파란색</strong>으로 변해요 (= 변경됨 표시)</li>
          <li>좌측 <strong>Commit 탭</strong>(체크 표시 아이콘, 단축키 <span className="kbd">Alt</span>+<span className="kbd">0</span>) 클릭 → 바뀐 파일 목록 확인</li>
          <li>파일을 <strong>더블클릭하면 전/후 비교(diff)</strong>가 보여요 — 커밋 전에 꼭 훑어보는 습관!</li>
          <li>커밋할 파일 체크 → 아래 메시지 칸에 <span className="icode">feat: 무엇을 했는지</span> 입력</li>
          <li><span className="kbd">Commit and Push...</span> 버튼 → <span className="kbd">Push</span> — 끝! Gitea 웹에서 내 브랜치가 보여요</li>
          <li>Gitea 웹({HOST}:3000)에서 <span className="kbd">Pull Request 만들기</span> → 멘토 리뷰 요청</li>
        </ol>
        <div className="tip">
          <b>터미널과 IDE, 뭘 쓰든 같은 Git이에요.</b> IntelliJ 버튼들은 결국 STEP 9의 git 명령을 대신 눌러주는 것.
          처음엔 IDE로 익히고, 익숙해지면 터미널 명령도 함께 배워두면 어디서든 일할 수 있어요.
        </div>
        <div className="warn">
          <b>main에 직접 푸시 금지!</b> 항상 브랜치를 만들어 작업하고 Pull Request로 멘토 리뷰를 받아요. 이게 우리가 일하는 방식이에요.
        </div>
      </Step>

      <Step n={8} title="프로젝트 실행 — 내 PC에서 전체 돌려보기" sub="DB + 백엔드 + 프론트 세 개가 한 세트">
        <Code>{CODE_RUN}</Code>
        <div className="tip">
          <b>왜 세 개나 켜나요?</b> 프론트(5173)는 화면, 백엔드(8080)는 API, PG(5432)는 데이터.
          프론트의 /api 요청을 백엔드로 넘기는 설정은 <span className="icode">frontend/vite.config.js</span>에 있어요 — 열어서 읽어보세요!
        </div>
      </Step>

      <Step n={9} title="매일의 Git 흐름 (터미널 버전) + 커밋 규칙" sub="숙련자 코스 — IDE와 같은 일을 명령어로">
        <Code>{CODE_GIT_FLOW}</Code>
        <Code>{CODE_COMMIT_RULE}</Code>
      </Step>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🎉 여기까지 됐다면</h3>
          <p className="muted">
            여러분 PC는 이제 어썸데브 개발자와 같은 환경이에요. 다음은 <strong>코딩 기초</strong> 메뉴에서
            이 앱이 어떻게 만들어졌는지 읽고, 저장소의 <span className="icode">STUDY.md</span>에 있는
            "직접 해보기 미니 과제"에 도전해 보세요.
          </p>
        </div>
      </div>
    </div>
  );
}
