'use strict'

const api = window.uninstaller

let I18N = {}

function tt(key, params) {
  var parts = String(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 {
      return key
    }
  }
  if (typeof cur !== 'string') return key
  if (!params) return cur
  return cur.replace(/\{\{\s*(\w+)\s*\}\}/g, function (_m, name) {
    return name in params ? String(params[name]) : '{{' + name + '}}'
  })
}

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

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

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

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

function applyStaticI18n() {
  document.title = tt('app.title')
  var h1 = document.querySelector('.appHeader h1')
  if (h1) h1.textContent = tt('app.title')
  var logH2 = logViewer.querySelector('header h2')
  if (logH2) logH2.textContent = tt('logViewer.heading')
  logToggle.textContent = tt('logViewer.collapse')
}

// ── 1단계: 삭제 동의 ──────────────────────────────
function renderConfirm() {
  pageHost.innerHTML =
    '<section class="page">' +
    '  <h2>' + escapeHtml(tt('confirm.heading')) + '</h2>' +
    '  <p class="formMessage" style="margin-top:8px;font-size:15px;">' + escapeHtml(tt('confirm.question')) + '</p>' +
    '  <p class="formMessage" style="margin-top:8px;">' + escapeHtml(tt('confirm.detail')) + '</p>' +
    '  <div id="previewBox" class="progressCard" style="margin-top:14px;"><p class="formMessage">' +
    escapeHtml(tt('confirm.loadingPreview')) + '</p></div>' +
    '  <div class="actionRow" style="margin-top:16px;">' +
    '    <button class="primaryBtn" id="agreeBtn" disabled>' + escapeHtml(tt('confirm.agreeBtn')) + '</button>' +
    '    <button class="secondaryBtn" id="cancelBtn">' + escapeHtml(tt('confirm.cancelBtn')) + '</button>' +
    '  </div>' +
    '</section>'

  var agreeBtn = document.getElementById('agreeBtn')
  var cancelBtn = document.getElementById('cancelBtn')
  var previewBox = document.getElementById('previewBox')

  cancelBtn.addEventListener('click', function () { api.quit() })

  api.preview().then(function (p) {
    var existingDirs = p.existingDirs || []
    var items = []
    if (existingDirs.length) {
      for (var d = 0; d < existingDirs.length; d++) {
        items.push(tt('confirm.itemCustomDir', { path: existingDirs[d] }))
      }
    } else {
      var first = (p.allTargetDirs && p.allTargetDirs[0]) || ''
      items.push(tt('confirm.itemCustomDirMissing', { path: first }))
    }
    if (p.shortcutExists) items.push(tt('confirm.itemShortcut'))
    if (p.launcherProfiles && p.launcherProfiles.length) {
      items.push(tt('confirm.itemProfiles', { names: p.launcherProfiles.join(', ') }))
    }
    var nothing = !existingDirs.length && !p.shortcutExists && (!p.launcherProfiles || !p.launcherProfiles.length)
    var html = '<p class="formMessage"><strong>' + escapeHtml(tt('confirm.previewTitle')) + '</strong></p><ul>'
    for (var i = 0; i < items.length; i++) html += '<li>' + escapeHtml(items[i]) + '</li>'
    html += '</ul>'
    if (nothing) html += '<p class="formMessage">' + escapeHtml(tt('confirm.nothingFound')) + '</p>'
    previewBox.innerHTML = html
    agreeBtn.disabled = false
    agreeBtn.addEventListener('click', function () { renderChoose(p) })
  }).catch(function (err) {
    previewBox.innerHTML = '<p class="formMessage error">' +
      escapeHtml(tt('confirm.previewFail', { message: (err && err.message) || String(err) })) + '</p>'
    agreeBtn.disabled = false
    agreeBtn.addEventListener('click', function () { renderChoose({ existingDirs: [], allTargetDirs: [], shortcutExists: false, launcherProfiles: [] }) })
  })
}

