/* ⚡️ 3秒でパッと完了！Web即時見積もりナビ (Quick Estimator Widget - Step Slider UI) */
(function(window, document) {
  'use strict';

  // Step state
  window.currentEstStep = 1;

  // 1. Open modal
  window.openEstimatorModal = function() {
    var modal = document.getElementById('estimatorModal');
    if (modal) {
      modal.classList.remove('hidden');
      modal.classList.add('flex');
      document.body.style.overflow = 'hidden';
      window.goToEstStep(1); // Always start at Step 1
    }
  };

  // 2. Close modal
  window.closeModal = function() {
    var modal = document.getElementById('estimatorModal');
    if (modal) {
      modal.classList.add('hidden');
      modal.classList.remove('flex');
    }
    document.body.style.overflow = '';
  };

  // 3. Close PC QR modal
  window.closePcQr = function() {
    var pcQrModal = document.getElementById('pcQrModal');
    if (pcQrModal) {
      pcQrModal.classList.add('hidden');
      pcQrModal.classList.remove('flex');
    }
    document.body.style.overflow = '';
  };

  // 4. Step transition
  window.goToEstStep = function(step) {
    window.currentEstStep = step;
    for (var i = 1; i <= 3; i++) {
      var panel = document.getElementById('est-step-' + i + '-panel');
      var dot = document.getElementById('est-step-' + i + '-dot');
      if (panel) {
        if (i === step) {
          panel.classList.remove('hidden');
        } else {
          panel.classList.add('hidden');
        }
      }
      if (dot) {
        if (i <= step) {
          dot.classList.add('bg-[#06C755]');
          dot.classList.remove('bg-slate-300');
        } else {
          dot.classList.add('bg-slate-300');
          dot.classList.remove('bg-[#06C755]');
        }
      }
    }
    var indicator = document.getElementById('est-step-indicator');
    if (indicator) {
      indicator.innerText = 'STEP ' + step + ' / 3';
    }
  };

  // 5. Select Service (Step 1)
  window.selectEstService = function(serviceName) {
    var serviceChips = document.querySelectorAll('.estimator-service-chip');
    serviceChips.forEach(function(chip) {
      chip.classList.remove('border-[#FF5722]', 'bg-[#FFF0E5]', 'text-[#FF5722]', 'active-chip');
      var val = chip.getAttribute('data-value') || chip.innerText.trim();
      if (val.indexOf(serviceName) !== -1 || serviceName.indexOf(val) !== -1) {
        chip.classList.add('border-[#FF5722]', 'bg-[#FFF0E5]', 'text-[#FF5722]', 'active-chip');
      }
    });
    // Auto advance to Step 2
    setTimeout(function() {
      window.goToEstStep(2);
    }, 150);
  };

  // 6. Toggle Item Chip (Step 2)
  window.toggleEstItemChip = function(el) {
    if (!el) return;
    el.classList.toggle('border-[#FF5722]');
    el.classList.toggle('bg-[#FFF0E5]');
    el.classList.toggle('text-[#FF5722]');
    el.classList.toggle('active-chip');
  };

  // 7. Toggle Note Chip (Step 3)
  window.toggleEstNoteChip = function(el) {
    if (!el) return;
    el.classList.toggle('border-amber-500');
    el.classList.toggle('bg-amber-50');
    el.classList.toggle('text-amber-700');
    el.classList.toggle('active-chip');
  };

  // 8. Custom date picker
  window.toggleEstCustomDatePicker = function() {
    var container = document.getElementById('est-custom-date-container');
    var input = document.getElementById('estDateInput');
    if (container) {
      container.classList.toggle('hidden');
      if (!container.classList.contains('hidden') && input) {
        input.focus();
        if (typeof input.showPicker === 'function') {
          try { input.showPicker(); } catch(e) {}
        }
      }
    }
  };

  window.setEstDateValue = function(val) {
    if (!val) return;
    var parts = val.split('-');
    var formatted = parts.length === 3 ? parts[1] + '月' + parts[2] + '日希望' : val + '希望';
    var customInput = document.getElementById('estimatorCustomNote');
    if (customInput) {
      if (customInput.value.indexOf(formatted) === -1) {
        customInput.value = customInput.value ? customInput.value + ' (' + formatted + ')' : formatted;
      }
    }
  };

  // 9. Build Summary Message
  window.buildEstimatorSummary = function() {
    var activeService = '不用品回収';
    var selectedServiceEl = document.querySelector('.estimator-service-chip.active-chip');
    if (selectedServiceEl) {
      activeService = selectedServiceEl.getAttribute('data-value') || selectedServiceEl.innerText.trim();
    }

    var activeItems = [];
    document.querySelectorAll('.estimator-item-chip.active-chip').forEach(function(el) {
      activeItems.push(el.getAttribute('data-value') || el.innerText.trim());
    });

    var activeNotes = [];
    document.querySelectorAll('.estimator-note-chip.active-chip').forEach(function(el) {
      activeNotes.push(el.getAttribute('data-value') || el.innerText.trim());
    });

    var estDateInput = document.getElementById('estDateInput');
    if (estDateInput && estDateInput.value) {
      var parts = estDateInput.value.split('-');
      var formatted = parts.length === 3 ? parts[1] + '月' + parts[2] + '日希望' : estDateInput.value;
      if (activeNotes.indexOf(formatted) === -1) {
        activeNotes.push(formatted);
      }
    }

    var customNoteInput = document.getElementById('estimatorCustomNote');
    if (customNoteInput && customNoteInput.value.trim()) {
      activeNotes.push(customNoteInput.value.trim());
    }

    var itemsStr = activeItems.length > 0 ? activeItems.join('、') : '指定なし';
    var notesStr = activeNotes.length > 0 ? activeNotes.join(' / ') : 'なし';

    return {
      activeService: activeService,
      messageText: '【Web即時見積もり依頼】\n■ 種別: ' + activeService + '\n■ お品物・内容: ' + itemsStr + '\n■ ご要望・状況: ' + notesStr + '\n-------------------\n詳細をお客様なりに簡単にどうぞ！'
    };
  };

  // 10. Send via LINE
  window.sendEstimatorLine = function() {
    var summary = window.buildEstimatorSummary();
    var messageText = summary.messageText;
    var encodedMsg = encodeURIComponent(messageText);
    var lineOfficialId = '@203bqtwh';
    var oaUrl = 'https://line.me/R/oaMessage/' + lineOfficialId + '/?' + encodedMsg;

    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(messageText).catch(function() {});
    }

    var isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    
    if (isMobile) {
      window.location.href = oaUrl;
      window.closeModal();
    } else {
      var pcQrModal = document.getElementById('pcQrModal');
      var pcQrImage = document.getElementById('pcQrImage');
      if (pcQrImage && pcQrModal) {
        var qrApiUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=' + encodeURIComponent(oaUrl);
        pcQrImage.src = qrApiUrl;
        window.closeModal();
        pcQrModal.classList.remove('hidden');
        pcQrModal.classList.add('flex');
        document.body.style.overflow = 'hidden';
      } else {
        window.open('https://lin.ee/VyKGJxH', '_blank');
        window.closeModal();
      }
    }
  };

  // 11. Send via Web Form
  window.sendEstimatorForm = function() {
    var summary = window.buildEstimatorSummary();
    window.closeModal();

    var typeformContainer = document.getElementById('typeform-container');
    if (typeformContainer) {
      typeformContainer.scrollIntoView({ behavior: 'smooth' });
      if (typeof window.selectService === 'function') {
        window.selectService(summary.activeService, false);
      }
      if (typeof window.goToStep === 'function') {
        window.goToStep(1);
      }
    } else {
      window.location.href = '/#typeform-container';
    }
  };

  // 12. Modal Reviews Carousel
  var modalReviewIdx = 0;
  var modalReviewTimer = null;

  window.showModalReviewSlide = function(idx, resetTimer) {
    if (resetTimer === undefined) resetTimer = true;
    modalReviewIdx = idx;
    var slides = document.querySelectorAll('.modal-review-slide');
    var dots = document.querySelectorAll('.modal-review-dot');
    slides.forEach(function(s, i) {
      if (i === idx) {
        s.classList.remove('hidden');
      } else {
        s.classList.add('hidden');
      }
    });
    dots.forEach(function(d, i) {
      if (i === idx) {
        d.classList.add('bg-[#1a73e8]');
        d.classList.remove('bg-slate-300');
      } else {
        d.classList.add('bg-slate-300');
        d.classList.remove('bg-[#1a73e8]');
      }
    });
    if (resetTimer && modalReviewTimer) {
      clearInterval(modalReviewTimer);
      modalReviewTimer = setInterval(function() {
        modalReviewIdx = (modalReviewIdx + 1) % 3;
        window.showModalReviewSlide(modalReviewIdx, false);
      }, 4500);
    }
  };

  window.nextModalReviewSlide = function() {
    var nextIdx = (modalReviewIdx + 1) % 3;
    window.showModalReviewSlide(nextIdx, true);
  };

  window.prevModalReviewSlide = function() {
    var prevIdx = (modalReviewIdx - 1 + 3) % 3;
    window.showModalReviewSlide(prevIdx, true);
  };

  // Auto initialize on DOM ready
  function init() {
    var openBtn = document.getElementById('openEstimatorBtn');
    var closeBtn = document.getElementById('closeEstimatorBtn');
    var backdrop = document.getElementById('estimatorBackdrop');
    var closePcQrBtn = document.getElementById('closePcQrBtn');
    var pcQrBackdrop = document.getElementById('pcQrBackdrop');
    var sendLineBtn = document.getElementById('sendEstimatorLineBtn');
    var topSendFormBtn = document.getElementById('topSendEstimatorFormBtn');

    if (openBtn) openBtn.addEventListener('click', window.openEstimatorModal);
    if (closeBtn) closeBtn.addEventListener('click', window.closeModal);
    if (backdrop) backdrop.addEventListener('click', window.closeModal);
    if (closePcQrBtn) closePcQrBtn.addEventListener('click', window.closePcQr);
    if (pcQrBackdrop) pcQrBackdrop.addEventListener('click', window.closePcQr);
    if (sendLineBtn) sendLineBtn.addEventListener('click', window.sendEstimatorLine);
    if (topSendFormBtn) topSendFormBtn.addEventListener('click', window.sendEstimatorForm);

    modalReviewTimer = setInterval(function() {
      modalReviewIdx = (modalReviewIdx + 1) % 3;
      window.showModalReviewSlide(modalReviewIdx, false);
    }, 4500);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

})(window, document);