(function () {
  'use strict';
  var data = window.NOMADRO_DATA || { destinations: [], tips: [] };
  var root = document.getElementById('app');
  var favKey = 'nomadro_redmini_favs';

  function render(favs) {
    favs = favs || [];
    var cards = (data.destinations || []).map(function (d) {
      var marked = favs.indexOf(d.slug) >= 0 ? ' · 已收藏' : '';
      return (
        '<article class="card" data-slug="' + d.slug + '">' +
          '<div class="name">' + d.name + '</div>' +
          '<div class="meta">' + (d.country || '') + ' · ¥' + (d.cost || '—') + '/月 · ★' + (d.rating || '—') + '</div>' +
          '<div class="meta">' + (d.tagline || '') + '</div>' +
          '<div class="fav">' + (marked || '点按收藏（仅本地）') + '</div>' +
        '</article>'
      );
    }).join('');
    var tips = (data.tips || []).map(function (t) { return '<li>' + t + '</li>'; }).join('');
    root.innerHTML =
      '<p class="brand">' + (data.brand || 'nomadro') + '</p>' +
      '<p class="tag">' + (data.tagline || '') + '</p>' +
      '<p class="note">' + (data.note || '') + '</p>' +
      cards +
      '<section class="tips"><h2>离线提示</h2><ul>' + tips + '</ul></section>';

    Array.prototype.forEach.call(root.querySelectorAll('.card'), function (el) {
      el.addEventListener('click', function () {
        var slug = el.getAttribute('data-slug');
        var next = favs.slice();
        var i = next.indexOf(slug);
        if (i >= 0) next.splice(i, 1); else next.push(slug);
        window.NomadroXhs.setLocalData(favKey, next).then(function () { render(next); });
      });
    });
  }

  window.NomadroXhs.getLocalData(favKey).then(function (favs) {
    render(Array.isArray(favs) ? favs : []);
  });
})();