ログインフォーム（Login Form）— ソーシャルログイン

:root {
  --color-primary: #2B7FE8;
  --color-primary-dark: #1E6ECF;
  --color-error: #E53E3E;
  --color-error-bg: #FFF5F5;
  --color-border: #D0D7E0;
  --color-text: #1A2B3C;
  --color-muted: #5A6A7A;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #F4F6F9;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 16px;
}

/* ===カード=== */
.login-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  padding: 32px;
  width: 100%;
  max-width: 400px;
}

/* ===ソーシャルログインボタン=== */
.social-login-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.social-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}

.social-login-btn:hover:not(:disabled) {
  background: #F4F6F9;
  border-color: #9AA5B4;
}

.social-login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.social-login-icon {
  display: flex;
  flex-shrink: 0;
}

.social-login-spinner {
  animation: spin 0.8s linear infinite;
}

/* hidden属性がdisplay:flexに上書きされないよう打ち消す */
.social-login-spinner[hidden] { display: none; }

/* ===区切り線「または」=== */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--color-muted);
  font-size: 13px;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E0E4E9;
}

/* ===認証エラーバナー=== */
.login-error-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-error-bg);
  border: 1px solid #FEB2B2;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 20px;
  color: var(--color-error);
  font-size: 14px;
}
.login-error-banner[hidden] { display: none; }

/* ===認証成功バナー=== */
.login-success-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F0FFF4;
  border: 1px solid #9AE6B4;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 20px;
  color: #276749;
  font-size: 14px;
}
.login-success-banner[hidden] { display: none; }

/* ===フィールド=== */
.login-field { margin-bottom: 20px; }

.login-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}

.login-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
}

