<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title><%= typeof pageTitle !== 'undefined' ? pageTitle : 'Iniciar sesión · SuiteCoffee' %></title>

    <!-- Bootstrap 5 (minimal) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <style>
      :root {
        --col-pri: #<%= (process.env.COL_PRI || '452D19') %>;
        --col-sec: #<%= (process.env.COL_SEC || 'D7A666') %>;
        --col-bg:  #<%= (process.env.COL_BG  || 'FFA500') %>33; /* con alpha */
      }
      body { background: radial-gradient(1200px 600px at 10% -10%, var(--col-bg), transparent), #f8f9fa; }
      .brand { color: var(--col-pri); }
      .btn-sso { background: var(--col-pri); color: #fff; border-color: var(--col-pri); }
      .btn-sso:hover { filter: brightness(1.05); color: #fff; }
      .card { border-radius: 14px; }
      .form-hint { font-size: .875rem; color: #6c757d; }
      .divider { display:flex; align-items:center; text-transform:uppercase; font-size:.8rem; color:#6c757d; }
      .divider::before, .divider::after { content:""; height:1px; background:#dee2e6; flex:1; }
      .divider:not(:empty)::before { margin-right:.75rem; }
      .divider:not(:empty)::after { margin-left:.75rem; }
    </style>
  </head>
  <body>
    <div class="container py-5">
      <div class="row justify-content-center">
        <div class="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-5">
          <div class="text-center mb-4">
            <h1 class="brand fw-bold">SuiteCoffee</h1>
            <p class="text-secondary mb-0">Accedé a tu cuenta</p>
          </div>

          <!-- Mensajes (query ?msg= / ?error=) -->
          <div id="flash" class="mb-3" style="display:none"></div>

          <div class="card shadow-sm">
            <div class="card-body p-4 p-md-5">

              <!-- SSO con Authentik -->
              <div class="d-grid gap-2 mb-3">
                <a href="/auth/login" class="btn btn-sso btn-lg" id="btn-sso">
                  Ingresar con SSO (Authentik)
                </a>
              </div>

              <div class="divider my-3">o</div>

              <!-- Registro mínimo (usa POST /api/users/register) -->
              <form id="form-register" class="needs-validation" novalidate>
                <div class="mb-3">
                  <label for="email" class="form-label">Email</label>
                  <input type="email" class="form-control" id="email" name="email" placeholder="tu@correo.com" required>
                  <div class="invalid-feedback">Ingresá un email válido.</div>
                </div>

                <div class="mb-3">
                  <label for="display_name" class="form-label">Nombre a mostrar</label>
                  <input type="text" class="form-control" id="display_name" name="display_name" placeholder="Ej.: Juan Pérez" required>
                  <div class="invalid-feedback">Ingresá tu nombre.</div>
                </div>

                <div class="mb-3">
                  <label for="tenant_uuid" class="form-label">Código de organización (tenant UUID)</label>
                  <input type="text" class="form-control" id="tenant_uuid" name="tenant_uuid" placeholder="Ej.: 4b8d0f6a-...">
                  <div class="form-hint">Si te invitaron a una organización existente, pegá aquí su UUID. Si sos el primero de tu empresa, dejalo vacío y el equipo te asignará uno.</div>
                </div>

                <div class="mb-3">
                  <label for="role" class="form-label">Rol</label>
                  <select id="role" name="role" class="form-select">
                    <option value="owner">Owner</option>
                    <option value="admin">Admin</option>
                    <option value="staff">Staff</option>
                  </select>
                </div>

                <div class="d-grid gap-2">
                  <button type="submit" class="btn btn-outline-dark">Crear cuenta</button>
                </div>
              </form>

              <p class="text-center text-muted mt-3 mb-0" style="font-size:.9rem;">
                Al continuar aceptás nuestros términos y políticas.
              </p>

            </div>
          </div>

          <p class="text-center text-secondary mt-3" style="font-size:.9rem;">
            ¿Ya tenés cuenta? <a href="/auth/login" class="link-dark">Iniciá sesión con SSO</a>
          </p>
        </div>
      </div>
    </div>

    <script>
      // Mostrar mensajes por querystring (?msg=... / ?error=...)
      (function() {
        const params = new URLSearchParams(location.search);
        const el = document.getElementById('flash');
        const msg = params.get('msg');
        const err = params.get('error');
        if (msg) {
          el.innerHTML = `<div class="alert alert-success mb-0" role="alert">${decodeURIComponent(msg)}</div>`;
          el.style.display = '';
        } else if (err) {
          el.innerHTML = `<div class="alert alert-danger mb-0" role="alert">${decodeURIComponent(err)}</div>`;
          el.style.display = '';
        }
      })();

      // Validación Bootstrap + envío del registro contra /api/users/register
      (function() {
        const form = document.getElementById('form-register');
        form.addEventListener('submit', async function(e) {
          e.preventDefault();
          e.stopPropagation();

          form.classList.add('was-validated');
          if (!form.checkValidity()) return;

          const btn = form.querySelector('button[type="submit"]');
          btn.disabled = true; btn.innerText = 'Creando...';

          try {
            const payload = {
              email: document.getElementById('email').value.trim(),
              display_name: document.getElementById('display_name').value.trim(),
              tenant_uuid: document.getElementById('tenant_uuid').value.trim() || undefined,
              role: document.getElementById('role').value
            };

            const res = await fetch('/api/users/register', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(payload),
              credentials: 'include'
            });

            const data = await res.json().catch(() => ({}));
            if (!res.ok) {
              throw new Error(data?.error || data?.message || 'No se pudo registrar');
            }

            // Registro OK → redirigimos a login SSO
            const redir = '/auth/login';
            location.href = redir + '?msg=' + encodeURIComponent('Registro exitoso. Iniciá sesión con SSO.');
          } catch (err) {
            alert(err.message || String(err));
          } finally {
            btn.disabled = false; btn.innerText = 'Crear cuenta';
          }
        });
      })();
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>
