(function () {
  'use strict';
  if (!window.EcomAPI) return;

  let pendingEmail = '';

  function esc(v) {
    return String(v ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  }

  function ensurePanel() {
    let panel = document.getElementById('otpVerificationPanel');
    if (panel) return panel;
    panel = document.createElement('div');
    panel.id = 'otpVerificationPanel';
    panel.className = 'otp-panel';
    panel.style.cssText = 'display:none;position:fixed;inset:0;z-index:9999;background:rgba(10,20,15,.55);padding:24px;align-items:center;justify-content:center;';
    panel.innerHTML = `
      <div class="otp-card" style="background:#fff;max-width:420px;width:100%;border-radius:16px;padding:28px;box-shadow:0 24px 60px rgba(0,0,0,.2);">
        <h2 style="margin:0 0 8px;font-size:22px;">Verify your email</h2>
        <p id="otpPanelMessage" class="otp-msg" style="color:#5a6b60;margin:0 0 16px;font-size:14px;line-height:1.5;"></p>
        <label style="display:block;font-size:13px;font-weight:600;margin-bottom:6px;">Verification code</label>
        <input id="otpCodeInput" type="text" inputmode="numeric" maxlength="6" placeholder="6-digit code" style="width:100%;padding:12px 14px;border:1px solid #d8e0da;border-radius:10px;font-size:18px;letter-spacing:.15em;margin-bottom:12px;">
        <button type="button" id="otpVerifyBtn" style="width:100%;padding:12px;border:0;border-radius:10px;background:#1a3d2e;color:#fff;font-weight:700;cursor:pointer;margin-bottom:8px;">Verify &amp; sign in</button>
        <button type="button" id="otpResendBtn" style="width:100%;padding:10px;border:1px solid #d8e0da;border-radius:10px;background:#fff;cursor:pointer;margin-bottom:8px;">Resend code</button>
        <button type="button" id="otpCloseBtn" style="width:100%;padding:8px;border:0;background:transparent;color:#5a6b60;cursor:pointer;">Cancel</button>
      </div>`;
    document.body.appendChild(panel);
    panel.addEventListener('click', (e) => { if (e.target === panel) hideOtpPanel(); });
    document.getElementById('otpVerifyBtn')?.addEventListener('click', () => verifyPendingOtp());
    document.getElementById('otpResendBtn')?.addEventListener('click', () => resendPendingOtp());
    document.getElementById('otpCloseBtn')?.addEventListener('click', hideOtpPanel);
    document.getElementById('otpCodeInput')?.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') verifyPendingOtp();
    });
    return panel;
  }

  function setOtpMessage(msg) {
    const el = document.getElementById('otpPanelMessage');
    if (el) el.textContent = msg || '';
  }

  function showOtpPanel(email, message) {
    pendingEmail = String(email || '').trim();
    const panel = ensurePanel();
    panel.style.display = 'flex';
    setOtpMessage(message || ('Enter the 6-digit code sent to ' + pendingEmail));
    const input = document.getElementById('otpCodeInput');
    if (input) { input.value = ''; setTimeout(() => input.focus(), 50); }
  }

  function hideOtpPanel() {
    const panel = document.getElementById('otpVerificationPanel');
    if (panel) panel.style.display = 'none';
  }

  async function verifyPendingOtp() {
    const otp = String(document.getElementById('otpCodeInput')?.value || '').trim();
    if (!pendingEmail) return setOtpMessage('Missing email address.');
    if (otp.length < 4) return setOtpMessage('Enter the verification code from your email.');
    const data = await EcomAPI.verifyOtp(pendingEmail, otp);
    if (data.success) {
      hideOtpPanel();
      window.dispatchEvent(new CustomEvent('ecom:auth-verified', { detail: data }));
      if (typeof window.loadAccountProfile === 'function') await window.loadAccountProfile();
      if (typeof window.loadAccount === 'function') await window.loadAccount();
    } else {
      setOtpMessage(data.message || 'Invalid code. Try again or resend.');
    }
    return data;
  }

  async function resendPendingOtp() {
    if (!pendingEmail) return setOtpMessage('Missing email address.');
    const data = await EcomAPI.resendOtp(pendingEmail);
    setOtpMessage(data.message || 'A new code has been sent.');
    return data;
  }

  window.EcomOtpAuth = {
    show: showOtpPanel,
    hide: hideOtpPanel,
    verify: verifyPendingOtp,
    resend: resendPendingOtp,
    pendingEmail: () => pendingEmail,
    handleRegisterResponse(data, email) {
      if (data.success && data.requiresVerification) {
        showOtpPanel(email || data.email, data.message);
        return true;
      }
      return false;
    },
    handleLoginResponse(data, email) {
      if (data.requiresVerification) {
        showOtpPanel(email || data.email, data.message || 'Verify your email with the OTP sent to your inbox.');
        return true;
      }
      return false;
    },
  };
})();