'use strict'

const installerApi = window.installer

// I18N 사전: locales/installer/ko-kr.json. 처음 한 번 메인 프로세스에서 받아오고
// 그 뒤로는 동기적으로 lookup. tt() 가 호출될 때 사전이 비어 있어도 키를 그대로 반환해
// 화면이 깨지지는 않는다.
var I18N = {}
function tt(key, params) {
  var parts = key.split('.')
  var cur = I18N
  for (var i = 0; i < parts.length; i++) {
    if (cur && typeof cur === 'object' && parts[i] in cur) cur = cur[parts[i]]
    else { cur = null; break }
  }
  var tpl = (typeof cur === 'string') ? cur : key
  if (!params) return tpl
  return tpl.replace(/\{\{\s*(\w+)\s*\}\}/g, function (_m, name) {
    return (name in params) ? String(params[name]) : ('{{' + name + '}}')
  })
}

const state = {
  packs: [],
  selectedPackKey: null,
  mode: null, // 'single' | 'multi'
  // mode==='multi' 일 때만 의미가 있다.
  //   'host'        → 서버를 직접 연다. 기존 멀티 흐름 (step3 + step4) 그대로.
  //   'participant' → 친구 서버에 접속만 한다. step3 (서버 설치) 를 건너뛰고
  //                   client 측에서도 맵은 받지 않는다 (참가자라 서버에 이미 있음).
  role: null, // 'host' | 'participant' | null
  serverInstall: {
    path: '',
    jdk: '',
    eulaAccepted: false,
    ram: null,
    portStatus: null
  },
  client: {
    installPlatform: true
  },
  finishToggles: {
    desktopShortcut: true,
    startServer: true,
    startLauncher: true
  },
  stepDone: { 1: false, 2: false, 3: false, 4: false }
}

const pageHost = document.getElementById('pageHost')
const stepIndicator = document.getElementById('stepIndicator')
const logViewer = document.getElementById('logViewer')
const logBody = document.getElementById('logBody')
const logToggle = document.getElementById('logToggle')

function applyStaticI18n() {
  document.title = tt('app.browserTitle')
  var headerH1 = document.querySelector('.appHeader h1')
  if (headerH1) headerH1.textContent = tt('app.headerTitle')
  stepIndicator.querySelectorAll('li').forEach(function (item) {
    var step = Number(item.getAttribute('data-step'))
    item.textContent = tt('stepIndicator.step' + step)
  })
  var logHeader = logViewer.querySelector('h2')
  if (logHeader) logHeader.textContent = tt('logViewer.title')
  logToggle.textContent = tt('common.collapse')
}

logToggle.addEventListener('click', function () {
  logViewer.classList.toggle('collapsed')
  if (logViewer.classList.contains('collapsed')) {
    logViewer.style.height = '36px'
    logToggle.textContent = tt('common.expand')
  } else {
    logViewer.style.height = ''
    logToggle.textContent = tt('common.collapse')
  }
})

installerApi.onLog(function (line) {
  logViewer.hidden = false
  logBody.textContent += line + '\n'
  logBody.scrollTop = logBody.scrollHeight
})

function setActiveStep(step) {
  stepIndicator.querySelectorAll('li').forEach(function (item) {
    var index = Number(item.getAttribute('data-step'))
    item.classList.remove('active', 'done')
    if (index < step) item.classList.add('done')
    if (index === step) item.classList.add('active')
  })
}

function clearPage() {
  pageHost.innerHTML = ''
}

// 첫 진입 안내 페이지: 마인크래프트 런처를 끄고 시작하도록 안내.
function renderIntro() {
  setActiveStep(1)
  clearPage()
  var section = document.createElement('section')
  section.className = 'page'
  section.innerHTML =
    '<h2>' + tt('intro.heading') + '</h2>' +
    '<p class="formMessage">' + tt('intro.message') + '</p>' +
    '<div class="actionRow"><button class="primaryBtn" id="introNext">' + tt('common.next') + '</button></div>'
  pageHost.appendChild(section)
  section.querySelector('#introNext').addEventListener('click', renderStep1)
}

function renderStep1() {
  setActiveStep(1)
  clearPage()
  var section = document.createElement('section')
  section.className = 'page'
  section.innerHTML =
    '<h2>' + tt('step1.heading') + '</h2>' +
    '<div id="packList" class="cardChoice"><p class="formMessage">' + tt('step1.loading') + '</p></div>' +
    '<div class="actionRow"><span></span><button class="primaryBtn" id="next" disabled>' + tt('common.next') + '</button></div>'
  pageHost.appendChild(section)
  var listEl = section.querySelector('#packList')
  var nextBtn = section.querySelector('#next')

  function renderList() {
    listEl.innerHTML = ''
    if (state.packs.length === 0) {
      listEl.innerHTML = '<p class="formMessage error">' + tt('step1.empty') + '</p>'
      return
    }
    state.packs.forEach(function (pack) {
      var btn = document.createElement('button')
      btn.type = 'button'
      btn.innerHTML = '<strong>' + pack.name + '</strong><br><small>' +
        tt('step1.subtitle', { mc: pack.pack.mcVersion, platform: pack.pack.platform.type }) + '</small>'
      if (state.selectedPackKey === pack.key) btn.classList.add('selected')
      btn.addEventListener('click', function () {
        // 팩이 바뀌면 최종 리소스팩 처리 상태를 초기화(새 팩의 설치 여부를 다시 묻도록).
        if (state.selectedPackKey !== pack.key) state.finalRpHandled = false
        state.selectedPackKey = pack.key
        nextBtn.disabled = false
        renderList()
      })
      listEl.appendChild(btn)
    })
  }

  nextBtn.addEventListener('click', async function () {
    if (!state.selectedPackKey) return
    await installerApi.setSelectedPack(state.selectedPackKey)
    state.stepDone[1] = true
    renderCloseNotice()
  })

  ;(async function () {
    try {
      var packs = await installerApi.loadPacks()
      state.packs = packs
      renderList()
    } catch (err) {
      listEl.innerHTML = '<p class="formMessage error">' + tt('step1.fetchFailed', { message: err.message }) + '</p>'
    }
  })()
}

// 퀴즈팩 선택 직후 노출하는 "마인크래프트/런처 종료" 강조 안내. 크게 표시.
function renderCloseNotice() {
  setActiveStep(1)
  clearPage()
  var section = document.createElement('section')
  section.className = 'page'
  section.innerHTML =
    '<div style="margin:24px 0;padding:30px 24px;border:2px solid var(--danger);border-radius:14px;background:rgba(248,81,73,0.12);text-align:center;">' +
    '  <div style="font-size:15px;font-weight:800;color:var(--danger);letter-spacing:2px;">' + escapeHtml(tt('closeNotice.badge')) + '</div>' +
    '  <div style="font-size:30px;font-weight:900;line-height:1.45;margin-top:16px;">' + escapeHtml(tt('closeNotice.message')) + '</div>' +
    '  <div style="font-size:14px;color:var(--text-muted);margin-top:18px;">' + escapeHtml(tt('closeNotice.sub')) + '</div>' +
    '</div>' +
    '<div class="actionRow"><button class="secondaryBtn" id="back">' + tt('common.back') + '</button><button class="primaryBtn" id="next">' + tt('common.next') + '</button></div>'
  pageHost.appendChild(section)
  section.querySelector('#back').addEventListener('click', renderStep1)
  section.querySelector('#next').addEventListener('click', renderAgreement)
}

