// 静的ストアのフロント。公開エンドポイント(/catalog, /checkout, /store/order)を叩く。
(function () {
  var API = (window.STORE_CONFIG && window.STORE_CONFIG.apiBase || "").replace(/\/$/, "");
  var yen = function (n) { return "¥" + Number(n).toLocaleString("ja-JP"); };
  function esc(s){ var d=document.createElement("div"); d.textContent=s==null?"":String(s); return d.innerHTML; }

  // ---- プラン一覧(index) ----
  function renderPlans(el) {
    fetch(API + "/catalog").then(function (r) { return r.json(); }).then(function (data) {
      var plans = data.plans || [], options = data.options || [];
      function renderFor(interval) {
        return options.find(function (o) { return o.optionKey === "render" && o.interval === interval; });
      }
      if (!plans.length) { el.innerHTML = '<div class="err">プランを取得できませんでした。</div>'; return; }
      el.innerHTML = plans.map(function (p) {
        var per = p.interval === "year" ? "年" : "月";
        var render = renderFor(p.interval);
        var opt = render
          ? '<label class="opt"><input type="checkbox" data-render="' + esc(p.sku) + '"> レンダリングサーバーを追加（+' + yen(render.amount) + " / " + per + '）</label>'
          : "";
        return '<div class="card"><h3>' + esc(p.label) + '</h3>' +
          '<div class="price">' + yen(p.amount) + ' <small>/ ' + per + '（税別）</small></div>' +
          opt +
          '<button class="btn" data-plan="' + esc(p.sku) + '">このプランで申し込む</button></div>';
      }).join("");

      el.querySelectorAll("button[data-plan]").forEach(function (btn) {
        btn.addEventListener("click", function () {
          var sku = btn.getAttribute("data-plan");
          var chk = el.querySelector('input[data-render="' + sku + '"]');
          var withRender = !!(chk && chk.checked);
          btn.disabled = true; btn.textContent = "処理中...";
          fetch(API + "/checkout", {
            method: "POST", headers: { "content-type": "application/json" },
            body: JSON.stringify({ plan: sku, render: withRender })
          }).then(function (r) { return r.json(); }).then(function (res) {
            if (res.url) { window.location = res.url; }
            else { btn.disabled = false; btn.textContent = "このプランで申し込む"; alert("エラー: " + (res.error || "checkout")); }
          }).catch(function () { btn.disabled = false; btn.textContent = "このプランで申し込む"; alert("通信エラー"); });
        });
      });
    }).catch(function () { el.innerHTML = '<div class="err">カタログ取得に失敗しました。</div>'; });
  }

  // ---- 完了画面(success) ----
  function renderSuccess(el) {
    var sid = new URLSearchParams(location.search).get("session_id");
    if (!sid) { el.innerHTML = '<div class="err">session_id がありません。</div>'; return; }
    var tries = 0;
    function poll() {
      tries++;
      fetch(API + "/store/order?session_id=" + encodeURIComponent(sid))
        .then(function (r) { return r.json(); }).then(function (o) {
          if (o.licenseCodes && o.licenseCodes.length) {
            var codes = o.licenseCodes.map(function (c) { return '<p><code class="lic">' + esc(c) + "</code></p>"; }).join("");
            var pdfs = (o.licenses || []).map(function (l) { return '<li><a href="' + esc(l.url) + '">' + esc(l.licenseCode) + " のPDF</a></li>"; }).join("");
            el.innerHTML = '<div class="ok">ライセンスを発行しました。</div>' + codes +
              (pdfs ? "<h2>ライセンス証書（PDF）</h2><ul>" + pdfs + "</ul>" : '<div class="note">PDFは生成中です。</div>');
          } else if (tries < 20) {
            el.innerHTML = '<div class="note">ライセンスを発行中です…（自動で更新）</div>';
            setTimeout(poll, 3000);
          } else {
            el.innerHTML = '<div class="note">発行に時間がかかっています。このページを再読み込みしてください。</div>';
          }
        }).catch(function () { if (tries < 20) setTimeout(poll, 3000); });
    }
    poll();
  }

  window.Store = { renderPlans: renderPlans, renderSuccess: renderSuccess };
})();