下書き自動保存フォーム（Draft Autosave Form）— localStorageで入力を自動保存・復元

:root {
  --draft-accent: #2B7FE8;
  --draft-border: #D0D7E0;
  --draft-text: #33404F;
  --draft-muted: #5A6A7A;
  --draft-bg-subtle: #EEF4FF;
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #F4F6F9;
  padding: 24px;
}

.draft-demo {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
}

/* 復元バナー */
.draft-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--draft-bg-subtle);
  border: 1px solid #BBD3F5;
  border-left: 4px solid var(--draft-accent);
  border-radius: 6px;
  font-size: 14px;
  color: var(--draft-text);
}
/* display: flex 要素に hidden を効かせるため必ず打ち消す */
.draft-banner[hidden] { display: none; }
.draft-banner-actions { display: flex; gap: 8px; }

.draft-restore-btn {
  padding: 6px 14px;
  font-size: 13px;
  color: #fff;
  background: var(--draft-accent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.draft-restore-btn:hover { background: #1E6FD4; }

.draft-discard-btn {
  padding: 6px 14px;
  font-size: 13px;
  color: var(--draft-muted);
  background: #fff;
  border: 1.5px solid var(--draft-border);
  border-radius: 6px;
  cursor: pointer;
}
.draft-discard-btn:hover { background: #F4F6F9; }

.draft-note {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--draft-muted);
}

/* フォーム */
.draft-form { display: flex; flex-direction: column; gap: 14px; }
.draft-field { display: flex; flex-direction: column; gap: 4px; }
.draft-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--draft-text);
}
.draft-req { font-size: 11px; font-weight: 700; color: #E5484D; }

.draft-field input,
.draft-field select,
.draft-field textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--draft-text);
  border: 1.5px solid var(--draft-border);
  border-radius: 6px;
}
.draft-field input:focus,
.draft-field select:focus,
.draft-field textarea:focus {
  outline: none;
  border-color: var(--draft-accent);
}
.draft-field textarea { resize: vertical; }
.draft-nosave-note { font-size: 12px; color: var(--draft-muted); }

/* 保存ステータス（空でも高さを確保して行のガタつきを防ぐ） */
.draft-status {
  min-height: 20px;
  margin: 2px 0 0;
  font-size: 12px;
  color: #2E7D46;
}

/* コントロール */
.draft-controls {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.draft-submit-btn {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--draft-accent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.draft-submit-btn:hover { background: #1E6FD4; }

.reload-btn {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--draft-accent);
  background: #fff;
  border: 1.5px solid var(--draft-accent);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.reload-btn:hover { background: var(--draft-bg-subtle); }

.reset-btn {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--draft-muted);
  background: #fff;
  border: 1.5px solid var(--draft-border);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.reset-btn:hover { background: #F4F6F9; border-color: #9AA5B4; }

/* 送信結果 */
.draft-result {
  margin-top: 4px;
  font-size: 14px;
  color: var(--draft-text);
  white-space: pre-line;
}
.draft-result.is-shown {
  padding: 12px 14px;
  background: #F0FAF3;
  border: 1px solid #BFE6CC;
  border-radius: 6px;
}

(function () {
  'use strict';

  var STORAGE_KEY = 'form-draft-1'; // 下書きを保存する localStorage のキー
  var DEBOUNCE_MS = 500;            // 入力が止まってから保存するまでの待ち時間

  var form = document.getElementById('draft-form');
  var banner = document.getElementById('draft-banner');
  var bannerText = document.getElementById('draft-banner-text');
  var restoreBtn = document.getElementById('draft-restore-btn');
  var discardBtn = document.getElementById('draft-discard-btn');
  var statusEl = document.getElementById('draft-status');
  var resultEl = document.getElementById('draft-result');

  if (!form) return;

  var saveTimer = null;

  // 保存対象のフィールドを収集する（data-no-save が付いた機密項目は除外）
  function collectFields() {
    var data = {};
    form.querySelectorAll('[name]:not([data-no-save])').forEach(function (el) {
      data[el.name] = el.value;
    });
    return data;
  }

  // localStorage へ下書きを保存する
  function saveDraft() {
    var payload = { savedAt: new Date().toISOString(), fields: collectFields() };
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(payload));
      statusEl.textContent = '下書きを保存しました ' + formatTime(payload.savedAt);
    } catch (e) {
      // プライベートブラウジング等で localStorage が使えない場合は静かに無効化する
    }
  }

  // ISO文字列を HH:MM に整形する
  function formatTime(iso) {
    var d = new Date(iso);
    var h = ('0' + d.getHours()).slice(-2);
    var m = ('0' + d.getMinutes()).slice(-2);
    return h + ':' + m;
  }

  // 入力を debounce でまとめてから保存する
  form.addEventListener('input', function (e) {
    // 機密フィールドの入力では保存をトリガーしない
    if (e.target.hasAttribute('data-no-save')) return;
    clearTimeout(saveTimer);
    saveTimer = setTimeout(saveDraft, DEBOUNCE_MS);
  });

  // ページ読み込み時に下書きがあれば復元バナーを表示する
  function initRestoreBanner() {
    var raw;
    try {
      raw = localStorage.getItem(STORAGE_KEY);
    } catch (e) {
      return; // localStorage 不可
    }
    if (!raw) return;

    var payload;
    try {
      payload = JSON.parse(raw);
    } catch (e) {
      return; // 壊れたデータは無視する
    }
    if (!payload || !payload.fields) return;

    // 勝手に復元せず、ユーザーに戻すか選ばせる
    bannerText.textContent = '前回の下書きがあります（' + formatTime(payload.savedAt) + 'に保存）';
    banner.hidden = false;

    restoreBtn.onclick = function () {
      restoreDraft(payload.fields);
      banner.hidden = true;
    };
    discardBtn.onclick = function () {
      removeDraft(); // 確認なしで削除
      banner.hidden = true;
    };
  }

  // 保存値を各項目へ戻す
  function restoreDraft(fields) {
    Object.keys(fields).forEach(function (name) {
      var el = form.querySelector('[name="' + name + '"]');
      if (el) el.value = fields[name];
    });
  }

  // 下書きを削除する
  function removeDraft() {
    try {
      localStorage.removeItem(STORAGE_KEY);
    } catch (e) {
      // 何もしない
    }
  }

  // select の表示ラベルを取得する
  function selectedLabel(value) {
    var sel = form.querySelector('select[name="category"]');
    if (!sel) return value;
    var opt = sel.querySelector('option[value="' + value + '"]');
    return opt ? opt.textContent : value;
  }

  // 送信（デモなのでページ遷移せず結果を表示する）
  form.addEventListener('submit', function (e) {
    e.preventDefault();
    // required 未入力ならブラウザ標準バリデーションが submit を止めるため、ここは成功時のみ通る
    var data = collectFields();
    var lines = ['送信しました（デモ）'];
    if (data.name) lines.push('氏名：' + data.name);
    if (data.email) lines.push('メール：' + data.email);
    if (data.category) lines.push('申請種別：' + selectedLabel(data.category));
    resultEl.textContent = lines.join('\n');
    resultEl.classList.add('is-shown');

    removeDraft();   // 送信できたら下書きを削除する
    form.reset();
    statusEl.textContent = '';
  });

  // リセット（表示のみ初期化。localStorage の下書きは消さない）
  window.resetDemo = function () {
    form.reset();
    statusEl.textContent = '';
    resultEl.textContent = '';
    resultEl.classList.remove('is-shown');
  };

  initRestoreBanner();
})();