{% extends "base.html" %}

{% load crispy_forms_tags %}
{% load static %}

{% block content %}
  <section class="text-center">
    <div class="container">
      <br>
      <h1>{{ experiment.name }}</h1>
    </div>
  </section>
  
  <br>

  <div class="container">
    <div class="row align-items-top">
      <div class="col-md-6">
        <div class="card shadow-sm">
          <form method="post">
            <div class="card-body">
              <h5 class="card-title">Experiment settings</h5>
              {% if error_message %}
                <p class="alert alert-danger">{{ error_message }}</p>
              {% elif saved and request.session.session %}
                <p class="alert alert-success">Settings saved</p>
              {% else %}
                <p class="alert alert-warning">Please save to continue</p>
              {% endif %}
                <div class="card-text">
                    {% csrf_token %}
                    {{ form|crispy }}    
                </div>
            </div>
            <div class="card-footer">
              {% if saved and request.session.session and not error_message %}
                <button type="submit" class="btn btn-primary">Modify</button>
                <a href="run/{{ request.session.room }}" id="playButton" class="btn btn-success">Start experiment <i class="bi bi-arrow-right"></i></a>
              {% else %}
                <button type="submit" class="btn btn-primary">Save to continue</button>
              {% endif %}
            </div>
          </form>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card shadow-sm">
          <div class="card-body">
            <h5 class="card-title">Experiment details</h5>
            <br>
            <p class="card-text">{{ experiment.long_description|safe }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  {% include "tooltips.html" %}

  <script src="{% static 'experiment/js/connectionChecker.js' %}"></script>
  <script src="{% static 'experiment/js/connectionWarning.js' %}"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const playButton = document.getElementById('playButton');
      if (playButton) {
        let isChecking = false;
        
        playButton.addEventListener('click', async function(e) {
          e.preventDefault();
          
          // Prevent multiple simultaneous checks
          if (isChecking) {
            return;
          }
          
          isChecking = true;
          
          // Show loading state
          const originalText = playButton.innerHTML;
          playButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Checking connection...';
          playButton.style.pointerEvents = 'none';
          playButton.style.opacity = '0.6';
          
          try {
            const checker = new ConnectionChecker({{ connection_checker_config|safe }});
            const result = await checker.checkConnectionQuality();
            
            // If poor connection detected, show warning
            if (result.isPoor) {
              const warning = new ConnectionWarning();
              warning.show();
              // User must close popup and click Play again to retry
            } else {
              // Good connection, proceed directly
              window.location.href = playButton.href;
            }
          } catch (error) {
            console.error('Connection check failed:', error);
            // On error, proceed anyway
            window.location.href = playButton.href;
          } finally {
            // Restore button state
            playButton.innerHTML = originalText;
            playButton.style.pointerEvents = 'auto';
            playButton.style.opacity = '1';
            isChecking = false;
          }
        });
      }
    });
  </script>
{% endblock %}