// 약관 동의 페이지: 음악퀴즈 선택 직후, 싱글/멀티 선택(step2) 진입 전에 노출.
// v0.3.4~ : 어떤 약관을 표시할지는 사이트(/manifest/terms/<pack>/index.json) 가
// 결정. 메인 인스톨러용으로 표시 토글된 항목만 받아 탭을 만든다. 목록이 비어 있는 (terms:[])
// 정상 응답일 때만 단계 자체를 건너뛴다. 네트워크 오류/404/서버 오류는 사용자가 약관 동의
// 없이 설치로 넘어가는 것을 막기 위해 오류 화면 + 다시 시도 버튼으로 차단한다.
function renderAgreement() {
  setActiveStep(1)
  clearPage()
  var loadingSection = document.createElement('section')
  loadingSection.className = 'page'
  loadingSection.innerHTML = '<h2>' + tt('agreement.heading') + '</h2>' +
    '<p class="formMessage">' + tt('agreement.loading') + '</p>'
  pageHost.appendChild(loadingSection)

  installerApi.getTermsList().then(function (res) {
    if (!res || !res.ok) {
      showAgreementError((res && res.message) || 'unknown')
      return
    }
    var terms = (res.terms || []).map(function (t) {
      return { id: t.kind, tab: t.label }
    })
    if (terms.length === 0) {
      // 명시적으로 표시 대상이 0개라고 서버가 알려준 정상 응답 → 약관 단계 스킵.
      renderStep2()
      return
    }
    clearPage()
    renderAgreementWithKinds(terms)
  }).catch(function (err) {
    showAgreementError(err && err.message ? err.message : 'unknown')
  })
}

// 약관 목록을 못 받아왔을 때: 사용자에게 오류 + 다시 시도/뒤로 가기 옵션을 보여준다.
// 동의 없이 설치 단계로 넘어가지 않도록 next 버튼을 두지 않는다.
function showAgreementError(message) {
  clearPage()
  var section = document.createElement('section')
  section.className = 'page'
  section.innerHTML =
    '<h2>' + tt('agreement.heading') + '</h2>' +
    '<p class="formMessage error">' + tt('agreement.listLoadFailed', { message: message }) + '</p>' +
    '<div class="actionRow">' +
    '<button class="secondaryBtn" id="back">' + tt('common.back') + '</button>' +
    '<button class="primaryBtn" id="retry">' + tt('agreement.retry') + '</button>' +
    '</div>'
  pageHost.appendChild(section)
  section.querySelector('#back').addEventListener('click', renderStep1)
  section.querySelector('#retry').addEventListener('click', renderAgreement)
}

// 약관을 한 건씩 페이지로 보여준다. 각 약관마다 "해당 약관에 동의합니다" 체크가 있고,
// 끝까지 스크롤해 읽어야 체크할 수 있으며, [다음] 을 누르면 다음 약관 페이지가 화면
// 맨 위에서부터 나온다. 마지막 약관까지 동의하면 다음 단계(step2)로 진행한다.
function renderAgreementWithKinds(KINDS, opts) {
  opts = opts || {}
  var onComplete = opts.onComplete || renderStep2 // 마지막 약관 동의 후
  var onBack = opts.onBack || renderStep1 // 첫 약관에서 뒤로
  var idx = 0
  var accepted = {} // kind -> true (뒤로 갔다 와도 동의 상태 유지)
  var cache = {} // kind -> 렌더된 HTML

  var section = document.createElement('section')
  section.className = 'page'
  pageHost.appendChild(section)

  function renderCurrent() {
    var k = KINDS[idx]
    var isLast = idx === KINDS.length - 1
    section.innerHTML =
      '<h2>' + tt('agreement.heading') + '</h2>' +
      '<p class="formMessage">' + escapeHtml(tt('agreement.stepLabel', { current: idx + 1, total: KINDS.length, label: k.tab })) + '</p>' +
      '<div class="agreementBody" id="agBody" style="border-radius:10px;">' + tt('agreement.loading') + '</div>' +
      '<div class="formMessage" id="agHint">' + tt('agreement.readToBottom') + '</div>' +
      '<label class="toggleRow" style="margin-top:8px;"><input type="checkbox" id="agAccept" disabled /> ' +
      tt('agreement.agreeThis') + '</label>' +
      '<div class="formMessage" id="agMsg"></div>' +
      '<div class="actionRow"><button class="secondaryBtn" id="back">' + tt('common.back') + '</button><button class="primaryBtn" id="next" disabled>' + tt('common.next') + '</button></div>'

    var body = section.querySelector('#agBody')
    var accept = section.querySelector('#agAccept')
    var nextBtn = section.querySelector('#next')
    var msg = section.querySelector('#agMsg')
    var hint = section.querySelector('#agHint')

    // 새 약관 페이지는 화면 맨 위에서부터 보이도록 스크롤을 올린다.
    if (pageHost) pageHost.scrollTop = 0

    // 약관 본문이 정상 로드된 뒤에만 동의를 허용한다. 로드 실패 상태에서는
    // 스크롤을 해도 동의 체크가 켜지지 않는다("무조건 약관을 읽도록").
    var termLoaded = false

    function markReadable() {
      if (!termLoaded || !accept.disabled) return
      accept.disabled = false
      hint.textContent = ''
    }
    function checkScrolled() {
      // 본문을 끝까지(하단 근처) 내렸으면 동의 체크를 허용한다.
      if (body.scrollHeight - body.scrollTop - body.clientHeight <= 6) markReadable()
    }
    body.addEventListener('scroll', checkScrolled)

    accept.addEventListener('change', function () {
      accepted[k.id] = accept.checked
      nextBtn.disabled = !accept.checked
      if (accept.checked) { msg.textContent = ''; msg.classList.remove('error') }
    })

    nextBtn.addEventListener('click', function () {
      if (!accept.checked) {
        msg.textContent = tt('agreement.agreeRequired')
        msg.classList.add('error')
        return
      }
      if (isLast) onComplete()
      else { idx++; renderCurrent() }
    })
    section.querySelector('#back').addEventListener('click', function () {
      if (idx === 0) onBack()
      else { idx--; renderCurrent() }
    })

    function afterLoad() {
      termLoaded = true
      body.scrollTop = 0
      // 이미 동의했던 약관으로 되돌아온 경우: 체크/다음 활성화 유지.
      if (accepted[k.id]) {
        accept.disabled = false
        accept.checked = true
        nextBtn.disabled = false
        hint.textContent = ''
      }
      // 레이아웃 확정 후: 스크롤이 필요 없을 만큼 짧은 약관이면 바로 동의 허용.
      setTimeout(function () {
        if (body.scrollHeight - body.clientHeight <= 6) markReadable()
        else checkScrolled()
      }, 0)
    }

    // 약관 본문 로드 실패: 동의 불가 상태를 유지하고 다시 시도만 허용한다.
    function showLoadError(message) {
      termLoaded = false
      accept.disabled = true
      accept.checked = false
      accepted[k.id] = false
      nextBtn.disabled = true
      hint.textContent = tt('agreement.readToBottom')
      body.innerHTML =
        '<p class="formMessage error">' + tt('agreement.loadFailed', { message: message || '' }) + '</p>' +
        '<div class="actionRow" style="margin-top:10px;"><button class="secondaryBtn" id="agRetry">' + tt('agreement.retry') + '</button></div>'
      var retry = section.querySelector('#agRetry')
      if (retry) retry.addEventListener('click', loadTerm)
    }

    function loadTerm() {
      if (cache[k.id]) {
        body.innerHTML = cache[k.id]
        afterLoad()
        return
      }
      body.textContent = tt('agreement.loading')
      installerApi.getTerm(k.id).then(function (res) {
        if (!res.ok) {
          showLoadError(res.message || '')
          return
        }
        var html = renderTermsMarkdown(res.content || '')
        cache[k.id] = html
        body.innerHTML = html
        afterLoad()
      }).catch(function (err) {
        showLoadError(err && err.message ? err.message : '')
      })
    }

    loadTerm()
  }

  renderCurrent()
}

