<script src="https://unpkg.com/@descope/[email protected]/dist/index.js"></script>
<style>
  #descope-container {
    max-width: 420px;
    margin: 0 auto 80px;
    text-align: center;
  }
  #libby-continue {
    display: none;
    margin-top: 24px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    background: #1e1e1e;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }
  #libby-continue:hover {
    opacity: 0.9;
  }
#descope-container{max-width:500px;margin-left:auto;margin-right:auto;padding:20px}.auth-loader{text-align:center;padding:40px 20px}.spinner{width:40px;height:40px;margin:0 auto 20px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.auth-message{padding:15px;margin-bottom:20px;border-radius:4px;font-size:14px}.auth-message--info{background-color:#e3f2fd;color:#1976d2;border-left:4px solid #1976d2}.auth-message--success{background-color:#e8f5e9;color:#388e3c;border-left:4px solid #388e3c}.auth-message--error{background-color:#ffebee;color:#c62828;border-left:4px solid #c62828}.auth-message--warning{background-color:#fff3e0;color:#f57c00;border-left:4px solid #f57c00}.libby-continue-btn{display:inline-block;padding:12px 24px;background-color:#3498db;color:#fff;border:none;border-radius:4px;font-size:16px;cursor:pointer;margin-top:20px;transition:background-color 0.3s}.libby-continue-btn:hover{background-color:#2980b9}.libby-continue-btn:active{transform:scale(.98)}@media (max-width:768px){#descope-container{padding:15px}.libby-continue-btn{width:100%}}
</style>
<script>
const LIBBY_URL = 'https://sentry.libbyapp.com/auth/link/900741?ils=queerliblib&continuation=https%3A%2F%2Flibbyapp.com%2Finterview%2Fauthenticate%2Fcard%3Fkey%3Dqueerliblib%26origination%3Dlibrary%252Fqueerliblib';

function isInAppBrowser() {
  const ua = navigator.userAgent || navigator.vendor || window.opera;
  return (
    /FBAN|FBAV|Instagram|Line|Twitter|LinkedIn|Snapchat/i.test(ua) ||
    /wv/.test(ua) ||
    (/iPhone|iPad|iPod/.test(ua) && !/Safari/.test(ua))
  );
}

function showMessage(container, message, type = 'info') {
  const messageDiv = document.createElement('div');
  messageDiv.className = `auth-message auth-message--${type}`;
  messageDiv.textContent = message;
  container.prepend(messageDiv);
  return messageDiv;
}

function showLoading(container) {
  const loader = document.createElement('div');
  loader.className = 'auth-loader';
  loader.innerHTML = '<div class="spinner"></div><p>Loading authentication...</p>';
  container.appendChild(loader);
  return loader;
}

function initDescopeAuth() {
  const params = new URLSearchParams(window.location.search);
  if (params.has('continuation') || params.has('libby')) {
    return;
  }

  const main = document.querySelector('main');
  if (!main) {
    console.error('Main element not found');
    return;
  }

  const container = document.createElement('div');
  container.id = 'descope-container';

  const header = document.querySelector('header');
  const headerHeight = header ? header.getBoundingClientRect().height : 0;
  container.style.marginTop = `${headerHeight + 40}px`;

  main.prepend(container);

  const loader = showLoading(container);

  const descope = document.createElement('descope-wc');
  descope.setAttribute('project-id', 'P2fYs52LoB3Po48CcWl3XkgBw8z5');
  descope.setAttribute('flow-id', 'sign-up-qll-magic-link');
  descope.setAttribute('base-url', 'https://auth.queerliberationlibrary.org');

  container.appendChild(descope);

  const loadTimeout = setTimeout(() => {
    loader.remove();
    showMessage(container, 'Authentication service is taking longer than expected. Please refresh the page.', 'warning');
  }, 10000);

  customElements.whenDefined('descope-wc').then(() => {
    clearTimeout(loadTimeout);
    loader.remove();

    descope.addEventListener('success', () => {
      showMessage(container, 'Authentication successful! Redirecting...', 'success');
      
      setTimeout(() => {
        if (isInAppBrowser()) {
          const continueBtn = document.createElement('button');
          continueBtn.id = 'libby-continue';
          continueBtn.className = 'libby-continue-btn';
          continueBtn.textContent = 'Continue to Libby';
          continueBtn.onclick = () => {
            window.location.assign(LIBBY_URL);
          };
          container.appendChild(continueBtn);
        } else {
          window.location.href = LIBBY_URL;
        }
      }, 400);
    });

    descope.addEventListener('error', (err) => {
      console.error('Descope error:', err);
      showMessage(container, 'Authentication failed. Please try again or contact support.', 'error');
    });
  }).catch((err) => {
    clearTimeout(loadTimeout);
    loader.remove();
    console.error('Failed to load Descope:', err);
    showMessage(container, 'Failed to load authentication. Please refresh the page.', 'error');
  });
}

document.addEventListener('DOMContentLoaded', initDescopeAuth);
window.addEventListener('mercury:load', initDescopeAuth);
</script>