<!--
  @since 2026-09 added by membership-status-stripe-sync

  site/index.html — 休会復帰フォーム（LIFF画面、Cloudflare Pages配信版）

  【経緯】 当初 gas/21_liff.html として GAS Web App の doGet から配信していたが、
  Google Apps Script の匿名アクセス（ANYONE_ANONYMOUS）Web App は、Googleが
  「このアプリケーションは Google Apps Script のユーザーによって作成されたものです」
  という確認画面を doGet 応答の外側に被せる仕様があり、LINE アプリ内蔵ブラウザ
  （LIFF WebView）でこの確認画面から先に進めない実機不具合が発生した。
  そのため画面（HTML/CSS/JS）はCloudflare Pagesの静的ホスティングへ切り出し、
  GAS側は doPost（match-customer/confirm-reactivation の API）のみを提供する
  構成に変更した。gas/21_liff.html は本ファイルと同一内容を保つ（GAS側の
  doGet は本番導線としては使わず、疎通確認用に残置する）。

  【仕様正源】 gas/21_liff.html の画面フロー・コピー・画面遷移ロジックをそのまま
  踏襲する（唯一の差分は postAction() の送信先を絶対URL化した点のみ）。

  画面フロー:
    1. 氏名・メールアドレス入力 → POST {action:"match-customer"}
    2. 一致時: 提示プラン一覧＋復帰希望日を入力 → POST {action:"confirm-reactivation"}
       不一致時: 「登録情報が確認できません」を表示し再入力を促す
    3. 「LINEにてお問い合わせください」を選ぶと送信をブロックし問い合わせ導線を表示
    4. 確定成功で完了メッセージ、失敗でエラーメッセージ

  要件「一度読み込んだ情報はスプレッドシートからは再読み込みしない」に対応するため、
  match-customer で取得したプラン一覧・トークンは JS のメモリ上（state オブジェクト）
  にのみ保持し、confirm-reactivation 時に再照合はしない。

  API送信について: 送信先はGAS Web AppのURL（GAS_WEBAPP_URL、絶対URL）。
  GAS Web App の doPost は OPTIONS（CORSプリフライト）を受け付けないため、
  `Content-Type: application/json` を指定するとブラウザがプリフライトを発行し
  失敗する。これを避けるため CORS の「シンプルリクエスト」に該当する
  `text/plain;charset=utf-8` を指定して送信する（GAS側の `e.postData.contents`
  には送信したJSON文字列がそのまま渡るため、Content-Typeヘッダの値自体は
  パース結果に影響しない）。GAS Web Appのレスポンスには
  `Access-Control-Allow-Origin: *` が既定で付与されるため、クロスオリジンの
  fetch()でもレスポンス本文を読み取れる（実機で確認済み）。

  LIFF SDK 連携について: liff.init() をロード時に実行するが、本アプリは
  氏名+メールで本人照合するため LINEプロフィール（liff.getProfile()）は
  取得しない。そのため liff.init() の目的は「LINEアプリ内で開かれているか
  （liff.isInClient()）」の検知のみであり、外部ブラウザで開かれた場合や
  初期化失敗時もフォームは通常通り使える（失敗をブロックしない）。

  ブランドカラー（gas/21_liff.htmlと同一の4色のみで構成）:
    - 黒 #000000 / 白 #FFFFFF: 背景・基本文字色
    - 青 #3687C6: プライマリボタン・フォーカスリング
    - 黄 #F8CC46: 警告・選択中プラン・問い合わせ導線のアクセント

  ロゴ画像について: Cloudflare Pages（本ページ）は通常の静的ホスティングであり
  GASのようなローカル画像配信の制約が無いため、Next.js版と同じ実画像
  （smartdash-logo.png、同ディレクトリに配置）を使う。gas/21_liff.html は
  引き続きテキストブランドマーク代替のままとする（GAS doGet は本番導線として
  使わないため、画像を持ち込む必要が無い）。
