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

export default function GitWorkflow() {
  return (
    <div className="max-w-4xl mx-auto py-12 px-6">
      <h1 className="text-3xl font-bold text-text-primary mb-2">Git 워크플로우</h1>
      <p className="text-text-secondary mb-8">
        팀 브랜치 전략, 커밋 규칙, 3계층 보호 정책을 안내합니다.
      </p>

      {/* 브랜치 전략 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">브랜치 전략</h2>
      <div className="bg-surface border border-border-default rounded-xl p-6 mb-6">
        <div className="font-mono text-sm space-y-2">
          <div className="flex items-center gap-3">
            <span className="inline-block w-24 px-2 py-1 bg-danger/10 text-danger rounded text-center font-semibold">main</span>
            <span className="text-text-secondary">← 배포 가능한 안정 브랜치 (보호됨)</span>
          </div>
          <div className="flex items-center gap-3 pl-6">
            <span className="text-text-muted">└──</span>
            <span className="inline-block w-24 px-2 py-1 bg-info/10 text-info rounded text-center font-semibold">develop</span>
            <span className="text-text-secondary">← 개발 통합 브랜치</span>
          </div>
          <div className="flex items-center gap-3 pl-16">
            <span className="text-text-muted">├──</span>
            <span className="text-success">feature/ISSUE-123-기능설명</span>
          </div>
          <div className="flex items-center gap-3 pl-16">
            <span className="text-text-muted">├──</span>
            <span className="text-warning">bugfix/ISSUE-456-버그설명</span>
          </div>
          <div className="flex items-center gap-3 pl-16">
            <span className="text-text-muted">└──</span>
            <span className="text-danger">hotfix/ISSUE-789-긴급수정</span>
          </div>
        </div>
      </div>

      <Alert type="warning">
        <code className="bg-bg-tertiary px-1 rounded">main</code> 브랜치에 직접 커밋/푸시는 금지됩니다. 반드시 MR을 통해 머지하세요.{' '}
        <code className="bg-bg-tertiary px-1 rounded">develop</code> 브랜치는 push 가능하지만 서버 pre-receive hook 검증을 통과해야 합니다.
      </Alert>

      {/* 브랜치 네이밍 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">브랜치 네이밍</h2>
      <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 text-text-primary">기능</td>
              <td className="px-4 py-3 font-mono text-sm text-text-secondary">feature/ISSUE-번호-설명</td>
              <td className="px-4 py-3 font-mono text-sm text-accent">feature/ISSUE-42-user-login</td>
            </tr>
            <tr>
              <td className="px-4 py-3 text-text-primary">버그</td>
              <td className="px-4 py-3 font-mono text-sm text-text-secondary">bugfix/ISSUE-번호-설명</td>
              <td className="px-4 py-3 font-mono text-sm text-accent">bugfix/ISSUE-56-date-format</td>
            </tr>
            <tr>
              <td className="px-4 py-3 text-text-primary">긴급</td>
              <td className="px-4 py-3 font-mono text-sm text-text-secondary">hotfix/ISSUE-번호-설명</td>
              <td className="px-4 py-3 font-mono text-sm text-accent">hotfix/ISSUE-99-api-timeout</td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* Conventional Commits */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">Conventional Commits</h2>
      <p className="text-text-secondary mb-4">
        모든 커밋 메시지는 다음 형식을 따릅니다.
      </p>
      <CodeBlock
        language="text"
        code={`type(scope): subject

body (선택)

footer (선택)`}
      />
      <div className="overflow-x-auto mt-4">
        <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">type</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">
            {[
              { type: 'feat', desc: '새로운 기능 추가', ex: 'feat(auth): JWT 기반 로그인 구현' },
              { type: 'fix', desc: '버그 수정', ex: 'fix(배치): 야간 배치 타임아웃 수정' },
              { type: 'refactor', desc: '리팩토링', ex: 'refactor(user): 중복 로직 추출' },
              { type: 'docs', desc: '문서 변경', ex: 'docs: README에 빌드 방법 추가' },
              { type: 'test', desc: '테스트 추가/수정', ex: 'test(결제): 환불 로직 단위 테스트' },
              { type: 'chore', desc: '빌드, 설정 변경', ex: 'chore: Gradle 의존성 업데이트' },
            ].map((row) => (
              <tr key={row.type}>
                <td className="px-4 py-3 font-mono text-accent font-medium">{row.type}</td>
                <td className="px-4 py-3 text-text-secondary">{row.desc}</td>
                <td className="px-4 py-3 font-mono text-xs text-text-muted">{row.ex}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <Alert type="info">
        <code className="bg-bg-tertiary px-1 rounded">/push</code> 스킬은 변경 내용을 분석하여 이 형식에 맞는 커밋 메시지를 자동 생성합니다.
        직접 커밋할 때는 위 규칙을 따르세요. 로컬 <code className="bg-bg-tertiary px-1 rounded">commit-msg</code> hook이 형식을 검증합니다.
      </Alert>

      {/* 작업 흐름 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">일반 작업 흐름</h2>

      <h3 className="text-lg font-semibold text-text-primary mt-6 mb-3">스킬 기반 워크플로우 (권장)</h3>
      <p className="text-text-secondary mb-4">
        Claude Code의 스킬을 사용하면 브랜치 생성부터 MR 머지까지 자동화할 수 있습니다.
      </p>
      <StepGuide
        steps={[
          {
            title: '이슈 확인 및 브랜치 생성',
            content: (
              <>
                <CodeBlock language="text" code="/fix-issue 42" />
                <p className="text-sm text-text-muted mt-2">
                  이슈 내용을 분석하고 <code className="bg-bg-tertiary px-1 rounded">feature/ISSUE-42-설명</code> 브랜치를 자동 생성합니다.
                </p>
              </>
            ),
          },
          {
            title: '개발 및 중간 푸시',
            content: (
              <>
                <CodeBlock language="text" code="/push" />
                <p className="text-sm text-text-muted mt-2">
                  변경 내용을 분석하여 Conventional Commits 형식의 커밋 메시지를 자동 생성하고 푸시합니다.
                </p>
              </>
            ),
          },
          {
            title: 'MR 생성',
            content: (
              <>
                <CodeBlock language="text" code="/mr" />
                <p className="text-sm text-text-muted mt-2">
                  커밋 + 푸시 + MR 생성 + 릴리즈 노트 갱신을 한 번에 수행합니다.
                  봇 자동 승인/머지 옵션도 선택할 수 있습니다.
                </p>
              </>
            ),
          },
          {
            title: '리뷰 후 머지',
            content: (
              <p>
                리뷰어 지정 → 최소 1명 승인 → <strong>Squash Merge</strong> → 소스 브랜치 자동 삭제.{' '}
                <code className="bg-bg-tertiary px-1 rounded">/mr</code> 실행 시 봇 승인+머지를 선택하면 이 과정도 자동화됩니다.
              </p>
            ),
          },
        ]}
      />

      <h3 className="text-lg font-semibold text-text-primary mt-8 mb-3">수동 워크플로우</h3>
      <p className="text-text-secondary mb-4">
        Claude Code 미사용 환경에서의 git 명령어 기반 작업 흐름입니다.
      </p>
      <div className="bg-surface border border-border-default rounded-xl p-6 space-y-4">
        <div className="flex items-start gap-3">
          <span className="flex-shrink-0 w-6 h-6 bg-accent/10 text-accent rounded-full flex items-center justify-center text-sm font-semibold">1</span>
          <div>
            <p className="font-medium text-text-primary">브랜치 생성</p>
            <CodeBlock language="bash" code={`git checkout develop && git pull origin develop\ngit checkout -b feature/ISSUE-42-user-login`} />
          </div>
        </div>
        <div className="flex items-start gap-3">
          <span className="flex-shrink-0 w-6 h-6 bg-accent/10 text-accent rounded-full flex items-center justify-center text-sm font-semibold">2</span>
          <div>
            <p className="font-medium text-text-primary">커밋</p>
            <CodeBlock language="bash" code={`git add src/auth/LoginForm.tsx\ngit commit -m "feat(auth): 로그인 폼 UI 구현 (#42)"`} />
          </div>
        </div>
        <div className="flex items-start gap-3">
          <span className="flex-shrink-0 w-6 h-6 bg-accent/10 text-accent rounded-full flex items-center justify-center text-sm font-semibold">3</span>
          <div>
            <p className="font-medium text-text-primary">푸시 및 MR 생성</p>
            <CodeBlock language="bash" code={`git push -u origin feature/ISSUE-42-user-login\n# Gitea 웹 UI → 새 Pull Request → develop ← feature 브랜치`} />
          </div>
        </div>
        <div className="flex items-start gap-3">
          <span className="flex-shrink-0 w-6 h-6 bg-accent/10 text-accent rounded-full flex items-center justify-center text-sm font-semibold">4</span>
          <div>
            <p className="font-medium text-text-primary">리뷰 및 머지</p>
            <p className="text-sm text-text-secondary">리뷰어 지정 → 최소 1명 승인 → Squash Merge → 소스 브랜치 삭제</p>
          </div>
        </div>
      </div>

      {/* 3계층 보호 정책 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">3계층 보호 정책</h2>
      <div className="space-y-3">
        <div className="bg-surface border border-border-default rounded-lg p-4">
          <h4 className="font-semibold text-danger mb-1">1. Git Hooks (로컬)</h4>
          <p className="text-sm text-text-secondary">
            <code className="bg-bg-tertiary px-1 rounded">commit-msg</code> 훅으로 커밋 메시지 형식을 검증합니다. Conventional Commits 규칙에 맞지 않으면 커밋이 거부됩니다.
          </p>
        </div>
        <div className="bg-surface border border-border-default rounded-lg p-4">
          <h4 className="font-semibold text-warning mb-1">2. 서버 Pre-receive Hook</h4>
          <p className="text-sm text-text-secondary">
            Push 시 서버에서 <code className="bg-bg-tertiary px-1 rounded">pre-receive hook</code>이 자동 실행됩니다.{' '}
            <code className="bg-bg-tertiary px-1 rounded">main</code>/<code className="bg-bg-tertiary px-1 rounded">develop</code> 브랜치 직접 push 차단,
            커밋 메시지 형식 검증, 금지 파일(credentials, .env 등) 차단, force push 차단을 수행합니다.
          </p>
        </div>
        <div className="bg-surface border border-border-default rounded-lg p-4">
          <h4 className="font-semibold text-success mb-1">3. 브랜치 보호 규칙</h4>
          <p className="text-sm text-text-secondary">
            <code className="bg-bg-tertiary px-1 rounded">main</code> 브랜치는 MR을 통해서만 머지 가능하며, 최소 1명의 리뷰어 승인이 필수입니다.{' '}
            <code className="bg-bg-tertiary px-1 rounded">develop</code> 브랜치는 push가 허용되지만, pre-receive hook 검증을 통과해야 합니다.
          </p>
        </div>
      </div>
    </div>
  );
}