.login-input:focus { border-color: var(--color-primary); }
.login-input.is-error { border-color: var(--color-error); }
.login-input:disabled { background: #F4F6F9; cursor: not-allowed; }

.login-field-error {
  display: block;
  font-size: 12px;
  color: var(--color-error);
  margin-top: 4px;
}

/* ===パスワードトグル=== */
.login-password-wrap { position: relative; }
.login-password-wrap .login-input { padding-right: 44px; }

.login-toggle-pw {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.login-toggle-pw:hover { color: var(--color-primary); }
.login-toggle-pw:disabled { cursor: not-allowed; opacity: 0.6; }

/* ===送信ボタン=== */
.login-btn {
  width: 100%;
  padding: 12px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s;
  font-family: inherit;
}

.login-btn:hover:not(:disabled) { background: var(--color-primary-dark); }
.login-btn:disabled { opacity: 0.7; cursor: not-allowed; }

/* スピナーアニメーション */
@keyframes spin { to { transform: rotate(360deg); } }
.login-btn-spinner { animation: spin 0.8s linear infinite; }

/* SVGのhidden属性はブラウザによっては効かないことがある（初期非表示の保険） */
.login-btn-spinner[hidden],
.icon-eye[hidden],
.icon-eye-off[hidden] { display: none; }

@media (max-width: 480px) {
  .login-card { padding: 24px; }
}

// ===== 設定 =====
var SOCIAL_PROVIDERS = [
  { id: 'google', label: 'Google' },
  { id: 'microsoft', label: 'Microsoft' },
  { id: 'github', label: 'GitHub' }
];
var SOCIAL_LOADING_MS = 1500;
var FAKE_LOADING_MS = 1200;

// ===== 要素取得 =====
var socialButtons = document.querySelectorAll('.social-login-btn');
var loginForm     = document.getElementById('loginForm');
var emailInput    = document.getElementById('email');
var passwordInput = document.getElementById('password');
var emailError    = document.getElementById('emailError');
var passwordError = document.getElementById('passwordError');
var errorBanner   = document.getElementById('loginErrorBanner');
var successBanner = document.getElementById('loginSuccessBanner');
var loginBtn      = document.getElementById('loginBtn');
var btnText       = loginBtn.querySelector('.login-btn-text');
var btnSpinner    = loginBtn.querySelector('.login-btn-spinner');
var togglePw      = document.getElementById('togglePw');
var eyeIcon       = togglePw.querySelector('.icon-eye');
var eyeOffIcon    = togglePw.querySelector('.icon-eye-off');

// デモ切替ラジオの現在値を取得
function getDemoMode() {
  var radio = document.querySelector('input[name="demoMode"]:checked');
  return radio ? radio.value : 'success';
}

// ===== SVG 表示ヘルパー（hidden属性はSVGで効かないためstyle.displayで制御） =====
function showSvg(el) { el.style.display = 'inline'; }
function hideSvg(el) { el.style.display = 'none'; }

function getProviderLabel(providerId) {
  for (var i = 0; i < SOCIAL_PROVIDERS.length; i++) {
    if (SOCIAL_PROVIDERS[i].id === providerId) return SOCIAL_PROVIDERS[i].label;
  }
  return '';
}

// ===== ソーシャルログイン =====
// メール/パスワードフォーム一式をまとめて disabled にする
function setFormDisabled(disabled) {
  emailInput.disabled = disabled;
  passwordInput.disabled = disabled;
  togglePw.disabled = disabled;
  loginBtn.disabled = disabled;
}

function setSocialLoading(providerId) {
  socialButtons.forEach(function (btn) {
    btn.disabled = true;
    if (btn.getAttribute('data-provider') === providerId) {
      btn.classList.add('is-loading');
      btn.querySelector('.social-login-text').textContent = getProviderLabel(providerId) + 'に移動中...';
      showSvg(btn.querySelector('.social-login-spinner'));
    }
  });
  setFormDisabled(true);

  // ▼▼▼ 実際にOAuthを組み込む場合はここを書き換える ▼▼▼
  // 本来はここで setTimeout ではなく、各プロバイダーの認可エンドポイントへ
  // window.location.href でリダイレクトする（例）
  //   Google:     https://accounts.google.com/o/oauth2/v2/auth?...
  //   Microsoft:  https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize?...
  //   GitHub:     https://github.com/login/oauth/authorize?...
  // client_id・redirect_uri・scope・state（CSRF対策用のランダム値）は
  // 各プロバイダーの公式ドキュメントに従って付与すること。
  // リダイレクト後、自社サーバーの /auth/callback 等で認可コードとstateを検証し、
  // サーバー側でトークン交換を行う（client_secretを使うためブラウザJSでは行わない）。
  // このデモはUIの状態遷移のみを見せるため、実通信の代わりに
  // setTimeout でローディング状態を再現している。
  setTimeout(resetSocialButtons, SOCIAL_LOADING_MS);
  // ▲▲▲ ここまで ▲▲▲
}

function resetSocialButtons() {
  socialButtons.forEach(function (btn) {
    btn.disabled = false;
    btn.classList.remove('is-loading');
    var providerId = btn.getAttribute('data-provider');
    btn.querySelector('.social-login-text').textContent = getProviderLabel(providerId) + 'でログイン';
    hideSvg(btn.querySelector('.social-login-spinner'));
  });
  setFormDisabled(false);
}

socialButtons.forEach(function (btn) {
  btn.addEventListener('click', function () {
    setSocialLoading(btn.getAttribute('data-provider'));
  });
});

// ===== メール形式チェック =====
function validateEmail(val) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
}

// ===== フィールドエラー表示・解除 =====
function setFieldError(input, errorEl, message) {
  input.classList.add('is-error');
  errorEl.textContent = message;
}

function clearFieldError(input, errorEl) {
  input.classList.remove('is-error');
  errorEl.textContent = '';
}

// ===== バリデーション（送信ボタン押下時のみ） =====
function validate() {
  var ok = true;

  if (!emailInput.value.trim()) {
    setFieldError(emailInput, emailError, 'メールアドレスを入力してください');
    ok = false;
  } else if (!validateEmail(emailInput.value.trim())) {
    setFieldError(emailInput, emailError, '正しいメールアドレス形式で入力してください');
    ok = false;
  } else {
    clearFieldError(emailInput, emailError);
  }

  if (!passwordInput.value) {
    setFieldError(passwordInput, passwordError, 'パスワードを入力してください');
    ok = false;
  } else {
    clearFieldError(passwordInput, passwordError);
  }

  return ok;
}

// ===== ローディング状態 =====
function setLoading() {
  loginBtn.disabled = true;
  btnText.hidden = true;
  showSvg(btnSpinner);
}

// ===== 成功状態 =====
function setSuccess() {
  hideSvg(btnSpinner);
  btnText.textContent = 'ログイン';
  btnText.hidden = false;
  loginBtn.disabled = false;
  successBanner.hidden = false;
}

// ===== 失敗状態 =====
function setFailure() {
  hideSvg(btnSpinner);
  btnText.hidden = false;
  loginBtn.disabled = false;
  errorBanner.hidden = false;
}

// ===== リセット =====
function resetDemo() {
  resetSocialButtons();
  loginForm.reset();
  clearFieldError(emailInput, emailError);
  clearFieldError(passwordInput, passwordError);
  errorBanner.hidden = true;
  successBanner.hidden = true;
  loginBtn.disabled = false;
  btnText.textContent = 'ログイン';
  btnText.hidden = false;
  hideSvg(btnSpinner);
  // パスワードトグルを初期状態（非表示モード）に戻す
  passwordInput.type = 'password';
  showSvg(eyeIcon);
  hideSvg(eyeOffIcon);
  togglePw.setAttribute('aria-label', 'パスワードを表示');
}

// ===== フォーム送信 =====
loginForm.addEventListener('submit', function (e) {
  e.preventDefault();
  // 前回の表示をリセットしてから再バリデーション
  clearFieldError(emailInput, emailError);
  clearFieldError(passwordInput, passwordError);
  errorBanner.hidden = true;
  successBanner.hidden = true;

  if (!validate()) return;

  setLoading();

  setTimeout(function () {
    if (getDemoMode() === 'success') {
      setSuccess();
    } else {
      setFailure();
    }
  }, FAKE_LOADING_MS);
});

// ===== パスワード全角入力防止 =====
// type="text" 切替時に IME が有効になるため、IME 確定時に非 ASCII 文字を除去する
passwordInput.addEventListener('compositionend', function () {
  this.value = this.value.replace(/[^\x20-\x7E]/g, '');
});

// ===== パスワードトグル =====
togglePw.addEventListener('click', function () {
  var isVisible = passwordInput.type === 'text';
  if (isVisible) {
    // 非表示に切り替え
    passwordInput.type = 'password';
    showSvg(eyeIcon);
    hideSvg(eyeOffIcon);
    togglePw.setAttribute('aria-label', 'パスワードを表示');
  } else {
    // 表示に切り替え
    passwordInput.type = 'text';
    hideSvg(eyeIcon);
    showSvg(eyeOffIcon);
    togglePw.setAttribute('aria-label', 'パスワードを非表示');
  }
});