// ── 2단계: 삭제 방식 선택 ─────────────────────────
function renderChoose(preview) {
  pageHost.innerHTML =
    '<section class="page">' +
    '  <h2>' + escapeHtml(tt('choose.heading')) + '</h2>' +
    '  <p class="formMessage" style="margin-top:8px;">' + escapeHtml(tt('choose.intro')) + '</p>' +
    '  <div class="actionRow" style="margin-top:18px;flex-direction:column;gap:12px;align-items:stretch;">' +
    '    <button class="secondaryBtn" id="trashBtn" style="padding:16px;text-align:left;">' +
    '      <strong>' + escapeHtml(tt('choose.trashTitle')) + '</strong><br/>' +
    '      <span class="formMessage">' + escapeHtml(tt('choose.trashDesc')) + '</span></button>' +
    '    <button class="secondaryBtn" id="permBtn" style="padding:16px;text-align:left;">' +
    '      <strong>' + escapeHtml(tt('choose.permTitle')) + '</strong><br/>' +
    '      <span class="formMessage">' + escapeHtml(tt('choose.permDesc')) + '</span></button>' +
    '  </div>' +
    '  <div class="actionRow" style="margin-top:16px;">' +
    '    <button class="secondaryBtn" id="backBtn">' + escapeHtml(tt('choose.backBtn')) + '</button>' +
    '  </div>' +
    '  <div id="runState"></div>' +
    '</section>'

  var trashBtn = document.getElementById('trashBtn')
  var permBtn = document.getElementById('permBtn')
  var backBtn = document.getElementById('backBtn')
  var runState = document.getElementById('runState')

  backBtn.addEventListener('click', function () { renderConfirm() })

  function runMode(mode) {
    var warn = mode === 'permanent' ? tt('choose.confirmPermanent') : tt('choose.confirmTrash')
    if (!window.confirm(warn)) return
    trashBtn.disabled = true
    permBtn.disabled = true
    backBtn.disabled = true
    runState.innerHTML = '<p class="formMessage" style="margin-top:14px;">' + escapeHtml(tt('choose.running')) + '</p>'
    api.run(mode).then(function (result) {
      renderResult(result, mode)
    }).catch(function (err) {
      runState.innerHTML = '<p class="formMessage error" style="margin-top:14px;">' +
        escapeHtml(tt('choose.error', { message: (err && err.message) || String(err) })) + '</p>'
      trashBtn.disabled = false
      permBtn.disabled = false
      backBtn.disabled = false
    })
  }

  trashBtn.addEventListener('click', function () { runMode('trash') })
  permBtn.addEventListener('click', function () { runMode('permanent') })
}

// ── 3단계: 결과 ──────────────────────────────────
function renderResult(result, mode) {
  var total = (result.removed ? result.removed.length : 0) + (result.profilesRemoved ? result.profilesRemoved.length : 0)
  var hasErr = result.errors && result.errors.length
  var cls = hasErr ? 'error' : 'done'
  var badge = hasErr ? tt('result.badgePartial') : tt('result.badgeOk')

  var lines = ''
  if (result.removed && result.removed.length) {
    lines += '<p class="formMessage"><strong>' + escapeHtml(tt('result.removedTitle')) + '</strong></p><ul>'
    for (var i = 0; i < result.removed.length; i++) lines += '<li>' + escapeHtml(result.removed[i]) + '</li>'
    lines += '</ul>'
  }
  if (result.profilesRemoved && result.profilesRemoved.length) {
    lines += '<p class="formMessage"><strong>' + escapeHtml(tt('result.profilesTitle')) + '</strong></p><ul>'
    for (var j = 0; j < result.profilesRemoved.length; j++) lines += '<li>' + escapeHtml(result.profilesRemoved[j]) + '</li>'
    lines += '</ul>'
  }
  if (hasErr) {
    lines += '<p class="formMessage error"><strong>' + escapeHtml(tt('result.errorsTitle')) + '</strong></p><ul>'
    for (var k = 0; k < result.errors.length; k++) lines += '<li>' + escapeHtml(result.errors[k]) + '</li>'
    lines += '</ul>'
  }
  if (total === 0 && !hasErr) {
    lines += '<p class="formMessage">' + escapeHtml(tt('result.nothing')) + '</p>'
  }

  pageHost.innerHTML =
    '<section class="page">' +
    '  <div class="progressCard ' + cls + '" style="margin-top:6px;">' +
    '    <div class="cardTop"><span class="statusBadge ' + (hasErr ? 'fail' : 'ok') + '">' + escapeHtml(badge) + '</span> ' +
    '    <span class="label">' + escapeHtml(tt(mode === 'permanent' ? 'mode.permanent' : 'mode.trash')) + '</span></div>' +
    lines +
    '    <p class="formMessage" style="margin-top:10px;"><small>' + escapeHtml(tt('result.note')) + '</small></p>' +
    '  </div>' +
    '  <div class="actionRow" style="margin-top:16px;">' +
    '    <button class="primaryBtn" id="quitBtn">' + escapeHtml(tt('result.quitBtn')) + '</button>' +
    '  </div>' +
    '</section>'

  document.getElementById('quitBtn').addEventListener('click', function () { api.quit() })
}

;(async function () {
  try { I18N = (await api.loadLocale()) || {} } catch (_) { I18N = {} }
  applyStaticI18n()
  renderConfirm()
})()