{% extends "base.html" %}

{% block title %}Prueba de Login para {{ branding.name }}{% endblock %}

{% block styles %}
{# Este bloque asegura que los colores de la marca estén disponibles como variables CSS #}
{% if branding and branding.css_variables %}
<style>
  {{ branding.css_variables|safe }}
  /* Usa la variable de CSS para el color primario del botón */
  #initiateJwtChatButton {
    background-color: var(--brand-primary-color, #0d6efd);
    border-color: var(--brand-primary-color, #0d6efd);
  }
</style>
{% endif %}
{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="row flex-fill mt-5 justify-content-center">
    <!-- login desde sistema externo -->
    <div class="col-12 col-lg-6">
      <div class="border rounded p-4 p-md-5 shadow-sm bg-light">
        {# El título ahora muestra dinámicamente el nombre de la empresa #}
        <h3 class="text-muted fw-semibold text-start mb-3">
          Login Externo para <span style="color: var(--brand-primary-color, #0d6efd);">{{ branding.name }}</span>
        </h3>
        <div class="text-center mb-4">
          <p class="text-muted widget-intro-text">
            Este formulario permite testear el acceso a IAToolkit desde un portal externo utilizando una api-key. El external user ID es el nombre del usuario ya autentificado en algún portal interno de la empresa.
          </p>
        </div>

        {# El 'action' y 'method' son manejados por JS, pero el id es crucial #}
        <form id="jwt-form">

          <div class="mb-3">
            <label for="external_user_id" class="form-label d-block">External user ID</label>
            <input type="text" id="external_user_id" name="external_user_id" class="form-control" required>
          </div>

          <button type="submit" id="initiateJwtChatButton" class="btn btn-primary">
            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
            Iniciar Sesión
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const companyShortName = "{{ company_short_name }}";
    const apiKey = "{{ api_key }}";
    const loginForm = document.getElementById('jwt-form');
    const userIdInput = document.getElementById('external_user_id');
    const submitButton = document.getElementById('initiateJwtChatButton');
    const spinner = submitButton.querySelector('.spinner-border');

    loginForm.addEventListener('submit', function(event) {
      event.preventDefault();
      const userIdentifier = userIdInput.value.trim();
      if (!userIdentifier) return;

      // Deshabilitar botón y mostrar spinner
      submitButton.disabled = true;
      spinner.classList.remove('d-none');

      const newWindow = window.open('', '_blank');
      const apiUrl = `/${companyShortName}/external_login`;

      fetch(apiUrl, {
        method: 'POST',
        headers: {
                  'Content-Type': 'application/json',
                  'Authorization': `Bearer ${apiKey}`
              },
        body: JSON.stringify({ external_user_id: userIdentifier })
      })
      .then(response => response.ok ? response.text() : response.text().then(text => { throw new Error(text) }))
      .then(html => {
          newWindow.document.documentElement.innerHTML = html;
                  // Buscamos todos los scripts en el HTML inyectado y los re-ejecutamos.
        const scripts = newWindow.document.querySelectorAll('script');
        scripts.forEach(oldScript => {
          const newScript = newWindow.document.createElement('script');

          // Copiamos los atributos (como 'src' para archivos externos)
          Array.from(oldScript.attributes).forEach(attr => {
            newScript.setAttribute(attr.name, attr.value);
          });

          // Copiamos el contenido para scripts inline
          newScript.appendChild(newWindow.document.createTextNode(oldScript.innerHTML));

          // Reemplazamos el script viejo por el nuevo para que se ejecute.
          oldScript.parentNode.replaceChild(newScript, oldScript);
        });

      })
      .catch(error => {
        console.error("Falló la prueba de login externo:", error);
        const errorMessage = error.message || "Error desconocido.";
        newWindow.document.body.innerHTML = `<div style="padding: 20px; font-family: monospace;"><h2>Error</h2><pre>${errorMessage}</pre></div>`;
      })
      .finally(() => {
        // Volver a habilitar el botón y ocultar el spinner
        submitButton.disabled = false;
        spinner.classList.add('d-none');
      });
    });
  });
</script>
{% endblock %}