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

export default function NexusUsage() {
  return (
    <div className="max-w-4xl mx-auto py-12 px-6">
      <h1 className="text-3xl font-bold text-text-primary mb-2">Nexus 사용법</h1>
      <p className="text-text-secondary mb-8">
        Maven, Gradle, npm 의존성을 팀 Nexus 프록시를 통해 관리하는 방법을 안내합니다.
      </p>

      <Alert type="info" title="Nexus 주소">
        <strong>nexus.gc-si.dev</strong> — 웹 UI에서 저장소 목록과 패키지를 확인할 수 있습니다.
      </Alert>

      {/* 팀 정책 vs 개인 설정 구분 */}
      <div className="bg-accent-soft border border-accent/20 rounded-xl p-4 mt-6 mb-8">
        <h3 className="font-semibold text-accent text-sm mb-2">팀 정책 vs 개인 로컬 설정</h3>
        <ul className="text-sm text-text-secondary space-y-1">
          <li><span className="text-accent font-medium">팀 정책</span> — 모든 팀 프로젝트는 Nexus를 프록시로 사용합니다. 레지스트리 URL은 프로젝트에 포함됩니다.</li>
          <li><span className="text-text-muted font-medium">개인 설정</span> — 인증 정보(username/password)는 각자 홈 디렉토리 또는 환경변수에 설정합니다. 프로젝트에 포함하지 마세요.</li>
        </ul>
      </div>

      {/* Maven */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">Maven 프록시 설정</h2>
      <p className="text-text-secondary mb-2">
        팀 프로젝트 템플릿에 Nexus 미러 URL이 포함되어 있습니다.
        인증 정보만 각자 로컬에 설정하면 됩니다.
      </p>
      <p className="text-xs text-text-muted mb-4">
        아래 파일은 개인 홈 디렉토리에 생성합니다. Git에 커밋하지 마세요.
      </p>
      <CodeBlock
        language="xml"
        filename="~/.m2/settings.xml (개인 로컬 파일)"
        code={`<settings>
  <mirrors>
    <mirror>
      <id>nexus</id>
      <mirrorOf>*</mirrorOf>
      <url>https://nexus.gc-si.dev/repository/maven-public/</url>
    </mirror>
  </mirrors>
  <servers>
    <server>
      <id>nexus</id>
      <username>\${env.NEXUS_USERNAME}</username>
      <password>\${env.NEXUS_PASSWORD}</password>
    </server>
  </servers>
</settings>`}
      />

      {/* Gradle */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">Gradle 프록시 설정</h2>
      <p className="text-text-secondary mb-2">
        <code className="bg-bg-tertiary px-1 rounded">build.gradle</code>의 repositories 블록은 프로젝트에 포함(팀 설정)되며,
        인증 정보는 환경변수 또는 개인 로컬 파일에서 읽습니다.
      </p>
      <CodeBlock
        language="groovy"
        filename="build.gradle (프로젝트에 포함)"
        code={`repositories {
    maven {
        url 'https://nexus.gc-si.dev/repository/maven-public/'
        credentials {
            username = findProperty('nexusUsername') ?: System.getenv('NEXUS_USERNAME')
            password = findProperty('nexusPassword') ?: System.getenv('NEXUS_PASSWORD')
        }
    }
}`}
      />
      <Alert type="info">
        인증 정보는 <code className="bg-bg-tertiary px-1 rounded">~/.gradle/gradle.properties</code>(개인 로컬 파일)에{' '}
        <code className="bg-bg-tertiary px-1 rounded">nexusUsername</code>/<code className="bg-bg-tertiary px-1 rounded">nexusPassword</code>로
        설정하거나, 환경변수로 설정합니다.
      </Alert>

      {/* npm */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">npm 프록시 설정</h2>
      <p className="text-text-secondary mb-4">
        프로젝트 <code className="bg-bg-tertiary px-1 rounded">.npmrc</code>에는 레지스트리 URL만 포함합니다.
        인증 토큰은 환경변수 또는 글로벌 <code className="bg-bg-tertiary px-1 rounded">~/.npmrc</code>에 설정합니다.
      </p>
      <CodeBlock
        language="ini"
        filename=".npmrc (프로젝트에 포함 — URL만)"
        code={`registry=https://nexus.gc-si.dev/repository/npm-public/
always-auth=true`}
      />
      <CodeBlock
        language="ini"
        filename="~/.npmrc (개인 로컬 파일 — 인증)"
        code={`//nexus.gc-si.dev/repository/npm-public/:_auth=<Base64 인코딩된 인증 토큰>`}
      />
      <Alert type="warning" title="보안 주의">
        <code className="bg-bg-tertiary px-1 rounded">_auth</code> 값을 프로젝트{' '}
        <code className="bg-bg-tertiary px-1 rounded">.npmrc</code>에 직접 하드코딩하지 마세요.
        인증 정보는 반드시 개인 <code className="bg-bg-tertiary px-1 rounded">~/.npmrc</code> 또는 환경변수에 설정합니다.
        인증 토큰은 팀 관리자에게 문의하세요.
      </Alert>

      {/* 패키지 배포 */}
      <h2 className="text-xl font-bold text-text-primary mt-10 mb-4">프라이빗 패키지 배포</h2>
      <p className="text-text-secondary mb-4">
        사내 공유 라이브러리를 Nexus에 배포할 수 있습니다.
      </p>

      <h3 className="text-lg font-semibold text-text-primary mt-6 mb-3">Maven 배포</h3>
      <CodeBlock
        language="xml"
        filename="pom.xml (프로젝트에 포함)"
        code={`<distributionManagement>
  <repository>
    <id>nexus</id>
    <url>https://nexus.gc-si.dev/repository/maven-releases/</url>
  </repository>
  <snapshotRepository>
    <id>nexus</id>
    <url>https://nexus.gc-si.dev/repository/maven-snapshots/</url>
  </snapshotRepository>
</distributionManagement>`}
      />
      <CodeBlock language="bash" code="mvn deploy" />

      <h3 className="text-lg font-semibold text-text-primary mt-6 mb-3">npm 배포</h3>
      <CodeBlock
        language="json"
        filename="package.json (프로젝트에 포함)"
        code={`{
  "publishConfig": {
    "registry": "https://nexus.gc-si.dev/repository/npm-hosted/"
  }
}`}
      />
      <CodeBlock language="bash" code="npm publish" />
    </div>
  );
}