// 인스톨러용 미니 markdown 렌더러. 사이트 termsEditor 와 동일한 규칙을 처리한다.
function renderTermsMarkdown(src) {
  function escHtml(s) {
    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
  }
  function inline(s) {
    s = escHtml(s)
    s = s.replace(/`([^`]+)`/g, '<code>$1</code>')
    s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
    s = s.replace(/(^|\W)\*([^*\n]+)\*(?=\W|$)/g, '$1<em>$2</em>')
    s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>')
    s = s.replace(/(^|[\s(])(https?:\/\/[^\s)]+)/g, function (m, p, u) {
      return p + '<a href="' + u + '" target="_blank" rel="noopener">' + u + '</a>'
    })
    return s
  }
  var lines = src.replace(/\r\n/g, '\n').split('\n')
  var out = []
  var i = 0
  var stack = null
  function closeList() { if (stack) { out.push('</' + stack + '>'); stack = null } }
  while (i < lines.length) {
    var line = lines[i]
    var fence = /^```(\w*)\s*$/.exec(line)
    if (fence) {
      closeList()
      var code = []; i += 1
      while (i < lines.length && !/^```\s*$/.test(lines[i])) { code.push(lines[i]); i += 1 }
      if (i < lines.length) i += 1
      out.push('<pre><code>' + escHtml(code.join('\n')) + '</code></pre>')
      continue
    }
    var togStart = /^:::toggle\s+(.+)$/.exec(line)
    if (togStart) {
      closeList()
      var summary = togStart[1]; var body2 = []; i += 1
      while (i < lines.length && !/^:::\s*$/.test(lines[i])) { body2.push(lines[i]); i += 1 }
      if (i < lines.length) i += 1
      out.push('<details><summary>' + inline(summary) + '</summary>' + renderTermsMarkdown(body2.join('\n')) + '</details>')
      continue
    }
    var h = /^(#{1,6})\s+(.*)$/.exec(line)
    if (h) {
      closeList()
      out.push('<h' + h[1].length + '>' + inline(h[2]) + '</h' + h[1].length + '>')
      i += 1; continue
    }
    if (/^---+\s*$/.test(line)) { closeList(); out.push('<hr/>'); i += 1; continue }
    if (/^>\s?/.test(line)) {
      closeList()
      var q = []
      while (i < lines.length && /^>\s?/.test(lines[i])) { q.push(lines[i].replace(/^>\s?/, '')); i += 1 }
      out.push('<blockquote>' + renderTermsMarkdown(q.join('\n')) + '</blockquote>')
      continue
    }
    var ol = /^\s*\d+\.\s+(.*)$/.exec(line)
    if (ol) {
      if (stack !== 'ol') { closeList(); out.push('<ol>'); stack = 'ol' }
      out.push('<li>' + inline(ol[1]) + '</li>'); i += 1; continue
    }
    var ul = /^\s*[-*]\s+(.*)$/.exec(line)
    if (ul) {
      if (stack !== 'ul') { closeList(); out.push('<ul>'); stack = 'ul' }
      out.push('<li>' + inline(ul[1]) + '</li>'); i += 1; continue
    }
    if (/^\s*$/.test(line)) { closeList(); i += 1; continue }
    closeList()
    var para = [line]; i += 1
    while (i < lines.length && !/^\s*$/.test(lines[i])
      && !/^(#{1,6})\s+/.test(lines[i])
      && !/^\s*[-*]\s+/.test(lines[i])
      && !/^\s*\d+\.\s+/.test(lines[i])
      && !/^>/.test(lines[i])
      && !/^---+\s*$/.test(lines[i])
      && !/^```/.test(lines[i])
      && !/^:::/.test(lines[i])) {
      para.push(lines[i]); i += 1
    }
    out.push('<p>' + inline(para.join('\n').replace(/\n/g, '<br/>')) + '</p>')
  }
  closeList()
  return out.join('\n')
}

function renderStep2() {
  setActiveStep(2)
  clearPage()
  var section = document.createElement('section')
  section.className = 'page'
  section.innerHTML =
    '<h2>' + tt('step2.heading') + '</h2>' +
    '<div class="cardChoice">' +
    '<button id="single" type="button" data-mode="single"><strong>' + tt('step2.singleTitle') + '</strong><br><small>' + tt('step2.singleHint') + '</small></button>' +
    '<button id="multi" type="button" data-mode="multi"><strong>' + tt('step2.multiTitle') + '</strong><br><small>' + tt('step2.multiHint') + '</small></button>' +
    '</div>' +
    '<div class="actionRow"><button class="secondaryBtn" id="back">' + tt('common.back') + '</button><button class="primaryBtn" id="next" disabled>' + tt('common.next') + '</button></div>'
  pageHost.appendChild(section)
  var nextBtn = section.querySelector('#next')
  var modeButtons = section.querySelectorAll('[data-mode]')

  function applyMode(mode) {
    state.mode = mode
    modeButtons.forEach(function (btn) {
      if (btn.getAttribute('data-mode') === mode) btn.classList.add('selected')
      else btn.classList.remove('selected')
    })
    nextBtn.disabled = false
    // 모드가 바뀌면 이전에 골랐던 역할은 의미가 없어진다. 멀티→싱글 전환 시 잔존하던
    // role 이 다음 단계 분기에 영향 주지 않도록 명시적으로 초기화.
    if (mode !== 'multi') state.role = null
  }

  modeButtons.forEach(function (btn) {
    btn.addEventListener('click', function () {
      applyMode(btn.getAttribute('data-mode'))
    })
  })

  if (state.mode === 'single' || state.mode === 'multi') {
    applyMode(state.mode)
  }

  nextBtn.addEventListener('click', function () {
    if (!state.mode) return
    state.stepDone[2] = true
    // 멀티는 호스트/참가자 선택 탭을 거친다. 싱글은 곧장 클라이언트(step4) 로.
    if (state.mode === 'multi') renderStep2Role()
    else renderStep4()
  })
  section.querySelector('#back').addEventListener('click', renderAgreement)
}

