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

const SKILLS = [
  { name: '/push', desc: '변경 확인 → 커밋 메시지 자동 제안 → 푸시', perm: 'push' },
  { name: '/mr', desc: '커밋 + 푸시 + MR 생성 + 릴리즈 노트 갱신 + 봇 승인/머지 선택', perm: 'push' },
  { name: '/release', desc: '릴리즈 노트 정리 + develop→main MR + 봇 승인/머지', perm: 'admin' },
  { name: '/version', desc: 'VERSION-HISTORY.md (SemVer) 생성', perm: 'admin' },
  { name: '/create-mr', desc: 'MR만 생성 (세부 옵션 지원)', perm: 'push' },
  { name: '/fix-issue', desc: 'Gitea 이슈 분석 + 수정 브랜치 생성', perm: 'push' },
  { name: '/init-project', desc: '팀 표준 워크플로우로 프로젝트 초기화', perm: '-' },
  { name: '/sync-team-workflow', desc: '워크플로우 버전 동기화', perm: '-' },
];

export default function ClaudeCodeSkills() {
  return (
    <div className="max-w-4xl mx-auto py-12 px-6">
      <h1 className="text-3xl font-bold text-text-primary mb-2">Claude Code 활용</h1>
      <p className="text-text-secondary mb-8">
        Claude Code 스킬을 활용하여 커밋, MR 생성, 릴리즈까지 개발 워크플로우를 자동화할 수 있습니다.
      </p>

      {/* 스킬 일람 */}
      <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">
            {SKILLS.map((s) => (
              <tr key={s.name}>
                <td className="px-4 py-3 font-mono text-accent font-medium">{s.name}</td>
                <td className="px-4 py-3 text-text-secondary">{s.desc}</td>
                <td className="px-4 py-3">
                  {s.perm === 'admin' ? (
                    <span className="px-2 py-0.5 bg-danger/10 text-danger rounded text-xs font-medium">admin</span>
                  ) : s.perm === 'push' ? (
                    <span className="px-2 py-0.5 bg-info/10 text-info rounded text-xs font-medium">push</span>
                  ) : (
                    <span className="text-text-muted text-xs">-</span>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <Alert type="info">
        <strong>push</strong> 권한은 팀원에게,{' '}
        <strong>admin</strong> 권한은 리포지토리 관리자에게 부여됩니다.
        Gitea 리포 설정에서 확인할 수 있습니다.
      </Alert>

      {/* 개발 프로세스 전체 흐름 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">개발 프로세스 — 전체 흐름</h2>
      <p className="text-text-secondary mb-6">
        기능 개발부터 릴리즈까지, Claude Code 스킬을 활용한 전체 개발 흐름입니다.
      </p>

      {/* 시각적 플로우 */}
      <div className="bg-surface border border-border-default rounded-xl p-5 mb-8">
        <div className="flex flex-wrap items-center gap-2 text-sm font-mono justify-center">
          <span className="px-3 py-1.5 bg-accent/10 text-accent rounded-lg font-semibold">계획 수립</span>
          <span className="text-text-muted">→</span>
          <span className="px-3 py-1.5 bg-info/10 text-info rounded-lg font-semibold">브랜치 분리</span>
          <span className="text-text-muted">→</span>
          <span className="px-3 py-1.5 bg-success/10 text-success rounded-lg font-semibold">개발</span>
          <span className="text-text-muted">→</span>
          <span className="px-3 py-1.5 bg-warning/10 text-warning rounded-lg font-semibold">/push</span>
          <span className="text-text-muted">→</span>
          <span className="px-3 py-1.5 bg-info/10 text-info rounded-lg font-semibold">/mr</span>
          <span className="text-text-muted">→</span>
          <span className="px-3 py-1.5 bg-danger/10 text-danger rounded-lg font-semibold">/release</span>
        </div>
      </div>

      <StepGuide
        steps={[
          {
            title: '1. 계획 수립 — 플랜 모드',
            content: (
              <>
                <p className="mb-2">복잡한 기능은 구현 전에 계획을 먼저 세웁니다. Claude Code가 코드베이스를 분석하고 구현 방향을 설계합니다.</p>
                <CodeBlock
                  language="text"
                  code={`"사용자 인증 기능을 추가해줘"
# → Claude가 자동으로 플랜 모드 전환
# → 코드베이스 분석 → 구현 계획 작성
# → 사용자 승인 후 구현 시작`}
                />
                <p className="text-xs text-text-muted mt-1">3개 이상 파일 수정이 필요하거나, 아키텍처에 영향을 주는 변경은 자동으로 플랜 모드로 전환됩니다.</p>
              </>
            ),
          },
          {
            title: '2. 브랜치 분리 — feature 브랜치 생성',
            content: (
              <>
                <p className="mb-2">develop에서 feature 브랜치를 생성하여 독립적으로 개발합니다.</p>
                <CodeBlock
                  language="bash"
                  code={`git checkout develop
git pull origin develop
git checkout -b feature/ISSUE-42-user-auth`}
                />
                <p className="text-xs text-text-muted mt-1">
                  이슈 기반 개발 시 <code className="bg-bg-tertiary px-1 rounded">/fix-issue 42</code>를 사용하면
                  이슈 분석 + 브랜치 생성을 자동으로 처리합니다.
                </p>
              </>
            ),
          },
          {
            title: '3. 개발 → /push',
            content: (
              <>
                <p className="mb-2">코드 수정 후 <code className="bg-bg-tertiary px-1 rounded">/push</code>로 커밋+푸시합니다.</p>
                <CodeBlock
                  language="text"
                  code={`/push
# 1. 팀 워크플로우 해시 체크 (불일치 시 자동 동기화)
# 2. 변경 파일 목록 + diff 요약 표시
# 3. Conventional Commits 형식 커밋 메시지 자동 제안
# 4. 사용자 승인 → commit + push`}
                />
                <Alert type="info">
                  여러 커밋을 쌓지 말고, 하나의 기능 단위로 커밋하세요.
                  <code className="bg-bg-tertiary px-1 rounded ml-1">/push</code>는 모든 변경을 단일 커밋으로 정리합니다.
                </Alert>
              </>
            ),
          },
          {
            title: '4. MR 생성 — /mr',
            content: (
              <>
                <p className="mb-2">기능 완성 후 develop으로 MR(Merge Request)을 생성합니다.</p>
                <CodeBlock
                  language="text"
                  code={`/mr
# 1. 커밋되지 않은 변경이 있으면 커밋+푸시
# 2. docs/RELEASE-NOTES.md [Unreleased] 자동 갱신
# 3. 릴리즈 노트 초안 확인 (사용자 첨삭 가능)
# 4. Gitea API로 MR 생성
# 5. 처리 방식 선택:
#    - 리뷰 대기 (기본) → 리뷰어가 승인 후 머지
#    - 봇 승인+머지 → claude-bot이 즉시 승인+머지`}
                />
              </>
            ),
          },
        ]}
      />

      {/* 권한별 시나리오 */}
      <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 className="bg-surface border border-info/30 rounded-xl p-5">
          <h4 className="font-semibold text-info mb-3 flex items-center gap-2">
            <span className="px-2 py-0.5 bg-info/10 text-info rounded text-xs font-medium">push 권한</span>
            개발자
          </h4>
          <div className="text-sm text-text-secondary space-y-2">
            <p className="font-medium text-text-primary">사용 가능: /push, /mr, /create-mr, /fix-issue</p>
            <div className="bg-bg-tertiary rounded-lg p-3 text-xs space-y-1.5">
              <div className="flex items-center gap-2">
                <span className="text-success">1.</span>
                <span><code className="bg-surface px-1 rounded">/push</code> — 변경 커밋+푸시</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-success">2.</span>
                <span><code className="bg-surface px-1 rounded">/mr</code> — develop으로 MR 생성</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-success">3.</span>
                <span>&quot;리뷰 대기&quot; 선택 → 관리자에게 리뷰 요청</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-info">→</span>
                <span>관리자가 Gitea에서 리뷰 + 승인 → 머지</span>
              </div>
            </div>
            <Alert type="info">
              <code className="bg-bg-tertiary px-1 rounded">/release</code>와 <code className="bg-bg-tertiary px-1 rounded">/version</code>은
              admin 권한이 필요합니다. 관리자에게 요청하세요.
            </Alert>
          </div>
        </div>
        <div className="bg-surface border border-danger/30 rounded-xl p-5">
          <h4 className="font-semibold text-danger mb-3 flex items-center gap-2">
            <span className="px-2 py-0.5 bg-danger/10 text-danger rounded text-xs font-medium">admin 권한</span>
            관리자
          </h4>
          <div className="text-sm text-text-secondary space-y-2">
            <p className="font-medium text-text-primary">추가 사용: /release, /version</p>
            <div className="bg-bg-tertiary rounded-lg p-3 text-xs space-y-1.5">
              <div className="flex items-center gap-2">
                <span className="text-success">1.</span>
                <span><code className="bg-surface px-1 rounded">/push</code> → <code className="bg-surface px-1 rounded">/mr</code> → &quot;봇 승인+머지&quot; 선택</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-success">2.</span>
                <span>feature 머지 완료 후, develop에서:</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-success">3.</span>
                <span><code className="bg-surface px-1 rounded">/release</code> — develop→main 릴리즈 MR</span>
              </div>
              <div className="flex items-center gap-2 pl-4 text-text-muted">
                <span>↳ 릴리즈 노트 날짜 전환 + 이전 넘버링 압축</span>
              </div>
              <div className="flex items-center gap-2 pl-4 text-text-muted">
                <span>↳ claude-bot 자동 승인 → 머지 → CI/CD 배포</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-success">4.</span>
                <span><code className="bg-surface px-1 rounded">/version</code> — VERSION-HISTORY.md 생성 (SemVer)</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Alert type="info">
        권한은 Gitea 리포지토리 단위로 관리됩니다. <strong>gc</strong> 조직 →{' '}
        <strong>developers</strong> 팀 소속이면 push 권한이 자동 부여됩니다.
        admin 권한은 프로젝트 관리자가 리포 설정에서 직접 부여합니다.
      </Alert>

      {/* 커스텀 에이전트 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">커스텀 에이전트</h2>
      <p className="text-text-secondary mb-4">
        팀 워크플로우에는 특화된 서브에이전트 3종이 포함되어 있습니다.
        <code className="bg-bg-tertiary px-1 rounded">.claude/agents/</code> 디렉토리에 배치되며,{' '}
        <code className="bg-bg-tertiary px-1 rounded">/init-project</code>로 자동 설정됩니다.
      </p>
      <div className="grid md:grid-cols-3 gap-4">
        <div className="bg-surface border border-border-default rounded-lg p-5">
          <h4 className="font-semibold text-info mb-2">explorer</h4>
          <p className="text-sm text-text-secondary mb-2">코드베이스 탐색/분석 에이전트</p>
          <ul className="text-xs text-text-muted space-y-1">
            <li>읽기 전용 (코드 수정 불가)</li>
            <li>높은 자율성</li>
            <li>모델: Sonnet</li>
          </ul>
        </div>
        <div className="bg-surface border border-border-default rounded-lg p-5">
          <h4 className="font-semibold text-success mb-2">implementer</h4>
          <p className="text-sm text-text-secondary mb-2">모듈 단위 구현 에이전트</p>
          <ul className="text-xs text-text-muted space-y-1">
            <li>계약 기반 구현</li>
            <li>중간 자율성</li>
            <li>모델: Sonnet</li>
          </ul>
        </div>
        <div className="bg-surface border border-border-default rounded-lg p-5">
          <h4 className="font-semibold text-warning mb-2">reviewer</h4>
          <p className="text-sm text-text-secondary mb-2">코드 리뷰/품질 검증 에이전트</p>
          <ul className="text-xs text-text-muted space-y-1">
            <li>체크리스트 기반 검증</li>
            <li>높은 자율성</li>
            <li>모델: Sonnet</li>
          </ul>
        </div>
      </div>

      {/* 시작하기 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">시작하기</h2>
      <p className="text-text-secondary mb-4">
        Claude Code 스킬을 사용하려면 프로젝트에서 <code className="bg-bg-tertiary px-1 rounded">/init-project</code>를 한 번 실행하면 됩니다.
      </p>
      <div className="bg-surface border border-border-default rounded-xl p-5">
        <div className="space-y-3 text-sm">
          <div className="flex items-start gap-3">
            <span className="px-2 py-0.5 bg-accent/10 text-accent rounded text-xs font-semibold mt-0.5">1</span>
            <span className="text-text-secondary">Claude Code 설치: <code className="bg-bg-tertiary px-1 rounded">npm install -g @anthropic-ai/claude-code</code></span>
          </div>
          <div className="flex items-start gap-3">
            <span className="px-2 py-0.5 bg-accent/10 text-accent rounded text-xs font-semibold mt-0.5">2</span>
            <span className="text-text-secondary">프로젝트에서 <code className="bg-bg-tertiary px-1 rounded">claude</code> 실행 → <code className="bg-bg-tertiary px-1 rounded">/init-project</code></span>
          </div>
          <div className="flex items-start gap-3">
            <span className="px-2 py-0.5 bg-accent/10 text-accent rounded text-xs font-semibold mt-0.5">3</span>
            <span className="text-text-secondary">GITEA_TOKEN 설정 안내에 따라 토큰 입력 (→ <strong>초기 환경 설정</strong> 가이드 참고)</span>
          </div>
        </div>
      </div>
      <p className="text-xs text-text-muted mt-2">
        <code className="bg-bg-tertiary px-1 rounded">CLAUDE_BOT_TOKEN</code>은{' '}
        <code className="bg-bg-tertiary px-1 rounded">settings.json</code>에 팀 공통으로 포함되어 있어 별도 설정이 필요 없습니다.
        팀 워크플로우(rules, skills, agents)는 <code className="bg-bg-tertiary px-1 rounded">/push</code> 실행 시 서버 해시 비교를 통해 자동 동기화됩니다.
      </p>
    </div>
  );
}