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

export default function ReleaseManagement() {
  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">
        팀은 2계층 릴리즈 노트 체계를 사용합니다. Claude Code 스킬이 대부분의 작성과 관리를 자동화합니다.
      </p>

      {/* 2계층 릴리즈 노트 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">2계층 릴리즈 노트</h2>
      <div className="grid md:grid-cols-2 gap-4">
        <div className="bg-surface border border-border-default rounded-lg p-5">
          <div className="flex items-center gap-2 mb-3">
            <span className="px-2 py-0.5 bg-info/10 text-info rounded text-xs font-semibold">Tier 1</span>
            <h4 className="font-semibold text-text-primary">RELEASE-NOTES.md</h4>
          </div>
          <ul className="text-sm text-text-secondary space-y-1.5">
            <li>Keep a Changelog 형식</li>
            <li>날짜 + 순번 버저닝 (<code className="bg-bg-tertiary px-1 rounded">[2026-03-01]</code>)</li>
            <li><code className="bg-bg-tertiary px-1 rounded">/mr</code>에서 [Unreleased] 자동 갱신</li>
            <li><code className="bg-bg-tertiary px-1 rounded">/release</code>에서 날짜 전환 + 압축</li>
            <li>개발자 관점의 변경 이력</li>
          </ul>
        </div>
        <div className="bg-surface border border-border-default rounded-lg p-5">
          <div className="flex items-center gap-2 mb-3">
            <span className="px-2 py-0.5 bg-success/10 text-success rounded text-xs font-semibold">Tier 2</span>
            <h4 className="font-semibold text-text-primary">VERSION-HISTORY.md</h4>
          </div>
          <ul className="text-sm text-text-secondary space-y-1.5">
            <li>Semantic Versioning (v1.0.0)</li>
            <li>RELEASE-NOTES.md 기반 생성</li>
            <li><code className="bg-bg-tertiary px-1 rounded">/version</code> 스킬로 수동 생성</li>
            <li>사용자/고객 관점의 버전 히스토리</li>
            <li>릴리즈 마일스톤 기록</li>
          </ul>
        </div>
      </div>

      {/* RELEASE-NOTES.md 형식 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">RELEASE-NOTES.md 형식</h2>
      <p className="text-text-secondary mb-4">
        <a
          href="https://keepachangelog.com/ko/1.0.0/"
          target="_blank"
          rel="noopener noreferrer"
          className="text-accent hover:underline"
        >
          Keep a Changelog
        </a> 형식을 따릅니다.
      </p>
      <CodeBlock
        language="markdown"
        filename="docs/RELEASE-NOTES.md"
        code={`# Release Notes

이 문서는 Keep a Changelog 형식을 따릅니다.

## [Unreleased]
### 추가
- 로그인 리다이렉트 처리

## [2026-02-28]
### 추가
- 관리자 설정 페이지
- Nginx 프록시 인증 연동
### 수정
- 파비콘 404 오류
- 잘못된 URL 접근 시 흰 화면`}
      />

      {/* 자동 관리 흐름 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">자동 관리 흐름</h2>
      <StepGuide
        steps={[
          {
            title: '/mr — [Unreleased] 자동 갱신',
            content: (
              <p>
                <code className="bg-bg-tertiary px-1 rounded">/mr</code> 실행 시 커밋 메시지를 분석하여{' '}
                <code className="bg-bg-tertiary px-1 rounded">[Unreleased]</code> 섹션에 자동 추가합니다.
                사용자에게 첨삭 확인을 거친 후 커밋됩니다.
              </p>
            ),
          },
          {
            title: '/release — 날짜 전환 + 압축',
            content: (
              <>
                <p className="mb-2">
                  <code className="bg-bg-tertiary px-1 rounded">/release</code> 실행 시{' '}
                  <code className="bg-bg-tertiary px-1 rounded">[Unreleased]</code>를{' '}
                  <code className="bg-bg-tertiary px-1 rounded">[2026-03-01]</code> 형태로 전환합니다.
                  이전 날짜의 넘버링된 릴리즈는 자동 압축됩니다.
                </p>
                <p className="text-sm text-text-muted">
                  예: <code className="bg-bg-tertiary px-1 rounded">[2026-02-28.1]</code> +{' '}
                  <code className="bg-bg-tertiary px-1 rounded">[2026-02-28.2]</code> →{' '}
                  <code className="bg-bg-tertiary px-1 rounded">[2026-02-28]</code>
                </p>
              </>
            ),
          },
          {
            title: '/version — VERSION-HISTORY.md 생성',
            content: (
              <p>
                RELEASE-NOTES.md를 기반으로 Semantic Versioning 형태의{' '}
                <code className="bg-bg-tertiary px-1 rounded">VERSION-HISTORY.md</code>를 생성합니다.
                사용자 관점의 변경 이력을 정리하며, 관리자(<strong>admin</strong> 권한)만 실행할 수 있습니다.
              </p>
            ),
          },
        ]}
      />
      <Alert type="info">
        릴리즈 노트는 <code className="bg-bg-tertiary px-1 rounded">/mr</code>,{' '}
        <code className="bg-bg-tertiary px-1 rounded">/release</code> 스킬이 자동 관리합니다.
        직접 편집은 각 스킬의 첨삭 확인 단계에서 가능합니다.
      </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-accent">[2026-03-01]</td>
              <td className="px-4 py-3 text-text-secondary">순번 없음</td>
            </tr>
            <tr>
              <td className="px-4 py-3 text-text-primary">당일 두 번째</td>
              <td className="px-4 py-3 font-mono text-accent">[2026-03-01.2]</td>
              <td className="px-4 py-3 text-text-secondary">.2 부터 순번 부여</td>
            </tr>
            <tr>
              <td className="px-4 py-3 text-text-primary">다음날 릴리즈 시</td>
              <td className="px-4 py-3 font-mono text-accent">[2026-03-02]</td>
              <td className="px-4 py-3 text-text-secondary">이전 넘버링 자동 압축 → [2026-03-01]</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}