function renderStep2Role() {
  // 스텝 인디케이터는 여전히 2 단계 안쪽이다 — 호스트/참가자 선택은 모드 선택의
  // 하위 결정이기 때문. 별도 탭으로 분리해서 한 화면에 한 결정만 보이도록 한다.
  setActiveStep(2)
  clearPage()
  var section = document.createElement('section')
  section.className = 'page'
  section.innerHTML =
    '<h2>' + tt('step2.roleHeading') + '</h2>' +
    '<div class="cardChoice">' +
    '<button type="button" data-role="host"><strong>' + tt('step2.hostTitle') + '</strong><br><small>' + tt('step2.hostHint') + '</small></button>' +
    '<button type="button" data-role="participant"><strong>' + tt('step2.participantTitle') + '</strong><br><small>' + tt('step2.participantHint') + '</small></button>' +
    '</div>' +
    '<div class="actionRow"><button class="secondaryBtn" id="back">' + tt('common.back') + '</button><button class="primaryBtn" id="next" disabled>' + tt('common.next') + '</button></div>'
  pageHost.appendChild(section)
  var nextBtn = section.querySelector('#next')
  var roleButtons = section.querySelectorAll('[data-role]')

  function applyRole(role) {
    state.role = role
    roleButtons.forEach(function (btn) {
      if (btn.getAttribute('data-role') === role) btn.classList.add('selected')
      else btn.classList.remove('selected')
    })
    nextBtn.disabled = false
  }

  roleButtons.forEach(function (btn) {
    btn.addEventListener('click', function () {
      applyRole(btn.getAttribute('data-role'))
    })
  })

  if (state.role === 'host' || state.role === 'participant') applyRole(state.role)

  nextBtn.addEventListener('click', function () {
    if (!state.role) return
    // 호스트는 서버 설치(step3) 부터, 참가자는 클라이언트(step4) 로 바로.
    if (state.role === 'host') renderStep3()
    else renderStep4()
  })
  section.querySelector('#back').addEventListener('click', renderStep2)
}

function renderStep3() {
  setActiveStep(3)
  clearPage()
  var section = document.createElement('section')
  section.className = 'page'
  section.innerHTML =
    '<h2>' + tt('step3.heading') + '</h2>' +
    '<div class="subStep" id="subHost"></div>'
  pageHost.appendChild(section)
  var subHost = section.querySelector('#subHost')

  // step3 는 멀티+호스트 만 진입하므로 sub31 의 back 은 역할 선택 탭으로.
  function show31() { subHost.innerHTML = ''; renderSubStep31(subHost, renderStep2Role, show32) }
  function show32() { subHost.innerHTML = ''; renderSubStep32(subHost, show31, show33) }
  function show33() { subHost.innerHTML = ''; renderSubStep33(subHost, show32, show34) }
  function show34() { subHost.innerHTML = ''; renderSubStep34(subHost, show33, show35) }
  function show35() {
    subHost.innerHTML = ''
    renderSubStep35(subHost, show34, function () {
      state.stepDone[3] = true
      renderStep4()
    })
  }
  show31()
}

function renderSubStep31(host, back, done) {
  host.innerHTML =
    '<h3>' + tt('step3.sub31.heading') + '</h3>' +
    '<p class="formMessage">' + tt('step3.sub31.description') + '</p>' +
    '<div class="fieldset"><label><input id="installPath" type="text" placeholder="C:\\MusicQuizServer" value="' + (state.serverInstall.path || '') + '" /></label>' +
    '<button class="secondaryBtn" id="pickFolder">' + tt('step3.sub31.pickFolder') + '</button></div>' +
    '<div class="formMessage" id="msg"></div>' +
    '<div class="actionRow"><button class="secondaryBtn" id="back">' + tt('common.back') + '</button><button class="primaryBtn" id="next">' + tt('common.next') + '</button></div>'
  var input = host.querySelector('#installPath')
  var msg = host.querySelector('#msg')
  host.querySelector('#pickFolder').addEventListener('click', async function () {
    var picked = await installerApi.pickFolder()
    if (picked) input.value = picked
  })
  host.querySelector('#back').addEventListener('click', back)
  host.querySelector('#next').addEventListener('click', async function () {
    var result = await installerApi.validateInstallPath(input.value.trim())
    if (!result.ok) {
      msg.textContent = result.message || tt('step3.sub31.invalidPath')
      msg.classList.add('error')
      return
    }
    msg.textContent = tt('step3.sub31.confirmed', { message: result.message })
    msg.classList.remove('error')
    msg.classList.add('success')
    state.serverInstall.path = input.value.trim()
    done()
  })
}

