<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hyungi Document Server — 초기 설정</title>
  <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.4/build/qrcode.min.js"></script>
  <style>
    :root {
      --bg: #0f1117;
      --surface: #1a1d27;
      --border: #2a2d3a;
      --text: #e4e4e7;
      --text-dim: #8b8d98;
      --accent: #6c8aff;
      --accent-hover: #859dff;
      --error: #f5564e;
      --success: #4ade80;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .container {
      width: 100%;
      max-width: 480px;
      padding: 2rem;
    }
    h1 {
      font-size: 1.5rem;
      margin-bottom: 0.25rem;
    }
    .subtitle {
      color: var(--text-dim);
      font-size: 0.9rem;
      margin-bottom: 2rem;
    }
    .steps {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 2rem;
    }
    .step-dot {
      width: 2.5rem;
      height: 4px;
      border-radius: 2px;
      background: var(--border);
      transition: background 0.3s;
    }
    .step-dot.active { background: var(--accent); }
    .step-dot.done { background: var(--success); }
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1.5rem;
    }
    .card h2 {
      font-size: 1.1rem;
      margin-bottom: 1rem;
    }
    .field {
      margin-bottom: 1rem;
    }
    label {
      display: block;
      font-size: 0.85rem;
      color: var(--text-dim);
      margin-bottom: 0.3rem;
    }
    input[type="text"], input[type="password"] {
      width: 100%;
      padding: 0.65rem 0.75rem;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 0.95rem;
      outline: none;
      transition: border-color 0.2s;
    }
    input:focus { border-color: var(--accent); }
    .btn {
      display: inline-block;
      padding: 0.65rem 1.5rem;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 0.95rem;
      cursor: pointer;
      transition: background 0.2s;
      width: 100%;
      margin-top: 0.5rem;
    }
    .btn:hover { background: var(--accent-hover); }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-skip {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-dim);
      margin-top: 0.5rem;
    }
    .btn-skip:hover { border-color: var(--text-dim); }
    .error-msg {
      color: var(--error);
      font-size: 0.85rem;
      margin-top: 0.5rem;
      display: none;
    }
    .success-msg {
      color: var(--success);
      font-size: 0.85rem;
      margin-top: 0.5rem;
      display: none;
    }
    .qr-wrap {
      display: flex;
      justify-content: center;
      margin: 1rem 0;
      background: #fff;
      border-radius: 8px;
      padding: 1rem;
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
    }
    .secret-text {
      font-family: monospace;
      font-size: 0.8rem;
      color: var(--text-dim);
      word-break: break-all;
      text-align: center;
      margin-bottom: 1rem;
    }
    .nas-result {
      font-size: 0.85rem;
      margin-top: 0.5rem;
    }
    .nas-result span { margin-right: 1rem; }
    .check { color: var(--success); }
    .cross { color: var(--error); }
    .hidden { display: none; }
    .done-icon {
      font-size: 3rem;
      text-align: center;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>hyungi Document Server</h1>
    <p class="subtitle">초기 설정 위자드</p>

    <div class="steps">
      <div class="step-dot active" id="dot-0"></div>
      <div class="step-dot" id="dot-1"></div>
      <div class="step-dot" id="dot-2"></div>
    </div>

    <!-- Step 0: 관리자 계정 -->
    <div class="card" id="step-0">
      <h2>1. 관리자 계정 생성</h2>
      <div class="field">
        <label for="username">아이디</label>
        <input type="text" id="username" placeholder="admin" autocomplete="username">
      </div>
      <div class="field">
        <label for="password">비밀번호 (8자 이상)</label>
        <input type="password" id="password" autocomplete="new-password">
      </div>
      <div class="field">
        <label for="password2">비밀번호 확인</label>
        <input type="password" id="password2" autocomplete="new-password">
      </div>
      <div class="error-msg" id="admin-error"></div>
      <button class="btn" onclick="createAdmin()">계정 생성</button>
    </div>

    <!-- Step 1: TOTP 2FA -->
    <div class="card hidden" id="step-1">
      <h2>2. 2단계 인증 (TOTP)</h2>
      <p style="color: var(--text-dim); font-size: 0.85rem; margin-bottom: 1rem;">
        Google Authenticator 등 인증 앱으로 QR 코드를 스캔하세요.
      </p>
      <div class="qr-wrap" id="qr-container"></div>
      <p class="secret-text" id="totp-secret-text"></p>
      <div class="field">
        <label for="totp-code">인증 코드 6자리</label>
        <input type="text" id="totp-code" maxlength="6" placeholder="000000" inputmode="numeric" pattern="[0-9]*">
      </div>
      <div class="error-msg" id="totp-error"></div>
      <div class="success-msg" id="totp-success"></div>
      <button class="btn" onclick="verifyTOTP()">인증 확인</button>
      <button class="btn btn-skip" onclick="skipTOTP()">건너뛰기</button>
    </div>

    <!-- Step 2: NAS 경로 확인 -->
    <div class="card hidden" id="step-2">
      <h2>3. NAS 저장소 경로 확인</h2>
      <div class="field">
        <label for="nas-path">NAS 마운트 경로</label>
        <input type="text" id="nas-path" value="/documents">
      </div>
      <div class="nas-result hidden" id="nas-result"></div>
      <div class="error-msg" id="nas-error"></div>
      <button class="btn" onclick="verifyNAS()">경로 확인</button>
      <button class="btn btn-skip" onclick="finishSetup()">건너뛰기</button>
    </div>

    <!-- Step 3: 완료 -->
    <div class="card hidden" id="step-3">
      <div class="done-icon">&#10003;</div>
      <h2 style="text-align:center;">설정 완료</h2>
      <p style="color: var(--text-dim); text-align: center; margin: 1rem 0;">
        관리자 계정이 생성되었습니다. API 문서에서 엔드포인트를 확인하세요.
      </p>
      <button class="btn" onclick="location.href='/docs'">API 문서 열기</button>
    </div>
  </div>

<script>
const API = '/api/setup';
let currentStep = 0;
let authToken = '';
let totpSecret = '';

function showStep(n) {
  for (let i = 0; i < 4; i++) {
    const el = document.getElementById('step-' + i);
    if (el) el.classList.toggle('hidden', i !== n);
  }
  for (let i = 0; i < 3; i++) {
    const dot = document.getElementById('dot-' + i);
    dot.classList.remove('active', 'done');
    if (i < n) dot.classList.add('done');
    else if (i === n) dot.classList.add('active');
  }
  currentStep = n;
}

function showError(id, msg) {
  const el = document.getElementById(id);
  el.textContent = msg;
  el.style.display = 'block';
}

function hideError(id) {
  document.getElementById(id).style.display = 'none';
}

async function createAdmin() {
  hideError('admin-error');
  const username = document.getElementById('username').value.trim() || 'admin';
  const password = document.getElementById('password').value;
  const password2 = document.getElementById('password2').value;

  if (password !== password2) {
    showError('admin-error', '비밀번호가 일치하지 않습니다');
    return;
  }
  if (password.length < 8) {
    showError('admin-error', '비밀번호는 8자 이상이어야 합니다');
    return;
  }

  try {
    const res = await fetch(API + '/admin', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password }),
    });
    const data = await res.json();
    if (!res.ok) {
      showError('admin-error', data.detail || '계정 생성 실패');
      return;
    }
    authToken = data.access_token;
    await initTOTP();
    showStep(1);
  } catch (e) {
    showError('admin-error', '서버 연결 실패: ' + e.message);
  }
}

