{% block styles %}
<link href="{% static 'style2.css' %}" rel="stylesheet"/>
{% endblock %}

{% block content %}

<div class="container2">
    <div class="left-side1">
        <div class="instructions2" style="width: 100%;">
            <div style="font-size:18px"><b><font size="+3.5">Your choice of index fund provider</font></b></div>
        </div>
        <br><br>
        <div class="instructions5">
            You have decided to allocate <b>{{ player.invested_amount }} ECU</b> per period to the index fund investment.<br><br>
            Two fund providers offer index funds tracking the EGE Index. Your options are:
            <ul>
                <li><b>{{ group.option_A }} EGE Index Fund</b>:	Order commission: <b>2.00 ECU</b>; Management fee: <b>9%</b></li>
                <li><b>{{ group.option_B }} EGE Index Fund</b>: Order commission: <b>6.00 ECU</b>; Management fee: <b>3%</b></li>
            </ul>
            <br>
            <b>Fee definitions</b>
            <br><br>
            <ul>
                <li><b>Order commission</b>: A fixed fee charged for each investment in the index fund.
                    <ul>
                        <li><b>Example</b>: If the order commission is 3.50 ECU, your actual investment in the index fund in that
                            period is reduced by 3.50 ECU.</li>
                    </ul>
                </li>
                <li> <b>Management fee</b>: A percentage fee deducted from the value of your index fund investment after the last period.
                    <ul>
                        <li><b>Example</b>: If the management fee is 7%, you receive 93% of
                            the final value of your index fund investment after period 6.</li>
                    </ul>
                </li>
            </ul>
            <br>
            <b>Financial Advice</b>
            <br><br>
            Before choosing a fund provider, you may obtain investment advice. You can ask questions to the chatbot
            provided by your bank. The bank, i.e., the participant representing the bank, receives a bonus payment that
            depends on your choice of fund provider.<br><br>
            To receive advice, please enter your questions in the chat box below. The AI advisor already
            knows the available fund providers, their fee structures, and your allocation to the index fund investment,
            so you do not need to provide this information again.<br><br>
            <b>Important:</b> You must send at least one message to the AI advisor. You may send up to 10 messages.
        </div>
    </div>
    <div class="instructions" style="width: 100%; margin-top: 0px; margin-bottom: 0px">
        <div style="font-size:20px"><b>Decision</b></div>
    </div>
  <div class="instructions" style="width: 100%;">
    <div class="container3">
        <div class="section" id="section1">
          <div class="left-side1">
                <div style="margin-bottom: 1rem;">
                    Please select one of the two providers by clicking the circle next to it:<br><br>
                    <div style="text-align:left;">
                        <input type="radio" name="lottery_choice" value="1"/> <b>Provider A ({{ group.option_A }} EGE Index Fund):</b>
                            <ul>
                                <li>Order commission: <b>2.00 ECU</b></li>
                                <li>Management fee: <b>9%</b></li>
                            </ul>
                        <input type="radio" name="lottery_choice" value="2"/> <b>Provider B ({{ group.option_B }} EGE Index Fund):</b>
                            <ul>
                                <li>Order commission: <b>6.00 ECU</b>.</li>
                                <li>Management fee: <b>3%</b>.</li>
                            </ul>
                    </div>
                </div>
        </div>
      </div>
      <div class="section" id="section2">
        <div class="right-side1">
                    <!-- Chat-Fenster -->
                      <div id="chat_card" style="border:1px solid #ccc;border-radius:6px;padding:0.75rem; margin: 1rem 0;">
                        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;">
                          <strong>Advice (AI‑Chatbot)</strong>
                            <div style="margin-bottom:0.5rem;">
                                <small id="message_counter">Messages sent: {{ player.message_count }}/10</small>
                            </div>
                          <small>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Note: Answers will be provided shortly.</small>
                        </div>

                        <div id="chat_log" style="height:420px; overflow-y:auto; background:#fafafa; border:1px solid #eee; padding:0.5rem; border-radius:4px;">
                          <!-- Chat-Nachrichten erscheinen hier -->
                        </div>

                        <div style="display:flex; gap:0.5rem; margin-top:0.5rem;">
                          <textarea id="chat_input" rows="1" autocomplete="off" placeholder="Enter message..."
                            style="flex:1 1 auto; min-width:0; padding:0.5rem; border:1px solid #ccc; border-radius:4px; resize:none; overflow:hidden; line-height:1.4;"></textarea>
                          <button type="button" id="sendBtn" class="btn btn-primary"
                                  style="background-color:#000; border-color:#000;">Send</button>
                        </div>
                        <div id="chat_error" style="color:#b00020; margin-top:0.4rem; display:none;"></div>
                      </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="instructions4" style="margin-top: -20px; width: 96%;">
    Click on the 'Next' button once you
    have made your decision.<br>
        <b>Important:</b> You will not be able to change your choice afterwards. Your decision is final!