-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>SmartDash 休会からのご復帰手続き</title>
<style>
  .brand-logo {
    display: block;
    width: 100%;
    max-width: 12rem;
    height: auto;
    margin: 0 auto;
  }
  * {
    box-sizing: border-box;
  }
  html, body {
    margin: 0;
    padding: 0;
    background: #000000;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  }
  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
  }
  .wrapper {
    width: 100%;
    max-width: 28rem;
  }
  .card {
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #000000;
  }
  .card-inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
  }
  @media (min-width: 640px) {
    .card-inner {
      padding: 2rem;
    }
  }
  .title {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
  }
  .stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
  }
  .input {
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: #000000;
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    outline: none;
    font-size: 1rem;
    font-family: inherit;
  }
  .input:focus {
    border-color: #3687C6;
    box-shadow: 0 0 0 3px rgba(54, 135, 198, 0.3);
  }
  .input-date {
    color-scheme: dark;
  }
  .btn {
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: opacity 0.2s ease, background-color 0.2s ease;
  }
  .btn-primary {
    background: #3687C6;
    color: #ffffff;
  }
  .btn-primary:hover:not(:disabled) {
    opacity: 0.9;
  }
  .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  .btn-accent {
    background: rgba(248, 204, 70, 0.1);
    color: #F8CC46;
    border: 1px solid rgba(248, 204, 70, 0.4);
    text-align: center;
  }
  .btn-accent:hover {
    background: rgba(248, 204, 70, 0.2);
  }
  .warning {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(248, 204, 70, 0.4);
    background: rgba(248, 204, 70, 0.1);
    color: #ffffff;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    margin: 0;
  }
  .fieldset {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: none;
    padding: 0;
    margin: 0;
  }
  .legend {
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
    padding: 0;
  }
  .radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.625rem 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  }
  .radio-label.selected {
    border-color: #F8CC46;
    background: rgba(248, 204, 70, 0.1);
    color: #ffffff;
  }
  .radio-input {
    accent-color: #F8CC46;
  }
  .hint {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
  }
  .hint-center {
    text-align: center;
  }
  .done-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
  }
  .done-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: rgba(248, 204, 70, 0.15);
    font-size: 1.5rem;
  }
</style>
</head>
<body>
<main class="wrapper">
  <div class="card">
    <div class="card-inner">
      <img class="brand-logo" src="smartdash-logo.png" alt="SmartDash">
      <h1 class="title">休会からのご復帰手続き</h1>
      <div id="screen"></div>
    </div>
  </div>
</main>