function renderSubStep32(host, back, done) {
  // 선택한 음악퀴즈(pack)의 권장 JDK. 설치기는 이 버전을 우선 찾고/설치한다.
  var selPack = (state.packs && state.packs.find)
    ? state.packs.find(function (p) { return p.key === state.selectedPackKey })
    : null
  var recommendedJdk = (selPack && selPack.pack && selPack.pack.recommendedJdk) ? selPack.pack.recommendedJdk : 25

  host.innerHTML =
    '<h3>' + tt('step3.sub32.heading') + '</h3>' +
    '<p class="formMessage">' + tt('step3.sub32.description') + '</p>' +
    '<p class="formMessage"><strong>' + tt('step3.sub32.recommended', { major: recommendedJdk }) + '</strong></p>' +
    '<div class="fieldset"><label><input id="jdkPath" type="text" placeholder="C:\\Program Files\\Java\\jdk-' + recommendedJdk + '" value="' + (state.serverInstall.jdk || '') + '" /></label>' +
    '<button class="secondaryBtn" id="pickJdk">' + tt('step3.sub32.pickFolder') + '</button>' +
    '<button class="secondaryBtn" id="auto">' + tt('step3.sub32.auto') + '</button>' +
    '<button class="secondaryBtn" id="install">' + tt('step3.sub32.install') + '</button></div>' +
    '<div class="formMessage" id="msg"></div>' +
    '<div class="actionRow"><button class="secondaryBtn" id="back">' + tt('common.back') + '</button><button class="primaryBtn" id="next">' + tt('common.next') + '</button></div>'
  var input = host.querySelector('#jdkPath')
  var msg = host.querySelector('#msg')
  var installBtn = host.querySelector('#install')
  var autoBtn = host.querySelector('#auto')
  var pickBtn = host.querySelector('#pickJdk')
  var nextBtn = host.querySelector('#next')
  var installing = false

  function setInstallingUi(on) {
    installing = on
    if (on) {
      installBtn.textContent = tt('step3.sub32.installCancel')
      installBtn.classList.remove('secondaryBtn')
      installBtn.classList.add('dangerBtn')
      autoBtn.disabled = true
      pickBtn.disabled = true
      nextBtn.disabled = true
      input.disabled = true
    } else {
      installBtn.textContent = tt('step3.sub32.install')
      installBtn.classList.remove('dangerBtn')
      installBtn.classList.add('secondaryBtn')
      autoBtn.disabled = false
      pickBtn.disabled = false
      nextBtn.disabled = false
      input.disabled = false
    }
  }

  autoBtn.addEventListener('click', async function () {
    if (installing) return
    var detect = await installerApi.detectJdk(recommendedJdk)
    if (detect.found && detect.match) {
      input.value = detect.path
      msg.textContent = tt('step3.sub32.foundRecommended', { path: detect.path, major: recommendedJdk })
      msg.classList.remove('error')
      msg.classList.add('success')
    } else if (detect.found) {
      // 권장 버전이 아닌 다른 JDK 를 찾음 → 경고와 함께 채워 넣는다.
      input.value = detect.path
      msg.textContent = tt('step3.sub32.foundMismatch', { path: detect.path, major: detect.major, required: recommendedJdk })
      msg.classList.remove('success')
      msg.classList.add('error')
    } else {
      msg.textContent = tt('step3.sub32.notFound', { major: recommendedJdk })
      msg.classList.remove('success')
      msg.classList.add('error')
    }
  })
  pickBtn.addEventListener('click', async function () {
    if (installing) return
    var picked = await installerApi.pickFolder()
    if (picked) input.value = picked
  })
  installBtn.addEventListener('click', async function () {
    if (installing) {
      // 진행 중이면 취소.
      msg.textContent = tt('step3.sub32.cancelRequested')
      msg.classList.remove('success', 'error')
      await installerApi.cancelJdkInstall()
      return
    }
    setInstallingUi(true)
    msg.classList.remove('success', 'error')
    msg.textContent = tt('step3.sub32.downloading')
    try {
      var result = await installerApi.installJdk(recommendedJdk)
      if (result.ok && result.path) {
        input.value = result.path
        state.serverInstall.jdk = result.path
        msg.textContent = tt('step3.sub32.installComplete', { path: result.path })
        msg.classList.add('success')
      } else {
        var raw = result.message || tt('common.unknownError')
        msg.textContent = raw === '취소됨'
          ? tt('step3.sub32.installCanceled')
          : tt('step3.sub32.installFailed', { message: raw })
        msg.classList.add('error')
      }
    } catch (err) {
      msg.textContent = tt('step3.sub32.installError', { message: (err && err.message) ? err.message : String(err) })
      msg.classList.add('error')
    } finally {
      setInstallingUi(false)
    }
  })
  host.querySelector('#back').addEventListener('click', function () {
    if (installing) return
    back()
  })
  nextBtn.addEventListener('click', async function () {
    if (installing) return
    var val = input.value.trim()
    if (!val) {
      msg.textContent = tt('step3.sub32.pathRequired')
      msg.classList.add('error')
      return
    }
    // 직접 입력/선택한 JDK 를 확인한다. 자바를 못 읽으면 진행을 막고, 권장과 다른
    // 버전이면 "정상 실행이 안 될 수 있다"는 경고를 띄운 뒤 사용자가 동의하면 진행한다.
    nextBtn.disabled = true
    msg.classList.remove('success', 'error')
    msg.textContent = tt('step3.sub32.verifying')
    var required = recommendedJdk
    try {
      var v = await installerApi.verifyJdk(val, recommendedJdk)
      required = (v && v.required) || recommendedJdk
      if (!v || !v.major) {
        msg.classList.add('error')
        msg.textContent = tt('step3.sub32.versionUnknown')
        nextBtn.disabled = false
        return
      }
      if (!v.match) {
        // 권장 버전과 다름 → 경고 후 동의 시에만 계속.
        var proceed = window.confirm(tt('step3.sub32.mismatchConfirm', { major: v.major, required: required }))
        if (!proceed) {
          msg.classList.add('error')
          msg.textContent = tt('step3.sub32.foundMismatch', { path: val, major: v.major, required: required })
          nextBtn.disabled = false
          return
        }
      }
    } catch (err) {
      msg.classList.add('error')
      msg.textContent = tt('step3.sub32.versionUnknown')
      nextBtn.disabled = false
      return
    }
    nextBtn.disabled = false
    state.serverInstall.jdk = val
    done()
  })
  ;(async function () {
    var detect = await installerApi.detectJdk(recommendedJdk)
    if (detect.found && !input.value) {
      input.value = detect.path
      if (detect.match) {
        msg.textContent = tt('step3.sub32.foundRecommended', { path: detect.path, major: recommendedJdk })
        msg.classList.add('success')
      } else {
        msg.textContent = tt('step3.sub32.foundMismatch', { path: detect.path, major: detect.major, required: recommendedJdk })
        msg.classList.add('error')
      }
    } else if (!detect.found) {
      msg.textContent = tt('step3.sub32.notFoundHint', { major: recommendedJdk })
    }
  })()
}

function renderSubStep33(host, back, done) {
  host.innerHTML =
    '<h3>' + tt('step3.sub33.heading') + '</h3>' +
    '<p class="formMessage">' + tt('step3.sub33.description') + '</p>' +
    '<div class="formMessage" id="downloadStatus">' + tt('step3.sub33.waiting') + '</div>' +
    '<div id="ramSection" hidden style="margin-top:14px;">' +
    '<h4>' + tt('step3.sub33.ramHeading') + '</h4>' +
    '<div class="formMessage" id="ramMsg">' + tt('step3.sub33.ramChecking') + '</div>' +
    '</div>' +
    '<div class="actionRow"><button class="secondaryBtn" id="back">' + tt('common.back') + '</button><button class="primaryBtn" id="next" disabled>' + tt('common.next') + '</button></div>'

  var statusEl = host.querySelector('#downloadStatus')
  var ramSection = host.querySelector('#ramSection')
  var ramMsg = host.querySelector('#ramMsg')
  var nextBtn = host.querySelector('#next')

  host.querySelector('#back').addEventListener('click', back)
  nextBtn.addEventListener('click', function () {
    if (!state.serverInstall.eulaAccepted) return
    done()
  })

  // 이미 통과했던 상태 복원: 사용자가 다음→이전으로 돌아왔을 때 재다운로드 강요하지 않는다.
  if (state.serverInstall.eulaAccepted && state.serverInstall.ram) {
    statusEl.textContent = tt('step3.sub33.doneSummary')
    statusEl.classList.add('success')
    showRamResult(state.serverInstall.ram)
    nextBtn.disabled = false
    return
  }

  // 페이지 진입 즉시 자동 다운로드
  ;(async function () {
    state.serverInstall.eulaAccepted = false
    nextBtn.disabled = true
    statusEl.classList.remove('success', 'error')
    statusEl.textContent = tt('step3.sub33.downloading')
    try {
      await installerApi.startServerInstall({
        packKey: state.selectedPackKey,
        installPath: state.serverInstall.path,
        jdkPath: state.serverInstall.jdk
      })
      statusEl.textContent = tt('step3.sub33.eulaPrompt')
      var accepted = await openEulaPopup(state.serverInstall.path)
      if (!accepted) {
        statusEl.textContent = tt('step3.sub33.eulaRejected')
        statusEl.classList.add('error')
        return
      }
      try {
        await installerApi.acceptEula(state.serverInstall.path)
      } catch (err) {
        statusEl.textContent = tt('step3.sub33.eulaSaveFailed', { message: err.message })
        statusEl.classList.add('error')
        return
      }
      state.serverInstall.eulaAccepted = true
      statusEl.textContent = tt('step3.sub33.doneSummary')
      statusEl.classList.add('success')
      var ram = await installerApi.checkRam(state.selectedPackKey)
      state.serverInstall.ram = ram
      showRamResult(ram)
      if (ram.decision === 'tooLow') return
      nextBtn.disabled = false
    } catch (err) {
      statusEl.textContent = tt('step3.sub33.downloadFailed', { message: (err && err.message) ? err.message : String(err) })
      statusEl.classList.add('error')
    }
  })()

  function showRamResult(result) {
    ramSection.hidden = false
    ramMsg.classList.remove('error', 'warn', 'success')
    if (result.decision === 'tooLow') {
      var pack = state.packs.find(function (p) { return p.key === state.selectedPackKey })
      var minRam = pack ? pack.pack.serverMinRam : 0
      ramMsg.innerHTML = tt('step3.sub33.ramTooLow', { system: result.systemRamMb, min: minRam })
      ramMsg.classList.add('error')
    } else if (result.decision === 'minOk') {
      ramMsg.innerHTML = tt('step3.sub33.ramMinOk', { system: result.systemRamMb, applied: result.appliedRamMb })
      ramMsg.classList.add('warn')
    } else {
      ramMsg.textContent = tt('step3.sub33.ramMaxOk', { system: result.systemRamMb, applied: result.appliedRamMb })
      ramMsg.classList.add('success')
    }
  }
}

