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

export default function StartingProject() {
  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>

      {/* 템플릿 비교 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">프로젝트 템플릿</h2>
      <p className="text-text-secondary mb-4">
        Gitea <code className="bg-bg-tertiary px-1 rounded">gc</code> 조직에서 프로젝트 유형에 맞는 템플릿을 선택합니다.
      </p>
      <div className="overflow-x-auto">
        <table className="w-full bg-surface border border-border-default rounded-lg overflow-hidden text-sm">
          <thead>
            <tr className="bg-bg-tertiary">
              <th className="text-left px-4 py-3 font-semibold text-text-primary">템플릿</th>
              <th className="text-left px-4 py-3 font-semibold text-text-primary">기술 스택</th>
              <th className="text-left px-4 py-3 font-semibold text-text-primary">포함 내용</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-border-subtle">
            <tr>
              <td className="px-4 py-3 font-medium text-text-primary">template-java-maven</td>
              <td className="px-4 py-3 text-text-secondary">Java + Spring Boot + Maven</td>
              <td className="px-4 py-3 text-text-secondary">
                <code className="bg-bg-tertiary px-1 rounded">.sdkmanrc</code>,{' '}
                <code className="bg-bg-tertiary px-1 rounded">.mvn/settings.xml</code>,{' '}
                Claude 규칙/스킬, Git hooks
              </td>
            </tr>
            <tr>
              <td className="px-4 py-3 font-medium text-text-primary">template-java-gradle</td>
              <td className="px-4 py-3 text-text-secondary">Java + Spring Boot + Gradle</td>
              <td className="px-4 py-3 text-text-secondary">
                <code className="bg-bg-tertiary px-1 rounded">.sdkmanrc</code>,{' '}
                <code className="bg-bg-tertiary px-1 rounded">gradle.properties.example</code>,{' '}
                Claude 규칙/스킬, Git hooks
              </td>
            </tr>
            <tr>
              <td className="px-4 py-3 font-medium text-text-primary">template-react-ts</td>
              <td className="px-4 py-3 text-text-secondary">React + TypeScript + Vite</td>
              <td className="px-4 py-3 text-text-secondary">
                <code className="bg-bg-tertiary px-1 rounded">.node-version</code>,{' '}
                <code className="bg-bg-tertiary px-1 rounded">.npmrc</code>,{' '}
                <code className="bg-bg-tertiary px-1 rounded">.prettierrc</code>,{' '}
                Claude 규칙/스킬, Git hooks
              </td>
            </tr>
            <tr>
              <td className="px-4 py-3 font-medium text-text-primary">template-common</td>
              <td className="px-4 py-3 text-text-secondary">공통 워크플로우</td>
              <td className="px-4 py-3 text-text-secondary">
                팀 규칙, Claude 스킬, Git hooks, 버전 관리 (프로젝트 템플릿이 아닌 규칙 원본)
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <Alert type="info">
        모든 프로젝트 템플릿에는 <code className="bg-bg-tertiary px-1 rounded">.claude/</code> 디렉토리(규칙, 스킬, 설정),{' '}
        <code className="bg-bg-tertiary px-1 rounded">.githooks/</code>(commit-msg, post-checkout),{' '}
        <code className="bg-bg-tertiary px-1 rounded">.editorconfig</code>,{' '}
        <code className="bg-bg-tertiary px-1 rounded">CLAUDE.md</code>가 공통으로 포함되어 있습니다.
      </Alert>

      {/* 새 프로젝트 생성 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">새 프로젝트 생성</h2>
      <StepGuide
        steps={[
          {
            title: 'Gitea에서 리포지토리 생성',
            content: (
              <p>
                Gitea → <strong>gc</strong> 조직 → <strong>새 저장소</strong>를 클릭합니다.
                <strong> &quot;템플릿에서 생성&quot;</strong>에서 프로젝트 유형에 맞는 템플릿(<code className="bg-bg-tertiary px-1 rounded">template-java-maven</code>,{' '}
                <code className="bg-bg-tertiary px-1 rounded">template-java-gradle</code>,{' '}
                <code className="bg-bg-tertiary px-1 rounded">template-react-ts</code>)을 선택하고 프로젝트 이름을 입력합니다.
              </p>
            ),
          },
          {
            title: '로컬에 클론',
            content: (
              <CodeBlock
                language="bash"
                code={`git clone git@gitea.gc-si.dev:gc/새-프로젝트명.git
cd 새-프로젝트명`}
              />
            ),
          },
          {
            title: 'Claude Code로 초기화 (Claude Code 사용 시)',
            content: (
              <>
                <p className="mb-2">
                  Claude Code를 사용한다면 세션에서 프로젝트 초기화 스킬을 실행합니다.
                </p>
                <CodeBlock
                  language="bash"
                  code={`claude
# 세션 내에서 실행:
/init-project`}
                />
                <div className="mt-3 bg-bg-tertiary rounded-lg p-3">
                  <p className="text-xs text-text-secondary mb-1">
                    <strong className="text-text-primary">/init-project</strong>가 수행하는 작업:
                  </p>
                  <ul className="text-xs text-text-muted space-y-0.5 list-disc list-inside">
                    <li>Git hooks 경로 설정 (<code>.githooks/</code>를 로컬 hooks로 연결)</li>
                    <li>워크플로우 버전 검증 및 동기화</li>
                    <li>CLAUDE.md 프로젝트 컨텍스트 확인</li>
                  </ul>
                </div>
                <p className="mt-2 text-text-muted text-xs">
                  Claude Code를 사용하지 않는 경우에도 Git hooks는 클론 시 포함되어 있으며,{' '}
                  <code className="bg-bg-tertiary px-1 rounded">git config core.hooksPath .githooks</code>로
                  수동 설정할 수 있습니다.
                </p>
              </>
            ),
          },
          {
            title: 'develop 브랜치 생성',
            content: (
              <CodeBlock
                language="bash"
                code={`git checkout -b develop
git push -u origin develop`}
              />
            ),
          },
          {
            title: '첫 feature 브랜치 시작',
            content: (
              <CodeBlock
                language="bash"
                code={`git checkout -b feature/ISSUE-1-project-setup
# 코딩 시작!`}
              />
            ),
          },
        ]}
      />

      {/* 템플릿 공통 파일 구조 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">템플릿 공통 파일 구조</h2>
      <p className="text-text-secondary mb-4">
        모든 프로젝트 템플릿에 포함되는 공통 파일입니다. 이 파일들은 Git에 커밋되어 팀 전체가 공유합니다.
      </p>
      <div className="bg-surface border border-border-default rounded-xl p-5">
        <div className="font-mono text-sm space-y-1.5 text-text-secondary">
          <div><span className="text-accent">.claude/</span></div>
          <div className="pl-4"><span className="text-accent">rules/</span> — 팀 코딩 규칙 (code-style, git-workflow, naming, testing, team-policy)</div>
          <div className="pl-4"><span className="text-accent">skills/</span> — 팀 Claude 스킬 (create-mr, fix-issue, init-project, sync-team-workflow)</div>
          <div className="pl-4"><span className="text-accent">settings.json</span> — 팀 Claude 권한 정책 (Git에 커밋됨)</div>
          <div className="pl-4 text-text-muted italic">settings.local.json — 개인 확장 설정 (.gitignore에 포함, 각자 자유)</div>
          <div className="mt-2"><span className="text-accent">.githooks/</span></div>
          <div className="pl-4"><span className="text-accent">commit-msg</span> — Conventional Commits 검증 훅</div>
          <div className="pl-4"><span className="text-accent">post-checkout</span> — 체크아웃 후 자동 실행</div>
          <div className="mt-2"><span className="text-accent">.editorconfig</span> — 에디터 공통 설정</div>
          <div><span className="text-accent">.gitignore</span> — Git 제외 패턴</div>
          <div><span className="text-accent">CLAUDE.md</span> — 프로젝트 설명서</div>
          <div><span className="text-accent">workflow-version.json</span> — 워크플로우 버전 추적</div>
        </div>
      </div>

      <div className="bg-accent-soft border border-accent/20 rounded-xl p-4 mt-4 mb-6">
        <h4 className="font-semibold text-accent text-sm mb-2">settings.json vs settings.local.json</h4>
        <ul className="text-xs text-text-secondary space-y-1">
          <li><code className="bg-bg-tertiary px-1 rounded">.claude/settings.json</code> — 팀 정책 (Git에 커밋). 팀 전체에 적용되는 권한과 규칙.</li>
          <li><code className="bg-bg-tertiary px-1 rounded">.claude/settings.local.json</code> — 개인 확장 (.gitignore). 팀 정책 위에 개인 설정 추가. 없어도 무방.</li>
        </ul>
      </div>

      {/* 템플릿별 추가 파일 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">템플릿별 추가 파일</h2>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-surface border border-border-default rounded-xl p-4">
          <h4 className="font-semibold text-text-primary text-sm mb-2">template-java-maven</h4>
          <div className="font-mono text-xs space-y-1 text-text-secondary">
            <div><code className="bg-bg-tertiary px-1 rounded">.sdkmanrc</code> — JDK 버전</div>
            <div><code className="bg-bg-tertiary px-1 rounded">.mvn/settings.xml</code> — Maven 설정</div>
          </div>
        </div>
        <div className="bg-surface border border-border-default rounded-xl p-4">
          <h4 className="font-semibold text-text-primary text-sm mb-2">template-java-gradle</h4>
          <div className="font-mono text-xs space-y-1 text-text-secondary">
            <div><code className="bg-bg-tertiary px-1 rounded">.sdkmanrc</code> — JDK 버전</div>
            <div><code className="bg-bg-tertiary px-1 rounded">gradle.properties.example</code> — Gradle 설정 예시</div>
          </div>
        </div>
        <div className="bg-surface border border-border-default rounded-xl p-4">
          <h4 className="font-semibold text-text-primary text-sm mb-2">template-react-ts</h4>
          <div className="font-mono text-xs space-y-1 text-text-secondary">
            <div><code className="bg-bg-tertiary px-1 rounded">.node-version</code> — Node.js 버전</div>
            <div><code className="bg-bg-tertiary px-1 rounded">.npmrc</code> — npm 레지스트리 (URL만)</div>
            <div><code className="bg-bg-tertiary px-1 rounded">.prettierrc</code> — 코드 포매터</div>
          </div>
        </div>
      </div>

      <Alert type="info" title="워크플로우 업데이트">
        팀 워크플로우가 업데이트되면 Claude Code 세션 시작 시 알림이 표시됩니다.
        <code className="bg-bg-tertiary px-1 rounded ml-1">/sync-team-workflow</code>를 실행하여 최신 규칙을 동기화하세요.
      </Alert>

      {/* 프로젝트 구조 권장안 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">권장 프로젝트 구조</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <h4 className="font-semibold text-text-primary mb-2">Spring Boot (Maven/Gradle)</h4>
          <CodeBlock
            language="text"
            code={`src/main/java/com/gcsc/프로젝트/
├── controller/
├── service/
├── repository/
├── dto/
├── entity/
├── config/
└── common/`}
          />
        </div>
        <div>
          <h4 className="font-semibold text-text-primary mb-2">React + TypeScript</h4>
          <CodeBlock
            language="text"
            code={`src/
├── components/
│   ├── common/
│   └── layout/
├── pages/
├── hooks/
├── services/
├── types/
└── utils/`}
          />
        </div>
      </div>
    </div>
  );
}