{{ block title }}
Practice Round
{{ endblock }}

{{ block content }}

<style>
.otree-body {
    max-width: 1450px !important;
    width: 96% !important;
}

.container, .container-fluid {
    max-width: 1450px !important;
}

.task-wrapper {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    width: 100%;
}

.left-panel {
    flex: 0 0 60%;
}

.right-panel {
    flex: 0 0 38%;
}

.text-box {
    background: #fafafa;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.text-box h5 {
    margin-bottom: 14px;
    font-weight: 700;
    font-size: 1.2rem;
}

.text-content {
    white-space: pre-line;
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.55;
    margin-bottom: 0;
}

.ai-box {
    border: 1px solid #8fd8ff;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: #fcfeff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.ai-box h5 {
    margin-bottom: 10px;
    font-weight: 700;
}

.ai-box p {
    margin-bottom: 10px;
}

.chat-log {
    height: 220px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    background: #fff;
    margin-bottom: 10px;
    font-size: 0.95rem;
    line-height: 1.45;
}

.chat-entry-user {
    margin-bottom: 8px;
}

.chat-entry-ai {
    margin-bottom: 12px;
}

.chat-controls {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.summary-box {
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.summary-box label {
    margin-bottom: 10px;
}

.summary-box textarea {
    min-height: 180px;
    resize: none;
}

.char-counter {
    margin-top: 6px;
    text-align: right;
    color: #555;
    font-size: 0.95rem;
}

.continue-wrap {
    margin-top: 16px;
    text-align: center;
}

.btn-primary {
    padding: 8px 28px;
    font-size: 1rem;
}

@media (max-width: 1100px) {
    .task-wrapper {
        flex-direction: column;
    }

    .left-panel,
    .right-panel {
        flex: 1 1 100%;
        width: 100%;
    }

    .summary-box textarea {
        min-height: 160px;
    }
}
</style>

<input type="hidden" name="practice_time_spent" id="time_spent_input">

<div class="task-wrapper">

    <div class="left-panel">
        <div class="text-box">
            <h5>{{ text_title }}</h5>
            <p class="text-content">{{ original_text }}</p>
        </div>
    </div>

    <div class="right-panel">

        {{ if show_ai }}
        <div class="ai-box">
            <h5>ChatGPT help</h5>
            <p class="text-muted">
                You may ask ChatGPT questions about the text in this practice round.
            </p>

            <div id="chat_log" class="chat-log"></div>

            <textarea
                id="chat_input"
                rows="3"
                class="form-control"
                placeholder="Type your question here..."
            ></textarea>

            <div class="chat-controls">
                <button type="button" class="btn btn-secondary btn-sm" id="send_chat_btn">Send</button>
            </div>
        </div>
        {{ endif }}

        <div class="summary-box">
            <label for="summary_box" class="form-label">
                <strong>Write a summary of the text in the box below.</strong><br>
                Your summary must not exceed {{ max_chars }} characters.
            </label>

            <textarea
                name="practice_summary"
                id="summary_box"
                rows="8"
                maxlength="{{ max_chars }}"
                class="form-control"
            ></textarea>

            <div class="char-counter">
                <span id="char_count">0</span>/{{ max_chars }}
            </div>
        </div>

        <div class="continue-wrap">
            <button class="btn btn-primary">Continue</button>
        </div>

    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const box = document.getElementById('summary_box');
    const counter = document.getElementById('char_count');
    const timeInput = document.getElementById('time_spent_input');
    const startTime = Date.now();

    function updateCount() {
        counter.textContent = box.value.length;
    }

    function updateTimeSpent() {
        const seconds = (Date.now() - startTime) / 1000;
        timeInput.value = seconds.toFixed(3);
    }

    box.addEventListener('input', updateCount);
    updateCount();

    const form = box.closest('form');
    if (form) {
        form.addEventListener('submit', updateTimeSpent);
    }

    setInterval(updateTimeSpent, 250);

    const sendBtn = document.getElementById('send_chat_btn');
    const chatInput = document.getElementById('chat_input');
    const chatLog = document.getElementById('chat_log');

    if (!sendBtn) return;

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.innerText = text;
        return div.innerHTML;
    }

    sendBtn.addEventListener('click', function () {
        const msg = chatInput.value.trim();
        if (!msg) return;

        sendBtn.disabled = true;

        liveSend({
            type: 'chat',
            message: msg
        });
    });

    chatInput.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendBtn.click();
        }
    });

    window.liveRecv = function (data) {
        if (data.type === 'chat_reply') {
            chatLog.innerHTML += '<div class="chat-entry-user"><strong>You:</strong> ' + escapeHtml(data.user_message) + '</div>';
            chatLog.innerHTML += '<div class="chat-entry-ai"><strong>ChatGPT:</strong> ' + escapeHtml(data.assistant_message) + '</div>';
            chatLog.scrollTop = chatLog.scrollHeight;
            chatInput.value = '';
            sendBtn.disabled = false;
            chatInput.focus();
        } else if (data.type === 'error') {
            alert(data.message);
            sendBtn.disabled = false;
            chatInput.focus();
        }
    };
});
</script>

{{ endblock }}