<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script>
(function () {
  'use strict';

  var LIFF_ID = '2010505339-hRiCaFBv';

  /**
   * GAS Web App の doPost エンドポイント（絶対URL）。
   * Cloudflare Pages（本ページ）と GAS（script.google.com）はオリジンが異なるため、
   * window.location.href ではなく絶対URLを明示する（gas/21_liff.htmlとの唯一の差分）。
   */
  var GAS_WEBAPP_URL = 'https://script.google.com/macros/s/AKfycbwC_2c-6a7fD2iGM0tCCp1wmlgiI9GVINRf6HpB8WEHZdWxb53vMZm1DlJySQqcB7bf/exec';

  var state = {
    step: 'form',
    name: '',
    email: '',
    message: '',
    plans: [],
    token: '',
    selectedPlanId: '',
    desiredDate: '',
    submitting: false,
    isInLineApp: false
  };

  var screenEl = document.getElementById('screen');

  // ============================================================
  // LIFF 初期化（失敗してもフォームはブロックしない）
  // ============================================================
  if (typeof liff !== 'undefined') {
    liff.init({ liffId: LIFF_ID })
      .then(function () {
        state.isInLineApp = liff.isInClient();
        // 初期化完了が遅延し、既に contact/done 画面へ遷移済みの場合に
        // 「トーク画面に戻る」「閉じる」ボタンを反映させるため再描画する。
        render();
      })
      .catch(function (e) {
        console.error('[liff] init失敗', e);
      });
  } else {
    console.error('[liff] LIFF SDKの読み込みに失敗しました');
  }

  // ============================================================
  // API呼び出し
  // ============================================================

  /**
   * @description GAS Web App（doPost）へJSONをPOSTする。
   * Content-Type は CORS プリフライトを避けるため text/plain を使う
   * （ファイル冒頭コメント参照）。
   */
  function postAction(payload) {
    return fetch(GAS_WEBAPP_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'text/plain;charset=utf-8' },
      body: JSON.stringify(payload)
    }).then(function (res) {
      return res.json();
    });
  }

  /** @description サーバーエラーコードを平易な日本語メッセージへ変換する（詳細は出さない）。 */
  function describeConfirmError(code) {
    switch (code) {
      case 'invalid_token':
        return '手続きの有効期限が切れている可能性があります。お手数ですが、はじめからやり直してください。';
      case 'already_used':
        return 'この手続きはすでに完了しています。内容にお心当たりがない場合は公式LINEへお問い合わせください。';
      case 'invalid_plan':
        return '選択されたプランを確認できませんでした。もう一度お試しください。';
      case 'status_update_failed':
        return '手続きの反映に失敗しました。お手数ですが、しばらくしてから再度お試しいただくか、公式LINEへご連絡ください。';
      case 'stripe_customer_not_found':
      case 'stripe_subscription_failed':
        return '決済処理に失敗しました。お手数ですが、しばらくしてから再度お試しいただくか、公式LINEへご連絡ください。';
      default:
        return '手続き中にエラーが発生しました。お手数ですが、はじめからやり直してください。';
    }
  }

  /** @description innerHTML へ差し込むテキストをエスケープする（XSS対策）。 */
  function escapeHtml(str) {
    return String(str == null ? '' : str).replace(/[&<>"']/g, function (c) {
      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
    });
  }

  /**
   * @description mismatch/contact/error 画面共通の「戻る」処理。
   * selectedPlanId/desiredDate のみ初期化し、常に最初の氏名・メール入力画面（form）へ
   * 戻る（name/emailは保持する）。
   */
  function resetToForm() {
    state.selectedPlanId = '';
    state.desiredDate = '';
    state.step = 'form';
    render();
  }

  // ============================================================
  // 画面描画
  // ============================================================

  function render() {
    switch (state.step) {
      case 'mismatch':
        renderMismatch();
        break;
      case 'plans':
        renderPlans();
        break;
      case 'contact':
        renderContact();
        break;
      case 'done':
        renderDone();
        break;
      case 'error':
        renderError();
        break;
      case 'form':
      default:
        renderForm();
        break;
    }
  }

  function renderForm() {
    screenEl.innerHTML =
      '<form id="form-match" class="stack">' +
        '<label class="field">氏名' +
          '<input class="input" type="text" name="name" required maxlength="100" value="' + escapeHtml(state.name) + '">' +
        '</label>' +
        '<label class="field">メールアドレス' +
          '<input class="input" type="email" name="email" required maxlength="254" value="' + escapeHtml(state.email) + '">' +
        '</label>' +
        '<button class="btn btn-primary" type="submit"' + (state.submitting ? ' disabled' : '') + '>' +
          (state.submitting ? '確認中...' : '確認する') +
        '</button>' +
      '</form>';

    var form = document.getElementById('form-match');
    form.elements.name.addEventListener('input', function () {
      state.name = form.elements.name.value;
    });
    form.elements.email.addEventListener('input', function () {
      state.email = form.elements.email.value;
    });

    form.addEventListener('submit', function (e) {
      e.preventDefault();
      if (state.submitting) {
        return;
      }
      var name = form.elements.name.value.trim();
      var email = form.elements.email.value.trim();
      if (!name || !email) {
        return;
      }
      state.name = name;
      state.email = email;
      state.submitting = true;
      render();

      postAction({ action: 'match-customer', name: name, email: email })
        .then(function (data) {
          if (!data || data.error) {
            state.step = 'error';
            state.message = '入力内容をご確認のうえ、もう一度お試しください。';
            return;
          }
          if (data.matched === false) {
            state.step = 'mismatch';
            state.message = data.message;
            return;
          }
          if (data.matched === true) {
            state.step = 'plans';
            state.plans = data.plans || [];
            state.token = data.token;
            return;
          }
          state.step = 'error';
          state.message = '手続き中にエラーが発生しました。お手数ですが、はじめからやり直してください。';
        })
        .catch(function () {
          state.step = 'error';
          state.message = '通信エラーが発生しました。電波の良い場所でもう一度お試しください。';
        })
        .finally(function () {
          state.submitting = false;
          render();
        });
    });
  }

  function renderMismatch() {
    screenEl.innerHTML =
      '<div class="stack">' +
        '<p class="warning"><span aria-hidden="true">⚠</span><span>' + escapeHtml(state.message) + '</span></p>' +
        '<button class="btn btn-secondary" type="button" id="btn-mismatch-reset">入力し直す</button>' +
      '</div>';
    document.getElementById('btn-mismatch-reset').addEventListener('click', resetToForm);
  }

  function renderPlans() {
    var plansHtml = state.plans.map(function (plan) {
      var priceText = plan.priceJpy != null
        ? '（月額 ' + Number(plan.priceJpy).toLocaleString('ja-JP') + '円）'
        : '';
      var planId = escapeHtml(plan.id);
      var checkedAttr = state.selectedPlanId === plan.id ? ' checked' : '';
      var selectedClass = state.selectedPlanId === plan.id ? ' selected' : '';
      return (
        '<label class="radio-label' + selectedClass + '" data-plan-id="' + planId + '">' +
          '<input class="radio-input" type="radio" name="plan" value="' + planId + '" required' + checkedAttr + '>' +
          '<span>' + escapeHtml(plan.name) + escapeHtml(priceText) + '</span>' +
        '</label>'
      );
    }).join('');

    var submitDisabled = state.submitting || !state.selectedPlanId || !state.desiredDate;

    screenEl.innerHTML =
      '<form id="form-plans" class="stack">' +
        '<fieldset class="fieldset">' +
          '<legend class="legend">プランを選択してください</legend>' +
          plansHtml +
        '</fieldset>' +
        '<label class="field">復帰希望日' +
          '<input class="input input-date" type="date" name="desiredDate" required value="' + escapeHtml(state.desiredDate) + '">' +
        '</label>' +
        '<button class="btn btn-primary" type="submit"' + (submitDisabled ? ' disabled' : '') + '>' +
          (state.submitting ? '送信中...' : 'この内容で復帰する') +
        '</button>' +
      '</form>';

    var form = document.getElementById('form-plans');
    var submitBtn = form.querySelector('button[type="submit"]');

    function updateSubmitState() {
      submitBtn.disabled = state.submitting || !state.selectedPlanId || !state.desiredDate;
    }

    function updateSelectedClass() {
      form.querySelectorAll('.radio-label').forEach(function (label) {
        var isSelected = label.getAttribute('data-plan-id') === state.selectedPlanId;
        label.classList.toggle('selected', isSelected);
      });
    }

    form.querySelectorAll('input[name="plan"]').forEach(function (radio) {
      radio.addEventListener('change', function () {
        state.selectedPlanId = radio.value;
        updateSelectedClass();

        var selectedPlan = state.plans.find(function (p) {
          return p.id === radio.value;
        });
        if (selectedPlan && selectedPlan.isContactOption) {
          state.step = 'contact';
          render();
          return;
        }
        updateSubmitState();
      });
    });

    form.elements.desiredDate.addEventListener('input', function () {
      state.desiredDate = form.elements.desiredDate.value;
      updateSubmitState();
    });

    form.addEventListener('submit', function (e) {
      e.preventDefault();
      if (state.submitting || !state.selectedPlanId || !state.desiredDate) {
        return;
      }
      state.submitting = true;
      render();

      postAction({
        action: 'confirm-reactivation',
        token: state.token,
        desiredDate: state.desiredDate,
        selectedPlanId: state.selectedPlanId
      })
        .then(function (data) {
          if (data && data.ok) {
            state.step = 'done';
            return;
          }
          state.step = 'error';
          state.message = describeConfirmError(data && data.error);
        })
        .catch(function () {
          state.step = 'error';
          state.message = '通信エラーが発生しました。電波の良い場所でもう一度お試しください。';
        })
        .finally(function () {
          state.submitting = false;
          render();
        });
    });
  }

  function renderContact() {
    var closeButtonHtml = state.isInLineApp
      ? '<button class="btn btn-accent" type="button" id="btn-contact-close">トーク画面に戻る</button>'
      : '';

    screenEl.innerHTML =
      '<div class="stack">' +
        '<p class="hint">ご希望のプランが選択肢に無い場合は、お手数ですがこのトーク画面にお戻りいただき、' +
        '公式LINEから直接お問い合わせください。</p>' +
        closeButtonHtml +
        '<button class="btn btn-secondary" type="button" id="btn-contact-back">プラン選択に戻る</button>' +
      '</div>';

    if (state.isInLineApp) {
      document.getElementById('btn-contact-close').addEventListener('click', function () {
        if (typeof liff !== 'undefined') {
          liff.closeWindow();
        }
      });
    }
    // 「プラン選択に戻る」も resetToForm を呼び、実際の遷移先は plans ではなく form
    // （ファイル冒頭コメント参照。gas/21_liff.htmlと同一仕様）。
    document.getElementById('btn-contact-back').addEventListener('click', resetToForm);
  }

  function renderDone() {
    var closeButtonHtml = state.isInLineApp
      ? '<button class="btn btn-secondary" type="button" id="btn-done-close">閉じる</button>'
      : '';

    screenEl.innerHTML =
      '<div class="done-wrap">' +
        '<span class="done-icon" aria-hidden="true">🎉</span>' +
        '<p class="hint hint-center">復帰のお手続きが完了しました。ご入力いただいた内容で担当より改めてご連絡いたします。</p>' +
        closeButtonHtml +
      '</div>';

    if (state.isInLineApp) {
      document.getElementById('btn-done-close').addEventListener('click', function () {
        if (typeof liff !== 'undefined') {
          liff.closeWindow();
        }
      });
    }
  }

  function renderError() {
    screenEl.innerHTML =
      '<div class="stack">' +
        '<p class="warning"><span aria-hidden="true">⚠</span><span>' + escapeHtml(state.message) + '</span></p>' +
        '<button class="btn btn-secondary" type="button" id="btn-error-reset">はじめからやり直す</button>' +
      '</div>';
    document.getElementById('btn-error-reset').addEventListener('click', resetToForm);
  }

  render();
})();
</script>
</body>
</html>