
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sign in to scoreos</title>
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  
  <style>
    /* 1. CORE VARIABLES (Matching your Theme) */
    :root {
      --color-trust-600: #2563EB;
      --color-trust-500: #3B82F6;
      --color-trust-50:  #EFF6FF;
      --color-ink:       #111827;
      --color-slate:     #374151;
      --color-muted:     #9CA3AF;
      --color-border:    #E5E7EB;
      --color-canvas:    #F9FAFB;
      --color-surface:   #FFFFFF;
      --color-error:     #EF4444;
      --font-family:     'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    /* 2. RESET & BASE */
    * { box-sizing: border-box; }
    body {
      font-family: var(--font-family);
      background-color: var(--color-canvas);
      color: var(--color-ink);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      padding: 1.5rem;
    }

    /* 3. LAYOUT UTILS */
    .container {
      width: 100%;
      max-width: 448px; /* sm:max-w-md */
      margin: 0 auto;
    }
    .text-center { text-align: center; }
    .hidden { display: none !important; }
    
    /* 4. COMPONENTS */
    .brand-logo {
      width: 48px;
      height: 48px;
      background: var(--color-trust-50);
      color: var(--color-trust-600);
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem auto;
    }
    
    .card {
      background: var(--color-surface);
      padding: 2rem 2.5rem;
      border-radius: 0.5rem;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
      border: 1px solid var(--color-border);
      position: relative;
    }

    .input-group { margin-bottom: 1.5rem; }
    
    label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--color-slate);
      margin-bottom: 0.25rem;
      text-align: left;
    }

    input {
      display: block;
      width: 100%;
      border-radius: 0.375rem;
      border: 1px solid var(--color-border); /* gray-300 */
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      transition: all 0.2s;
    }
    
    input:focus {
      outline: none;
      border-color: var(--color-trust-500);
      box-shadow: 0 0 0 1px var(--color-trust-500);
    }

    input.otp-input {
      text-align: center;
      letter-spacing: 0.5em;
      font-size: 1.125rem;
    }

    .btn {
      display: flex;
      width: 100%;
      justify-content: center;
      border-radius: 0.375rem;
      border: none;
      background-color: var(--color-trust-600);
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: white;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .btn:hover { background-color: var(--color-trust-500); }
    
    .link-btn {
      background: none;
      border: none;
      color: var(--color-trust-600);
      font-size: 0.75rem;
      font-weight: 500;
      cursor: pointer;
      padding: 0;
      text-decoration: none;
    }
    .link-btn:hover { text-decoration: underline; }

    /* 5. LOADING OVERLAY */
    .overlay {
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.5rem;
      z-index: 10;
    }
    .spinner {
      animation: spin 1s linear infinite;
      height: 2rem;
      width: 2rem;
      color: var(--color-trust-600);
    }
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    /* 6. TYPOGRAPHY */
    h2 { font-size: 1.875rem; font-weight: 700; margin-bottom: 0.5rem; margin-top: 0; }
    p.subtitle { color: var(--color-slate); font-size: 0.875rem; margin-top: 0; margin-bottom: 2rem; }
    .footer-text { font-size: 0.75rem; color: var(--color-muted); margin-top: 1.5rem; }
    .error-text { color: var(--color-error); font-size: 0.875rem; margin-top: 1rem; text-align: center; }

  </style>
</head>
<body>
  
  <div id="auth-config" 
       data-brand="scoreos" 
       data-redirect="https://scoreos.org/rss.xml">
  </div>

  <div class="container">
    <div class="text-center">
      <div class="brand-logo">
          <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
          </svg>
      </div>
      <h2>Sign in</h2>
      <p class="subtitle">
        Secure access for <span style="font-weight: 600; color: var(--color-trust-600); text-transform: capitalize;">scoreos</span> members
      </p>
    </div>

    <div class="card">
      
      <div id="loading-overlay" class="overlay hidden">
         <svg class="spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle style="opacity: 0.25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path style="opacity: 0.75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
      </div>

      <form id="email-form" onsubmit="event.preventDefault(); handleSendToken();">
        <div class="input-group">
          <label for="email">Email address</label>
          <input id="email" name="email" type="email" autocomplete="email" required placeholder="name@company.com">
        </div>
        <div>
          <button type="submit" class="btn">Send Login Code</button>
        </div>
      </form>

      <form id="otp-form" class="hidden" onsubmit="event.preventDefault(); handleVerifyToken();">
        <div class="text-center" style="margin-bottom: 1.5rem;">
             <p style="font-size: 0.875rem; color: var(--color-slate); margin: 0;">Code sent to <span id="display-email" style="font-weight: 600; color: var(--color-ink);"></span></p>
             <button type="button" onclick="resetView()" class="link-btn" style="margin-top: 0.5rem;">Change email</button>
        </div>
        <div class="input-group">
          <label for="otp">Verification Code</label>
          <input id="otp" name="otp" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="6" required placeholder="123456" class="otp-input">
        </div>
        <div>
          <button type="submit" class="btn">Verify & Sign In</button>
        </div>
      </form>

      <div id="error-message" class="error-text hidden"></div>
    </div>

    <div class="footer-text text-center">
       Encrypted & Secure. Your data is never sold.
    </div>
  </div>

  <script>
    // --- SAME LOGIC AS BEFORE ---
    const configDiv = document.getElementById('auth-config');
    const brand = configDiv.dataset.brand;
    const redirectUri = configDiv.dataset.redirect;
    let userEmail = '';

    const loading = document.getElementById('loading-overlay');
    const errorMsg = document.getElementById('error-message');
    const emailForm = document.getElementById('email-form');
    const otpForm = document.getElementById('otp-form');

    function toggleLoading(isLoading) {
        loading.classList.toggle('hidden', !isLoading);
        if(isLoading) errorMsg.classList.add('hidden');
    }

    async function handleSendToken() {
        const email = document.getElementById('email').value;
        userEmail = email;
        toggleLoading(true);

        try {
            const res = await fetch('/send-token', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ email, brand })
            });
            const data = await res.json().catch(() => ({}));
            if (!res.ok) {
              const msg =
                (typeof data.message === 'string' && data.message) ||
                (typeof data.error === 'string' && data.error) ||
                'Error sending code';
              throw new Error(msg);
            }

            emailForm.classList.add('hidden');
            otpForm.classList.remove('hidden');
            document.getElementById('display-email').textContent = email;
            document.getElementById('otp').focus();
        } catch (err) {
            errorMsg.textContent = err.message;
            errorMsg.classList.remove('hidden');
        } finally {
            toggleLoading(false);
        }
    }

    async function handleVerifyToken() {
        const token = document.getElementById('otp').value;
        toggleLoading(true);

        try {
            const res = await fetch('/verify-token', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ email: userEmail, code: token, brand })
            });
            const data = await res.json().catch(() => ({}));
            if (!res.ok) {
              const msg =
                (typeof data.message === 'string' && data.message) ||
                (typeof data.error === 'string' && data.error) ||
                'Invalid code';
              throw new Error(msg);
            }

            const target = new URL(redirectUri);
            if (data.token) target.searchParams.set('token', data.token);
            window.location.href = target.toString();
        } catch (err) {
            errorMsg.textContent = err.message;
            errorMsg.classList.remove('hidden');
        } finally {
            toggleLoading(false);
        }
    }

    function resetView() {
        otpForm.classList.add('hidden');
        emailForm.classList.remove('hidden');
        errorMsg.classList.add('hidden');
    }
  </script>
</body>
</html>
