{% extends "base.html" %}

{% load static %}

{% block content %}
  <!-- Load external CSS -->
  <link rel="stylesheet" href="{% static 'experiment/css/controls.css' %}">

  {{ key_display_map|json_script:"key-display-map" }}
  <script>
    // Websocket and input settings from Django context
    ws_setting = "{{ ws_setting }}";
    inputsListened = [{% for input in agent.keyboard_inputs %}{% if input != "default" %}"{{ input }}",{% endif %}{% endfor %}];
    keyDisplayMap = JSON.parse(document.getElementById('key-display-map').textContent);
    multipleInputs = {% if agent.multiple_keyboard_inputs %}true{% else %}false{% endif %};
    waitForInputs = {% if experiment.wait_for_inputs %}true{% else %}false{% endif %};
    textualInputs = {% if agent.textual_inputs %}true{% else %}false{% endif %};
    inputsMapping = {{ agent.keyboard_inputs|safe }}
    inputsType = "{{ agent.inputs_type }}";
    expectedFPS = {{ experiment.target_fps }};
    inputsForwarded = [];
  </script>
  <script src="{% static 'experiment' %}/js/inputListener.js"></script>
  <script type="module" src="{% static 'experiment' %}/js/websocket.js"></script>
  <script src="{% static 'experiment' %}/js/mobileControls.js"></script>
  <script src="{% static 'experiment' %}/js/history.js"></script>

  <br>
  <div class="container">
    <div class="row mt-3">
      <div class="col-md-8 justify-content-center">
        <div id="loading_div">
          <strong>Please wait, the experiment will start soon...</strong> &nbsp;&nbsp;&nbsp;
          <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
        </div>
        <img id="image" style="display: none; max-height: 80vh; object-fit: contain;" class="img-fluid rounded img-thumbnail w-100">
      </div>

      <div class="col-md-4">
        {% if agent.keyboard_inputs and agent.keyboard_inputs|length > 1 %}
        <div class="card border-secondary controls-card">
          <div class="card-header bg-light">
            <h5 class="card-title mb-0 text-black">Controls</h5>
          </div>
          <div class="card-body">
            <p class="card-text">Use the following keys to control:</p>
            <div class="d-flex justify-content-around flex-wrap mb-3" id="desktop-controls">
              {% for input, display in key_display_map.items %}
                <div class="text-center key-feedback-container">
                  <span class="key-feedback" data-feedback="{{ input }}"></span>
                  <kbd class="keyboard-key" data-key="{{ input }}">{{ display.symbol }}</kbd>
                  <div>{{ display.label }}</div>
                </div>
              {% endfor %}
            </div>
            {% if agent.multiple_keyboard_inputs %}
              <p class="card-text">You can use multiple keys at the same time.</p>
            {% else %}
              <p class="card-text">Only one key can be pressed at a time.</p>
            {% endif %}
            <div id="waiting_for_input_keyboard" class="alert alert-info mt-1 mb-0" style="display: none;">
              <i class="bi bi-hand-index-thumb"></i> Waiting for your input... Press a key to continue.
            </div>
          </div>
        </div>
        {% endif %}

        {% if agent.textual_inputs %}
        <div class="card border-secondary mt-2">
          <div class="card-header bg-light">
            <h5 class="card-title mb-0 text-black">Text Input</h5>
          </div>
          <div class="card-body">
            <p class="card-text">Enter your instruction:</p>
            <div class="input-group">
              <input
                type="text"
                id="instruction-input"
                class="form-control"
                placeholder="Type your instruction..."
                autocomplete="off"
              >
              <button class="btn btn-primary" type="button" id="instruction-submit">
                <i class="bi bi-send"></i>
              </button>
            </div>
            <div id="waiting_for_input_text" class="alert alert-info mt-2 mb-0" style="display: none;">
              <i class="bi bi-hourglass-split"></i> Waiting for your input...
            </div>
          </div>
        </div>
        {% endif %}

        <div class="card border-secondary mt-2">
          <button class="card-header bg-light card-title text-start text-black w-100 border-0 rounded-1" type="button" data-bs-toggle="collapse" data-bs-target="#collapseHistory" aria-expanded="false" aria-controls="collapseHistory">
            <i class="bi bi-chevron-down me-2"></i>History
          </button>
          <div class="collapse" id="collapseHistory">
            <div class="card-body m-3" style="max-height: 300px; overflow-y: auto;" id="history">
              <p class="text-muted mb-0">No history yet.</p>
            </div>
          </div>
        </div>

        <div class="card border-secondary mt-2">
          <button class="card-header bg-light card-title text-start text-black w-100 border-0 rounded-1" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDetails" aria-expanded="false" aria-controls="collapseDetails">
            <i class="bi bi-chevron-down me-2"></i>Details
          </button>
          <div class="collapse" id="collapseDetails">
            <div class="card-body m-3" style="max-height: 300px; overflow-y: auto;" id="details">
              <li>Loading experiment</li>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile Controls -->
  {% if agent.keyboard_inputs and agent.keyboard_inputs|length > 1 %}
  <div id="mobile-controls" class="mobile-controls" style="display: none;">
    <div class="text-center mb-2">
      <small class="text-black">Touch Controls</small>
    </div>
    <div class="d-flex justify-content-center flex-wrap" id="mobile-control-buttons">
      {% for input, display in key_display_map.items %}
        <button class="mobile-control-btn" data-key="{{ input }}">{{ display.symbol }}</button>
      {% endfor %}
    </div>
  </div>
  {% endif %}
{% endblock %}