async function initTOTP() {
  try {
    const res = await fetch(API + '/totp/init', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + authToken,
      },
    });
    const data = await res.json();
    totpSecret = data.secret;
    document.getElementById('totp-secret-text').textContent = '수동 입력: ' + data.secret;

    const container = document.getElementById('qr-container');
    container.innerHTML = '';
    QRCode.toCanvas(document.createElement('canvas'), data.otpauth_uri, {
      width: 200,
      margin: 0,
    }, function(err, canvas) {
      if (!err) container.appendChild(canvas);
    });
  } catch (e) {
    console.error('TOTP init failed:', e);
  }
}

async function verifyTOTP() {
  hideError('totp-error');
  const code = document.getElementById('totp-code').value.trim();
  if (code.length !== 6) {
    showError('totp-error', '6자리 코드를 입력하세요');
    return;
  }

  try {
    const res = await fetch(API + '/totp/verify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ secret: totpSecret, code }),
    });
    const data = await res.json();
    if (!res.ok) {
      showError('totp-error', data.detail || 'TOTP 검증 실패');
      return;
    }
    const el = document.getElementById('totp-success');
    el.textContent = '2단계 인증이 활성화되었습니다';
    el.style.display = 'block';
    setTimeout(() => showStep(2), 1000);
  } catch (e) {
    showError('totp-error', '서버 연결 실패');
  }
}

function skipTOTP() {
  showStep(2);
}

async function verifyNAS() {
  hideError('nas-error');
  const path = document.getElementById('nas-path').value.trim();
  if (!path) {
    showError('nas-error', '경로를 입력하세요');
    return;
  }

  try {
    const res = await fetch(API + '/verify-nas', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ path }),
    });
    const data = await res.json();
    if (!res.ok) {
      showError('nas-error', data.detail || '경로 확인 실패');
      return;
    }

    const result = document.getElementById('nas-result');
    result.innerHTML = `
      <span class="${data.exists ? 'check' : 'cross'}">${data.exists ? '&#10003;' : '&#10007;'} 존재</span>
      <span class="${data.readable ? 'check' : 'cross'}">${data.readable ? '&#10003;' : '&#10007;'} 읽기</span>
      <span class="${data.writable ? 'check' : 'cross'}">${data.writable ? '&#10003;' : '&#10007;'} 쓰기</span>
    `;
    result.classList.remove('hidden');

    if (data.exists && data.readable) {
      setTimeout(() => finishSetup(), 1500);
    }
  } catch (e) {
    showError('nas-error', '서버 연결 실패');
  }
}

function finishSetup() {
  showStep(3);
}

// 초기화: 이미 셋업 완료 상태인지 확인
(async () => {
  try {
    const res = await fetch(API + '/status');
    const data = await res.json();
    if (!data.needs_setup) {
      location.href = '/docs';
    }
  } catch (e) {
    // 서버 연결 실패 시 그냥 위자드 표시
  }
})();
</script>
</body>
</html>