// EULA 동의 팝업. resolve(true) = 동의, resolve(false) = 비동의/창 닫힘.
// eula.txt 의 내용과 무관하게 항상 minecraft.net 의 공식 EULA 페이지를 받아서
// 표시한다 — 사용자가 실제 서버 약관을 보고 동의하도록.
async function openEulaPopup(_installPath) {
  var bodyHtml = ''
  var fetched = await installerApi.fetchMinecraftEula()
  if (fetched.html) {
    bodyHtml = '<p class="formMessage">' + tt('step3.eulaModal.fromMojang', { url: fetched.url }) + '</p>' +
      '<iframe class="eulaFrame" sandbox srcdoc="' + escapeAttr(fetched.html) + '"></iframe>'
  } else {
    bodyHtml = '<p class="formMessage error">' + tt('step3.eulaModal.loadFailed') + '</p>'
  }
  return new Promise(function (resolve) {
    var overlay = document.createElement('div')
    overlay.className = 'modalOverlay'
    overlay.innerHTML =
      '<div class="modalCard" role="dialog" aria-modal="true">' +
      '<header><h3>' + tt('step3.eulaModal.title') + '</h3><button type="button" class="modalClose" aria-label="' + tt('common.close') + '">×</button></header>' +
      '<div class="modalBody">' + bodyHtml + '</div>' +
      '<footer class="actionRow">' +
      '<button type="button" class="secondaryBtn" data-action="reject">' + tt('common.reject') + '</button>' +
      '<button type="button" class="primaryBtn" data-action="accept">' + tt('common.agree') + '</button>' +
      '</footer>' +
      '</div>'
    document.body.appendChild(overlay)

    var settled = false
    function close(result) {
      if (settled) return
      settled = true
      overlay.remove()
      resolve(result)
    }
    overlay.querySelector('[data-action="accept"]').addEventListener('click', function () { close(true) })
    overlay.querySelector('[data-action="reject"]').addEventListener('click', function () { close(false) })
    overlay.querySelector('.modalClose').addEventListener('click', function () { close(false) })
    overlay.addEventListener('click', function (event) {
      if (event.target === overlay) close(false)
    })
  })
}

