import { Alert } from '../components/common/Alert';
import { CodeBlock } from '../components/common/CodeBlock';
import { StepGuide } from '../components/common/StepGuide';

export default function InitialSetup() {
  return (
    <div className="max-w-4xl mx-auto py-12 px-6">
      <h1 className="text-3xl font-bold text-text-primary mb-2">초기 환경 설정</h1>
      <p className="text-text-secondary mb-8">
        개발을 시작하기 전 필요한 도구와 설정을 안내합니다.
      </p>

      {/* SSH 키 생성 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">1. SSH 키 생성 및 등록</h2>
      <p className="text-text-secondary mb-4">
        Gitea에 SSH로 접근하려면 SSH 키가 필요합니다.
      </p>
      <StepGuide
        steps={[
          {
            title: 'SSH 키 생성',
            content: (
              <>
                <p className="mb-2">터미널에서 다음 명령어를 실행합니다.</p>
                <CodeBlock
                  language="bash"
                  code={`ssh-keygen -t ed25519 -C "your-email@gcsc.co.kr"
# Enter 키를 눌러 기본 경로에 저장
# 패스프레이즈는 선택사항`}
                />
              </>
            ),
          },
          {
            title: '공개 키 복사',
            content: (
              <>
                <CodeBlock language="bash" code="cat ~/.ssh/id_ed25519.pub" />
                <p className="mt-2">출력된 내용을 전체 복사합니다.</p>
              </>
            ),
          },
          {
            title: 'Gitea에 등록',
            content: (
              <p>
                Gitea → <strong>설정</strong> → <strong>SSH / GPG 키</strong> → <strong>SSH 키 추가</strong>에서 복사한 공개 키를 붙여넣고 저장합니다.
              </p>
            ),
          },
        ]}
      />

      {/* Git 설정 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">2. Git 기본 설정</h2>
      <CodeBlock
        language="bash"
        filename="~/.gitconfig"
        code={`git config --global user.name "홍길동"
git config --global user.email "hong@gcsc.co.kr"
git config --global init.defaultBranch main
git config --global core.autocrlf input`}
      />
      <Alert type="info">
        이메일은 반드시 <strong>@gcsc.co.kr</strong> 도메인을 사용하세요. Gitea 커밋 연동에 필요합니다.
      </Alert>

      {/* SDKMAN */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">3. SDKMAN! (JDK 관리)</h2>
      <p className="text-text-secondary mb-4">
        Java 프로젝트를 위해 SDKMAN!으로 JDK를 관리합니다.
      </p>
      <StepGuide
        steps={[
          {
            title: 'SDKMAN! 설치',
            content: (
              <CodeBlock
                language="bash"
                code={`curl -s "https://get.sdkman.io" | bash
source "$HOME/.sdkman/bin/sdkman-init.sh"
sdk version`}
              />
            ),
          },
          {
            title: 'JDK 설치',
            content: (
              <>
                <CodeBlock
                  language="bash"
                  code={`# Amazon Corretto 21 (기본)
sdk install java 21.0.9-amzn

# 프로젝트별 JDK 17이 필요한 경우
sdk install java 17.0.18-amzn
sdk use java 17.0.18-amzn`}
                />
                <Alert type="info">
                  프로젝트 루트에 <code className="bg-bg-tertiary px-1 rounded">.sdkmanrc</code> 파일이 있으면 해당 버전이 자동 선택됩니다.
                </Alert>
              </>
            ),
          },
          {
            title: 'Maven 설치',
            content: (
              <CodeBlock language="bash" code="sdk install maven 3.9.12" />
            ),
          },
        ]}
      />

      {/* fnm */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">4. fnm (Node.js 관리)</h2>
      <p className="text-text-secondary mb-4">
        프론트엔드 프로젝트를 위해 fnm으로 Node.js를 관리합니다.
      </p>
      <StepGuide
        steps={[
          {
            title: 'fnm 설치',
            content: (
              <CodeBlock
                language="bash"
                code={`curl -fsSL https://fnm.vercel.app/install | bash
# 셸 재시작 후
fnm --version`}
              />
            ),
          },
          {
            title: 'Node.js 설치',
            content: (
              <>
                <CodeBlock
                  language="bash"
                  code={`fnm install 24
fnm default 24
node --version`}
                />
                <Alert type="info">
                  프로젝트 루트에 <code className="bg-bg-tertiary px-1 rounded">.node-version</code> 파일이 있으면 <code className="bg-bg-tertiary px-1 rounded">fnm use</code>로 자동 전환됩니다.
                </Alert>
              </>
            ),
          },
        ]}
      />

      {/* Claude Code */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">5. Claude Code 설치</h2>
      <p className="text-text-secondary mb-4">
        AI 기반 코딩 어시스턴트로 개발 생산성을 높입니다.
      </p>
      <CodeBlock
        language="bash"
        code={`npm install -g @anthropic-ai/claude-code
claude --version`}
      />
      <Alert type="warning" title="API 키 필요">
        Claude Code 사용을 위해 팀 관리자에게 API 키를 요청하세요.
      </Alert>
    </div>
  );
}