<script>
(function () {
  'use strict';
  
  const SETTINGS = {
    // バーの幅が変わるトランジション時間（ミリ秒）
    TRANSITION_MS: 1000,

    // 背景グラデーション（CSS keyframes: gradient-move）の再生時間（ミリ秒）
    GRADIENT_ANIM_MS: 8000,

    // 伸縮方向に応じて付与するリップル演出の長さ（ミリ秒）
    RIPPLE_MS: 700,

    // スクロールがこの値以上で固定クラスを付与
    FIXED_SCROLL_THRESHOLD: 1,

    // 固定表示する際の上部オフセット（px）。必要に応じて変更
    FIXED_TOP_PX: 0,
  };

  // =============================================================
  // 定数
  // =============================================================
  const INPUT_SELECTOR = 'input, textarea, select';
  const PROGRESS_BAR_ID = 'progress-bar';
  const PROGRESS_TEXT_ID = 'progress-text';
  const PROGRESS_CONTAINER_SELECTOR = '.progress-bar-area';

  // -------------------------------------------------------------
  // ユーティリティ
  // -------------------------------------------------------------

  function getGroupName(name) {
    return name.split(':')[0];
  }

  function isFieldFilled(element) {
    if (element.type === 'text' || element.type === 'password' || element.tagName === 'TEXTAREA') {
      return element.value.trim() !== '';
    }
    if (element.tagName === 'SELECT') {
      return element.value !== '';
    }
    return false;
  }

  function collectVisibleFormElements() {
    return Array.from(document.querySelectorAll(INPUT_SELECTOR)).filter(el =>
      el.offsetParent !== null &&
      el.type !== 'hidden' &&
      el.type !== 'submit' &&
      el.type !== 'button' &&
      el.type !== 'reset'
    );
  }

  function groupFieldsByName(elements) {
    const groups = {};
    elements.forEach(el => {
      const name = el.getAttribute('name');
      if (!name) return;
      if (el.type === 'hidden') return;
      const group = getGroupName(name);
      if (!groups[group]) groups[group] = [];
      groups[group].push(el);
    });
    return groups;
  }

  function computeProgress(groups) {
    let completedGroups = 0;
    let totalGroups = 0;

    Object.values(groups).forEach(groupFields => {
      const visibleFields = groupFields.filter(el => el.type !== 'hidden');
      if (visibleFields.length === 0) return;
      totalGroups++;

      const isRadioOrCheckbox = visibleFields.some(el => el.type === 'radio' || el.type === 'checkbox');
      if (isRadioOrCheckbox) {
        if (visibleFields.some(el => el.checked)) {
          completedGroups++;
        }
      } else {
        if (visibleFields.every(isFieldFilled)) {
          completedGroups++;
        }
      }
    });

    // グループが0件のときは 0% を返す（初期表示でNaN%にならないように）
    const percent = totalGroups > 0 ? (completedGroups / totalGroups) * 100 : 0;
    return { completedGroups, totalGroups, percent };
  }

  function renderProgress(progress) {
    const progressBar = document.getElementById(PROGRESS_BAR_ID);
    const progressText = document.getElementById(PROGRESS_TEXT_ID);
    if (!progressBar || !progressText) return;

    progressBar.style.width = progress.percent + '%';
    progressText.innerText = Math.round(progress.percent) + '%';

    console.log(progress.completedGroups);
    console.log(progress.totalGroups);
  }

  // -------------------------------------------------------------
  // 付随機能（固定表示／リップルアニメーション）
  // -------------------------------------------------------------

  function setupFixedProgressOnScroll() {
    window.addEventListener('scroll', function () {
      const progressBarContainer = document.querySelector(PROGRESS_CONTAINER_SELECTOR);
      if (!progressBarContainer) return;

      const scrollTop = window.scrollY;
      const shouldFix = scrollTop >= SETTINGS.FIXED_SCROLL_THRESHOLD;

      if (shouldFix) {
        progressBarContainer.classList.add('fixed-progress');
        // 固定時の上端位置を設定（CSSのtopを上書き）
        progressBarContainer.style.top = SETTINGS.FIXED_TOP_PX + 'px';
      } else {
        progressBarContainer.classList.remove('fixed-progress');
        progressBarContainer.style.top = '';
      }
    });
  }

  function setupRippleAnimation() {
    const progressBar = document.getElementById(PROGRESS_BAR_ID);
    if (!progressBar) return;

    // 伸縮速度（transition）を設定
    progressBar.style.transition = 'width ' + SETTINGS.TRANSITION_MS + 'ms ease';

    // グラデーションの移動速度（CSS変数で渡せないため style.animationDuration を直接設定）
    // 既存CSS: animation: gradient-move 8s linear infinite;
    progressBar.style.animationDuration = SETTINGS.GRADIENT_ANIM_MS + 'ms';

    let rippleTimeout;
    let previousWidth = parseFloat(progressBar.style.width) || 0;

    const observer = new MutationObserver(mutations => {
      mutations.forEach(mutation => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
          const newWidth = parseFloat(progressBar.style.width) || 0;
          if (newWidth === previousWidth) return;

          const rippleClass = newWidth > previousWidth ? 'rippling-right' : 'rippling-left';

          progressBar.classList.remove('rippling-right', 'rippling-left');
          void progressBar.offsetWidth; // Reflow
          progressBar.classList.add(rippleClass);

          clearTimeout(rippleTimeout);
          rippleTimeout = setTimeout(() => {
            progressBar.classList.remove(rippleClass);
          }, SETTINGS.RIPPLE_MS);

          previousWidth = newWidth;
        }
      });
    });

    observer.observe(progressBar, { attributes: true });
  }

  // -------------------------------------------------------------
  // 初期化
  // -------------------------------------------------------------

  function updateProgressBar() {
    const elements = collectVisibleFormElements();
    const groups = groupFieldsByName(elements);
    const progress = computeProgress(groups);
    renderProgress(progress);
  }

  function init() {
    document.querySelectorAll(INPUT_SELECTOR).forEach(element => {
      element.addEventListener('input', updateProgressBar);
    });

    setupFixedProgressOnScroll();
    setupRippleAnimation();

    updateProgressBar();
  }

  window.addEventListener('load', init);
})();
</script>