(function () {
  const api = window.__MPTA_API__
  const $grid = document.getElementById('kit-grid')
  const $status = document.getElementById('status-tag')

  const KIT_PAGES = {
    personal_collect: 'kits/personal_collect/list.html'
  }

  const KIT_ICONS = {
    personal_collect: '📁'
  }

  function setStatus(text, cls) {
    $status.textContent = text
    $status.className = 'status-tag' + (cls ? ' ' + cls : '')
  }

  function renderKits(kits) {
    if (!kits || !kits.length) {
      $grid.innerHTML = '<div class="kit-empty">暂无可用工具</div>'
      return
    }
    $grid.innerHTML = kits.map((kit) => {
      const page = KIT_PAGES[kit.id] || '#'
      const icon = KIT_ICONS[kit.id] || '🧰'
      return (
        `<div class="kit-card" data-kit="${kit.id}" data-page="${page}">` +
          `<div class="kit-icon">${icon}</div>` +
          `<div class="kit-name">${escapeHtml(kit.name || kit.id)}</div>` +
          `<div class="kit-desc">${escapeHtml(kit.description || '')}</div>` +
          `<div class="kit-arrow"><span>进入</span><span>→</span></div>` +
        `</div>`
      )
    }).join('')
    Array.from($grid.querySelectorAll('.kit-card')).forEach((card) => {
      card.addEventListener('click', () => {
        const page = card.getAttribute('data-page')
        const kitId = card.getAttribute('data-kit')
        const go = () => { window.location.href = page }
        if (api && api.hub && api.hub.setActiveKit) {
          api.hub.setActiveKit(kitId).then(go).catch(go)
        } else {
          go()
        }
      })
    })
  }

  function escapeHtml(s) {
    if (s === null || s === undefined) return ''
    return String(s)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;')
  }

  async function main() {
    try {
      if (!api || !api.hub) throw new Error('API 未加载')
      const meta = await api.hub.meta()
      const kits = (meta && meta.kits) || []
      setStatus('后端已连通', 'ok')
      renderKits(kits)
    } catch (e) {
      setStatus('后端连通失败：' + (e.message || '未知错误'), 'err')
      $grid.innerHTML = `<div class="kit-empty">❌ 加载失败：${escapeHtml(e.message || '后端无响应')}</div>`
    }
  }

  document.addEventListener('DOMContentLoaded', main)
})()