function escapeAttr(text) {
  return String(text).replace(/&/g, '&amp;').replace(/"/g, '&quot;')
}

function renderSubStep34(host, back, done) {
  host.innerHTML =
    '<h3>' + tt('step3.sub34.heading') + '</h3>' +
    '<p class="formMessage">' + tt('step3.sub34.description') + '</p>' +
    '<button class="secondaryBtn" id="open">' + tt('step3.sub34.open') + '</button>' +
    '<div class="formMessage" id="editorMsg"></div>' +
    '<div class="actionRow"><button class="secondaryBtn" id="back">' + tt('common.back') + '</button><button class="primaryBtn" id="next">' + tt('common.next') + '</button></div>'
  host.querySelector('#open').addEventListener('click', async function () {
    var msg = host.querySelector('#editorMsg')
    try {
      var result = await installerApi.startServerConfigEditor(state.serverInstall.path)
      msg.innerHTML = tt('step3.sub34.openedAt', { url: result.url })
    } catch (err) {
      msg.textContent = tt('step3.sub34.openFailed', { message: err.message })
      msg.classList.add('error')
    }
  })
  host.querySelector('#back').addEventListener('click', back)
  host.querySelector('#next').addEventListener('click', done)
}

function renderSubStep35(host, back, done) {
  host.innerHTML =
    '<h3>' + tt('step3.sub35.heading') + '</h3>' +
    '<p class="formMessage">' + tt('step3.sub35.description') + '</p>' +
    '<div class="fieldset"><label>' + tt('step3.sub35.portLabel') + ' <input id="port" type="text" value="25565" /></label></div>' +
    '<button class="secondaryBtn" id="run">' + tt('step3.sub35.recheck') + '</button>' +
    '<div class="formMessage" id="resultMsg"></div>' +
    '<div class="actionRow"><button class="secondaryBtn" id="back">' + tt('common.back') + '</button><button class="primaryBtn" id="next" disabled>' + tt('common.next') + '</button></div>'
  var resultMsg = host.querySelector('#resultMsg')
  var nextBtn = host.querySelector('#next')
  var runBtn = host.querySelector('#run')
  host.querySelector('#back').addEventListener('click', back)

  // 25565 는 마인크래프트 자바판 기본 포트라 클라이언트에서 생략 가능 →
  // 사용자에게도 ip 만 보여주는 게 깔끔하다.
  function formatServerAddress(ip, port) {
    var safeIp = ip || tt('step3.sub35.ipUnknown')
    if (Number(port) === 25565) return safeIp
    return safeIp + ':' + port
  }

  async function runCheck() {
    runBtn.disabled = true
    resultMsg.classList.remove('success', 'warn', 'error')
    resultMsg.textContent = tt('step3.sub35.checking')
    var port = Number(host.querySelector('#port').value) || 25565
    try {
      var result = await installerApi.checkPortForward(port)
      state.serverInstall.portStatus = result
      var address = formatServerAddress(result.externalIp, result.port)
      if (result.status === 'open') {
        // 열려 있으면 외부 접속 주소를 크게 표시.
        resultMsg.innerHTML =
          '<div style="margin-top:12px;padding:18px;border:1px solid var(--success);border-radius:10px;background:rgba(63,185,80,0.12);text-align:center;">' +
          '<div style="font-size:14px;color:var(--text-muted);">' + escapeHtml(tt('step3.sub35.openTitle')) + '</div>' +
          '<div style="font-size:30px;font-weight:800;margin-top:8px;user-select:all;word-break:break-all;">' + escapeHtml(address) + '</div>' +
          '</div>'
      } else {
        // 안 열려 있으면 "직접 포트포워딩 해주세요" 를 크게 표시.
        resultMsg.innerHTML =
          '<div style="margin-top:12px;padding:18px;border:1px solid var(--danger);border-radius:10px;background:rgba(248,81,73,0.10);text-align:center;">' +
          '<div style="font-size:26px;font-weight:800;">' + escapeHtml(tt('step3.sub35.notOpenBig')) + '</div>' +
          '<div style="font-size:13px;color:var(--text-muted);margin-top:10px;">' + escapeHtml(tt('step3.sub35.notOpenHint', { address: address, port: result.port })) + '</div>' +
          '</div>'
      }
      nextBtn.disabled = false
    } catch (err) {
      resultMsg.textContent = tt('step3.sub35.checkFailed', { message: (err && err.message) ? err.message : String(err) })
      resultMsg.classList.add('error')
    } finally {
      runBtn.disabled = false
    }
  }

  runBtn.addEventListener('click', runCheck)
  nextBtn.addEventListener('click', done)
  // 페이지 진입 즉시 자동 점검
  runCheck()
}

function renderStep4() {
  setActiveStep(4)
  clearPage()
  var pack = state.packs.find(function (p) { return p.key === state.selectedPackKey })
  var section = document.createElement('section')
  section.className = 'page'
  section.innerHTML =
    '<h2>' + tt('step4.heading') + '</h2>' +
    '<div class="subStep" id="subHost"></div>'
  pageHost.appendChild(section)
  var subHost = section.querySelector('#subHost')

  // 플랫폼 선택 UI 는 더 이상 보여주지 않는다. 음악퀴즈에 지정된 플랫폼이
  // 바닐라가 아니면 자동으로 설치하고, 바닐라면 건너뛴다 — 사용자가 고를 일이 없다.
  var platformType = pack ? pack.pack.platform.type : 'vanilla'
  state.client.installPlatform = platformType !== 'vanilla'

  // 멀티+호스트 만 step3 (서버 설치) 를 거쳤으므로 거기로 돌아간다.
  // 멀티+참가자 는 직전 화면이 역할 선택 탭이므로 거기로, 싱글은 모드 탭으로.
  function backToPrevStep() {
    if (state.mode === 'multi' && state.role === 'host') renderStep3()
    else if (state.mode === 'multi') renderStep2Role()
    else renderStep2()
  }

  function show42() { subHost.innerHTML = ''; renderSubStep42(subHost, backToPrevStep, goStep5) }
  function goStep5() {
    state.stepDone[4] = true
    renderStep5()
  }
  show42()
}

function renderSubStep42(host, back, done) {
  host.innerHTML =
    '<h3>' + tt('step4.sub42.heading') + '</h3>' +
    '<p class="formMessage">' + tt('step4.sub42.description') + '</p>' +
    '<div class="formMessage" id="msg">' + tt('step4.sub42.installing') + '</div>' +
    '<div class="actionRow"><button class="secondaryBtn" id="back">' + tt('common.back') + '</button><button class="primaryBtn" id="next" disabled>' + tt('common.next') + '</button></div>'
  var msg = host.querySelector('#msg')
  var nextBtn = host.querySelector('#next')
  host.querySelector('#back').addEventListener('click', back)
  nextBtn.addEventListener('click', done)

  // 이번에 실제로 보내야 할 payload. 이전 진입에서 같은 payload 로 이미 끝났으면
  // 다시 돌리지 않지만, packKey / installPlatform / skipMap 중 하나라도 다르면
  // (예: 참가자 → 싱글 로 뒤로가서 변경) 재설치한다.
  var payload = {
    packKey: state.selectedPackKey,
    installPlatform: !!state.client.installPlatform,
    // 참가자는 친구 서버에 접속만 하므로 클라이언트에 맵을 풀지 않는다.
    skipMap: state.mode === 'multi' && state.role === 'participant'
  }
  var last = state.client.lastInstall
  if (last
      && last.packKey === payload.packKey
      && last.installPlatform === payload.installPlatform
      && last.skipMap === payload.skipMap) {
    msg.textContent = tt('step4.sub42.done')
    msg.classList.add('success')
    nextBtn.disabled = false
    return
  }

  // 페이지 진입 즉시 자동 설치
  ;(async function () {
    try {
      await installerApi.installClient(payload)
      msg.textContent = tt('step4.sub42.done')
      msg.classList.add('success')
      state.client.lastInstall = payload
      nextBtn.disabled = false
    } catch (err) {
      // 실패한 호출은 "마지막 성공" 기록에 남기지 않는다. 다음 진입 시 재시도.
      state.client.lastInstall = null
      msg.textContent = tt('step4.sub42.failed', { message: (err && err.message) ? err.message : String(err) })
      msg.classList.add('error')
    }
  })()
}

// 최종 리소스팩 설치 여부 질문 (예/아니요).
function renderResourcepackPrompt() {
  setActiveStep(5)
  clearPage()
  var section = document.createElement('section')
  section.className = 'page'
  section.innerHTML =
    '<h2>' + tt('resourcepack.promptHeading') + '</h2>' +
    '<p class="formMessage">' + escapeHtml(tt('resourcepack.promptBody')) + '</p>' +
    '<div class="actionRow">' +
    '  <button class="secondaryBtn" id="rpNo">' + tt('resourcepack.no') + '</button>' +
    '  <button class="primaryBtn" id="rpYes">' + tt('resourcepack.yes') + '</button>' +
    '</div>'
  pageHost.appendChild(section)
  section.querySelector('#rpNo').addEventListener('click', function () {
    state.finalRpHandled = true
    renderStep5()
  })
  section.querySelector('#rpYes').addEventListener('click', renderResourcepackTerms)
}

// "예" → 최종 리소스팩 다운로드 약관(showInFinalResourcepack) 동의 → 다운로드.
function renderResourcepackTerms() {
  setActiveStep(5)
  clearPage()
  var loading = document.createElement('section')
  loading.className = 'page'
  loading.innerHTML = '<h2>' + tt('agreement.heading') + '</h2><p class="formMessage">' + tt('agreement.loading') + '</p>'
  pageHost.appendChild(loading)
  installerApi.getFinalTermsList().then(function (res) {
    if (!res || !res.ok) {
      showResourcepackTermsError((res && res.message) || 'unknown')
      return
    }
    var terms = (res.terms || []).map(function (t) { return { id: t.kind, tab: t.label } })
    if (terms.length === 0) {
      // 표시할 약관이 없으면 약관 단계를 건너뛰고 바로 다운로드.
      downloadFinalResourcepack()
      return
    }
    clearPage()
    renderAgreementWithKinds(terms, { onComplete: downloadFinalResourcepack, onBack: renderResourcepackPrompt })
  }).catch(function (err) {
    showResourcepackTermsError(err && err.message ? err.message : 'unknown')
  })
}

function showResourcepackTermsError(message) {
  clearPage()
  var section = document.createElement('section')
  section.className = 'page'
  section.innerHTML =
    '<h2>' + tt('agreement.heading') + '</h2>' +
    '<p class="formMessage error">' + escapeHtml(tt('agreement.listLoadFailed', { message: message })) + '</p>' +
    '<div class="actionRow">' +
    '  <button class="secondaryBtn" id="back">' + tt('common.back') + '</button>' +
    '  <button class="primaryBtn" id="retry">' + tt('agreement.retry') + '</button>' +
    '</div>'
  pageHost.appendChild(section)
  section.querySelector('#back').addEventListener('click', renderResourcepackPrompt)
  section.querySelector('#retry').addEventListener('click', renderResourcepackTerms)
}

// 약관 동의 후 최종 리소스팩 실제 다운로드 → 완료되면 완료 화면으로.
function downloadFinalResourcepack() {
  setActiveStep(5)
  clearPage()
  var section = document.createElement('section')
  section.className = 'page'
  section.innerHTML =
    '<h2>' + tt('resourcepack.downloadHeading') + '</h2>' +
    '<div class="formMessage" id="rpMsg">' + tt('resourcepack.downloading') + '</div>' +
    '<div id="rpBarWrap" style="margin-top:10px;height:16px;background:rgba(255,255,255,0.08);border:1px solid var(--border,#30363d);border-radius:8px;overflow:hidden;">' +
    '  <div id="rpBar" style="height:100%;width:0%;background:var(--accent,#6cf);transition:width 0.15s;"></div>' +
    '</div>' +
    '<div class="formMessage" id="rpPercent" style="margin-top:6px;">0%</div>' +
    '<div class="actionRow" id="rpActions" hidden></div>'
  pageHost.appendChild(section)
  var msg = section.querySelector('#rpMsg')
  var actions = section.querySelector('#rpActions')
  var bar = section.querySelector('#rpBar')
  var barWrap = section.querySelector('#rpBarWrap')
  var percentEl = section.querySelector('#rpPercent')

  // 다운로드 진행률(퍼센트) 구독. 완료/실패 시 해제.
  var unsubscribe = null
  if (installerApi.onFinalResourcepackProgress) {
    unsubscribe = installerApi.onFinalResourcepackProgress(function (info) {
      if (info && info.percent >= 0) {
        bar.style.width = info.percent + '%'
        percentEl.textContent = info.percent + '%'
      } else if (info) {
        // 전체 크기를 모르면 받은 용량(MB)만 표시.
        percentEl.textContent = (info.loaded / 1048576).toFixed(1) + ' MB'
      }
    })
  }
  function stopProgress() { if (unsubscribe) { unsubscribe(); unsubscribe = null } }

  function proceed() { stopProgress(); state.finalRpHandled = true; renderStep5() }

  installerApi.installFinalResourcepack().then(function (res) {
    stopProgress()
    if (res && res.ok) {
      bar.style.width = '100%'
      percentEl.textContent = '100%'
      msg.textContent = tt('resourcepack.downloadDone')
      msg.classList.add('success')
      actions.innerHTML = '<button class="primaryBtn" id="rpNext">' + tt('common.next') + '</button>'
      actions.querySelector('#rpNext').addEventListener('click', proceed)
    } else {
      barWrap.hidden = true
      percentEl.hidden = true
      msg.textContent = tt('resourcepack.downloadFailed', { message: (res && res.message) || 'unknown' })
      msg.classList.add('error')
      actions.innerHTML =
        '<button class="secondaryBtn" id="rpRetry">' + tt('agreement.retry') + '</button>' +
        '<button class="primaryBtn" id="rpSkip">' + tt('common.next') + '</button>'
      actions.querySelector('#rpRetry').addEventListener('click', downloadFinalResourcepack)
      actions.querySelector('#rpSkip').addEventListener('click', proceed)
    }
    actions.hidden = false
  }).catch(function (err) {
    stopProgress()
    barWrap.hidden = true
    percentEl.hidden = true
    msg.textContent = tt('resourcepack.downloadFailed', { message: (err && err.message) ? err.message : String(err) })
    msg.classList.add('error')
    actions.innerHTML =
      '<button class="secondaryBtn" id="rpRetry">' + tt('agreement.retry') + '</button>' +
      '<button class="primaryBtn" id="rpSkip">' + tt('common.next') + '</button>'
    actions.querySelector('#rpRetry').addEventListener('click', downloadFinalResourcepack)
    actions.querySelector('#rpSkip').addEventListener('click', proceed)
    actions.hidden = false
  })
}

function renderStep5() {
  setActiveStep(5)
  clearPage()
  // 최종 리소스팩(finalResourcepackPath)이 "." 이 아니고 아직 처리하지 않았으면,
  // 완료 화면 전에 "리소스팩을 설치하시겠습니까?" 를 먼저 묻는다.
  var selPack = state.packs.find(function (p) { return p.key === state.selectedPackKey })
  var finalRp = (selPack && selPack.pack && selPack.pack.finalResourcepackPath) ? selPack.pack.finalResourcepackPath : '.'
  if (finalRp !== '.' && !state.finalRpHandled) {
    renderResourcepackPrompt()
    return
  }
  var section = document.createElement('section')
  section.className = 'page'
  // 서버 마무리 액션 (바로가기/서버 실행) 은 step3 를 거친 호스트 만 노출한다.
  // 싱글, 멀티+참가자 는 서버를 직접 띄우지 않으므로 런처만 보여준다.
  var showServerActions = state.mode === 'multi' && state.role === 'host'
  section.innerHTML =
    '<h2>' + tt('step5.heading') + '</h2>' +
    '<p>' + tt('step5.summary') + '</p>' +
    (showServerActions ? '<div class="subStep">' +
      '<h3>' + tt('step5.serverHeading') + '</h3>' +
      '<button class="secondaryBtn" id="openFolder">' + tt('step5.openServerFolder') + '</button>' +
      '<label class="toggleRow"><input type="checkbox" id="shortcut" checked /> ' + tt('step5.shortcut') + '</label>' +
      '<label class="toggleRow"><input type="checkbox" id="startServer" checked /> ' + tt('step5.startServer') + '</label>' +
      '</div>' : '') +
    '<div class="subStep">' +
    '<h3>' + tt('step5.launcherHeading') + '</h3>' +
    '<label class="toggleRow"><input type="checkbox" id="startLauncher" checked /> ' + tt('step5.startLauncher') + '</label>' +
    '</div>' +
    '<div class="actionRow"><button class="secondaryBtn" id="back">' + tt('common.back') + '</button><button class="primaryBtn" id="finish">' + tt('step5.finish') + '</button></div>'
  pageHost.appendChild(section)
  section.querySelector('#back').addEventListener('click', renderStep4)
  if (showServerActions) {
    section.querySelector('#openFolder').addEventListener('click', function () {
      installerApi.openServerFolder()
    })
  }
  section.querySelector('#finish').addEventListener('click', async function () {
    var finishBtn = section.querySelector('#finish')
    finishBtn.disabled = true
    finishBtn.textContent = tt('step5.finishing')
    try {
      if (showServerActions) {
        if (section.querySelector('#shortcut').checked) await installerApi.createDesktopShortcut()
        if (section.querySelector('#startServer').checked) await installerApi.startServer()
      }
      if (section.querySelector('#startLauncher').checked) await installerApi.startMinecraftLauncher()
    } catch (err) {
      // 마무리 액션 실패는 무시하고 종료 진행
    }
    finishBtn.textContent = tt('step5.finished')
    if (installerApi.quitApp) installerApi.quitApp()
  })
}

function escapeHtml(s) {
  return String(s).replace(/[&<>"']/g, function (c) {
    return c === '&' ? '&amp;' : c === '<' ? '&lt;' : c === '>' ? '&gt;' : c === '"' ? '&quot;' : '&#39;'
  })
}

// 시작 진입점: 사전을 먼저 받아서 정적 텍스트 갱신 후 첫 페이지 렌더.
;(async function () {
  try {
    I18N = (await installerApi.loadLocale()) || {}
  } catch (_) { I18N = {} }
  applyStaticI18n()
  renderIntro()
})()