</div>
<div style="text-align:right; width: 98%;">
    <button style="color: white; background-color: black;" class="btn-primary btn next">Next</button>
</div>

<script id="chat-history-data" type="application/json">
  {% if player.chat_history %}{{ player.chat_history|safe }}{% else %}[]{% endif %}
</script>

{% endblock %}

{% block scripts %}
<script>
  const chatLogEl   = document.getElementById('chat_log');
  const chatInputEl = document.getElementById('chat_input');
  const sendBtn     = document.getElementById('sendBtn');
  const errEl       = document.getElementById('chat_error');
  const counterEl = document.getElementById('message_counter');

  function updateCounter(count) {
    counterEl.textContent = `Messages sent: ${count}/10`;
  }

  function appendMessage(role, text) {
    const row = document.createElement('div');
    row.style.marginBottom = '0.5rem';

    const bubble = document.createElement('div');
    bubble.style.display = 'inline-block';
    bubble.style.padding = '0.4rem 0.6rem';
    bubble.style.borderRadius = '6px';
    bubble.style.maxWidth = '90%';
    bubble.style.whiteSpace = 'pre-wrap';
    bubble.style.overflowWrap = 'break-word';
    bubble.style.wordBreak = 'break-word';

    if (role === 'user') {
      bubble.style.background = '#e7f1ff';
      bubble.style.border = '1px solid #cde';
      bubble.style.float = 'right';
    } else {
      bubble.style.background = '#f5f5f5';
      bubble.style.border = '1px solid #ddd';
      bubble.style.float = 'left';
    }

    bubble.textContent = text;
    row.appendChild(bubble);

    // Clear floats
    const clr = document.createElement('div');
    clr.style.clear = 'both';
    row.appendChild(clr);

    chatLogEl.appendChild(row);
    chatLogEl.scrollTop = chatLogEl.scrollHeight;
  }

  function autoResizeTextarea() {
    chatInputEl.style.height = 'auto';
    chatInputEl.style.height = chatInputEl.scrollHeight + 'px';
  }

  function renderExistingHistory() {
      const el = document.getElementById('chat-history-data');
      if (!el) return;

      let history = [];
      try {
        history = JSON.parse(el.textContent);
      } catch (e) {
        return;
      }

      history.forEach(msg => {
        if (msg.role === 'user' || msg.role === 'assistant') {
          appendMessage(msg.role, msg.content);
        }
      });
  }

  function setError(msg) {
    errEl.textContent = msg || '';
    errEl.style.display = msg ? 'block' : 'none';
  }

  function setSending(isSending) {
    sendBtn.disabled = isSending;
    chatInputEl.disabled = isSending;
  }

  function sendMessage() {
    setError('');
    const text = (chatInputEl.value || '').trim();
    if (!text) return;

    appendMessage('user', text);
    chatInputEl.value = '';
    chatInputEl.style.height = 'auto';
    setSending(true);

    // liveSend an Server (oTree WebSocket)
    liveSend({type: 'user_message', content: text});
  }

  // Button und Enter-Key
  sendBtn.addEventListener('click', sendMessage);
  chatInputEl.addEventListener('input', autoResizeTextarea);
  chatInputEl.addEventListener('keydown', function (e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
    }
  });

  // Server -> Client
  function liveRecv(data) {
    setSending(false);
    if (!data) return;
    if (data.messages_count !== undefined) {
    updateCounter(data.messages_count);
    }
    if (data.type === 'assistant_message') {
      appendMessage('assistant', data.content);
    } else if (data.type === 'error') {
      setError(data.content || 'An unknown error has occurred.');
    }
  }

  renderExistingHistory();

</script>
{% endblock %}