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> "템플릿에서 생성"</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로 초기화',
            content: (
              <>
                <p className="mb-2">Claude Code 세션에서 프로젝트 초기화 스킬을 실행합니다.</p>
                <CodeBlock
                  language="bash"
                  code={`claude
# 세션 내에서 실행:
/init-project`}
                />
                <p className="mt-2 text-text-muted text-xs">
                  이 명령은 팀 워크플로우 규칙, Git hooks, Claude 설정 파일을 자동으로 구성합니다.
                </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">
        모든 프로젝트 템플릿에 포함되는 공통 파일입니다.
      </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 권한 설정</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>

      {/* 템플릿별 추가 파일 */}
      <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 레지스트리</div>
            <div><code className="bg-bg-tertiary px-1 rounded">.prettierrc</code> — 코드 포매터</div>
          </div>
        </div>
      </div>

      <Alert type="info" title="워크플로우 업데이트">
        팀 워크플로우가 업데이트되면 세션 시작 시 알림이 표시됩니다.
        <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>
  );
}